PluginProbe
Easy Elements for Elementor – Addons & Website Templates / 1.5.0
Easy Elements for Elementor – Addons & Website Templates v1.5.0
1.5.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.6 1.4.7 1.4.8 1.4.5 1.4.4 1.4.3 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.7 1.3.8 1.3.9 1.4.0 All 47 releases
easy-elements / assets / css / admin / admin.scss

admin.scss in Easy Elements for Elementor – Addons & Website Templates 1.5.0, at assets/css/admin/admin.scss

2,174 lines 48.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 :root{
2 --easy-primary-color: #7455FF;
3 --easy-white-color: #ffffff;
4 --easy-title-color: #09051B;
5 --easy-black-color: #000000;
6 }
7
8 /* Common Class CSS */
9 .easyel-tColor{
10 color: var(--easy-title-color);
11 }
12 .overflow-hidden{
13 overflow: hidden;
14 }
15 .easyel-decoration-none{
16 text-decoration: none;
17 }
18 .easyel-border-radius-20{
19 border-radius: 20px;
20 }
21 .easyel-position-rl{
22 position: relative;
23 }
24 .easyel-position-ab{
25 position: absolute;
26 }
27 .easyel-top-0{
28 top: 0;
29 }
30 .easyel-bottom-0{
31 bottom: 0;
32 }
33 .easyel-star-0{
34 left: 0;
35 }
36 .easyel-end-0{
37 right: 0;
38 }
39 .easyel-section-gap{
40 padding: 120px 80px;
41 }
42 .easyel-py-0{
43 padding-top: 0px;
44 padding-bottom: 0px;
45 }
46 .easyel-dflex{
47 display: flex;
48 }
49 .easyel-align-center{
50 align-items: center;
51 }
52 .easyel-justify-between{
53 justify-content: space-between;
54 }
55 .easyel-section-heading .easyel-title{
56 color: var(--easy-title-color);
57 font-size: 40px;
58 font-weight: 600;
59 line-height: 130%;
60 margin: 0 0 35px;
61 }
62 .easyel-section-heading .easyel-desc{
63 font-size: 18px;
64 color: #09051bcc;
65 margin: 0;
66 text-transform: capitalize;
67 }
68 .easyel-tab-panel .easyel-dashboard-heading{
69 font-size: 28px;
70 font-weight: 500;
71 color: var(--easy-title-color);
72 line-height: 160%;
73 padding: 0;
74 margin-bottom: 25px;
75 }
76 .easyel-focus-hide:focus{
77 box-shadow: none;
78 outline: none;
79 color: inherit;
80 }
81 /* End Common Class CSS */
82 body.toplevel_page_easy-elements-dashboard #wpbody-content{
83 font-family: "Inter", sans-serif !important;
84 font-size: 16px;
85 }
86 .elementor-panel .elementor-element .icon i.rt-icon::before{
87 display: none;
88 }
89 .elementor-panel .elementor-element .icon i.rt-icon::after{
90 width: 30px;
91 height: 30px;
92 content: "";
93 display: inline-block;
94 border-radius: 5px;
95 background: url("../img/icons/easy-editor-logo.svg") no-repeat center center/cover;
96 }
97
98 .elementor-icons-manager__tab-link i.rt-icon{
99 width: 30px;
100 height: 30px;
101 content: "";
102 border-radius: 100%;
103 background: url(../img/icons/easy-editor-logo.svg) no-repeat center center/cover;
104 display: inline-block;
105 position: relative;
106 top: 10px;
107 margin-right: 6px;
108 }
109
110 .easy-form-table{
111 background-color: #f9f9f9;
112 border-top: 3px solid #003599;
113 }
114 .easy-widget-row strong{
115 display: block;
116 }
117 .easy-form-table td {
118 border: 1px solid #0000000a;
119 padding: 25px !important;
120 text-align: center;
121 box-sizing: border-box;
122 background: var(--easy-white-color);
123 }
124
125 .easy-form-table td:nth-child(2n+0) {
126 background: #fafafa;
127 }
128
129 .eel-pro-notice {
130 padding: 10px;
131 color: #d94a4a;
132 font-weight: bold;
133 }
134
135 .eel-popup-note {
136 padding: 8px 10px;
137 color: #2271b1;
138 background: #f0f6fb;
139 border-radius: 4px;
140 margin: 8px 0 0 0;
141 font-size: 14px;
142 }
143
144 /* Upload box */
145 #easyel-custom-fonts-upload-form input[type="file"]="file""] {
146 padding: 10px;
147 border: 2px dashed #0073aa;
148 border-radius: 6px;
149 background: #f1f1f1;
150 width: 100%;
151 margin-bottom: 10px;
152 transition: border-color 0.3s, background 0.3s;
153 }
154 #easyel-custom-fonts-upload-form input[type="file"]="file""]:hover {
155 border-color: #00a0d2;
156 background: #e8f7ff;
157 }
158
159 /* Uploaded fonts grid */
160 #easyel-custom-fonts-upload-form input[type="file"]="file""] {
161 padding: 10px;
162 border: 2px dashed #0073aa;
163 border-radius: 6px;
164 background: #f1f1f1;
165 width: 100%;
166 margin-bottom: 10px;
167 transition: all 0.3s;
168 }
169 #easyel-custom-fonts-upload-form input[type="file"]="file""]:hover {
170 border-color: #00a0d2;
171 background: #e8f7ff;
172 }
173 .easyel-fonts-grid {
174 display: grid;
175 grid-template-columns: repeat(5, 1fr);
176 gap: 15px;
177 margin-top: 15px;
178 }
179 .easyel-font-box {
180 padding: 15px;
181 border: 1px solid #ccc;
182 border-radius: 6px;
183 background: #f9f9f9;
184 text-align: center;
185 transition: transform 0.2s, box-shadow 0.2s;
186 }
187 .easyel-font-box:hover {
188 transform: translateY(-2px);
189 box-shadow: 0 4px 10px rgba(0,0,0,0.1);
190 }
191 .easyel-font-box p { margin: 5px 0; }
192 .easyel-font-box .button-secondary { margin-top: 8px; }
193
194 #easy-elements-notifications {
195 position: fixed;
196 top: 32px;
197 right: 20px;
198 z-index: 999999;
199 max-width: 400px;
200 }
201
202 .easy-elements-notification {
203 background: var(--easy-white-color);
204 border-left: 4px solid;
205 box-shadow: 0 2px 8px rgba(0,0,0,0.15);
206 margin-bottom: 10px;
207 padding: 12px 16px;
208 border-radius: 4px;
209 font-size: 14px;
210 display: none;
211 }
212
213 .easy-elements-notification.success {
214 border-color: #4CAF50;
215 color: #155724;
216 background-color: #d4edda;
217 }
218
219 .easy-elements-notification.error {
220 border-color: #f44336;
221 color: #721c24;
222 background-color: #f8d7da;
223 }
224
225 .easy-elements-notification.info {
226 border-color: #2196F3;
227 color: #0c5460;
228 background-color: #d1ecf1;
229 }
230
231
232 /*Theme builder css*/
233 .easyel-builder-tabs {
234 display:flex;
235 gap:10px;
236 margin:15px 0;
237 padding:10px;
238 background:var(--easy-white-color);
239 border:1px solid #ccd0d4;
240 }
241
242 .easyel-tab {
243 padding:6px 12px;
244 border:1px solid #ccd0d4;
245 text-decoration:none;
246 border-radius:4px;
247 }
248 .easyel-tab.active,
249 .easyel-tab:hover {
250 background:#2271b1;
251 color:var(--easy-white-color);
252 }
253
254 .easyel-choose-template {
255 display: flex;
256 flex-direction: column;
257 align-items: center;
258 justify-content: center;
259 gap: 20px;
260 max-width: 400px;
261 margin: 0 auto;
262 }
263
264 .easyel-choose-template h2 {
265 font-size: 22px;
266 font-weight: 600;
267 color: #333;
268 text-align: center;
269 }
270
271 .easyel-template-type {
272 width: 100%;
273 }
274
275 .easyel-builder-tmpl-type,
276 .easyel-builder-template-name {
277 width: 100%;
278 padding: 8px 15px !important;
279 border: 1px solid #ddd !important;;
280 border-radius: 4px !important;;
281 font-size: 15px;
282 outline: none;
283 transition: all 0.3s ease;
284 }
285
286 .easyel-builder-tmpl-type:focus,
287 .easyel-builder-template-name:focus {
288 border-color: #4a90e2;
289 box-shadow: 0 0 8px rgba(74, 144, 226, 0.3);
290 }
291
292 .easyel-builder-tmpl-type option {
293 padding: 10px;
294 }
295
296 .easyel-builder-template-name::placeholder {
297 color: #aaa;
298 font-style: italic;
299 }
300
301 /* easy elements tab css */
302 .easyel-overview-header{
303 padding: 24px 30px;
304 background: var(--easy-white-color);
305 }
306 .easyel-plugin-settings-wrapper{
307 display: flex;
308 justify-content: flex-start;
309 gap: 30px;
310 margin-top: 35px;
311 }
312 /* Left Side */
313 .easyel-nav-tab-item{
314 width: 20%;
315 }
316 .easyel-nav-tab-wrapper{
317 position: sticky;
318 top: 50px;
319 height: 85vh;
320 }
321 .easyel-nav-tab-wrapper,
322 .easyel-tab-panel{
323 padding: 20px;
324 background: var(--easy-white-color);
325 }
326 .easyel-nav-tab-pro,
327 .easyel-nav-tab{
328 display: flex;
329 gap: 10px;
330 align-items: center;
331 font-size: 18px;
332 color: var(--easy-title-color);
333 font-weight: 500;
334 text-decoration: none;
335 padding: 16px;
336 margin-bottom: 24px;
337 border-radius: 10px;
338 transition: 0.3s;
339 line-height: 1em;
340 }
341 .easyel-nav-tab-pro i,
342 .easyel-nav-tab i{
343 font-size: 23px;
344 }
345 .easyel-nav-tab:focus,
346 .easyel-nav-tab:hover,
347 .easyel-nav-tab-active {
348 background: var(--easy-primary-color);
349 color: var(--easy-white-color);
350 outline: none;
351 box-shadow: none;
352 }
353 .easyel-tab-pro-link{
354 position: absolute;
355 left: 20px;
356 bottom: 20px;
357 width: calc(100% - 40px);
358 }
359 .easyel-tab-pro-link .easyel-nav-tab-pro{
360 margin-bottom: 0;
361 border-radius: 8px;
362 color: var(--easy-primary-color);
363 background: #7455ff26;
364 justify-content: center;
365 }
366 .easyel-tab-pro-link .easyel-nav-tab-pro i{
367 font-size: 23px;
368 top: -2px;
369 position: relative;
370 }
371 /* Right Side */
372 #easyel-tab-content{
373 width: 77%;
374 }
375
376 /************************/
377 /* Start Overview Area */
378 /***********************/
379 .easyel-overview-area{
380 margin: 0;
381 }
382 .easyel-overview-area .easyel-position-rl{
383 background-image: url(../../../includes/Admin/img/overview/easy-right-gallery-overview.webp) !important;
384 background-position: top 50% right -30%;
385 background-repeat: no-repeat;
386 background-size: 61%;
387 }
388 /* Start Banner Area */
389 .easyel-overview-area .easyel-banner-section .easyel-shape-2{
390 margin-top: 30px;
391 }
392 .easyel-overview-area .easyel-banner-content-area{
393 background: #f1f2fa80;
394 padding: 120px 60px 78px;
395 }
396 .easyel-overview-area .easyel-banner-content{
397 max-width: 432px;
398 width: 100%;
399 position: relative;
400 z-index: 2;
401 }
402 .easyel-overview-area .easyel-banner-content .title{
403 margin-top: 40px;
404 font-size: 56px;
405 line-height: 1em;
406 }
407 .easyel-overview-area .easyel-banner-content .title span{
408 color: var(--easy-primary-color);
409 font-weight: 700;
410 }
411 .easyel-overview-area .easyel-banner-rating{
412 gap: 30px;
413 margin-top: 70px;
414 }
415 .easyel-overview-area .easyel-rating-content{
416 gap: 20px;
417 }
418 .easyel-overview-area .easyel-banner-rating h3{
419 font-size: 40px;
420 margin: 0;
421 }
422 .easyel-overview-area .easyel-rating .rating-icon i{
423 color: #1CB165;
424 font-size: 16px;
425 width: 16px;
426 height: 16px;
427 }
428 .easyel-overview-area .easyel-rating span{
429 color: var(--easy-black-color);
430 font-size: 14px;
431 }
432 .easyel-overview-area .easyel-btn{
433 display: inline-flex;
434 align-items: center;
435 gap: 10px;
436 font-size: 16px;
437 font-weight: 600;
438 padding: 14px 28px;
439 color: var(--easy-white-color);
440 border: 2px solid transparent;
441 border-radius: 30px;
442 background: linear-gradient(to right, #8E74FF, var(--easy-primary-color) 57%, var(--easy-primary-color)) padding-box,
443 linear-gradient(to right, var(--easy-primary-color), #C2B4FF) border-box;
444 background-size: 200% 100%;
445 background-position: left center;
446 transition: all 0.4s ease;
447 }
448 .easyel-overview-area .easyel-btn i{
449 font-size: 22px;
450 }
451 .easyel-overview-area .easyel-btn:focus,
452 .easyel-overview-area .easyel-btn:hover{
453 color: var(--easy-white-color);
454 background: linear-gradient(to left, var(--easy-primary-color), #8E74FF 57%, var(--easy-primary-color)) padding-box,
455 linear-gradient(to left, #C2B4FF, var(--easy-primary-color) ) border-box;
456 background-size: 200% 100%;
457 background-position: right center;
458 box-shadow: none;
459 outline: none;
460 }
461
462 /* End Banner Area */
463
464 /* Start Documentation Area */
465 .easyel-overview-area .easyel-docx-area{
466 gap: 40px;
467 }
468 .easyel-overview-area .easyel-docx-image-area{
469 background: #F9FAFD;
470 padding: 50px;
471 }
472 .easyel-overview-area .easyel-docx-image-area img{
473 max-width: 100%;
474 }
475 .easyel-overview-area .easyel-docx-content{
476 max-width: 490px;
477 width: 100%;
478 padding-bottom: 55px;
479 }
480 /* End Documentation Area */
481
482 /* Start Video Area */
483 .easyel-overview-area .easyel-video-heading{
484 max-width: 600px;
485 text-align: center;
486 margin: auto;
487 padding-bottom: 40px;
488 }
489 .easyel-overview-area .easyel-video-heading .easyel-title{
490 margin-bottom: 20px;
491 }
492 .easyel-overview-area .easyel-video-items{
493 gap:28px;
494 }
495 .easyel-overview-area .easyel-video-item{
496 flex-basis: 33%;
497 width: 33%;
498 }
499 .easyel-overview-area .easyel-video-img span{
500 display: none;
501 }
502 .easyel-overview-area .easyel-video-img a{
503 display: block;
504 border-radius: 20px;
505 overflow: hidden;
506 }
507 .easyel-overview-area .easyel-video-img a::before{
508 content: '';
509 position: absolute;
510 left: 0;
511 top: 0;
512 width: 100%;
513 height: 100%;
514 background: var(--easy-white-color);
515 opacity: 0.2;
516 }
517 .easyel-overview-area .easyel-video-img a img{
518 width: 100%;
519 max-height: 200px;
520 object-fit: cover;
521 }
522 .easyel-overview-area .easyel-video-img svg{
523 width: 50px;
524 position: absolute;
525 left: 50%;
526 top: 50%;
527 transform: translate(-50%, -50%);
528 }
529 .easyel-overview-area .easyel-video-item .easyel-video-text{
530 font-size: 16px;
531 font-weight: 600;
532 margin: 20px 0 0 ;
533 }
534 .easyel-overview-area .easyel-video-btn{
535 text-align: center;
536 margin-top: 50px;
537 }
538
539 /* Popup Style */
540 #easyel-popup-video-area {
541 display: none;
542 position: fixed;
543 inset: 0;
544 background: rgba(0,0,0,0.75);
545 z-index: 9999;
546 }
547 #easyel-popup-video-area .easyel-popup-content {
548 position: relative;
549 max-width: 800px;
550 width: 100%;
551 top: 50%;
552 left: 50%;
553 transform: translate(-50%, -50%);
554 }
555 #easyel-popup-video-area .easyel-popup-video {
556 aspect-ratio: 16 / 9;
557 border-radius: 12px;
558 overflow: hidden;
559 }
560
561 #easyel-popup-video-area .easyel-popup-close {
562 position: absolute;
563 top: -23px;
564 right: -23px;
565 font-size: 18px;
566 font-weight: bold;
567 width: 32px;
568 height: 32px;
569 color: var(--easy-white-color);
570 background: linear-gradient(to left, var(--easy-primary-color), #8E74FF 57%, var(--easy-primary-color));
571 opacity: .8;
572 border-radius: 50%;
573 cursor: pointer;
574 z-index: 10;
575 justify-content: center;
576 transition: all 0.3s ease;
577 }
578 #easyel-popup-video-area .easyel-popup-close:hover {
579 transform: scale(1.1);
580 }
581
582 #easyel-popup-video-area iframe {
583 width: 100%;
584 height: 100%;
585 border: none;
586 display: block;
587 }
588 /* End Video Area */
589
590 /* Start Faq Area */
591 .easyel-faq-area{
592 gap: 30px;
593 }
594 .easyel-faq-heading{
595 max-width: 335px;
596 width: 100%;
597 }
598 .easyel-faq-heading .easyel-title{
599 font-size: 32px;
600 margin-bottom: 30px;
601 }
602 .easyel-faq-item:not(:last-child){
603 padding-bottom: 40px;
604 }
605 .easyel-faq-item-heading {
606 position: relative;
607 width: 100%;
608 text-align: left;
609 font-size: 20px;
610 font-weight: 600;
611 padding: 0;
612 cursor: pointer;
613 background: none;
614 border: none;
615 outline: none;
616 }
617 .easyel-faq-item-heading span{
618 display: inline-block;
619 width: 93%;
620 }
621 .easyel-faq-item-heading:before {
622 content: "";
623 position: absolute;
624 right: 0;
625 width: 25px;
626 height: 25px;
627 color: var(--easy-primary-color);
628 font-size: 18px;
629 display: flex;
630 justify-content: center;
631 align-items: center;
632 border: 2px solid var(--easy-primary-color);
633 border-radius: 50%;
634 }
635 .easyel-faq-item.active .easyel-faq-item-heading:before {
636 content: "";
637 }
638 .easyel-faq-item-content {
639 display: none;
640 padding-top: 12px;
641 font-weight: 500;
642 line-height: 1.5;
643 width: 95%;
644 }
645 /* End Faq Area */
646
647 /* Start Request Feature Area */
648 .easyel-requestFeature-section{
649 background: #F9FAFD;
650 padding: 100px 40px 40px;
651 }
652 .easyel-requestFeature-heading{
653 max-width: 800px;
654 width: 100%;
655 margin: auto;
656 text-align: center;
657 margin-bottom: 60px;
658 }
659 .easyel-requestFeature-heading .easyel-title{
660 margin-bottom: 20px;
661 }
662 .easyel-requestFeature-heading .easyel-btn{
663 margin-top: 40px;
664 }
665 .easyel-requestFeature-image img{
666 width: 100%;
667 }
668 /* End Request Feature Area */
669
670 /* Start Support Area */
671 .easyel-support-area{
672 padding-top: 60px;
673 gap: 20px;
674 }
675 .easyel-support-item{
676 padding: 28px;
677 width: 50%;
678 position: relative;
679 }
680 .easyel-support-item-left{
681 background: #F9FAFD;
682 }
683 .easyel-support-item img{
684 width: 100%;
685 }
686 .easyel-support-heading{
687 max-width: 450px;
688 width: 100%;
689 margin-bottom: 110px;
690 }
691 .easyel-support-heading .easyel-title{
692 font-size: 28px;
693 margin-top: 35px;
694 margin-bottom: 28px;
695 }
696 .easyel-support-item .easyel-btn{
697 position: absolute;
698 left: 28px;
699 bottom: 28px;
700 }
701 .easyel-support-item-right{
702 background: var(--easy-primary-color);
703 }
704 .easyel-support-item-right .easyel-support-heading *{
705 color: var(--easy-white-color) !important;
706 }
707 .easyel-support-item-right .easyel-btn{
708 background: linear-gradient(to right, var(--easy-white-color), var(--easy-white-color)) padding-box,
709 linear-gradient(to right, var(--easy-primary-color), #C2B4FF) border-box;
710 color: var(--easy-primary-color);
711 }
712 .easyel-support-item-right .easyel-btn svg{
713 fill: currentColor;
714 }
715 /* End Support Area */
716
717 /****************************/
718 /* End Overview Area */
719 /****************************/
720
721 /****************************/
722 /* Start Widget Area */
723 /****************************/
724
725 /* Widget top section style */
726 .easyel-addon-search button{
727 font-size: 16px;
728 line-height: 150%;
729 border: none;
730 box-shadow: none;
731 border-radius: 8px;
732 cursor: pointer;
733 transition: all 0.3s ease;
734 }
735 .easyel-addon-search .easyel-action-btn{
736 background: #7455ff1a;
737 color: var(--easy-primary-color);
738 padding: 6px 16px;
739 margin-right: 5px;
740 }
741 .easyel-addon-search .easyel-action-btn:hover,
742 .easyel-addon-search .easyel-action-btn.active{
743 background: var(--easy-primary-color);
744 color: var(--easy-white-color);
745 }
746 .easyel-widget-activeDeactivate-button button{
747 background: var(--easy-primary-color);
748 color: var(--easy-white-color);
749 font-weight: 500;
750 padding: 12px 24px;
751 }
752 .easyel-widget-activeDeactivate-button button#deactivate-all-btn{
753 margin-left: 10px;
754 background: #E21700;
755 }
756 .easyel-addon-search #element-search{
757 width: 100%;
758 font-size: 14px;
759 background: #F4F6F8;
760 color: var(--easy-title-color);
761 padding: 8px 12px;
762 border: none;
763 box-shadow: none;
764 border-radius: 10px;
765 margin-top: 24px;
766 height: 36px;
767 }
768 .easyel-addon-search #element-search::placeholder{
769 color: #919EAB;
770 }
771 /* Widget Item Style */
772 .easyel-widgets-grid,
773 .easyel-extension-wrapper {
774 display: grid;
775 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
776 gap: 20px;
777 padding-bottom: 20px;
778 }
779 .easyel-widget-group-title,
780 .easyel-extension-group-title {
781 font-size: 20px;
782 font-weight: 600;
783 color: var(--easy-title-color);
784 margin: 40px 0 28px;
785 }
786 .easyel-widget-card {
787 position: relative;
788 overflow: hidden;
789 background: #F1F2FA;
790 padding: 10px;
791 border-radius: 12px;
792 }
793 .easyel-widget-card.easyel-pro-enable {
794 opacity: 0.7;
795 }
796 .easyel-widget-icon {
797 font-size: 24px;
798 width: 60px;
799 height: 60px;
800 background: var(--easy-white-color);
801 display: flex;
802 justify-content: center;
803 align-items: center;
804 border-radius: 8px;
805 margin-right: 12px;
806 position: relative;
807 }
808 .easyel-pro-badge {
809 position: absolute;
810 left: 50%;
811 top: -4px;
812 background-color: #F2295B;
813 color: var(--easy-white-color);
814 border-radius: 36px;
815 font-size: 8px;
816 font-weight: 500;
817 transform: translateX(-50%);
818 display: inline-flex;
819 align-items: center;
820 gap: 3px;
821 padding: 4px 6px;
822 line-height: 100%;
823 }
824 .widget-header strong{
825 font-size: 16px;
826 font-weight: 600;
827 color:var(--easy-title-color);
828 line-height: 1.2;
829 }
830 .easyel-demo-link{
831 margin-top: 8px;
832 gap: 14px;
833 }
834 .easyel-demo-link a{
835 font-size: 12px;
836 color: #09091480;
837 text-decoration: none;
838 box-shadow: none;
839 transition: 0.3s;
840 line-height: 1em;
841 }
842 .easyel-demo-link a i{
843 font-size: 14px;
844 }
845 .easyel-demo-link a:hover{
846 color: var(--easy-primary-color);
847 }
848 /* Widget Toggle switcher */
849 .easy-toggle-switch{
850 position: relative;
851 display: inline-block;
852 width: 40px;
853 height: 24px;
854 margin-top: 0;
855 }
856 .easy-toggle-switch input,
857 .easyel-toggle-switch-extension input,
858 .easyel-toggle-switch-widget input{
859 opacity: 0;
860 width: 0;
861 height: 0;
862 }
863 .easy-toggle-switch .slider{
864 position: absolute;
865 cursor: pointer;
866 top: 0;
867 left: 0;
868 right: 0;
869 bottom: 0;
870 background-color: #e9e9e9;
871 transition: .4s;
872 border-radius: 24px;
873 }
874 .easy-toggle-switch .slider:before,
875 .easyel-toggle-switch-widget .slider:before,
876 .easyel-toggle-switch-extension .slider:before,
877 .easyel-toggle-switch-widget .slider:before {
878 position: absolute;
879 content: "";
880 height: 16px;
881 width: 16px;
882 left: 4px;
883 top: 4px;
884 background-color: var(--easy-white-color);
885 transition: all .3s ease;
886 border-radius: 50%;
887 }
888 .easy-toggle-switch input:checked + .slider,
889 .easyel-toggle-switch-extension input:checked ~ .slider,
890 .easyel-toggle-switch-widget input:checked ~ .slider {
891 background-color: #22C55E;
892 }
893
894 .easy-toggle-switch input:checked + .slider:before {
895 transform: translateX(16px);
896 }
897
898 /****************************/
899 /* End Widget Area */
900 /****************************/
901
902 /****************************/
903 /* Start Extention Area */
904 /****************************/
905
906 .easyel-toggle-switch-extension,
907 .easyel-toggle-switch-widget {
908 display: inline-flex;
909 align-items: center;
910 cursor: pointer;
911 position: relative;
912 user-select: none;
913 gap: 10px;
914 }
915 .easyel-toggle-switch-extension .easyel-enable-all,
916 .easyel-toggle-switch-widget .easyel-enable-all-widget {
917 font-size: 14px;
918 font-weight: 500;
919 color: var(--easy-title-color);
920 line-height: 1;
921 white-space: nowrap;
922 }
923 .easyel-toggle-switch-extension input,
924 .easyel-toggle-switch-widget input
925 {
926 position: absolute;
927 }
928 .easyel-toggle-switch-extension .slider,
929 .easyel-toggle-switch-widget .slider
930 {
931 position: relative;
932 width: 44px;
933 height: 24px;
934 background-color: #E5E7EB;
935 border-radius: 24px;
936 transition: all 0.3s ease;
937 }
938 .easyel-toggle-switch-extension .slider:before,
939 .easyel-toggle-switch-widget .slider:before
940 {
941 background-color: #fff;
942 box-shadow: 0 2px 4px rgba(0,0,0,0.2);
943 }
944
945 .easyel-toggle-switch-extension input:checked ~ .slider:before,
946 .easyel-toggle-switch-widget input:checked ~ .slider:before
947 {
948 transform: translateX(20px);
949 }
950
951 #toplevel_page_easy-elements-dashboard .wp-menu-image {
952 background: url('../../img/easy-dashicon.svg') no-repeat center center !important;
953 background-size: 20px 20px !important;
954 }
955 /* Remove default dashicon */
956 #toplevel_page_easy-elements-dashboard .wp-menu-image:before {
957 content: none !important;
958 }
959
960 .easyel-extension-main-wrapper .easyel-widget-icon img {
961 width: 28px;
962 height: 28px;
963 max-width: 100%;
964 }
965
966 .easyel-video-section {
967 display: none;
968 }
969
970 /*black friday sale notice*/
971
972 .easyel-promo-notice {
973 padding: 0;
974 border: none !important;
975 background: #0d0c24;
976 color: #fff;
977 margin-top: 20px;
978 position: relative;
979 overflow: hidden;
980 border-radius: 6px;
981 margin-bottom: 30px;
982 }
983 .easyel-promo-content {
984 display: flex;
985 justify-content: space-between;
986 align-items: center;
987 padding: 18px 25px;
988 background: linear-gradient(90deg, #062e87, #0d0c24);
989 }
990 .easyel-promo-left {
991 font-size: 20px;
992 font-weight: 600;
993 display: flex;
994 align-items: center;
995 gap: 10px;
996 }
997 .easyel-promo-left span.orange {
998 color: #ff7a00;
999 }
1000 .easyel-promo-right {
1001 font-size: 18px;
1002 font-weight: 700;
1003 }
1004 .easyel-promo-btn {
1005 background: #fff;
1006 padding: 10px 18px;
1007 border-radius: 5px;
1008 font-weight: 600;
1009 text-decoration: none;
1010 color: #000;
1011 margin-left: 20px;
1012 display: inline-flex;
1013 align-items: center;
1014 gap: 5px;
1015 font-size: 16px;
1016 }
1017 .easyel-promo-dismiss {
1018 position: absolute;
1019 right: 10px;
1020 top: 10px;
1021 color: #fff;
1022 cursor: pointer;
1023 text-decoration: none;
1024 font-size: 16px;
1025 }
1026
1027 .easyel-promo-notice .notice-dismiss::before {
1028 font-size: 30px;
1029 }
1030
1031 .easyel-promo-notice .notice-dismiss {
1032 top: 10px;
1033 right: 10px;
1034 }
1035
1036
1037 /****************************/
1038 /* End Extention Area */
1039 /****************************/
1040
1041 /****************************/
1042 /* Start Settings Area */
1043 /****************************/
1044 .easyel-settings-topbar {
1045 display: flex;
1046 justify-content: space-between;
1047 }
1048 .easyel-settings-topbar button {
1049 background: var(--easy-primary-color);
1050 color: var(--easy-white-color);
1051 font-weight: 500;
1052 padding: 12px 24px;
1053 font-size: 16px;
1054 line-height: 150%;
1055 border: none;
1056 box-shadow: none;
1057 border-radius: 8px;
1058 cursor: pointer;
1059 transition: all 0.3s ease;
1060 }
1061 .easyel-settings-wrapper .w-100 {
1062 width: 100% !important;
1063 }
1064 .easyel-settings-wrapper .easyel-settings-field {
1065 display: flex;
1066 margin-bottom: 20px;
1067 }
1068 .easyel-settings-field-label {
1069 min-width: 200px;
1070 }
1071 .easyel-settings-field-inputs {
1072 display: flex;
1073 gap: 10px;
1074 flex-direction: column;
1075 width: 100%;
1076 }
1077 .easyel-settings-field .easyel-settings-field-input {
1078 padding: 10px 20px;
1079 border-radius: 4px;
1080 border: 1px solid #ededed;
1081 width: min-content;
1082 }
1083 .easyel-settings-field-group {
1084 display: flex;
1085 gap: 10px;
1086 flex-direction: column;
1087 }
1088 .easyel-toast {
1089 position: fixed;
1090 top: 100px;
1091 right: 20px;
1092 background: #2271b1;
1093 color: #fff;
1094 padding: 10px 20px;
1095 border-radius: 5px;
1096 font-size: 14px;
1097 box-shadow: 0 4px 8px rgba(0,0,0,0.2);
1098 z-index: 99999;
1099 opacity: 0;
1100 transform: translateY(-20px);
1101 transition: all 0.3s ease;
1102 }
1103 .easyel-toast.show {
1104 opacity: 1;
1105 transform: translateY(0);
1106 }
1107 .easyel-toast.success { background: #46b450; }
1108 .easyel-toast.error { background: #d63638; }
1109 .easyel-toast.info { background: #1e73be; }
1110
1111 .easyel-export-settings .button-primary,
1112 .easyel-import-settings .button-primary
1113 {
1114 background: var(--easy-primary-color);
1115 color: var(--easy-white-color);
1116 font-weight: 500;
1117 padding: 4px 15px;
1118 outline: none;
1119 border-radius: 6px;
1120 border: none;
1121 }
1122
1123 .easyel-export-settings .button-primary:focus,
1124 .easyel-import-settings .button-primary:focus,
1125 .easyel-export-settings .button-primary:hover,
1126 .easyel-import-settings .button-primary:hover
1127 {
1128 background: var(--easy-primary-color);
1129 color: var(--easy-white-color);
1130 border: none;
1131 }
1132
1133
1134 /*scroll smoother popup settings*/
1135
1136 .easyel-scroll-smoother-popup-setting {
1137 cursor: pointer;
1138 }
1139
1140 .easyel-smooth-scroll-settings-main-wrapper {
1141 display: flex;
1142 flex-direction: column;
1143 gap: 12px;
1144 max-height: 280px;
1145 overflow-y: auto;
1146 }
1147 .easyel-smooth-scroll-heading {
1148 margin-bottom: 40px;
1149 margin-top: 0;
1150 }
1151
1152 .easyel-smooth-scroll-popup {
1153 position: fixed;
1154 top: 100px;
1155 left: 0;
1156 right: 0;
1157 width: 100%;
1158 max-width: 967px;
1159 margin: 0 auto;
1160 background: white;
1161 border-top: 1px solid #f1f0f3;
1162 box-shadow: 0px 10px 30px 5px rgba(19, 65, 98, 0.10);
1163 z-index: 104;
1164 visibility: hidden;
1165 opacity: 0;
1166 padding: 30px 20px;
1167 transition: opacity 0.3s linear, clip 0.6s linear, visibility 0s 0.2s;
1168 transform: translateZ(0);
1169 border-radius: 12px;
1170 opacity: 0;
1171 z-index: 1010;
1172 }
1173
1174 .easyel-smooth-scroll-popup .wrapper {
1175 font-weight: 400;
1176 }
1177
1178 .easyel-smooth-scroll-popup.active {
1179 visibility: visible;
1180 opacity: 1;
1181 transition: clip 0.6s linear, opacity 0.2s linear;
1182 }
1183
1184 .easyel-smooth-scroll-popup {
1185 overflow-x: hidden;
1186 overflow: hidden!important;
1187 }
1188
1189 .easyel-smooth-scroll-popup.active {
1190 overflow-x: hidden;
1191 overflow: visible!important;
1192 }
1193
1194 .easyel-smooth-scroll-popup-close-icon i.feather-search::before {
1195 content: "\ea02";
1196 }
1197
1198 .ajax-search-close-icon {
1199 position: relative;
1200 }
1201
1202 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon {
1203 position: absolute;
1204 right: -23px;
1205 top: -25px;
1206 width: 40px;
1207 height: 40px;
1208 z-index: 1020;
1209 border-radius: 50%;
1210 border: 1px solid #E3E0F5;
1211 display: flex;
1212 align-items: center;
1213 justify-content: center;
1214 background-color: #fff;
1215 cursor: pointer;
1216 }
1217 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon i {
1218 color: #04122B;
1219 text-align: center;
1220 font-family: "Font Awesome 6 Pro";
1221 font-size: 22px;
1222 font-style: normal;
1223 font-weight: 400;
1224 line-height: 22px;
1225 cursor: pointer;
1226 }
1227
1228 .easyel-smooth-scroll-popup {
1229 position: fixed;
1230 top: 100px;
1231 left: 0;
1232 right: 0;
1233 width: 100%;
1234 max-width: 700px;
1235 margin: 0 auto;
1236 background: white;
1237 border-top: 1px solid #f1f0f3;
1238 box-shadow: 0px 10px 30px 5px rgba(19, 65, 98, 0.1);
1239 z-index: 104;
1240 visibility: hidden;
1241 opacity: 0;
1242 transition: opacity 0.3s linear, clip 0.6s linear, visibility 0s 0.2s;
1243 transform: translateZ(0);
1244 border-radius: 12px;
1245 opacity: 0;
1246 z-index: 1010;
1247 }
1248
1249 .easyel-smooth-scroll-popup.active {
1250 visibility: visible;
1251 opacity: 1;
1252 transition: clip 0.6s linear, opacity 0.2s linear;
1253 }
1254
1255 .easyel-smooth-scroll-popup {
1256 overflow-x: hidden;
1257 overflow: hidden !important;
1258 }
1259
1260 .easyel-smooth-scroll-popup.active {
1261 overflow-x: hidden;
1262 overflow: visible !important;
1263 }
1264
1265 .easyel-smooth-scroll-popup-close-icon i.feather-search::before {
1266 content: "\ea02";
1267 }
1268
1269 .ajax-search-close-icon {
1270 position: relative;
1271 }
1272
1273 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon {
1274 position: absolute;
1275 right: -38px;
1276 top: -50px;
1277 width: 35px;
1278 height: 35px;
1279 z-index: 1020;
1280 border-radius: 50%;
1281 border: 1px solid #E3E0F5;
1282 display: flex;
1283 align-items: center;
1284 justify-content: center;
1285 background-color: #fff;
1286 cursor: pointer;
1287 }
1288
1289 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon i {
1290 color: #04122B;
1291 text-align: center;
1292 font-family: "Font Awesome 6 Pro";
1293 font-size: 22px;
1294 font-style: normal;
1295 font-weight: 400;
1296 line-height: 22px;
1297 cursor: pointer;
1298 }
1299
1300 .easyel-smooth-scroll-popup.active .rbt-search-all-product {
1301 overflow-y: auto !important;
1302 max-height: calc(100vh - 180px);
1303 }
1304
1305 .easyel-smooth-scroll-popup .rbt-search-all-product {
1306 overflow-x: hidden;
1307 }
1308
1309 .popup-opened #wpbody-content::before {
1310 content: " ";
1311 position: absolute;
1312 top: 0;
1313 left: 0;
1314 width: 100%;
1315 height: 100%;
1316 background-color: rgb(0 0 0 / 52%);
1317 z-index: 1002;
1318 transition: all 0.7s;
1319 }
1320
1321 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon:focus {
1322 outline: none;
1323 border: none;
1324 box-shadow: unset!important;
1325 }
1326
1327 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon:hover {
1328 background: var(--easy-primary-color);
1329 color: var(--easy-white-color);
1330 }
1331
1332 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon:hover svg path {
1333 fill: #fff!important;
1334 }
1335
1336 .smooth-scroll-popup-item-save {
1337 display: flex;
1338 align-items: center;
1339 justify-content: flex-end;
1340 }
1341
1342 .smooth_scroll_popup_item_save {
1343 font-size: 14px;
1344 font-weight: bold;
1345 line-height: 30px;
1346 padding: 2px 15px;
1347 background: var(--easy-primary-color);
1348 color: var(--easy-white-color);
1349 border: 1px solid #0074e0;
1350 border-radius: 5px;
1351 margin-top: 30px;
1352 cursor: pointer;
1353 }
1354
1355
1356 .easyel-smooth-scroll-item {
1357 display: flex;
1358 align-items: center;
1359 gap: 15px;
1360 }
1361
1362 .easyel-smooth-scroll-item .easy-field-label {
1363 flex: 0 0 35%;
1364 }
1365
1366 .easyel-smooth-scroll-item .easy-field-item input[type="number"]="number""] {
1367 width: 150px;
1368 }
1369
1370 #easyel-message-box {
1371 position: fixed;
1372 top: 60px;
1373 right: 20px;
1374 background-color: #0074E0;
1375 border: 1px solid #0074E0;
1376 padding: 10px 15px;
1377 z-index: 9999;
1378 box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
1379 border-radius: 5px;
1380 display: none;
1381 width: 200px;
1382 text-transform: capitalize;
1383 text-align: center;
1384 font-size: 18px;
1385 color: #fff;
1386 }
1387
1388 #easyel-message-box p {
1389 margin: 0;
1390 font-size: 14px;
1391 text-align: center;
1392 color: #fff;
1393 }
1394
1395 .easyel-plugin-main-settings-page {
1396 position: relative;
1397 }
1398
1399 .easyel-plugin-main-settings-page::after {
1400 content: "";
1401 position: absolute;
1402 inset: 0;
1403 background: rgba(255, 255, 255, 0.6);
1404 opacity: 0;
1405 visibility: hidden;
1406 transition: opacity 0.3s ease;
1407 z-index: 10;
1408 }
1409
1410
1411 .easyel-plugin-main-settings-page.is-saving::after {
1412 opacity: 1;
1413 visibility: visible;
1414 }
1415
1416 .easyel-saving-indicator {
1417 position: fixed;
1418 top: 50%;
1419 left: 50%;
1420 transform: translate(-50%, -50%);
1421 font-size: 14px;
1422 font-weight: 600;
1423 padding: 6px 14px;
1424 border-radius: 4px;
1425 z-index: 99999;
1426 color: #3b82f6;
1427 opacity: 0;
1428
1429 }
1430
1431 .easyel-plugin-main-settings-page.is-saving .easyel-saving-indicator {
1432 opacity: 1;
1433 }
1434
1435 /*custom font*/
1436
1437 .easyel-custom-font {
1438 font-family: "Inter", sans-serif;
1439 color: #1e293b;
1440 max-width: 1000px;
1441 margin: 20px auto;
1442 padding: 0 15px;
1443 }
1444
1445 .easyel-custom-font-banner {
1446 background: linear-gradient(135deg, #6d28d9, #a855f7);
1447 color: #fff;
1448 padding: 50px 40px;
1449 border-radius: 14px;
1450 text-align: center;
1451 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
1452 margin-bottom: 40px;
1453 }
1454
1455 .easyel-custom-font-banner h1 {
1456 margin-bottom: 10px;
1457 font-size: 28px;
1458 font-weight: 700;
1459 color: #fff;
1460 }
1461
1462 .easyel-custom-font-banner p {
1463 font-size: 15px;
1464 opacity: 0.9;
1465 margin-bottom: 20px;
1466 }
1467
1468 .easyel-upgrade-btn-custom-font {
1469 background: #fff;
1470 color: #6d28d9;
1471 font-weight: 600;
1472 text-decoration: none;
1473 padding: 10px 22px;
1474 border-radius: 6px;
1475 transition: all 0.3s ease;
1476 display: inline-block;
1477 }
1478
1479 .easyel-upgrade-btn-custom-font:hover {
1480 background: #ede9fe;
1481 color: #4c1d95;
1482 }
1483
1484 .easyel-custom-font-page {
1485 font-family: "Inter", sans-serif;
1486 color: #1e293b;
1487 max-width: 1000px;
1488 margin: 20px auto;
1489 padding: 0 15px;
1490 }
1491
1492 .easyel-promo-right a {
1493 color: #fff;
1494 font-size: 18px;
1495 }
1496
1497 /****************************/
1498 /* End Settings Area */
1499 /****************************/
1500
1501 /****************************/
1502 /* Start Responsive Area */
1503 /****************************/
1504 @media only screen and (min-width: 1600px) and (max-width: 1700px) {
1505 .easyel-banner-section .easyel-shape-3 {
1506 width: 45%;
1507 height: 100%;
1508 }
1509 }
1510
1511 @media only screen and (min-width: 1367px) and (max-width: 1599px) {
1512 .easyel-banner-section .easyel-shape-3 {
1513 width: 40%;
1514 height: 100%;
1515 }
1516 }
1517
1518
1519 @media only screen and (max-width: 1400px) {
1520 .easyel-nav-tab-item {
1521 width: 25%;
1522 }
1523 .easyel-plugin-settings-wrapper{
1524 gap: 20px;
1525 }
1526 .easyel-section-gap {
1527 padding: 80px 10px;
1528 }
1529 }
1530
1531 @media only screen and (max-width: 1366px) {
1532 .easyel-banner-section .easyel-shape-3 {
1533 display: none;
1534 }
1535 }
1536 @media only screen and (max-width: 1250px) {
1537 .easyel-section-heading .easyel-title{
1538 font-size: 28px;
1539 }
1540 .easyel-section-heading .easyel-desc{
1541 font-size: 16px;
1542 }
1543 }
1544
1545 @media only screen and (max-width: 990px) {
1546 .easyel-plugin-settings-wrapper{
1547 display: grid;
1548 }
1549 .easyel-nav-tab-item,
1550 #easyel-tab-content {
1551 width: 100%;
1552 }
1553 .easyel-overview-area .easyel-banner-content .title{
1554 font-size: 36px;
1555 }
1556 .easyel-overview-area .easyel-position-rl{
1557 background-image: none;
1558 }
1559 .easyel-overview-area .easyel-banner-content-area {
1560 padding: 100px 26px 60px;
1561 }
1562 .easyel-overview-area .easyel-banner-rating{
1563 display: grid;
1564 }
1565 .easyel-nav-tab, .easyel-nav-tab-pro{
1566 margin-bottom: 0;
1567 }
1568 }
1569
1570
1571 /*popup pro modal css*/
1572
1573
1574 .easyel-pro-modal {
1575 display: none;
1576 position: fixed;
1577 inset: 0;
1578 z-index: 999999;
1579 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
1580 }
1581
1582 .easyel-pro-modal.active {
1583 display: block;
1584 }
1585
1586 .easyel-pro-modal-overlay {
1587 position: absolute;
1588 inset: 0;
1589 background: rgba(0,0,0,0.6);
1590 }
1591
1592 .easyel-pro-modal-content {
1593 position: relative;
1594 max-width: 520px;
1595 margin: 10% auto;
1596 background: #fff;
1597 border-radius: 12px;
1598 padding: 30px;
1599 text-align: center;
1600 box-shadow: 0 20px 50px rgba(0,0,0,.2);
1601 animation: easyelPop 0.3s ease;
1602 }
1603
1604 @keyframes easyelPop {
1605 from { transform: scale(.9); opacity: 0; }
1606 to { transform: scale(1); opacity: 1; }
1607 }
1608
1609 /* PRO Upgrade Modal */
1610 .easyel-admin-toggle-pro-modal {
1611 display: none;
1612 position: fixed;
1613 inset: 0;
1614 z-index: 999999;
1615 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
1616 }
1617
1618 .easyel-admin-toggle-pro-modal.active {
1619 display: block !important;
1620 }
1621
1622 .easyel-admin-toggle-pro-modal-overlay {
1623 position: absolute;
1624 inset: 0;
1625 background: rgba(0, 0, 0, 0.65);
1626 }
1627
1628 .easyel-admin-toggle-pro-modal-content {
1629 position: relative;
1630 max-width: 520px;
1631 margin: 10% auto;
1632 background: #fff;
1633 border-radius: 14px;
1634 padding: 32px;
1635 text-align: center;
1636 box-shadow: 0 25px 60px rgba(0,0,0,.25);
1637 animation: easyelAdminTogglePop .3s ease;
1638 }
1639
1640 @keyframes easyelAdminTogglePop {
1641 from { transform: scale(.92); opacity: 0; }
1642 to { transform: scale(1); opacity: 1; }
1643 }
1644
1645 .easyel-admin-toggle-pro-modal-close {
1646 position: absolute;
1647 top: 12px;
1648 right: 14px;
1649 background: none;
1650 border: none;
1651 font-size: 22px;
1652 cursor: pointer;
1653 }
1654
1655 .easyel-admin-toggle-pro-badge {
1656 display: inline-block;
1657 background: linear-gradient(135deg, #ff4d4d, #ff9f43);
1658 color: #fff;
1659 font-weight: 700;
1660 padding: 4px 14px;
1661 border-radius: 20px;
1662 font-size: 12px;
1663 margin-bottom: 12px;
1664 }
1665
1666 .easyel-admin-toggle-pro-feature-list {
1667 text-align: left;
1668 margin: 22px 0;
1669 padding-left: 0;
1670 list-style: none;
1671 }
1672
1673 .easyel-admin-toggle-pro-feature-list li {
1674 margin-bottom: 10px;
1675 font-size: 14px;
1676 }
1677
1678 .easyel-admin-toggle-pro-actions {
1679 display: flex;
1680 justify-content: center;
1681 gap: 14px;
1682 }
1683
1684 .easyel-admin-toggle-pro-upgrade-btn {
1685 background: #ff4d4d;
1686 color: #fff;
1687 padding: 12px 24px;
1688 border-radius: 10px;
1689 text-decoration: none;
1690 font-weight: 600;
1691 }
1692
1693 .easyel-admin-toggle-pro-upgrade-btn:hover {
1694 background: #e63e3e;
1695 }
1696
1697 .easyel-admin-toggle-pro-modal-cancel {
1698 background: #f0f0f0;
1699 border: none;
1700 padding: 12px 20px;
1701 border-radius: 10px;
1702 cursor: pointer;
1703 }
1704
1705 /* Locked widget feel — applies to both widget cards and extension cards.
1706 The checkbox itself can't be clicked (pointer-events:none) so the
1707 switcher wrapper's click bubbles up to the document delegate that
1708 opens the upgrade modal. No `disabled` attribute on the input. */
1709 .easy-widget-item.easyel-pro-enable,
1710 .easyel-extension-item.easyel-pro-enable {
1711 cursor: pointer;
1712 }
1713
1714 .easy-widget-item.easyel-pro-enable .widget-toggle-checkbox,
1715 .easyel-extension-item.easyel-pro-enable .easyel-extension-toggle {
1716 cursor: not-allowed;
1717 pointer-events: none;
1718 }
1719
1720 .easy-widget-item.easyel-pro-enable .easyel-widget-card-switcher,
1721 .easyel-extension-item.easyel-pro-enable .easyel-widget-card-switcher {
1722 cursor: pointer;
1723 }
1724
1725 .easyel-readingprogress-bar-popup-setting {
1726 cursor: pointer;
1727 }
1728
1729 .easyel-quick-view-setting,
1730 .easyel-compare-view-setting
1731 {
1732 cursor: pointer;
1733 }
1734
1735
1736 /*Reading progress bar*/
1737
1738 .easyel-reading-progressbar-popup-setting {
1739 cursor: pointer;
1740 }
1741
1742 .easyel-reading-progressbar-settings-main-wrapper {
1743 display: flex;
1744 flex-direction: column;
1745 gap: 30px;
1746 max-height: 300px;
1747 overflow-y: auto;
1748 }
1749 .easyel-reading-progressbar-heading {
1750 margin-bottom: 40px;
1751 }
1752
1753 .easyel-reading-progressbar-popup {
1754 position: fixed;
1755 top: 100px;
1756 left: 0;
1757 right: 0;
1758 width: 100%;
1759 max-width: 967px;
1760 margin: 0 auto;
1761 background: white;
1762 border-top: 1px solid #f1f0f3;
1763 box-shadow: 0px 10px 30px 5px rgba(19, 65, 98, 0.10);
1764 z-index: 104;
1765 visibility: hidden;
1766 opacity: 0;
1767 padding: 30px 20px;
1768 transition: opacity 0.3s linear, clip 0.6s linear, visibility 0s 0.2s;
1769 transform: translateZ(0);
1770 border-radius: 12px;
1771 opacity: 0;
1772 z-index: 1010;
1773 }
1774
1775 .easyel-reading-progressbar-popup .wrapper {
1776 font-weight: 400;
1777 }
1778
1779 .easyel-reading-progressbar-popup {
1780 overflow-x: hidden;
1781 overflow: hidden!important;
1782 }
1783
1784
1785 .easyel-reading-progressbar-popup.active {
1786 overflow-x: hidden;
1787 }
1788
1789 .easyel-reading-progressbar-popup-close-icon i.feather-search::before {
1790 content: "\ea02";
1791 }
1792
1793 .ajax-search-close-icon {
1794 position: relative;
1795 }
1796
1797
1798 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon {
1799 position: absolute;
1800 right: -35px;
1801 top: -50px;
1802 width: 40px;
1803 height: 40px;
1804 z-index: 1020;
1805 border-radius: 50%;
1806 border: 1px solid #E3E0F5;
1807 display: flex;
1808 align-items: center;
1809 justify-content: center;
1810 background-color: #fff;
1811 cursor: pointer;
1812 }
1813
1814 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon i {
1815 color: #04122B;
1816 text-align: center;
1817 font-family: "Font Awesome 6 Pro";
1818 font-size: 22px;
1819 font-style: normal;
1820 font-weight: 400;
1821 line-height: 22px;
1822 cursor: pointer;
1823 }
1824
1825 .easyel-reading-progressbar-popup {
1826 position: fixed;
1827 top: 100px;
1828 left: 0;
1829 right: 0;
1830 width: 100%;
1831 max-width: 700px;
1832 margin: 0 auto;
1833 background: white;
1834 border-top: 1px solid #f1f0f3;
1835 box-shadow: 0px 10px 30px 5px rgba(19, 65, 98, 0.1);
1836 z-index: 104;
1837 visibility: hidden;
1838 opacity: 0;
1839 transition: opacity 0.3s linear, clip 0.6s linear, visibility 0s 0.2s;
1840 transform: translateZ(0);
1841 border-radius: 12px;
1842 opacity: 0;
1843 z-index: 1010;
1844 }
1845
1846 .easyel-reading-progressbar-popup.active {
1847 visibility: visible;
1848 opacity: 1;
1849 transition: clip 0.6s linear, opacity 0.2s linear;
1850 }
1851
1852 .easyel-reading-progressbar-popup {
1853 overflow-x: hidden;
1854 overflow: visible !important;
1855 }
1856
1857 .easyel-reading-progressbar-popup.active {
1858 overflow-x: hidden;
1859 }
1860
1861 .easyel-reading-progressbar-popup-close-icon i.feather-search::before {
1862 content: "\ea02";
1863 }
1864
1865 .ajax-search-close-icon {
1866 position: relative;
1867 }
1868
1869
1870 .easyel-reading-progressbar-popup.active .rbt-search-all-product {
1871 overflow-y: auto !important;
1872 max-height: calc(100vh - 180px);
1873 }
1874
1875 .easyel-reading-progressbar-popup .rbt-search-all-product {
1876 overflow-x: hidden;
1877 }
1878
1879 .popup-opened #wpbody-content::before {
1880 content: " ";
1881 position: absolute;
1882 top: 0;
1883 left: 0;
1884 width: 100%;
1885 height: 100%;
1886 background-color: rgb(0 0 0 / 52%);
1887 z-index: 1002;
1888 transition: all 0.7s;
1889 }
1890
1891 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon:focus {
1892 outline: none;
1893 border: none;
1894 box-shadow: unset!important;
1895 }
1896
1897 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon:hover {
1898 background: var(--easy-primary-color);
1899 color: var(--easy-white-color);
1900 }
1901
1902 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon:hover svg path {
1903 fill: #fff!important;
1904 }
1905
1906 .reading-progressbar-popup-item-save {
1907 display: flex;
1908 align-items: center;
1909 justify-content: flex-end;
1910 }
1911
1912 .reading_progressbar_popup_item_save {
1913 font-size: 14px;
1914 font-weight: bold;
1915 line-height: 30px;
1916 padding: 2px 15px;
1917 background: var(--easy-primary-color);
1918 color: var(--easy-white-color);
1919 border: 1px solid #0074e0;
1920 border-radius: 5px;
1921 cursor: pointer;
1922 margin-top: 20px;
1923 }
1924
1925 .reading_progressbar-scroll-item {
1926 display: flex;
1927 align-items: center;
1928 gap: 15px;
1929 }
1930
1931 .easyel-reading-progressbar-item {
1932 display: flex;
1933 align-items: center;
1934 gap: 15px;
1935 padding-right: 30px;
1936 }
1937
1938 .easyel-reading-progressbar-item .easy-field-label {
1939 flex: 0 0 35%;
1940 }
1941
1942 .easyel-reading-progressbar-item .easyel-checkbox-group {
1943 display: flex;
1944 flex-direction: column;
1945 margin-top: 20px;
1946 gap: 15px;
1947 padding: 10px;
1948 }
1949
1950 .easyel-reading-progressbar-item .easy-field-content {
1951 display: flex;
1952 flex-direction: column;
1953 flex: 1;
1954 }
1955
1956 .easyel-reading-progressbar-item .easyel-pro-notice {
1957 color: #d62b87;
1958 font-size: 13px;
1959 margin-top: 5px;
1960 }
1961
1962
1963 .easyel-reading-progressbar-item .select2-container--default .select2-selection--single .select2-selection__rendered,
1964 .easyel-reading-progressbar-item .select2-container--default .select2-selection--single .select2-selection__rendered {
1965 line-height: 40px;
1966 padding-left: 14px;
1967 padding-right: 36px;
1968 color: #333;
1969 }
1970
1971 .easyel-reading-progressbar-item .select2-selection__placeholder,
1972 .easyel-reading-progressbar-item .select2-selection__placeholder {
1973 color: #9aa0a6;
1974 }
1975
1976 .easyel-extension-heading-group .easyel-group-toggle::before {
1977 display: none !important;
1978 }
1979
1980 .easyel-extension-heading-group .easyel-group-toggle {
1981 border: none;
1982 }
1983
1984 /* Scroll Top Settings Popup */
1985 .easyel-scroll-top-popup-setting {
1986 cursor: pointer;
1987 }
1988
1989 .easyel-scroll-top-popup {
1990 position: fixed;
1991 top: 100px;
1992 left: 0;
1993 right: 0;
1994 width: 100%;
1995 max-width: 700px;
1996 margin: 0 auto;
1997 background: white;
1998 border-top: 1px solid #f1f0f3;
1999 box-shadow: 0px 10px 30px 5px rgba(19, 65, 98, 0.1);
2000 visibility: hidden;
2001 opacity: 0;
2002 padding: 30px 20px;
2003 transition: opacity 0.3s linear, clip 0.6s linear, visibility 0s 0.2s;
2004 transform: translateZ(0);
2005 border-radius: 12px;
2006 z-index: 1010;
2007 overflow: hidden !important;
2008
2009 .wrapper {
2010 font-weight: 400;
2011 }
2012
2013 &.active {
2014 visibility: visible;
2015 opacity: 1;
2016 transition: clip 0.6s linear, opacity 0.2s linear;
2017 overflow: visible !important;
2018 }
2019
2020 .easyel-scroll-top-popup-close-icon {
2021 position: absolute;
2022 right: -38px;
2023 top: -50px;
2024 width: 35px;
2025 height: 35px;
2026 z-index: 1020;
2027 border-radius: 50%;
2028 border: 1px solid #E3E0F5;
2029 display: flex;
2030 align-items: center;
2031 justify-content: center;
2032 background-color: #fff;
2033 cursor: pointer;
2034
2035 &:hover {
2036 background: var(--easy-primary-color);
2037 color: var(--easy-white-color);
2038
2039 svg path {
2040 fill: #fff !important;
2041 }
2042 }
2043
2044 &:focus {
2045 outline: none;
2046 border: none;
2047 box-shadow: unset !important;
2048 }
2049 }
2050 }
2051
2052 .easyel-scroll-top-heading {
2053 margin-bottom: 40px;
2054 }
2055
2056 .scroll_top_popup_item_save {
2057 font-size: 14px;
2058 font-weight: bold;
2059 line-height: 30px;
2060 padding: 2px 15px;
2061 background: var(--easy-primary-color);
2062 color: var(--easy-white-color);
2063 border: 1px solid #0074e0;
2064 border-radius: 5px;
2065 margin-top: 30px;
2066 cursor: pointer;
2067 }
2068
2069 /* Preloader Settings Popup */
2070 .easyel-preloader-popup-setting {
2071 cursor: pointer;
2072 font-size: 14px;
2073 width: 14px;
2074 height: 14px;
2075 line-height: 1;
2076 color: #09091480;
2077 transition: 0.3s;
2078 display: inline-flex;
2079 align-items: center;
2080 justify-content: center;
2081
2082 &::before {
2083 font-size: 14px;
2084 width: 14px;
2085 height: 14px;
2086 line-height: 1;
2087 }
2088
2089 &:hover {
2090 color: var(--easy-primary-color);
2091 }
2092 }
2093
2094 .easyel-preloader-popup {
2095 position: fixed;
2096 top: 100px;
2097 left: 0;
2098 right: 0;
2099 width: 100%;
2100 max-width: 700px;
2101 margin: 0 auto;
2102 background: white;
2103 border-top: 1px solid #f1f0f3;
2104 box-shadow: 0px 10px 30px 5px rgba(19, 65, 98, 0.1);
2105 visibility: hidden;
2106 opacity: 0;
2107 padding: 30px 20px;
2108 transition: opacity 0.3s linear, clip 0.6s linear, visibility 0s 0.2s;
2109 transform: translateZ(0);
2110 border-radius: 12px;
2111 z-index: 1010;
2112 overflow: hidden !important;
2113
2114 .wrapper {
2115 font-weight: 400;
2116 max-height: 70vh;
2117 overflow-y: auto;
2118 }
2119
2120 &.active {
2121 visibility: visible;
2122 opacity: 1;
2123 transition: clip 0.6s linear, opacity 0.2s linear;
2124 overflow: visible !important;
2125 }
2126
2127 .easyel-preloader-popup-close-icon {
2128 position: absolute;
2129 right: -38px;
2130 top: -50px;
2131 width: 35px;
2132 height: 35px;
2133 z-index: 1020;
2134 border-radius: 50%;
2135 border: 1px solid #E3E0F5;
2136 display: flex;
2137 align-items: center;
2138 justify-content: center;
2139 background-color: #fff;
2140 cursor: pointer;
2141
2142 &:hover {
2143 background: var(--easy-primary-color);
2144 color: var(--easy-white-color);
2145
2146 svg path {
2147 fill: #fff !important;
2148 }
2149 }
2150
2151 &:focus {
2152 outline: none;
2153 border: none;
2154 box-shadow: unset !important;
2155 }
2156 }
2157 }
2158
2159 .easyel-preloader-heading {
2160 margin-bottom: 40px;
2161 }
2162
2163 .easyel_preloader_popup_item_save {
2164 font-size: 14px;
2165 font-weight: bold;
2166 line-height: 30px;
2167 padding: 2px 15px;
2168 background: var(--easy-primary-color);
2169 color: var(--easy-white-color);
2170 border: 1px solid #0074e0;
2171 border-radius: 5px;
2172 margin-top: 30px;
2173 cursor: pointer;
2174 }