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.css

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

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