PluginProbe
Page Builder: Pagelayer – Drag and Drop website builder / 2.1.4
Page Builder: Pagelayer – Drag and Drop website builder v2.1.4
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-blocks.css

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

2,240 lines 49.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .pagelayer-shortcode{
2 color: #2271b1 !important;
3 }
4
5 .pagelayer-base-control{
6 position: relative;
7 }
8
9 .pagelayer-flex{
10 display:flex;
11 }
12
13 .pagelayer-elp-label-div{
14 padding:4px 0px 4px 0px;
15 position:relative;
16 }
17
18 .pagelayer-elp-label{
19 display: inline-block;
20 }
21
22 .pagelayer-elp-units{
23 display: inline-block;
24 float:right;
25 padding-top:4px;
26 }
27
28 .pagelayer-elp-units span{
29 padding:1px 4px;
30 font-size:12px;
31 cursor: pointer;
32 }
33
34 .pagelayer-elp-units span.selected{
35 color: #3e8ef7;
36 }
37
38 .pagelayer-elp-button{
39 text-transform: unset;
40 border: 1px solid #2563eb;
41 font-weight: unset;
42 font-size: 12px;
43 margin:5px;
44 min-height: unset;
45 background-color: #2563eb;
46 color: #fff;
47 transition: all 0.3s;
48 border-radius: unset;
49 border-radius: 2px;
50 padding: 10px 15px;
51 cursor:pointer;
52 }
53
54 .pagelayer-elp-button:hover{
55 background-color: rgba(37, 99, 235, 0.75);
56 border-color: #2563eb;
57 }
58
59 .pagelayer-block-appender{
60 background: #1e1e1e;
61 width: 24px;
62 height: 24px;
63 position: absolute;
64 right: 0;
65 bottom: 0;
66 border-radius: 2px;
67 z-index: 99;
68 }
69
70 .pagelayer-block-appender:hover{
71 background : var(--wp-admin-theme-color)
72 }
73
74 .pagelayer-block-appender .components-button{
75 color: #fff;
76 display: contents;
77 }
78
79 /* Screen Control Start */
80 .pagelayer-elp-screen{
81 display: inline-block;
82 text-align: center;
83 z-index: 1;
84 vertical-align: middle;
85 position: relative;
86 }
87
88 .pagelayer-elp-screen .pli{
89 padding: 0;
90 cursor: pointer;
91 box-shadow: 0 0 0.5rem #babbbc;
92 height: 30px;
93 width: 30px;
94 border-radius: 50%;
95 line-height: 30px;
96 transition-duration: 0.1s;
97 }
98
99 .pagelayer-elp-screen .pli-desktop:not(.pagelayer-prop-screen),
100 .pagelayer-elp-screen .pli-tablet:not(.pagelayer-prop-screen),
101 .pagelayer-elp-screen .pli-mobile:not(.pagelayer-prop-screen){
102 position: absolute;
103 transform: none;
104 left: 0;
105 display:none;
106 opacity:0;
107 background:#aaaaaa;
108 color:#ffffff;
109 }
110
111 .pagelayer-elp-screen .pli-desktop.open{
112 transform: rotate(-90deg) translate(30px, -27px) rotate(90deg);
113 transition-delay: 0s;
114 top:-5px;
115 left: 40px;
116 opacity:1;
117 display:block;
118 }
119
120 .pagelayer-elp-screen .pli-tablet.open{
121 transform: rotate(-90deg) translate(0px, -6px) rotate(90deg);
122 transition-delay: 0.1s;
123 top:0px;
124 left: 40px;
125 opacity:1;
126 display:block;
127 }
128
129 .pagelayer-elp-screen .pli-mobile.open{
130 transform: rotate(-90deg) translate(-30px, -27px) rotate(90deg);
131 transition-delay: 0.2s;
132 top:5px;
133 left: 40px;
134 opacity:1;
135 display:block;
136 }
137
138 .pagelayer-elp-screen .pagelayer-prop-screen{
139 box-shadow: none;
140 z-index: 2;
141 font-size: 12px;
142 height: 20px;
143 width: 20px;
144 line-height: 20px;
145 }
146
147 .pagelayer-elp-screen .pli:not(.pagelayer-prop-screen):hover{
148 background-color: #2563eb;
149 }
150
151 .pagelayer-elp-screen .pagelayer-prop-screen:hover{
152 color: #2563eb;
153 }
154 /* Screen Control End */
155
156 /* Settings Tab Control Start */
157 .components-panel[pagelayer-component-tab] .components-panel__body{
158 display: none;
159 }
160
161 .components-panel[pagelayer-component-tab="options"] .components-panel__body,
162 .components-panel[pagelayer-component-tab="settings"] .pagelayer-components-tabs.pl-settings .components-panel__body{
163 display: block;
164 }
165
166 .components-panel[pagelayer-component-tab="options"] .pagelayer-components-tabs.pl-settings .components-panel__body{
167 display: none;
168 }
169
170 .pagelayer-setting-tabs{
171 box-shadow: 0px 0px 10px -4px #d7d7d7;
172 display:flex;
173 }
174
175 .pagelayer-setting-tab{
176 background-color: transparent;
177 padding: 20px 10px;
178 border: 0;
179 cursor: pointer;
180 color: #1e1e1e;
181 font-weight: 500;
182 flex: 1;
183 position: relative;
184 }
185
186 .pagelayer-setting-tab i{
187 font-size: 16px;
188 padding-right: 10px;
189 }
190
191 .pagelayer-setting-tab:after{
192 content: '';
193 height: 2px;
194 background: transparent;
195 border-radius: 100%;
196 position: absolute;
197 bottom: 0;
198 left: 10px;
199 right: 100%;
200 transition: right 0.5s;
201 }
202
203 .pagelayer-setting-tab:hover:after,
204 .pagelayer-setting-tab.is-active:after{
205 content: '';
206 background: #007cba;
207 right: 10px;
208 }
209
210 .pagelayer-setting-tab:hover,
211 .pagelayer-setting-tab.is-active{
212 color: #007cba;
213 }
214 /* Settings Tab Control End */
215 /* Radio Control Start */
216 .pagelayer-elp-radio-div{
217 display:flex;
218 }
219
220 .pagelayer-elp-radio:first-child{
221 border-radius: 4px 0px 0px 4px;
222 -moz-outline-radius: 7px 0px 0px 7px;
223 }
224
225 .pagelayer-elp-radio:last-child{
226 border-radius: 0px 4px 4px 0px;
227 -moz-outline-radius: 0px 7px 7px 0px;
228 }
229
230 .pagelayer-elp-radio{
231 display: inline-block;
232 vertical-align: middle;
233 padding: 6px;
234 cursor: pointer;
235 font-size:12px;
236 color: #666 !important;
237 text-decoration: none;
238 background: #eee;
239 flex:1;
240 text-align:center;
241 }
242
243 .pagelayer-elp-radio:hover{
244 background-color: #4CB5E8 !important;
245 color:#fff !important;
246 transition: all 0.3s;
247 }
248
249 .pagelayer-dark .pagelayer-elp-radio{
250 background-color: #fafafa;
251 }
252
253 .pagelayer-dark .pagelayer-elp-radio:hover,
254 .pagelayer-dark .pagelayer-elp-radio-active{
255 background-color:#0d47a1 !important;
256 }
257
258 .pagelayer-elp-radio-active{
259 background-color: #1A9CDB !important;
260 color:#ffffff !important;
261 }
262 /* Radio Control End */
263 /* Color Control Start */
264 .pagelayer-elp-color-div-holder{
265 cursor: pointer;
266 width: 70px;
267 height: 30px;
268 border-radius: 3px;
269 margin: 0 auto;
270 position: absolute;
271 top: 5px;
272 right: 11px;
273 border: solid 1px #999;
274 color: #333;
275 display: flex;
276 }
277
278 .pagelayer-elp-color-div{
279 cursor: pointer;
280 padding: 3px;
281 width: 28px;
282 height: 23px;
283 display: block;
284 border-radius: 2px;
285 margin: 0 auto;
286 position: absolute;
287 top: 5px;
288 right: 7px;
289 border: solid 1px #999;
290 color: #333;
291 vertical-align: middle;
292 box-sizing: content-box;
293 }
294
295 .pagelayer-elp-color-div-holder .pagelayer-elp-color-div{
296 position: relative;
297 border: 0px;
298 height: calc(100% - 6px);
299 top: 0;
300 left: 0;
301 }
302
303 .pagelayer-elp-color-preview{
304 height: 100%;
305 background-size: cover !important;
306 border-radius: 2px;
307 flex: 1;
308 }
309
310 .pagelayer-elp-color-global{
311 width: 50%;
312 border-right: 1px solid #999;
313 display: flex;
314 align-items: center;
315 justify-content: center;
316 }
317
318 .pagelayer-elp-global-icon:hover,
319 .pagelayer-elp-color-global:hover{
320 color: #137dc5;
321 }
322
323 .pagelayer-elp-typo-edit-div .pli-pencil{
324 display: flex;
325 align-items: center;
326 justify-content: center;
327 flex: 1;
328 }
329
330 .pagelayer-elp-global-icon:before,
331 .pagelayer-elp-color-global:before{
332 content: "\e9c9";
333 font-family: 'pagelayer', "Font Awesome 5 Free" !important;
334 }
335
336 .pagelayer-elp-remove-color{
337 background-color:#616161;
338 position: absolute;
339 top: 0;
340 right: 0;
341 z-index:1;
342 box-shadow: 0 0 3px #333;
343 padding: 3px;
344 border-top-right-radius: 2px;
345 }
346
347 .pagelayer-elp-remove-color .pli{
348 display: flex;
349 }
350
351 .pagelayer-elp-remove-color .pli:before{
352 color: #fff;
353 font-size: 7px;
354 }
355
356 .pagelayer-blank-preview{
357 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;
358 background-size: cover !important;
359 opacity: 70%;
360 }
361 /* Color Control End */
362
363 /* Padding Control Start */
364 .pagelayer-elp-padding-div{
365 display:flex;
366 }
367
368 .pagelayer-elp-padding-div i.pli{
369 padding:8px 11px;
370 border: 1px solid #d1d1d1;
371 cursor: pointer;
372 background: #FFF;
373 vertical-align:top;
374 font-size: 12px;
375 border-radius: 3px;
376 }
377
378 .pagelayer-elp-padding-linked{
379 background: #1a7fb0 !important;
380 color: #fff !important;
381 border: 1px solid #1a7fb0 !important;
382 }
383
384 .pagelayer-dark .pagelayer-elp-padding-linked{
385 background: #e0e0e0 !important;
386 }
387
388 .pagelayer-elp-padding{
389 padding: 2px 0px 2px 4px !important;
390 text-align: center;
391 border-radius: 3px !important;
392 width:21% !important;
393 }
394 /* Padding Control End */
395
396 /* Slider Control Start */
397 .pagelayer-elp-slider-div{
398 display: flex;
399 padding: 7px 0 0;
400 }
401
402 input.pagelayer-elp-slider{
403 -webkit-appearance: none;
404 width: 70%;
405 height: 10px;
406 border-radius: 5px;
407 background-color: #d3d3d3 !important;
408 outline: none;
409 opacity: 0.7;
410 -webkit-transition: .2s;
411 transition: opacity .2s;
412 font-size: 0px !important;
413 padding: 0;
414 }
415
416 .pagelayer-elp-slider:focus{
417 border-color: transparent;
418 box-shadow: 0 0 1px transparent;
419 }
420
421 .pagelayer-elp-slider:hover{
422 opacity: 1;
423 }
424
425 .pagelayer-elp-slider::-webkit-slider-thumb{
426 -webkit-appearance: none;
427 appearance: none;
428 width: 15px;
429 height: 15px;
430 border-radius: 50%;
431 background: #4CAF50;
432 cursor: pointer;
433 }
434
435 .pagelayer-dark .pagelayer-elp-slider::-webkit-slider-thumb{
436 background: #3e8ef7;
437 }
438
439 .pagelayer-elp-slider::-moz-range-thumb{
440 width: 15px;
441 height: 15px;
442 border-radius: 50%;
443 background: #2563eb;
444 cursor: pointer;
445 }
446
447 .pagelayer-elp-slider-value{
448 width: 23% !important;
449 margin-left: 7%;
450 margin-top: -12px;
451 border-radius: 3px !important;
452 padding: 2px 2px 2px 6px !important;
453 }
454 /* Slider Control End */
455
456 /* Spinner Control Start */
457 .pagelayer-elp-spinner{
458 padding: 2px 2px 2px 6px !important;
459 border-radius: 4px !important;
460 }
461
462 .pagelayer-elp-spinner-div{
463 right: 10px;
464 position: absolute;
465 top: 7px;
466 width:85px;
467 }
468 /* Spinner Control End */
469
470 /* Checkbox Control Start */
471 .pagelayer-elp-checkbox-div{
472 top: 13px;
473 right:7px;
474 position: absolute;
475 }
476
477 input[type="checkbox"].pagelayer-elp-checkbox{
478 -webkit-appearance: none;
479 -moz-appearance: none;
480 appearance: none;
481 width: 3.5em;
482 height: 1.7em;
483 background: #ddd;
484 border-radius: 3em !important;
485 position: relative;
486 cursor: pointer;
487 outline: none;
488 -webkit-transition: all .2s ease-in-out;
489 transition: all .2s ease-in-out;
490 }
491
492 input[type="checkbox"].pagelayer-elp-checkbox:checked{
493 background-color: #1A9CDB;
494 border-color: #1A9CDB;
495 }
496
497 .pagelayer-dark input[type="checkbox"].pagelayer-elp-checkbox:checked{
498 background-color: #0d47a1;
499 }
500
501 input[type="checkbox"].pagelayer-elp-checkbox:before{
502 content: "" !important;
503 }
504
505 input[type="checkbox"].pagelayer-elp-checkbox:after{
506 position: absolute;
507 content: "";
508 width: 1.5em;
509 height: 1.5em;
510 border-radius: 50%;
511 background: #fff;
512 -webkit-box-shadow: 0 0 .25em rgba(0,0,0,.3);
513 box-shadow: 0 0 .25em rgba(0,0,0,.3);
514 -webkit-transform: scale(.7);
515 transform: scale(.7);
516 left: 0;
517 -webkit-transition: all .2s ease-in-out;
518 transition: all .2s ease-in-out;
519 }
520
521 input[type="checkbox"].pagelayer-elp-checkbox:checked:after{
522 left: calc(100% - 1.5em);
523 }
524 /* CheckBox Control End */
525 /* Select Control Start */
526 .pagelayer-elp-select-div{
527 width: 50%;
528 right: 10px;
529 position: absolute;
530 top: 7px;
531 }
532
533 .pagelayer-elp-select {
534 color: #444;
535 padding: 2px 2px 2px 6px;
536 width: 100%;
537 max-width: 100%;
538 border: 1px solid #aaa;
539 border-radius: 3px !important;
540 }
541
542 .pagelayer-elp-select::-ms-expand {
543 display: none;
544 }
545
546 .pagelayer-elp-select:hover {
547 border-color: #888;
548 }
549
550 .pagelayer-elp-select:focus {
551 border-color: #aaa;
552 box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
553 box-shadow: 0 0 0 3px -moz-mac-focusring;
554 color: #222;
555 outline: none;
556 }
557
558 .pagelayer-elp-select option{
559 font-weight:normal;
560 }
561 /* Select Control End */
562
563 /* Box-shaow Control Start */
564 .pagelayer-elp-shadow-div,
565 .pagelayer-elp-typo-div,
566 .pagelayer-elp-filter-div{
567 padding: 0px 10px;
568 box-shadow: 0px 0px 13px rgba(0,0,0,.3);
569 position: relative;
570 margin-top: 8px;
571 border: 1px solid #ddd;
572 position: absolute;
573 right: 0;
574 background-color: #fff;
575 width: 100%;
576 z-index: 12;
577 }
578
579 .pagelayer-prop-edit{
580 padding: 7px 7px 5px;
581 border: 1px solid #3e8ca4;
582 position: absolute;
583 top: 0px;
584 right: 0px;
585 text-align: center;
586 cursor: pointer;
587 border-radius: 3px;
588 }
589
590 .pagelayer-prop-edit i{
591 font-size: 14px;
592 color: #484848;
593 }
594
595 .pagelayer-elp-shadow-color{
596 padding: 15px 0px !important;
597 }
598
599 .pagelayer-elp-shadow-color .pagelayer-elp-color-div{
600 top:7px;
601 }
602
603 .pagelayer-elp-typo,
604 .pagelayer-elp-prop-grp{
605 margin: 0px;
606 padding: 10px 0;
607 position: relative;
608 border-bottom: 1px dashed #ccc;
609 display: flex;
610 }
611
612 .pagelayer-elp-typo-fonts{
613 padding: 10px 0;
614 }
615
616 .pagelayer-elp-gradient-div .pagelayer-elp-prop-grp{
617 padding: 5px 0;
618 display: flex;
619 align-items: center;
620 justify-content: space-between;
621 }
622
623 .pagelayer-elp-gradient-div .pagelayer-elp-label{
624 width: auto !important;
625 }
626
627 .pagelayer-elp-gradient-color{
628 padding: 15px 0px !important;
629 }
630
631 .pagelayer-elp-prop-grp .pagelayer-elp-color-div{
632 right: 0;
633 }
634
635 .pagelayer-elp-typo-fonts .pagelayer-elp-label,
636 .pagelayer-elp-typo .pagelayer-elp-label,
637 .pagelayer-elp-typo .pagelayer-elp-typo-input,
638 .pagelayer-elp-shadow-div .pagelayer-elp-shadow-input,
639 .pagelayer-elp-shadow-div .pagelayer-elp-label,
640 .pagelayer-elp-prop-grp>label, .pagelayer-elp-prop-grp>input{
641 width: 50%;
642 }
643 /* Box-shaow Control End */
644 /* Image Control Start */
645 .pagelayer-elp-image-div{
646 height: 130px;
647 border-radius: 3px;
648 border: 1px solid #e6e7e9;
649 position: relative;
650 background-color: #fafafa;
651 background-position: center;
652 background-repeat: no-repeat;
653 background-size: cover;
654 }
655
656 .pagelayer-elp-remove-image{
657 font-size: 8px;
658 color: #4f4f4f;
659 background: #ffffffa1;
660 border-radius: 100%;
661 padding: 5px;
662 line-height: 0;
663 box-shadow: 0 0 4px #79797966;
664 cursor: pointer;
665 position: absolute;
666 right: 4px;
667 top: 4px;
668 }
669
670 .pagelayer-elp-image-div:not(.pagelayer-has-image) .pagelayer-elp-remove-image{
671 display: none;
672 }
673
674 .pagelayer-elp-image-div.pagelayer-has-image .pagelayer-elp-add-image{
675 display: none;
676 }
677
678 .pagelayer-elp-add-image{
679 display: flex;
680 align-items: center;
681 justify-content: center;
682 height: 100%;
683 cursor: pointer;
684 }
685
686 .pagelayer-elp-add-image i{
687 font-size: 14px;
688 color: #4f4f4f;
689 background: #ffffff;
690 border-radius: 100%;
691 padding: 3px;
692 box-shadow: 0 0 4px #79797966;
693 }
694 /* Image Control End */
695 /* Dimension Control Start */
696 .pagelayer-elp-dimension-div i.pli{
697 padding:8px 11px;
698 border: 1px solid #d1d1d1;
699 border-left:0px !important;
700 cursor: pointer;
701 background: #FFF;
702 vertical-align:top;
703 font-size: 12px;
704 border-top-right-radius: 3px;
705 border-bottom-right-radius: 3px;
706 }
707
708 .pagelayer-elp-dimension-linked{
709 background: #1a7fb0 !important;
710 color: #fff !important;
711 border: 1px solid #1a7fb0 !important;
712 }
713
714 .pagelayer-elp-dimension:first-child{
715 border-top-left-radius: 3px;
716 border-bottom-left-radius: 3px;
717 }
718
719 .pagelayer-elp-dimension{
720 width:42% !important;
721 margin-right: 0px;
722 margin-left: 0px;
723 }
724 /* Dimension Control End */
725 /* Icon Control Start */
726 .pagelayer-elp-icon-div{
727 cursor: pointer;
728 padding: 6px;
729 border: solid 1px #d1d1d1;
730 background: #fffffc;
731 color: #333;
732 vertical-align: middle;
733 width: 126px;
734 height: 18px;
735 display: block;
736 border-radius: 4px;
737 margin: 0 auto;
738 position: absolute;
739 top: 7px;
740 right: 10px;
741 box-sizing: content-box;
742 }
743
744 .pagelayer-elp-icon-preview{
745 position: relative;
746 display: block;
747 margin-right: 5px;
748 float: left;
749 width: 75%;
750 height: auto;
751 border: none;
752 overflow: hidden;
753 white-space: nowrap;
754 text-overflow: ellipsis;
755 }
756
757 .pagelayer-elp-icon-preview i{
758 padding-right: 5px;
759 font-size: 19px;
760 color: #666;
761 vertical-align: middle;
762 }
763
764 .pagelayer-elp-icon-name{
765 font-size: 13px;
766 }
767
768 .pagelayer-elp-icon-open,
769 .pagelayer-elp-icon-close{
770 float: right;
771 font-size: 10px;
772 padding: 0px;
773 line-height: 20px;
774 }
775
776 .pagelayer-elp-icon-close{
777 padding-right: 5px;
778 font-size: 12px;
779 }
780
781 .pagelayer-elp-icon-selector{
782 position: absolute;
783 z-index: 1000;
784 border: 1px solid rgba(0,0,0,0.2) !important;
785 background: #fff !important;
786 box-shadow: 0 3px 5px rgba(0,0,0,0.2) !important;
787 -webkit-border-radius: 2px !important;
788 text-shadow: none !important;
789 padding: 5px;
790 height: auto;
791 box-sizing: border-box;
792 width: 80%;
793 border-radius: 2px;
794 margin: 0 0 0 auto;
795 top: 40px;
796 right: 10px;
797 }
798
799 .pagelayer-elp-search-icon{
800 margin-bottom: 5px !important;
801 padding: 2px 6px;
802 line-height: 20px !important;
803 border-radius: 3px !important;
804 }
805
806 .pagelayer-elp-icon-list{
807 width: 100%;
808 -moz-box-sizing: border-box;
809 -webkit-box-sizing: border-box;
810 box-sizing: border-box;
811 padding: 0;
812 max-height: 183px;
813 overflow-y: auto;
814 }
815
816 .pagelayer-elp-icon-list::-webkit-scrollbar {
817 -webkit-appearance: none;
818 }
819
820 .pagelayer-elp-icon-list::-webkit-scrollbar:vertical {
821 width: 10px;
822 }
823
824 .pagelayer-elp-icon-list::-webkit-scrollbar-thumb {
825 border-radius: 8px;
826 border: 2px solid white;
827 background-color: rgba(0, 0, 0, .5);
828 }
829
830 .pagelayer-elp-icon-list::-webkit-scrollbar-track {
831 background-color: #fff;
832 border-radius: 8px;
833 }
834
835 .pagelayer-elp-icon-span{
836 display: block;
837 margin: 2px;
838 cursor: pointer;
839 box-sizing: border-box;
840 border: 1px solid #dbdbdb;
841 transition: all 0.3s;
842 font-size: 13px;
843 padding: 3px;
844 }
845
846 .pagelayer-elp-icon-span:hover{
847 border-color: #2563eb;
848 background-color: #3e8ef7;
849 color: #ffffff;
850 box-shadow: 0px 1px 1px #3e8ef7bf;
851 }
852
853 .pagelayer-elp-icon-span i{
854 font-size: 15px;
855 line-height: 1em;
856 padding: 3px;
857 color: #555;
858 transition: all 0.3s;
859 vertical-align: middle;
860 }
861
862 .pagelayer-elp-icon-span:hover i{
863 color: #ffffff;
864 }
865
866 .pagelayer-elp-icon-type{
867 display:flex;
868 flex-grow:1;
869 text-align:center;
870 }
871
872 .pagelayer-elp-icon-type p{
873 flex-grow: 1;
874 padding: 5px 0;
875 margin: 0 0 3px;
876 cursor: pointer;
877 font-size: 12px;
878 background: #999;
879 color: #ffffff;
880 border: 1px solid #777;
881 }
882
883 .pagelayer-elp-icon-type p.active{
884 background-color:#666666;
885 }
886
887 .pagelayer-elp-icon-sets{
888 line-height: 27px;
889 height: 27px;
890 border-radius: 4px;
891 margin: 5px 0;
892 }
893 /* Icon Control End */
894 /* Media Control Start */
895 .pagelayer-elp-input-icon{
896 position: relative;
897 }
898
899 .pagelayer-elp-input-icon input{
900 width: 85%;
901 border-radius: 3px 0 0 3px !important;
902 margin-left: 0px;
903 margin-right: 1px;
904 }
905
906 .pagelayer-elp-input-icon i.pli{
907 padding:1px 10px;
908 position:relative;
909 top:0px;
910 border: 1px solid #8c8f94;
911 border-left:0px;
912 cursor: pointer;
913 background:#FFF;
914 line-height:26px !important;
915 font-size: 13px;
916 margin-left: -1px;
917 }
918 /* Media Control End */
919 /* Property link start*/
920 .pagelayer-elp-link-list{
921 max-height:250px;
922 overflow:auto;
923 width: 99%;
924 top: 35px;
925 position: absolute;
926 z-index: 1000;
927 border: 1px solid rgba(0,0,0,0.2) !important;
928 background: #fff !important;
929 box-shadow: 0 3px 5px rgba(0,0,0,0.2) !important;
930 -webkit-border-radius: 2px !important;
931 text-shadow: none !important;
932 padding: 5px;
933 height: auto;
934 box-sizing: border-box;
935 display: none;
936 border-radius: 2px;
937 margin: 0 0 0 auto;
938 }
939
940 .pagelayer-elp-link-list .pagelayer-elp-link-search{
941 width:100%;
942 }
943
944 .pagelayer-elp-link-item{
945 display: flex;
946 font-size: 13px;
947 padding: 7px 2px;
948 margin: 2px 0;
949 cursor: pointer;
950 align-items:center;
951 }
952
953 .pagelayer-elp-link-item:hover{
954 box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff;
955 border-radius: 4px;
956 }
957
958 .pagelayer-elp-link-item span{
959 text-overflow: ellipsis;
960 display: inline-block;
961 overflow: hidden;
962 white-space: nowrap;
963 width: 100%;
964 padding:3px;
965 }
966
967 .pagelayer-elp-link-item-title{
968 font-weight:bold;
969 }
970
971 .pagelayer-elp-link-item-perma{
972 color:#999;
973 }
974
975 .pagelayer-elp-link-title{
976 width: 73%;
977 margin-right:2%;
978 }
979
980 .pagelayer-elp-link-info{
981 width: 20%;
982 background-color: #ededed;
983 padding: 2px;
984 font-size:11px;
985 }
986
987 .pagelayer-elp-link-id{
988 background-color: #ededed;
989 padding: 2px 6px;
990 font-size:12px;
991 margin-left:5px;
992 }
993
994 .pagelayer-elp-link-info span{
995 padding: 4px;
996 }
997
998 .pagelayer-elp-link-div .pagelayer-elp-link-cb-div{
999 display: flex;
1000 justify-content: space-between;
1001 align-items: center;
1002 padding-top: 5px;
1003 }
1004
1005 .pagelayer-elp-link-div .pagelayer-elp-link-ca,
1006 .pagelayer-elp-link-div .pagelayer-elp-link-cb-div{
1007 margin-top: 10px;
1008 }
1009
1010 .pagelayer-elp-link-ca input{
1011 width: 100%;
1012 margin: 5px 0px;
1013 }
1014
1015 .pagelayer-elp-link-desc{
1016 color:#757575;
1017 font-size: 13px;
1018 line-height: 20px;
1019 font-style: italic;
1020 margin-top: 5px;
1021 display:block;
1022 word-break: break-word;
1023 }
1024 /* Property link end*/
1025 /* Multi Images start */
1026 .pagelayer-elp-multi_image{
1027 padding: 3px;
1028 width: 60%;
1029 margin: 5px auto;
1030 border: 1px solid #d5dadf;
1031 position: relative;
1032 text-align: center;
1033 background: #4CBCDF;
1034 color: #fff;
1035 font-size: 13px;
1036 cursor: pointer;
1037 height: 100%;
1038 -webkit-background-size: cover;
1039 background-size: cover;
1040 background-position: 50%;
1041 }
1042
1043 .pagelayer-elp-multi_image-thumbs{
1044 margin-top:10px;
1045 }
1046
1047 .pagelayer-elp-multi_image-thumb{
1048 display: inline-block;
1049 width: 44px;
1050 height: 44px;
1051 background-size: cover;
1052 background-position: 50% 50%;
1053 margin: 0 7px 0 0;
1054 border: 2px solid #d5dadf;
1055 }
1056 /* Multi Images end*/
1057 /* Typo start*/
1058 .pagelayer-elp-typo-fonts .pagelayer-elp-label,
1059 .pagelayer-elp-typo .pagelayer-elp-label{
1060 font-weight: 600;
1061 font-size: 11px;
1062 color: #555;
1063 }
1064
1065 .pagelayer-elp-global-typo{
1066 box-shadow: 0 2px 2px -1px #d2cfce;
1067 margin: 0px -10px 0 -10px;
1068 padding: 8px 10px;
1069 display: flex;
1070 }
1071
1072 [pagelayer-screen-mode="desktop"] [pagelayer-show-device]:not([pagelayer-show-device="desktop"]),
1073 [pagelayer-screen-mode="tablet"] [pagelayer-show-device]:not([pagelayer-show-device="tablet"]),
1074 [pagelayer-screen-mode="mobile"] [pagelayer-show-device]:not([pagelayer-show-device="mobile"]){
1075 display:none;
1076 }
1077
1078 .pagelayer-elp-global-typo .pagelayer-elp-typo-icons{
1079 flex: 1;
1080 display: flex;
1081 align-items: center;
1082 justify-content: flex-end;
1083 width: 50%;
1084 }
1085
1086 .pagelayer-elp-global-typo .pagelayer-global-font-list{
1087 width: 100%;
1088 }
1089
1090 .pagelayer-elp-typo-icons .pagelayer-elp-global-icon{
1091 margin-right: 10px;
1092 cursor: pointer;
1093 }
1094
1095 .pagelayer-elp-typo select.pagelayer-elp-typo-input,
1096 .pagelayer-elp-typo-input,
1097 .pagelayer-elp-shadow-input{
1098 padding: 3px;
1099 border-radius: 4px !important;
1100 line-height: 23px !important;
1101 }
1102
1103 /* Typo end*/
1104 /* Multi Select Property */
1105 .pagelayer-elp-multiselect{
1106 min-height: 30px;
1107 font-size: 13px !important;
1108 color: #666;
1109 border-radius: unset;
1110 border:1px solid #CCC;
1111 line-height: 26px;
1112 width: 100%;
1113 }
1114
1115 .pagelayer-elp-multiselect-ul{
1116 list-style:none;
1117 padding:0;
1118 margin:0;
1119 border: 1px solid #CCC;
1120 border-radius: 0 0 5px 5px;
1121 border-top:none;
1122 position:absolute;
1123 background: rgb(255, 255, 255) !important;
1124 z-index:1;
1125 width:100%;
1126 }
1127
1128 .pagelayer-elp-multiselect-option{
1129 font-size:13px;
1130 padding:4px 8px;
1131 cursor:pointer;
1132 margin: 0;
1133 }
1134
1135 .pagelayer-elp-multiselect-option[data-selected="selected"]{
1136 background: #f2f2f2;
1137 }
1138
1139 .pagelayer-elp-multiselect-remove{
1140 color: #f2f2f2;
1141 padding-left: 2px;
1142 cursor: pointer;
1143 }
1144
1145 .pagelayer-elp-multiselect-selected{
1146 padding: 3px 5px;
1147 border-radius: 5px;
1148 margin: 2px;
1149 background: #44a9db;
1150 line-height: 13px;
1151 font-size: 13px;
1152 color: #fff;
1153 }
1154
1155 .pagelayer-elp-multiselect{
1156 display: flex;
1157 flex-wrap: wrap;
1158 padding: 5px;
1159 border-radius: 3px;
1160 }
1161
1162 /* Multi Select Property end*/
1163 .pagelayer-anchor{
1164 background-image:url(../images/anchor.png);
1165 height:30px;
1166 background-position: center center;
1167 background-repeat: no-repeat;
1168 background-size: cover;
1169 }
1170 /* splash start */
1171 .pagelayer-splash {
1172 background-image: url(../images/splash.png);
1173 height: 30px;
1174 background-position: center center;
1175 background-repeat: no-repeat;
1176 background-size: cover;
1177 }
1178 /* splash end */
1179
1180 /* space start */
1181 .pagelayer-space-holder {
1182 background: url(../images/space.png);
1183 background-repeat: repeat;
1184 background-repeat: repeat;
1185 }
1186 /* space end */
1187
1188 /* Filter prop start*/
1189 .pagelayer-elp-filter-blur .pagelayer-elp-filter-input {
1190 background-image: url('data:image/png;base64,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') !important;
1191 }
1192
1193 .pagelayer-elp-filter-brightness input {
1194 background-image: linear-gradient(90deg,#000,#fff);
1195 }
1196
1197 .pagelayer-elp-filter-contrast input {
1198 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;
1199 }
1200
1201 .pagelayer-elp-filter-grayscale input {
1202 background-image: linear-gradient(90deg, rgba(203,20,106,1) 0%, rgba(88,88,88,1) 56%);
1203 }
1204
1205 .pagelayer-elp-filter-hue input {
1206 background-image: linear-gradient(90deg,red,orange,#ff0,#adff2f,#32cd32,#00bfff,blue,#9400d3 95%);
1207 }
1208
1209 .pagelayer-elp-filter-opacity input {
1210 background-image: linear-gradient(90deg,#fff,#000);
1211 }
1212
1213 .pagelayer-elp-filter-saturate input {
1214 background-image: linear-gradient(90deg,gray,red);
1215 }
1216 /* Filter prop end*/
1217 /* Access prop start*/
1218 .pagelayer-elp-modal,
1219 .pagelayer-elp-access{
1220 cursor: pointer;
1221 padding: 10px;
1222 display: block;
1223 margin: 0 auto;
1224 position: absolute;
1225 font-size:1.5rem;
1226 top: 0px;
1227 right: 12px;
1228 color: #333;
1229 vertical-align: middle;
1230 }
1231
1232 .pagelayer-elp-access .pli-caret-right{
1233 font-size: 18px;
1234 line-height: 1.5;
1235 }
1236
1237 .pagelayer-elp-access .pli-caret-right:hover{
1238 color: #3e8ef7;
1239 }
1240
1241 .pagelayer-elp-access .pli-caret-open:before{
1242 content: "\f0d7" !important;
1243 }
1244
1245 .pagelayer-elp-access-holder{
1246 position: absolute;
1247 border: 1px solid #ccc;
1248 top: 42px;
1249 background: #fff;
1250 z-index: 100;
1251 width: 95%;
1252 box-shadow: 0 0 15px -5px;
1253 padding: 5px 10px;
1254 }
1255 /* Access prop end*/
1256
1257 /* Property modal start*/
1258 .pagelayer-elp-modal-wrapper{
1259 position: fixed !important;
1260 top: 0 !important;
1261 bottom: 0 !important;
1262 left: 0 !important;
1263 right: 0 !important;
1264 overflow-y: auto;
1265 background: #0000009c;
1266 z-index: 999;
1267 transform: none !important;
1268 }
1269
1270 .pagelayer-elp-modal-wrapper .components-popover__content{
1271 max-height: 100% !important;
1272 height: 100% !important;
1273 width: 100% !important;
1274 background: transparent;
1275 }
1276
1277 .pagelayer-elp-modal-wrap{
1278 width: 500px;
1279 background-color: #fff;
1280 position: relative;
1281 margin: 20px auto 50px;
1282 border-radius: 5px;
1283 box-shadow: 0px 0px 7px 0px #fff;
1284 }
1285
1286 .pagelayer-elp-modal-close{
1287 float:right;
1288 padding: 5px;
1289 cursor:pointer
1290 }
1291
1292 .pagelayer-elp-modal-header{
1293 padding:15px 20px 10px;
1294 margin-top: 10px;
1295 font-size: 13px;
1296 font-weight: bold;
1297 color: #555;
1298 }
1299
1300 .pagelayer-elp-modal-holder{
1301 padding: 20px;
1302 }
1303
1304 .pagelayer-elp-modal-holder > *{
1305 padding: 5px 0;
1306 }
1307
1308 /* Property modal end*/
1309 /* Options start*/
1310 .pagelayer-elp-text-div input,
1311 .pagelayer-elp-spinner-div input,
1312 .pagelayer-elp-textarea-div textarea{
1313 width: 100%;
1314 }
1315 /* Options end*/
1316
1317 /* Video widget start*/
1318 .pagelayer-video-edit {
1319 position: absolute;
1320 font-size: 13px;
1321 right: 4px;
1322 top: 4px;
1323 padding: 2px 6px;
1324 border-radius: 4px;
1325 color: #fff;
1326 background: #000;
1327 box-shadow: 0px 0px 4px 2px #d0d0e1;
1328 cursor: pointer;
1329 display: none;
1330 }
1331
1332 .pagelayer-video-edit:hover {
1333 background: #008eba;
1334 }
1335
1336 .pagelayer-video:hover .pagelayer-video-edit{
1337 display: block;
1338 }
1339 /* Video widget end*/
1340 /* Column Widget Start*/
1341 .pagelayer-row{
1342 min-height:20px;
1343 }
1344
1345 .pagelayer-col{
1346 align-content: stretch;
1347 }
1348
1349 .pagelayer-col-holder:not(.pagelayer-has-child) .block-list-appender{
1350 outline: 1px dashed #abb3bb;
1351 }
1352
1353 .pagelayer-col .block-editor-button-block-appender{
1354 box-shadow: none !important;
1355 }
1356 /* Column Widget End*/
1357
1358 /* Pagelayer row (variation) start*/
1359 .pagelayer-variation-div {
1360 width: 100%;
1361 }
1362
1363 .pagelayer-variation-div .components-button.is-secondary,
1364 .pagelayer-variation-div .block-editor-block-variation-picker {
1365 box-shadow: none;
1366 outline: 1px dashed #abb3bb;
1367 }
1368
1369 .pagelayer-variation-div .editor-styles-wrapper .block-editor-block-variation-picker{
1370 box-shadow: none !important;
1371 }
1372
1373 .pagelayer-variation-div .block-editor-block-variation-picker .components-placeholder__fieldset {
1374 max-width: 100% !important;
1375 align-items: center;
1376 }
1377
1378 .pagelayer-variation-div .block-editor-block-variation-picker__variations {
1379 justify-content: center;
1380 }
1381
1382 .pagelayer-variation-div .components-button svg,
1383 .pagelayer-variation-div .components-button.is-secondary svg,
1384 .pagelayer-variation-div .components-button.is-tertiary svg,
1385 .pagelayer-variation-div .components-button:hover:not(:disabled) svg {
1386 color: #d5dadf;
1387 width: 70px;
1388 }
1389
1390 /* Pagelayer row end*/
1391 /* Pagelayer Library css */
1392 .pagelayer-library-modal-container {
1393 z-index: 1;
1394 background-color: white;
1395 position: fixed;
1396 left: 0px;
1397 top: 0px;
1398 width: 100%;
1399 height: 100vh;
1400 display: flex;
1401 flex-direction: column;
1402 }
1403
1404 .pagelayer-library-modal-nav{
1405 display: flex;
1406 justify-content: space-between;
1407 align-items: center;
1408 background: rgba(255, 255, 255, 0.25);
1409 border-bottom: 1px solid #cbd5e1;
1410 padding: 20px 50px;
1411 }
1412
1413 .pagelayer-library-modal-ul{
1414 display: flex;
1415 justify-content: space-between;
1416 align-items: center;
1417 }
1418
1419 .pagelayer-library-modal-ul li {
1420 padding: 0px 50px;
1421 transition: 100ms cubic-bezier(0.12, 0, 0.39, 0) 0s;
1422 font-size: 16px;
1423 }
1424
1425 .pagelayer-library-modal-ul li:hover {
1426 cursor: pointer;
1427 color: #17b486;
1428 }
1429
1430 .pagelayer-library-modal-content {
1431 background-color: #724c8717;
1432 display: flex;
1433 overflow: auto;
1434 position: relative;
1435 }
1436
1437 .pagelayer-library-modal-tags {
1438 height: 100%;
1439 border-right: 0.1px solid lightgrey;
1440 width: 20vw;
1441 padding: 20px 30px;
1442 overflow-y: auto;
1443 background-color: rgb(255, 255, 255);
1444 position: sticky;
1445 top: 0;
1446 }
1447
1448 .pagelayer-library-modal-tags::-webkit-scrollbar-track {
1449 background: #fff;
1450 }
1451
1452 .pagelayer-section-item{
1453 min-height: 50px;
1454 margin: 15px;
1455 z-index: 9;
1456 transition-duration: 0.2s;
1457 background-color: #fff;
1458 border: 3px solid #fff;
1459 border-radius: 4px;
1460 cursor: pointer;
1461 position: relative;
1462 }
1463
1464 [pagelayer-section-type="page"] .pagelayer-section-item{
1465 max-width: 300px;
1466 height: 400px;
1467 overflow-y: auto;
1468 }
1469
1470 [pagelayer-section-type="page"] .pagelayer-section-item::-webkit-scrollbar {
1471 height: 3px;
1472 width: 3px;
1473 }
1474
1475 .pagelayer-section-item img {
1476 width: 100%;
1477 object-fit: contain;
1478 overflow: hidden;
1479 cursor: pointer;
1480 }
1481
1482 .pagelayer-library-modal-nav button {
1483 outline: none;
1484 border: none;
1485 background-color: white;
1486 display: flex;
1487 cursor: pointer;
1488 }
1489
1490 .pagelayer-library-modal-ul button:hover {
1491 color: #17b486;
1492 }
1493
1494 .pagelayer-library-modal-nav button img {
1495 padding-right: 6px;
1496 }
1497
1498 .pagelayer-library-modal-close {
1499 font-size: 24px;
1500 font-weight: bold;
1501 transition: 100ms cubic-bezier(0.12, 0, 0.39, 0) 0s;
1502 }
1503
1504 .pagelayer-library-modal-close:hover {
1505 cursor: pointer;
1506 color: #17b486;
1507 }
1508
1509 .pagelayer-library-modal-tag-list ul li {
1510 padding: 20px 0px 10px 0px;
1511 }
1512
1513 .pagelayer-library-modal-tag-list ul li {
1514 width: 80%;
1515 height: 30px;
1516 }
1517
1518 .pagelayer-section-modal-body{
1519 width: 80vw;
1520 display: flex;
1521 flex-direction: row;
1522 flex-wrap: wrap;
1523 }
1524
1525 .pagelayer-section-is-visible{
1526 height: 50px;
1527 flex-basis: 100%;
1528 }
1529
1530 .pagelayer-section-holder{
1531 vertical-align: top;
1532 background: #efefef;
1533 flex: 1;
1534 }
1535
1536 .pagelayer-library-modal-nav button.pagelayer-active-modal-btn {
1537 border-bottom: 1px solid rgb(87, 27, 27);
1538 }
1539
1540 .pagelayer-library-clicked,
1541 .pagelayer-library-clicked-tag{
1542 border-bottom: 2px solid blue;
1543 }
1544
1545 .pagelayer-library-active-button {
1546 border-bottom: 1px solid rgb(87, 27, 27);
1547 }
1548
1549 .pagelayer-tag-style-active {
1550 background-color: rgb(104, 98, 98);
1551 color: white;
1552 transition: width 1s;
1553 }
1554
1555 .pagelayer-library-modal-tag-div{
1556 margin-bottom: 10px;
1557 }
1558
1559 .pagelayer-library-modal-tag-list p {
1560 background: #1A9CDB;
1561 cursor: pointer;
1562 padding: 5px;
1563 color: #fff;
1564 font-size: 13px;
1565 display: inline-block;
1566 margin: 3px;
1567 }
1568
1569 .pagelayer-tag-style-active {
1570 background: #326fa6 !important;
1571 }
1572
1573 .pagelayer-library-modal-tag-list p.pagelayer-tag-style-active:hover {
1574 color: white;
1575 }
1576
1577 .pagelayer-library-modal-ul button.pagelayer-active-modal-btn:hover {
1578 color: black;
1579 }
1580
1581 .pagelayer-modal-tag-search {
1582 padding: 10px;
1583 border: none;
1584 border-bottom: 1px solid rgb(190, 185, 185);
1585 color: white;
1586 }
1587
1588 .pagelayer-library-loader{
1589 display: flex;
1590 justify-content: center;
1591 align-items: center;
1592 position: absolute;
1593 z-index: 999;
1594 width: 100%;
1595 height: 100%;
1596 background: #fff;
1597 }
1598
1599 .pagelayer-add-section-modal-overlay {
1600 position: absolute;
1601 top: 0;
1602 bottom: 0;
1603 height: 100%;
1604 width: 100%;
1605 z-index: 999999;
1606 align-items: center;
1607 justify-content: center;
1608 text-align: center;
1609 display: flex;
1610 background-color: #f7f7f7fa;
1611 }
1612
1613 .pagelayer-section-wait .fa-spin {
1614 font-size: 50px;
1615 }
1616
1617 .pagelayer-loader {
1618 position: relative;
1619 width: 150px;
1620 height: 150px;
1621 margin: 0 auto 50px auto;
1622 z-index: 1001;
1623 }
1624
1625 .pagelayer-loader:before {
1626 content: "";
1627 position: absolute;
1628 top: 0;
1629 left: 0;
1630 right: 0;
1631 bottom: 0;
1632 border-radius: 50%;
1633 border: 3px solid transparent;
1634 border-top-color: #3498db;
1635 -webkit-animation: spin 3s linear infinite;
1636 animation: spin 3s linear infinite;
1637 }
1638
1639 .pagelayer-loader:after {
1640 content: "";
1641 position: absolute;
1642 top: 10px;
1643 left: 10px;
1644 right: 10px;
1645 bottom: 10px;
1646 border-radius: 50%;
1647 border: 3px solid transparent;
1648 border-top-color: #e74c3c;
1649 -webkit-animation: spin 2s linear infinite;
1650 animation: spin 2s linear infinite;
1651 }
1652
1653 .pagelayer-loader .pagelayer-percent-parent{
1654 width:100%;
1655 height:100%;
1656 margin:auto;
1657 display: flex;
1658 align-items: center;
1659 justify-content: center;
1660 text-align:center;
1661 }
1662
1663 .pagelayer-loader .pagelayer-percent-parent:before{
1664 content: "";
1665 position: absolute;
1666 top: 20px;
1667 left: 20px;
1668 right: 20px;
1669 bottom: 20px;
1670 border-radius: 50%;
1671 border: 3px solid transparent;
1672 border-top-color: #f9c922;
1673 -webkit-animation: spin 1.5s linear infinite;
1674 animation: spin 1.5s linear infinite;
1675 }
1676
1677 .pagelayer-loader .pagelayer-percent-parent .pagelayer-percent{
1678 font-size:30px;
1679 }
1680
1681 @-webkit-keyframes spin {
1682 0% {
1683 -webkit-transform: rotate(0deg);
1684 -ms-transform: rotate(0deg);
1685 transform: rotate(0deg);
1686 }
1687
1688 100% {
1689 -webkit-transform: rotate(360deg);
1690 -ms-transform: rotate(360deg);
1691 transform: rotate(360deg);
1692 }
1693 }
1694
1695 @keyframes spin {
1696 0% {
1697 -webkit-transform: rotate(0deg);
1698 -ms-transform: rotate(0deg);
1699 transform: rotate(0deg);
1700 }
1701
1702 100% {
1703 -webkit-transform: rotate(360deg);
1704 -ms-transform: rotate(360deg);
1705 transform: rotate(360deg);
1706 }
1707 }
1708
1709 .pagelayer-section-pro-req {
1710 position: absolute;
1711 top: 15px;
1712 right: 0px;
1713 font-size: 14px;
1714 padding: 10px;
1715 background-color: #e63131;
1716 color: #fff;
1717 margin-left: 4px;
1718 border-radius: 2px;
1719 cursor: pointer;
1720 }
1721
1722 .pagelayer-section-pro-txt {
1723 position: absolute;
1724 top: 45%;
1725 left: 0px;
1726 font-size: 14px;
1727 padding: 10px;
1728 color: #fff;
1729 line-height: 120%;
1730 background: #111;
1731 opacity: 0;
1732 transition: all 0.3s;
1733 }
1734
1735 .pagelayer-section-item:hover > .pagelayer-section-pro-txt {
1736 opacity: 0.8;
1737 }
1738
1739 .pagelayer-section-pro-txt a {
1740 color: #1a9cdb;
1741 }
1742
1743 /* Global typo and color Start */
1744 .pagelayer-elp-global-typo .pli:hover,
1745 .pagelayer-global-setting-color .pli:hover{
1746 color: #137dc5;
1747 }
1748
1749 .pagelayer-active-global{
1750 color: #137dc5;
1751 }
1752
1753 .pagelayer-global-selected,
1754 .pagelayer-global-font-list-item:hover,
1755 .pagelayer-global-color-list-item:hover{
1756 background: #f9f9f9;
1757 }
1758
1759 .pagelayer-global-selected:after{
1760 content: "\ea10";
1761 font-family: 'pagelayer', "Font Awesome 5 Free" !important;
1762 color: #137dc5;
1763 }
1764
1765 .pagelayer-global-font-list,
1766 .pagelayer-global-color-list{
1767 position: absolute;
1768 background: #fff;
1769 padding: 10px 0;
1770 z-index: 9999;
1771 border-radius: 4px;
1772 right: 0;
1773 top: 35px;
1774 width: 250px;
1775 max-height: 350px;
1776 overflow-y: auto;
1777 font-size: 12px;
1778 box-shadow: 0px 0px 13px rgb(0 0 0 / 30%);
1779 }
1780
1781 .pagelayer-global-color-list{
1782 display:none
1783 }
1784
1785 .pagelayer-global-font-list-item,
1786 .pagelayer-global-color-list-item{
1787 display: flex;
1788 padding: 10px 20px;
1789 cursor: pointer;
1790 }
1791
1792 .pagelayer-global-font-list-item .pagelayer-global-font-title,
1793 .pagelayer-global-color-list-item .pagelayer-global-color-title{
1794 flex: 1;
1795 }
1796
1797 .pagelayer-global-color-list-item .pagelayer-global-color-pre{
1798 position: relative;
1799 border: 1px solid #f1f1f1;
1800 margin-right: 7px;
1801 padding: 1px;
1802 background-clip: content-box;
1803 }
1804
1805 .pagelayer-global-color-list-item .pagelayer-global-color-pre:before{
1806 content: '';
1807 padding: 0px 10px;
1808 background-color: #ff000000;
1809 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=);
1810 -webkit-background-size: 12px 12px;
1811 background-size: 6px 6px;
1812 position: relative;
1813 z-index: -1;
1814 }
1815
1816 .pagelayer-global-setting-color{
1817 position: relative;
1818 box-shadow: 0 1px 2px #d2cfcf;
1819 padding: 10px 4px;
1820 margin-bottom: 5px;
1821 margin-top: -10px;
1822 cursor: default;
1823 }
1824
1825 .pagelayer-global-setting-color b{
1826 margin-left: 11px;
1827 }
1828
1829 .pagelayer-global-setting-color .pli{
1830 right: 15px;
1831 position: absolute;
1832 cursor: pointer;
1833 }
1834
1835 .pagelayer-elp-typo-icons .pli-service{
1836 cursor: pointer;
1837 }
1838
1839 .pagelayer-typo-default{
1840 display:none;
1841 width: 20px;
1842 height: 20px;
1843 cursor: pointer;
1844 margin-left: 4px;
1845 }
1846
1847 .pagelayer-global-on .pagelayer-elp-typo:not([pagelayer-set-global]):hover .pagelayer-typo-default{
1848 display: inline-block;
1849 }
1850 /* Global typo and color End */
1851 [pagelayer-wrap-id].wp-block{
1852 margin-bottom: 0;
1853 margin-top: 0;
1854 }
1855
1856 .wp-block-pagelayer-pl-col>.pagelayer-col{
1857 width:100%;
1858 }
1859
1860 .pagelayer-modal-content,
1861 .pagelayer-splash-container{
1862 position: relative;
1863 height: 500px
1864 }
1865
1866 .is-selected .pagelayer-iconbox .pagelayer-box-link,
1867 .is-selected .pagelayer-service .pagelayer-box-link{
1868 pointer-events: none;
1869 }
1870
1871 .pagelayer-image-hotspot-holder .pagelayer-icon-holder [data-type="pagelayer/pl-hotspot"] {
1872 position: unset;
1873 }
1874
1875 /* Image map start */
1876 .pagelayer-imgmap-toolbar,
1877 .pagelayer-imgmap-navigator-item-drag,
1878 .pagelayer-imgmap-navigator-title{
1879 display: flex;
1880 }
1881
1882 .pagelayer-imgmap-toolbar {
1883 position: absolute !important;
1884 left: 10px;
1885 top: 0;
1886 background: #ffffffb0;
1887 border-radius: 6px;
1888 padding: 4px;
1889 }
1890
1891 .pagelayer-imgmap-toolbar-item,
1892 .pagelayer-map-navigator-trigger,
1893 .pagelayer-map-list-trigger{
1894 width: 24px;
1895 padding: 6px;
1896 border: none;
1897 color: #666161 !important;
1898 cursor: pointer;
1899 display: inline-block;
1900 border-radius: 0;
1901 background: transparent !important;
1902 font-size: 12px;
1903 margin: auto;
1904 }
1905
1906 .pagelayer-imgmap-toolbar-mover{
1907 padding: 2px;
1908 background: gray;
1909 border-radius: 10px;
1910 cursor: move;
1911 }
1912
1913 .pagelayer-imgmap-toolbar.pagelayer-imgmap-selected .pagelayer-map_append,
1914 .pagelayer-imgmap-toolbar:not(.pagelayer-imgmap-edit) .pagelayer-map_save,
1915 .pagelayer-imgmap-toolbar:not(.pagelayer-imgmap-edit) .pagelayer-map_remove,
1916 .pagelayer-imgmap-toolbar:not(.pagelayer-imgmap-edit) .pagelayer-map_href,
1917 .pagelayer-imgmap-toolbar:not(.pagelayer-imgmap-edit) .pagelayer-map_edit,
1918 .pagelayer-imgmap-toolbar.pagelayer-imgmap-edit .pagelayer-map_append,
1919 .pagelayer-imgmap-toolbar.pagelayer-imgmap-edit .pagelayer-map_edit{
1920 display: none;
1921 }
1922
1923 .pagelayer-imgmap-toolbar.pagelayer-imgmap-selected .pagelayer-map_edit,
1924 .pagelayer-imgmap-toolbar.pagelayer-imgmap-selected .pagelayer-map_remove{
1925 display: block;
1926 }
1927
1928 .pagelayer-imgmap-toolbar-link {
1929 position: absolute;
1930 width: max-content;
1931 padding: 2px 5px 3px 5px;
1932 background: #ffffffb0;
1933 border-radius: 6px;
1934 margin: 28px 0 0 0;
1935 display: none;
1936 }
1937
1938 .pagelayer-imgmap-toolbar-link input {
1939 width: 180px;
1940 font-size: 12px;
1941 padding: 2px !important;
1942 }
1943
1944 .pagelayer-imgmap-save-link {
1945 padding: 4px 6px;
1946 font-size: 12px;
1947 font-weight: bold;
1948 border-radius: 6px;
1949 margin: 0 0 0 6px;
1950 cursor: pointer;
1951 }
1952
1953 .pagelayer-imgmap-hover-active .pagelayer-imgmap-item {
1954 cursor: pointer;
1955 opacity: 0;
1956 }
1957
1958 .pagelayer-map-item-active_is_editable{
1959 opacity: 1;
1960 }
1961
1962 .pagelayer-imgmap-coord {
1963 position: absolute;
1964 background: #bfbfbf;
1965 top: 0;
1966 border-radius: 100%;
1967 margin-top: -5px;
1968 width: 10px;
1969 height: 10px;
1970 border: 2px solid #000000bf;
1971 margin-left: -5px;
1972 cursor: pointer;
1973 display: none;
1974 }
1975
1976 span.pagelayer-imgmap-remove-cord {
1977 padding: 5px 6px;
1978 position: absolute;
1979 top: 11px;
1980 background: #fff;
1981 font-size: 12px;
1982 border-radius: 5px;
1983 left: -8px;
1984 color: gray;
1985 cursor: pointer;
1986 z-index: 999;
1987 display: none;
1988 }
1989
1990 .pagelayer-imgmap-remove-cord::after {
1991 content: '';
1992 padding: 4px;
1993 position: absolute;
1994 top: -4px;
1995 background: inherit;
1996 transform: rotate(47deg);
1997 left: 7px;
1998 }
1999
2000 .pagelayer-imgmap-coord:hover > .pagelayer-imgmap-remove-cord,
2001 .pagelayer-imgmap-coord.pagelayer-mapele-dragging{
2002 display: block;
2003 }
2004
2005 .pagelayer-imgmap-coord.pagelayer-mapele-dragging span{
2006 display: none !important;
2007 }
2008
2009 .pagelayer-imgmap-navigator {
2010 position: absolute;
2011 width: 245px;
2012 background: #f6f6f8;
2013 top: 38px;
2014 border-radius: 2px;
2015 padding: 1px 4px 6px 4px;
2016 box-shadow: 0px 0px 4px -1px #666;
2017 display: none;
2018 }
2019
2020 .pagelayer-imgmap-navigator-close {
2021 position: absolute;
2022 right: 12px;
2023 top: 9px;
2024 cursor: pointer;
2025 }
2026
2027 .pagelayer-imgmap-navigator-wrap {
2028 height: 162px;
2029 overflow-y: auto;
2030 scrollbar-width: thin;
2031 resize: vertical;
2032 padding: 2px 0;
2033 }
2034
2035 .pagelayer-imgmap-navigator-item {
2036 display: grid;
2037 grid-template-columns: 30px auto 86px;
2038 background: #fff;
2039 color: #4f4f4f;
2040 padding: 4px;
2041 font-size: 12px;
2042 margin: 6px 4px;
2043 border-radius: 4px;
2044 border: 1px solid #d9d9d9;
2045 }
2046
2047 .pagelayer-imgmap-navigator-item:first-child {
2048 margin-top: 0;
2049 }
2050
2051 .pagelayer-imgmap-navigator-header {
2052 text-align: left;
2053 padding: 4px 6px;
2054 font-size: 12px;
2055 font-weight: bolder;
2056 }
2057
2058 .pagelayer-imgmap-navigator-title {
2059 text-align: left;
2060 }
2061
2062 .pagelayer-imgmap-navigator-item-drag i{
2063 margin: auto;
2064 }
2065
2066 .pagelayer-imgmap-navigator-title{
2067 align-self: center;
2068 }
2069
2070 .pagelayer-map-navigator-trigger{
2071 width: 18px;
2072 }
2073
2074 .pagelayer-navigator-item-active {
2075 outline: 1px solid #ff6b6b;
2076 }
2077 /* image map end*/
2078
2079 /* Fix device icon overlapping/showing on top of select and input fields */
2080 .pagelayer-elp-screen {
2081 flex-shrink: 0 !important;
2082 }
2083
2084 .pagelayer-form-item:has(.pagelayer-elp-select-div) .pagelayer-elp-label-div,
2085 .pagelayer-form-item:has(.pagelayer-elp-spinner-div) .pagelayer-elp-label-div,
2086 .pagelayer-form-item:has(.pagelayer-elp-color-div-holder) .pagelayer-elp-label-div,
2087 .pagelayer-form-item:has(.pagelayer-elp-color-div) .pagelayer-elp-label-div,
2088 .pagelayer-base-control:has(.pagelayer-elp-select-div) .pagelayer-elp-label-div,
2089 .pagelayer-base-control:has(.pagelayer-elp-spinner-div) .pagelayer-elp-label-div,
2090 .pagelayer-base-control:has(.pagelayer-elp-color-div-holder) .pagelayer-elp-label-div,
2091 .pagelayer-base-control:has(.pagelayer-elp-color-div) .pagelayer-elp-label-div {
2092 max-width: 45% !important;
2093 flex-wrap: wrap !important;
2094 padding-right: 10px !important;
2095 box-sizing: border-box !important;
2096 }
2097
2098 .pagelayer-elp-typo {
2099 display: flex !important;
2100 align-items: center !important;
2101 justify-content: space-between !important;
2102 flex-wrap: wrap !important;
2103 }
2104
2105 .pagelayer-elp-typo .pagelayer-elp-label {
2106 width: 48% !important;
2107 max-width: 48% !important;
2108 display: flex !important;
2109 align-items: center !important;
2110 flex-wrap: wrap !important;
2111 gap: 6px !important;
2112 margin-bottom: 0 !important;
2113 padding-right: 8px !important;
2114 box-sizing: border-box !important;
2115 }
2116
2117 .pagelayer-elp-typo .pagelayer-elp-typo-input {
2118 width: 48% !important;
2119 max-width: 48% !important;
2120 }
2121
2122 /* Fix restore/revert default icon position to sit in front of select/input field and be vertically aligned */
2123 .pagelayer-elp-label-div,
2124 .pagelayer-elp-link-label-div,
2125 .pagelayer-elp-typo .pagelayer-elp-label {
2126 position: static !important;
2127 }
2128
2129 .pagelayer-elp-default,
2130 .pagelayer-typo-default {
2131 position: absolute !important;
2132 right: calc(50% + 8px) !important;
2133 top: 9px !important;
2134 transform: none !important;
2135 left: auto !important;
2136 margin: 0 !important;
2137 z-index: 5 !important;
2138 }
2139
2140 .pagelayer-form-item:hover .pagelayer-elp-default[data_show=true],
2141 .pagelayer-base-control:hover .pagelayer-elp-default[data_show=true] {
2142 display: inline-block !important;
2143 }
2144
2145 /* Fix link input field and gear icon alignment to form a unified input group */
2146 .pagelayer-elp-link-div {
2147 display: flex !important;
2148 align-items: stretch !important;
2149 flex-wrap: wrap !important;
2150 width: 100% !important;
2151 }
2152
2153 .pagelayer-elp-link-div input.pagelayer-elp-link {
2154 flex: 1 1 auto !important;
2155 width: 0 !important;
2156 height: 32px !important;
2157 border: 1px solid #cbd5e1 !important;
2158 border-right: none !important;
2159 border-radius: 4px 0 0 4px !important;
2160 box-sizing: border-box !important;
2161 padding: 6px 10px !important;
2162 font-size: 13px !important;
2163 background-color: #fff !important;
2164 margin: 0 !important;
2165 }
2166
2167 .pagelayer-dark .pagelayer-elp-link-div input.pagelayer-elp-link {
2168 background-color: #252529 !important;
2169 border-color: #475569 !important;
2170 color: #cbd5e1 !important;
2171 }
2172
2173 .pagelayer-elp-link-div i.pagelayer-elp-link-icon {
2174 flex: 0 0 auto !important;
2175 width: 36px !important;
2176 height: 32px !important;
2177 border: 1px solid #cbd5e1 !important;
2178 border-radius: 0 4px 4px 0 !important;
2179 box-sizing: border-box !important;
2180 background-color: #f8fafc !important;
2181 color: #64748b !important;
2182 cursor: pointer !important;
2183 display: flex !important;
2184 align-items: center !important;
2185 justify-content: center !important;
2186 margin: 0 !important;
2187 position: static !important;
2188 font-size: 14px !important;
2189 line-height: normal !important;
2190 transition: background-color 0.15s ease, color 0.15s ease !important;
2191 }
2192
2193 .pagelayer-elp-link-div i.pagelayer-elp-link-icon:hover {
2194 background-color: #f1f5f9 !important;
2195 color: #2563eb !important;
2196 }
2197
2198 .pagelayer-dark .pagelayer-elp-link-div i.pagelayer-elp-link-icon {
2199 background-color: #1e1e24 !important;
2200 border-color: #475569 !important;
2201 color: #94a3b8 !important;
2202 }
2203
2204 .pagelayer-dark .pagelayer-elp-link-div i.pagelayer-elp-link-icon:hover {
2205 background-color: #2d2d34 !important;
2206 color: #3b82f6 !important;
2207 }
2208
2209 .pagelayer-elp-link-no-addons > .pagelayer-elp-link {
2210 border-radius: 4px !important;
2211 border-right: 1px solid #cbd5e1 !important;
2212 }
2213
2214 .pagelayer-dark .pagelayer-elp-link-no-addons > .pagelayer-elp-link {
2215 border-right-color: #475569 !important;
2216 }
2217
2218 .pagelayer-elp-link-div .pagelayer-elp-link-addons {
2219 width: 100% !important;
2220 margin-right: 0 !important;
2221 }
2222
2223 .pagelayer-elp-link-div .pagelayer-elp-link-list {
2224 width: 100% !important;
2225 }
2226
2227 /* Match sidebar top header section and bottombar section background in dark mode */
2228 .pagelayer-dark td.pagelayer-topbar-holder,
2229 .pagelayer-dark .pagelayer-bottombar-row {
2230 background: #0b0f19 !important;
2231 }
2232
2233 .pagelayer-dark td.pagelayer-topbar-holder {
2234 border-bottom: 1px solid #1e293b !important;
2235 }
2236
2237 .pagelayer-dark .pagelayer-bottombar-holder {
2238 border-top: 1px solid #1e293b !important;
2239 background: #0b0f19 !important;
2240 }