PluginProbe
Page Builder: Pagelayer – Drag and Drop website builder / 2.1.3
Page Builder: Pagelayer – Drag and Drop website builder v2.1.3
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.3, at css/pagelayer-blocks.css

2,070 lines 44.2 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 #00A0D2;
41 font-weight: unset;
42 font-size: 12px;
43 margin:5px;
44 min-height: unset;
45 background-color: #00A0D2;
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: #00A0D2bf;
56 border-color: #00A0D2;
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: #3E8EF7;
149 }
150
151 .pagelayer-elp-screen .pagelayer-prop-screen:hover{
152 color: #3E8EF7;
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: #00A0D2;
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 }
619
620 .pagelayer-elp-gradient-color{
621 padding: 15px 0px !important;
622 }
623
624 .pagelayer-elp-prop-grp .pagelayer-elp-color-div{
625 right: 0;
626 }
627
628 .pagelayer-elp-typo-fonts .pagelayer-elp-label,
629 .pagelayer-elp-typo .pagelayer-elp-label,
630 .pagelayer-elp-typo .pagelayer-elp-typo-input,
631 .pagelayer-elp-shadow-div .pagelayer-elp-shadow-input,
632 .pagelayer-elp-shadow-div .pagelayer-elp-label,
633 .pagelayer-elp-prop-grp>label, .pagelayer-elp-prop-grp>input{
634 width: 50%;
635 }
636 /* Box-shaow Control End */
637 /* Image Control Start */
638 .pagelayer-elp-image-div{
639 height: 130px;
640 border-radius: 3px;
641 border: 1px solid #e6e7e9;
642 position: relative;
643 background-color: #fafafa;
644 background-position: center;
645 background-repeat: no-repeat;
646 background-size: cover;
647 }
648
649 .pagelayer-elp-remove-image{
650 font-size: 8px;
651 color: #4f4f4f;
652 background: #ffffffa1;
653 border-radius: 100%;
654 padding: 5px;
655 line-height: 0;
656 box-shadow: 0 0 4px #79797966;
657 cursor: pointer;
658 position: absolute;
659 right: 4px;
660 top: 4px;
661 }
662
663 .pagelayer-elp-image-div:not(.pagelayer-has-image) .pagelayer-elp-remove-image{
664 display: none;
665 }
666
667 .pagelayer-elp-image-div.pagelayer-has-image .pagelayer-elp-add-image{
668 display: none;
669 }
670
671 .pagelayer-elp-add-image{
672 display: flex;
673 align-items: center;
674 justify-content: center;
675 height: 100%;
676 cursor: pointer;
677 }
678
679 .pagelayer-elp-add-image i{
680 font-size: 14px;
681 color: #4f4f4f;
682 background: #ffffff;
683 border-radius: 100%;
684 padding: 3px;
685 box-shadow: 0 0 4px #79797966;
686 }
687 /* Image Control End */
688 /* Dimension Control Start */
689 .pagelayer-elp-dimension-div i.pli{
690 padding:8px 11px;
691 border: 1px solid #d1d1d1;
692 border-left:0px !important;
693 cursor: pointer;
694 background: #FFF;
695 vertical-align:top;
696 font-size: 12px;
697 border-top-right-radius: 3px;
698 border-bottom-right-radius: 3px;
699 }
700
701 .pagelayer-elp-dimension-linked{
702 background: #1a7fb0 !important;
703 color: #fff !important;
704 border: 1px solid #1a7fb0 !important;
705 }
706
707 .pagelayer-elp-dimension:first-child{
708 border-top-left-radius: 3px;
709 border-bottom-left-radius: 3px;
710 }
711
712 .pagelayer-elp-dimension{
713 width:42% !important;
714 margin-right: 0px;
715 margin-left: 0px;
716 }
717 /* Dimension Control End */
718 /* Icon Control Start */
719 .pagelayer-elp-icon-div{
720 cursor: pointer;
721 padding: 6px;
722 border: solid 1px #d1d1d1;
723 background: #fffffc;
724 color: #333;
725 vertical-align: middle;
726 width: 126px;
727 height: 18px;
728 display: block;
729 border-radius: 4px;
730 margin: 0 auto;
731 position: absolute;
732 top: 7px;
733 right: 10px;
734 box-sizing: content-box;
735 }
736
737 .pagelayer-elp-icon-preview{
738 position: relative;
739 display: block;
740 margin-right: 5px;
741 float: left;
742 width: 75%;
743 height: auto;
744 border: none;
745 overflow: hidden;
746 white-space: nowrap;
747 text-overflow: ellipsis;
748 }
749
750 .pagelayer-elp-icon-preview i{
751 padding-right: 5px;
752 font-size: 19px;
753 color: #666;
754 vertical-align: middle;
755 }
756
757 .pagelayer-elp-icon-name{
758 font-size: 13px;
759 }
760
761 .pagelayer-elp-icon-open,
762 .pagelayer-elp-icon-close{
763 float: right;
764 font-size: 10px;
765 padding: 0px;
766 line-height: 20px;
767 }
768
769 .pagelayer-elp-icon-close{
770 padding-right: 5px;
771 font-size: 12px;
772 }
773
774 .pagelayer-elp-icon-selector{
775 position: absolute;
776 z-index: 1000;
777 border: 1px solid rgba(0,0,0,0.2) !important;
778 background: #fff !important;
779 box-shadow: 0 3px 5px rgba(0,0,0,0.2) !important;
780 -webkit-border-radius: 2px !important;
781 text-shadow: none !important;
782 padding: 5px;
783 height: auto;
784 box-sizing: border-box;
785 width: 80%;
786 border-radius: 2px;
787 margin: 0 0 0 auto;
788 top: 40px;
789 right: 10px;
790 }
791
792 .pagelayer-elp-search-icon{
793 margin-bottom: 5px !important;
794 padding: 2px 6px;
795 line-height: 20px !important;
796 border-radius: 3px !important;
797 }
798
799 .pagelayer-elp-icon-list{
800 width: 100%;
801 -moz-box-sizing: border-box;
802 -webkit-box-sizing: border-box;
803 box-sizing: border-box;
804 padding: 0;
805 max-height: 183px;
806 overflow-y: auto;
807 }
808
809 .pagelayer-elp-icon-list::-webkit-scrollbar {
810 -webkit-appearance: none;
811 }
812
813 .pagelayer-elp-icon-list::-webkit-scrollbar:vertical {
814 width: 10px;
815 }
816
817 .pagelayer-elp-icon-list::-webkit-scrollbar-thumb {
818 border-radius: 8px;
819 border: 2px solid white;
820 background-color: rgba(0, 0, 0, .5);
821 }
822
823 .pagelayer-elp-icon-list::-webkit-scrollbar-track {
824 background-color: #fff;
825 border-radius: 8px;
826 }
827
828 .pagelayer-elp-icon-span{
829 display: block;
830 margin: 2px;
831 cursor: pointer;
832 box-sizing: border-box;
833 border: 1px solid #dbdbdb;
834 transition: all 0.3s;
835 font-size: 13px;
836 padding: 3px;
837 }
838
839 .pagelayer-elp-icon-span:hover{
840 border-color: #00A0D2;
841 background-color: #3e8ef7;
842 color: #ffffff;
843 box-shadow: 0px 1px 1px #3e8ef7bf;
844 }
845
846 .pagelayer-elp-icon-span i{
847 font-size: 15px;
848 line-height: 1em;
849 padding: 3px;
850 color: #555;
851 transition: all 0.3s;
852 vertical-align: middle;
853 }
854
855 .pagelayer-elp-icon-span:hover i{
856 color: #ffffff;
857 }
858
859 .pagelayer-elp-icon-type{
860 display:flex;
861 flex-grow:1;
862 text-align:center;
863 }
864
865 .pagelayer-elp-icon-type p{
866 flex-grow: 1;
867 padding: 5px 0;
868 margin: 0 0 3px;
869 cursor: pointer;
870 font-size: 12px;
871 background: #999;
872 color: #ffffff;
873 border: 1px solid #777;
874 }
875
876 .pagelayer-elp-icon-type p.active{
877 background-color:#666666;
878 }
879
880 .pagelayer-elp-icon-sets{
881 line-height: 27px;
882 height: 27px;
883 border-radius: 4px;
884 margin: 5px 0;
885 }
886 /* Icon Control End */
887 /* Media Control Start */
888 .pagelayer-elp-input-icon{
889 position: relative;
890 }
891
892 .pagelayer-elp-input-icon input{
893 width: 85%;
894 border-radius: 3px 0 0 3px !important;
895 margin-left: 0px;
896 margin-right: 1px;
897 }
898
899 .pagelayer-elp-input-icon i.pli{
900 padding:1px 10px;
901 position:relative;
902 top:0px;
903 border: 1px solid #8c8f94;
904 border-left:0px;
905 cursor: pointer;
906 background:#FFF;
907 line-height:26px !important;
908 font-size: 13px;
909 margin-left: -1px;
910 }
911 /* Media Control End */
912 /* Property link start*/
913 .pagelayer-elp-link-list{
914 max-height:250px;
915 overflow:auto;
916 width: 99%;
917 top: 35px;
918 position: absolute;
919 z-index: 1000;
920 border: 1px solid rgba(0,0,0,0.2) !important;
921 background: #fff !important;
922 box-shadow: 0 3px 5px rgba(0,0,0,0.2) !important;
923 -webkit-border-radius: 2px !important;
924 text-shadow: none !important;
925 padding: 5px;
926 height: auto;
927 box-sizing: border-box;
928 display: none;
929 border-radius: 2px;
930 margin: 0 0 0 auto;
931 }
932
933 .pagelayer-elp-link-list .pagelayer-elp-link-search{
934 width:100%;
935 }
936
937 .pagelayer-elp-link-item{
938 display: flex;
939 font-size: 13px;
940 padding: 7px 2px;
941 margin: 2px 0;
942 cursor: pointer;
943 align-items:center;
944 }
945
946 .pagelayer-elp-link-item:hover{
947 box-shadow: inset 0 0 0 1px #555d66, inset 0 0 0 2px #fff;
948 border-radius: 4px;
949 }
950
951 .pagelayer-elp-link-item span{
952 text-overflow: ellipsis;
953 display: inline-block;
954 overflow: hidden;
955 white-space: nowrap;
956 width: 100%;
957 padding:3px;
958 }
959
960 .pagelayer-elp-link-item-title{
961 font-weight:bold;
962 }
963
964 .pagelayer-elp-link-item-perma{
965 color:#999;
966 }
967
968 .pagelayer-elp-link-title{
969 width: 73%;
970 margin-right:2%;
971 }
972
973 .pagelayer-elp-link-info{
974 width: 20%;
975 background-color: #ededed;
976 padding: 2px;
977 font-size:11px;
978 }
979
980 .pagelayer-elp-link-id{
981 background-color: #ededed;
982 padding: 2px 6px;
983 font-size:12px;
984 margin-left:5px;
985 }
986
987 .pagelayer-elp-link-info span{
988 padding: 4px;
989 }
990
991 .pagelayer-elp-link-div .pagelayer-elp-link-cb-div{
992 display: flex;
993 justify-content: space-between;
994 align-items: center;
995 padding-top: 5px;
996 }
997
998 .pagelayer-elp-link-div .pagelayer-elp-link-ca,
999 .pagelayer-elp-link-div .pagelayer-elp-link-cb-div{
1000 margin-top: 10px;
1001 }
1002
1003 .pagelayer-elp-link-ca input{
1004 width: 100%;
1005 margin: 5px 0px;
1006 }
1007
1008 .pagelayer-elp-link-desc{
1009 color:#757575;
1010 font-size: 13px;
1011 line-height: 20px;
1012 font-style: italic;
1013 margin-top: 5px;
1014 display:block;
1015 word-break: break-word;
1016 }
1017 /* Property link end*/
1018 /* Multi Images start */
1019 .pagelayer-elp-multi_image{
1020 padding: 3px;
1021 width: 60%;
1022 margin: 5px auto;
1023 border: 1px solid #d5dadf;
1024 position: relative;
1025 text-align: center;
1026 background: #4CBCDF;
1027 color: #fff;
1028 font-size: 13px;
1029 cursor: pointer;
1030 height: 100%;
1031 -webkit-background-size: cover;
1032 background-size: cover;
1033 background-position: 50%;
1034 }
1035
1036 .pagelayer-elp-multi_image-thumbs{
1037 margin-top:10px;
1038 }
1039
1040 .pagelayer-elp-multi_image-thumb{
1041 display: inline-block;
1042 width: 44px;
1043 height: 44px;
1044 background-size: cover;
1045 background-position: 50% 50%;
1046 margin: 0 7px 0 0;
1047 border: 2px solid #d5dadf;
1048 }
1049 /* Multi Images end*/
1050 /* Typo start*/
1051 .pagelayer-elp-typo-fonts .pagelayer-elp-label,
1052 .pagelayer-elp-typo .pagelayer-elp-label{
1053 font-weight: 600;
1054 font-size: 11px;
1055 color: #555;
1056 }
1057
1058 .pagelayer-elp-global-typo{
1059 box-shadow: 0 2px 2px -1px #d2cfce;
1060 margin: 0px -10px 0 -10px;
1061 padding: 8px 10px;
1062 display: flex;
1063 }
1064
1065 [pagelayer-screen-mode="desktop"] [pagelayer-show-device]:not([pagelayer-show-device="desktop"]),
1066 [pagelayer-screen-mode="tablet"] [pagelayer-show-device]:not([pagelayer-show-device="tablet"]),
1067 [pagelayer-screen-mode="mobile"] [pagelayer-show-device]:not([pagelayer-show-device="mobile"]){
1068 display:none;
1069 }
1070
1071 .pagelayer-elp-global-typo .pagelayer-elp-typo-icons{
1072 flex: 1;
1073 display: flex;
1074 align-items: center;
1075 justify-content: flex-end;
1076 width: 50%;
1077 }
1078
1079 .pagelayer-elp-global-typo .pagelayer-global-font-list{
1080 width: 100%;
1081 }
1082
1083 .pagelayer-elp-typo-icons .pagelayer-elp-global-icon{
1084 margin-right: 10px;
1085 cursor: pointer;
1086 }
1087
1088 .pagelayer-elp-typo select.pagelayer-elp-typo-input,
1089 .pagelayer-elp-typo-input,
1090 .pagelayer-elp-shadow-input{
1091 padding: 3px;
1092 border-radius: 4px !important;
1093 line-height: 23px !important;
1094 }
1095
1096 /* Typo end*/
1097 /* Multi Select Property */
1098 .pagelayer-elp-multiselect{
1099 min-height: 30px;
1100 font-size: 13px !important;
1101 color: #666;
1102 border-radius: unset;
1103 border:1px solid #CCC;
1104 line-height: 26px;
1105 width: 100%;
1106 }
1107
1108 .pagelayer-elp-multiselect-ul{
1109 list-style:none;
1110 padding:0;
1111 margin:0;
1112 border: 1px solid #CCC;
1113 border-radius: 0 0 5px 5px;
1114 border-top:none;
1115 position:absolute;
1116 background: rgb(255, 255, 255) !important;
1117 z-index:1;
1118 width:100%;
1119 }
1120
1121 .pagelayer-elp-multiselect-option{
1122 font-size:13px;
1123 padding:4px 8px;
1124 cursor:pointer;
1125 margin: 0;
1126 }
1127
1128 .pagelayer-elp-multiselect-option[data-selected="selected"]{
1129 background: #f2f2f2;
1130 }
1131
1132 .pagelayer-elp-multiselect-remove{
1133 color: #f2f2f2;
1134 padding-left: 2px;
1135 cursor: pointer;
1136 }
1137
1138 .pagelayer-elp-multiselect-selected{
1139 padding: 3px 5px;
1140 border-radius: 5px;
1141 margin: 2px;
1142 background: #44a9db;
1143 line-height: 13px;
1144 font-size: 13px;
1145 color: #fff;
1146 }
1147
1148 .pagelayer-elp-multiselect{
1149 display: flex;
1150 flex-wrap: wrap;
1151 padding: 5px;
1152 border-radius: 3px;
1153 }
1154
1155 /* Multi Select Property end*/
1156 .pagelayer-anchor{
1157 background-image:url(../images/anchor.png);
1158 height:30px;
1159 background-position: center center;
1160 background-repeat: no-repeat;
1161 background-size: cover;
1162 }
1163 /* splash start */
1164 .pagelayer-splash {
1165 background-image: url(../images/splash.png);
1166 height: 30px;
1167 background-position: center center;
1168 background-repeat: no-repeat;
1169 background-size: cover;
1170 }
1171 /* splash end */
1172
1173 /* space start */
1174 .pagelayer-space-holder {
1175 background: url(../images/space.png);
1176 background-repeat: repeat;
1177 background-repeat: repeat;
1178 }
1179 /* space end */
1180
1181 /* Filter prop start*/
1182 .pagelayer-elp-filter-blur .pagelayer-elp-filter-input {
1183 background-image: url('data:image/png;base64,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') !important;
1184 }
1185
1186 .pagelayer-elp-filter-brightness input {
1187 background-image: linear-gradient(90deg,#000,#fff);
1188 }
1189
1190 .pagelayer-elp-filter-contrast input {
1191 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;
1192 }
1193
1194 .pagelayer-elp-filter-grayscale input {
1195 background-image: linear-gradient(90deg, rgba(203,20,106,1) 0%, rgba(88,88,88,1) 56%);
1196 }
1197
1198 .pagelayer-elp-filter-hue input {
1199 background-image: linear-gradient(90deg,red,orange,#ff0,#adff2f,#32cd32,#00bfff,blue,#9400d3 95%);
1200 }
1201
1202 .pagelayer-elp-filter-opacity input {
1203 background-image: linear-gradient(90deg,#fff,#000);
1204 }
1205
1206 .pagelayer-elp-filter-saturate input {
1207 background-image: linear-gradient(90deg,gray,red);
1208 }
1209 /* Filter prop end*/
1210 /* Access prop start*/
1211 .pagelayer-elp-modal,
1212 .pagelayer-elp-access{
1213 cursor: pointer;
1214 padding: 10px;
1215 display: block;
1216 margin: 0 auto;
1217 position: absolute;
1218 font-size:1.5rem;
1219 top: 0px;
1220 right: 12px;
1221 color: #333;
1222 vertical-align: middle;
1223 }
1224
1225 .pagelayer-elp-access .pli-caret-right{
1226 font-size: 18px;
1227 line-height: 1.5;
1228 }
1229
1230 .pagelayer-elp-access .pli-caret-right:hover{
1231 color: #3e8ef7;
1232 }
1233
1234 .pagelayer-elp-access .pli-caret-open:before{
1235 content: "\f0d7" !important;
1236 }
1237
1238 .pagelayer-elp-access-holder{
1239 position: absolute;
1240 border: 1px solid #ccc;
1241 top: 42px;
1242 background: #fff;
1243 z-index: 100;
1244 width: 95%;
1245 box-shadow: 0 0 15px -5px;
1246 padding: 5px 10px;
1247 }
1248 /* Access prop end*/
1249
1250 /* Property modal start*/
1251 .pagelayer-elp-modal-wrapper{
1252 position: fixed !important;
1253 top: 0 !important;
1254 bottom: 0 !important;
1255 left: 0 !important;
1256 right: 0 !important;
1257 overflow-y: auto;
1258 background: #0000009c;
1259 z-index: 999;
1260 transform: none !important;
1261 }
1262
1263 .pagelayer-elp-modal-wrapper .components-popover__content{
1264 max-height: 100% !important;
1265 height: 100% !important;
1266 width: 100% !important;
1267 background: transparent;
1268 }
1269
1270 .pagelayer-elp-modal-wrap{
1271 width: 500px;
1272 background-color: #fff;
1273 position: relative;
1274 margin: 20px auto 50px;
1275 border-radius: 5px;
1276 box-shadow: 0px 0px 7px 0px #fff;
1277 }
1278
1279 .pagelayer-elp-modal-close{
1280 float:right;
1281 padding: 5px;
1282 cursor:pointer
1283 }
1284
1285 .pagelayer-elp-modal-header{
1286 padding:15px 20px 10px;
1287 margin-top: 10px;
1288 font-size: 13px;
1289 font-weight: bold;
1290 color: #555;
1291 }
1292
1293 .pagelayer-elp-modal-holder{
1294 padding: 20px;
1295 }
1296
1297 .pagelayer-elp-modal-holder > *{
1298 padding: 5px 0;
1299 }
1300
1301 /* Property modal end*/
1302 /* Options start*/
1303 .pagelayer-elp-text-div input,
1304 .pagelayer-elp-spinner-div input,
1305 .pagelayer-elp-textarea-div textarea{
1306 width: 100%;
1307 }
1308 /* Options end*/
1309
1310 /* Video widget start*/
1311 .pagelayer-video-edit {
1312 position: absolute;
1313 font-size: 13px;
1314 right: 4px;
1315 top: 4px;
1316 padding: 2px 6px;
1317 border-radius: 4px;
1318 color: #fff;
1319 background: #000;
1320 box-shadow: 0px 0px 4px 2px #d0d0e1;
1321 cursor: pointer;
1322 display: none;
1323 }
1324
1325 .pagelayer-video-edit:hover {
1326 background: #008eba;
1327 }
1328
1329 .pagelayer-video:hover .pagelayer-video-edit{
1330 display: block;
1331 }
1332 /* Video widget end*/
1333 /* Column Widget Start*/
1334 .pagelayer-row{
1335 min-height:20px;
1336 }
1337
1338 .pagelayer-col{
1339 align-content: stretch;
1340 }
1341
1342 .pagelayer-col-holder:not(.pagelayer-has-child) .block-list-appender{
1343 outline: 1px dashed #abb3bb;
1344 }
1345
1346 .pagelayer-col .block-editor-button-block-appender{
1347 box-shadow: none !important;
1348 }
1349 /* Column Widget End*/
1350
1351 /* Pagelayer row (variation) start*/
1352 .pagelayer-variation-div {
1353 width: 100%;
1354 }
1355
1356 .pagelayer-variation-div .components-button.is-secondary,
1357 .pagelayer-variation-div .block-editor-block-variation-picker {
1358 box-shadow: none;
1359 outline: 1px dashed #abb3bb;
1360 }
1361
1362 .pagelayer-variation-div .editor-styles-wrapper .block-editor-block-variation-picker{
1363 box-shadow: none !important;
1364 }
1365
1366 .pagelayer-variation-div .block-editor-block-variation-picker .components-placeholder__fieldset {
1367 max-width: 100% !important;
1368 align-items: center;
1369 }
1370
1371 .pagelayer-variation-div .block-editor-block-variation-picker__variations {
1372 justify-content: center;
1373 }
1374
1375 .pagelayer-variation-div .components-button svg,
1376 .pagelayer-variation-div .components-button.is-secondary svg,
1377 .pagelayer-variation-div .components-button.is-tertiary svg,
1378 .pagelayer-variation-div .components-button:hover:not(:disabled) svg {
1379 color: #d5dadf;
1380 width: 70px;
1381 }
1382
1383 /* Pagelayer row end*/
1384 /* Pagelayer Library css */
1385 .pagelayer-library-modal-container {
1386 z-index: 1;
1387 background-color: white;
1388 position: fixed;
1389 left: 0px;
1390 top: 0px;
1391 width: 100%;
1392 height: 100vh;
1393 display: flex;
1394 flex-direction: column;
1395 }
1396
1397 .pagelayer-library-modal-nav{
1398 display: flex;
1399 justify-content: space-between;
1400 align-items: center;
1401 background: rgba(255, 255, 255, 0.25);
1402 border-bottom: 1px solid #cbd5e1;
1403 padding: 20px 50px;
1404 }
1405
1406 .pagelayer-library-modal-ul{
1407 display: flex;
1408 justify-content: space-between;
1409 align-items: center;
1410 }
1411
1412 .pagelayer-library-modal-ul li {
1413 padding: 0px 50px;
1414 transition: 100ms cubic-bezier(0.12, 0, 0.39, 0) 0s;
1415 font-size: 16px;
1416 }
1417
1418 .pagelayer-library-modal-ul li:hover {
1419 cursor: pointer;
1420 color: #17b486;
1421 }
1422
1423 .pagelayer-library-modal-content {
1424 background-color: #724c8717;
1425 display: flex;
1426 overflow: auto;
1427 position: relative;
1428 }
1429
1430 .pagelayer-library-modal-tags {
1431 height: 100%;
1432 border-right: 0.1px solid lightgrey;
1433 width: 20vw;
1434 padding: 20px 30px;
1435 overflow-y: auto;
1436 background-color: rgb(255, 255, 255);
1437 position: sticky;
1438 top: 0;
1439 }
1440
1441 .pagelayer-library-modal-tags::-webkit-scrollbar-track {
1442 background: #fff;
1443 }
1444
1445 .pagelayer-section-item{
1446 min-height: 50px;
1447 margin: 15px;
1448 z-index: 9;
1449 transition-duration: 0.2s;
1450 background-color: #fff;
1451 border: 3px solid #fff;
1452 border-radius: 4px;
1453 cursor: pointer;
1454 position: relative;
1455 }
1456
1457 [pagelayer-section-type="page"] .pagelayer-section-item{
1458 max-width: 300px;
1459 height: 400px;
1460 overflow-y: auto;
1461 }
1462
1463 [pagelayer-section-type="page"] .pagelayer-section-item::-webkit-scrollbar {
1464 height: 3px;
1465 width: 3px;
1466 }
1467
1468 .pagelayer-section-item img {
1469 width: 100%;
1470 object-fit: contain;
1471 overflow: hidden;
1472 cursor: pointer;
1473 }
1474
1475 .pagelayer-library-modal-nav button {
1476 outline: none;
1477 border: none;
1478 background-color: white;
1479 display: flex;
1480 cursor: pointer;
1481 }
1482
1483 .pagelayer-library-modal-ul button:hover {
1484 color: #17b486;
1485 }
1486
1487 .pagelayer-library-modal-nav button img {
1488 padding-right: 6px;
1489 }
1490
1491 .pagelayer-library-modal-close {
1492 font-size: 24px;
1493 font-weight: bold;
1494 transition: 100ms cubic-bezier(0.12, 0, 0.39, 0) 0s;
1495 }
1496
1497 .pagelayer-library-modal-close:hover {
1498 cursor: pointer;
1499 color: #17b486;
1500 }
1501
1502 .pagelayer-library-modal-tag-list ul li {
1503 padding: 20px 0px 10px 0px;
1504 }
1505
1506 .pagelayer-library-modal-tag-list ul li {
1507 width: 80%;
1508 height: 30px;
1509 }
1510
1511 .pagelayer-section-modal-body{
1512 width: 80vw;
1513 display: flex;
1514 flex-direction: row;
1515 flex-wrap: wrap;
1516 }
1517
1518 .pagelayer-section-is-visible{
1519 height: 50px;
1520 flex-basis: 100%;
1521 }
1522
1523 .pagelayer-section-holder{
1524 vertical-align: top;
1525 background: #efefef;
1526 flex: 1;
1527 }
1528
1529 .pagelayer-library-modal-nav button.pagelayer-active-modal-btn {
1530 border-bottom: 1px solid rgb(87, 27, 27);
1531 }
1532
1533 .pagelayer-library-clicked,
1534 .pagelayer-library-clicked-tag{
1535 border-bottom: 2px solid blue;
1536 }
1537
1538 .pagelayer-library-active-button {
1539 border-bottom: 1px solid rgb(87, 27, 27);
1540 }
1541
1542 .pagelayer-tag-style-active {
1543 background-color: rgb(104, 98, 98);
1544 color: white;
1545 transition: width 1s;
1546 }
1547
1548 .pagelayer-library-modal-tag-div{
1549 margin-bottom: 10px;
1550 }
1551
1552 .pagelayer-library-modal-tag-list p {
1553 background: #1A9CDB;
1554 cursor: pointer;
1555 padding: 5px;
1556 color: #fff;
1557 font-size: 13px;
1558 display: inline-block;
1559 margin: 3px;
1560 }
1561
1562 .pagelayer-tag-style-active {
1563 background: #326fa6 !important;
1564 }
1565
1566 .pagelayer-library-modal-tag-list p.pagelayer-tag-style-active:hover {
1567 color: white;
1568 }
1569
1570 .pagelayer-library-modal-ul button.pagelayer-active-modal-btn:hover {
1571 color: black;
1572 }
1573
1574 .pagelayer-modal-tag-search {
1575 padding: 10px;
1576 border: none;
1577 border-bottom: 1px solid rgb(190, 185, 185);
1578 color: white;
1579 }
1580
1581 .pagelayer-library-loader{
1582 display: flex;
1583 justify-content: center;
1584 align-items: center;
1585 position: absolute;
1586 z-index: 999;
1587 width: 100%;
1588 height: 100%;
1589 background: #fff;
1590 }
1591
1592 .pagelayer-add-section-modal-overlay {
1593 position: absolute;
1594 top: 0;
1595 bottom: 0;
1596 height: 100%;
1597 width: 100%;
1598 z-index: 999999;
1599 align-items: center;
1600 justify-content: center;
1601 text-align: center;
1602 display: flex;
1603 background-color: #f7f7f7fa;
1604 }
1605
1606 .pagelayer-section-wait .fa-spin {
1607 font-size: 50px;
1608 }
1609
1610 .pagelayer-loader {
1611 position: relative;
1612 width: 150px;
1613 height: 150px;
1614 margin: 0 auto 50px auto;
1615 z-index: 1001;
1616 }
1617
1618 .pagelayer-loader:before {
1619 content: "";
1620 position: absolute;
1621 top: 0;
1622 left: 0;
1623 right: 0;
1624 bottom: 0;
1625 border-radius: 50%;
1626 border: 3px solid transparent;
1627 border-top-color: #3498db;
1628 -webkit-animation: spin 3s linear infinite;
1629 animation: spin 3s linear infinite;
1630 }
1631
1632 .pagelayer-loader:after {
1633 content: "";
1634 position: absolute;
1635 top: 10px;
1636 left: 10px;
1637 right: 10px;
1638 bottom: 10px;
1639 border-radius: 50%;
1640 border: 3px solid transparent;
1641 border-top-color: #e74c3c;
1642 -webkit-animation: spin 2s linear infinite;
1643 animation: spin 2s linear infinite;
1644 }
1645
1646 .pagelayer-loader .pagelayer-percent-parent{
1647 width:100%;
1648 height:100%;
1649 margin:auto;
1650 display: flex;
1651 align-items: center;
1652 justify-content: center;
1653 text-align:center;
1654 }
1655
1656 .pagelayer-loader .pagelayer-percent-parent:before{
1657 content: "";
1658 position: absolute;
1659 top: 20px;
1660 left: 20px;
1661 right: 20px;
1662 bottom: 20px;
1663 border-radius: 50%;
1664 border: 3px solid transparent;
1665 border-top-color: #f9c922;
1666 -webkit-animation: spin 1.5s linear infinite;
1667 animation: spin 1.5s linear infinite;
1668 }
1669
1670 .pagelayer-loader .pagelayer-percent-parent .pagelayer-percent{
1671 font-size:30px;
1672 }
1673
1674 @-webkit-keyframes spin {
1675 0% {
1676 -webkit-transform: rotate(0deg);
1677 -ms-transform: rotate(0deg);
1678 transform: rotate(0deg);
1679 }
1680
1681 100% {
1682 -webkit-transform: rotate(360deg);
1683 -ms-transform: rotate(360deg);
1684 transform: rotate(360deg);
1685 }
1686 }
1687
1688 @keyframes spin {
1689 0% {
1690 -webkit-transform: rotate(0deg);
1691 -ms-transform: rotate(0deg);
1692 transform: rotate(0deg);
1693 }
1694
1695 100% {
1696 -webkit-transform: rotate(360deg);
1697 -ms-transform: rotate(360deg);
1698 transform: rotate(360deg);
1699 }
1700 }
1701
1702 .pagelayer-section-pro-req {
1703 position: absolute;
1704 top: 15px;
1705 right: 0px;
1706 font-size: 14px;
1707 padding: 10px;
1708 background-color: #e63131;
1709 color: #fff;
1710 margin-left: 4px;
1711 border-radius: 2px;
1712 cursor: pointer;
1713 }
1714
1715 .pagelayer-section-pro-txt {
1716 position: absolute;
1717 top: 45%;
1718 left: 0px;
1719 font-size: 14px;
1720 padding: 10px;
1721 color: #fff;
1722 line-height: 120%;
1723 background: #111;
1724 opacity: 0;
1725 transition: all 0.3s;
1726 }
1727
1728 .pagelayer-section-item:hover > .pagelayer-section-pro-txt {
1729 opacity: 0.8;
1730 }
1731
1732 .pagelayer-section-pro-txt a {
1733 color: #1a9cdb;
1734 }
1735
1736 /* Global typo and color Start */
1737 .pagelayer-elp-global-typo .pli:hover,
1738 .pagelayer-global-setting-color .pli:hover{
1739 color: #137dc5;
1740 }
1741
1742 .pagelayer-active-global{
1743 color: #137dc5;
1744 }
1745
1746 .pagelayer-global-selected,
1747 .pagelayer-global-font-list-item:hover,
1748 .pagelayer-global-color-list-item:hover{
1749 background: #f9f9f9;
1750 }
1751
1752 .pagelayer-global-selected:after{
1753 content: "\ea10";
1754 font-family: 'pagelayer', "Font Awesome 5 Free" !important;
1755 color: #137dc5;
1756 }
1757
1758 .pagelayer-global-font-list,
1759 .pagelayer-global-color-list{
1760 position: absolute;
1761 background: #fff;
1762 padding: 10px 0;
1763 z-index: 9999;
1764 border-radius: 4px;
1765 right: 0;
1766 top: 35px;
1767 width: 250px;
1768 max-height: 350px;
1769 overflow-y: auto;
1770 font-size: 12px;
1771 box-shadow: 0px 0px 13px rgb(0 0 0 / 30%);
1772 }
1773
1774 .pagelayer-global-color-list{
1775 display:none
1776 }
1777
1778 .pagelayer-global-font-list-item,
1779 .pagelayer-global-color-list-item{
1780 display: flex;
1781 padding: 10px 20px;
1782 cursor: pointer;
1783 }
1784
1785 .pagelayer-global-font-list-item .pagelayer-global-font-title,
1786 .pagelayer-global-color-list-item .pagelayer-global-color-title{
1787 flex: 1;
1788 }
1789
1790 .pagelayer-global-color-list-item .pagelayer-global-color-pre{
1791 position: relative;
1792 border: 1px solid #f1f1f1;
1793 margin-right: 7px;
1794 padding: 1px;
1795 background-clip: content-box;
1796 }
1797
1798 .pagelayer-global-color-list-item .pagelayer-global-color-pre:before{
1799 content: '';
1800 padding: 0px 10px;
1801 background-color: #ff000000;
1802 background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=);
1803 -webkit-background-size: 12px 12px;
1804 background-size: 6px 6px;
1805 position: relative;
1806 z-index: -1;
1807 }
1808
1809 .pagelayer-global-setting-color{
1810 position: relative;
1811 box-shadow: 0 1px 2px #d2cfcf;
1812 padding: 10px 4px;
1813 margin-bottom: 5px;
1814 margin-top: -10px;
1815 cursor: default;
1816 }
1817
1818 .pagelayer-global-setting-color b{
1819 margin-left: 11px;
1820 }
1821
1822 .pagelayer-global-setting-color .pli{
1823 right: 15px;
1824 position: absolute;
1825 cursor: pointer;
1826 }
1827
1828 .pagelayer-elp-typo-icons .pli-service{
1829 cursor: pointer;
1830 }
1831
1832 .pagelayer-typo-default{
1833 display:none;
1834 width: 20px;
1835 height: 20px;
1836 cursor: pointer;
1837 margin-left: 4px;
1838 }
1839
1840 .pagelayer-global-on .pagelayer-elp-typo:not([pagelayer-set-global]):hover .pagelayer-typo-default{
1841 display: inline-block;
1842 }
1843 /* Global typo and color End */
1844 [pagelayer-wrap-id].wp-block{
1845 margin-bottom: 0;
1846 margin-top: 0;
1847 }
1848
1849 .wp-block-pagelayer-pl-col>.pagelayer-col{
1850 width:100%;
1851 }
1852
1853 .pagelayer-modal-content,
1854 .pagelayer-splash-container{
1855 position: relative;
1856 height: 500px
1857 }
1858
1859 .is-selected .pagelayer-iconbox .pagelayer-box-link,
1860 .is-selected .pagelayer-service .pagelayer-box-link{
1861 pointer-events: none;
1862 }
1863
1864 .pagelayer-image-hotspot-holder .pagelayer-icon-holder [data-type="pagelayer/pl-hotspot"] {
1865 position: unset;
1866 }
1867
1868 /* Image map start */
1869 .pagelayer-imgmap-toolbar,
1870 .pagelayer-imgmap-navigator-item-drag,
1871 .pagelayer-imgmap-navigator-title{
1872 display: flex;
1873 }
1874
1875 .pagelayer-imgmap-toolbar {
1876 position: absolute !important;
1877 left: 10px;
1878 top: 0;
1879 background: #ffffffb0;
1880 border-radius: 6px;
1881 padding: 4px;
1882 }
1883
1884 .pagelayer-imgmap-toolbar-item,
1885 .pagelayer-map-navigator-trigger,
1886 .pagelayer-map-list-trigger{
1887 width: 24px;
1888 padding: 6px;
1889 border: none;
1890 color: #666161 !important;
1891 cursor: pointer;
1892 display: inline-block;
1893 border-radius: 0;
1894 background: transparent !important;
1895 font-size: 12px;
1896 margin: auto;
1897 }
1898
1899 .pagelayer-imgmap-toolbar-mover{
1900 padding: 2px;
1901 background: gray;
1902 border-radius: 10px;
1903 cursor: move;
1904 }
1905
1906 .pagelayer-imgmap-toolbar.pagelayer-imgmap-selected .pagelayer-map_append,
1907 .pagelayer-imgmap-toolbar:not(.pagelayer-imgmap-edit) .pagelayer-map_save,
1908 .pagelayer-imgmap-toolbar:not(.pagelayer-imgmap-edit) .pagelayer-map_remove,
1909 .pagelayer-imgmap-toolbar:not(.pagelayer-imgmap-edit) .pagelayer-map_href,
1910 .pagelayer-imgmap-toolbar:not(.pagelayer-imgmap-edit) .pagelayer-map_edit,
1911 .pagelayer-imgmap-toolbar.pagelayer-imgmap-edit .pagelayer-map_append,
1912 .pagelayer-imgmap-toolbar.pagelayer-imgmap-edit .pagelayer-map_edit{
1913 display: none;
1914 }
1915
1916 .pagelayer-imgmap-toolbar.pagelayer-imgmap-selected .pagelayer-map_edit,
1917 .pagelayer-imgmap-toolbar.pagelayer-imgmap-selected .pagelayer-map_remove{
1918 display: block;
1919 }
1920
1921 .pagelayer-imgmap-toolbar-link {
1922 position: absolute;
1923 width: max-content;
1924 padding: 2px 5px 3px 5px;
1925 background: #ffffffb0;
1926 border-radius: 6px;
1927 margin: 28px 0 0 0;
1928 display: none;
1929 }
1930
1931 .pagelayer-imgmap-toolbar-link input {
1932 width: 180px;
1933 font-size: 12px;
1934 padding: 2px !important;
1935 }
1936
1937 .pagelayer-imgmap-save-link {
1938 padding: 4px 6px;
1939 font-size: 12px;
1940 font-weight: bold;
1941 border-radius: 6px;
1942 margin: 0 0 0 6px;
1943 cursor: pointer;
1944 }
1945
1946 .pagelayer-imgmap-hover-active .pagelayer-imgmap-item {
1947 cursor: pointer;
1948 opacity: 0;
1949 }
1950
1951 .pagelayer-map-item-active_is_editable{
1952 opacity: 1;
1953 }
1954
1955 .pagelayer-imgmap-coord {
1956 position: absolute;
1957 background: #bfbfbf;
1958 top: 0;
1959 border-radius: 100%;
1960 margin-top: -5px;
1961 width: 10px;
1962 height: 10px;
1963 border: 2px solid #000000bf;
1964 margin-left: -5px;
1965 cursor: pointer;
1966 display: none;
1967 }
1968
1969 span.pagelayer-imgmap-remove-cord {
1970 padding: 5px 6px;
1971 position: absolute;
1972 top: 11px;
1973 background: #fff;
1974 font-size: 12px;
1975 border-radius: 5px;
1976 left: -8px;
1977 color: gray;
1978 cursor: pointer;
1979 z-index: 999;
1980 display: none;
1981 }
1982
1983 .pagelayer-imgmap-remove-cord::after {
1984 content: '';
1985 padding: 4px;
1986 position: absolute;
1987 top: -4px;
1988 background: inherit;
1989 transform: rotate(47deg);
1990 left: 7px;
1991 }
1992
1993 .pagelayer-imgmap-coord:hover > .pagelayer-imgmap-remove-cord,
1994 .pagelayer-imgmap-coord.pagelayer-mapele-dragging{
1995 display: block;
1996 }
1997
1998 .pagelayer-imgmap-coord.pagelayer-mapele-dragging span{
1999 display: none !important;
2000 }
2001
2002 .pagelayer-imgmap-navigator {
2003 position: absolute;
2004 width: 245px;
2005 background: #f6f6f8;
2006 top: 38px;
2007 border-radius: 2px;
2008 padding: 1px 4px 6px 4px;
2009 box-shadow: 0px 0px 4px -1px #666;
2010 display: none;
2011 }
2012
2013 .pagelayer-imgmap-navigator-close {
2014 position: absolute;
2015 right: 12px;
2016 top: 9px;
2017 cursor: pointer;
2018 }
2019
2020 .pagelayer-imgmap-navigator-wrap {
2021 height: 162px;
2022 overflow-y: auto;
2023 scrollbar-width: thin;
2024 resize: vertical;
2025 padding: 2px 0;
2026 }
2027
2028 .pagelayer-imgmap-navigator-item {
2029 display: grid;
2030 grid-template-columns: 30px auto 86px;
2031 background: #fff;
2032 color: #4f4f4f;
2033 padding: 4px;
2034 font-size: 12px;
2035 margin: 6px 4px;
2036 border-radius: 4px;
2037 border: 1px solid #d9d9d9;
2038 }
2039
2040 .pagelayer-imgmap-navigator-item:first-child {
2041 margin-top: 0;
2042 }
2043
2044 .pagelayer-imgmap-navigator-header {
2045 text-align: left;
2046 padding: 4px 6px;
2047 font-size: 12px;
2048 font-weight: bolder;
2049 }
2050
2051 .pagelayer-imgmap-navigator-title {
2052 text-align: left;
2053 }
2054
2055 .pagelayer-imgmap-navigator-item-drag i{
2056 margin: auto;
2057 }
2058
2059 .pagelayer-imgmap-navigator-title{
2060 align-self: center;
2061 }
2062
2063 .pagelayer-map-navigator-trigger{
2064 width: 18px;
2065 }
2066
2067 .pagelayer-navigator-item-active {
2068 outline: 1px solid #ff6b6b;
2069 }
2070 /* image map end*/