PluginProbe
Easy Elements for Elementor – Addons & Website Templates / 1.3.6
Easy Elements for Elementor – Addons & Website Templates v1.3.6
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.3.6, at assets/css/admin/admin.css

2,138 lines 41.2 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(../../../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 */
1847 .easy-widget-item.easyel-pro-enable {
1848 cursor: pointer;
1849 }
1850
1851 .easy-widget-item.easyel-pro-enable .widget-toggle-checkbox {
1852 cursor: not-allowed;
1853 }
1854
1855 .easy-widget-item.easyel-pro-enable .easyel-widget-card-switcher {
1856 cursor: pointer;
1857 }
1858
1859 .easy-widget-item.easyel-pro-enable .widget-toggle-checkbox {
1860 pointer-events: none;
1861 }
1862
1863 .easyel-readingprogress-bar-popup-setting {
1864 cursor: pointer;
1865 }
1866
1867 /*Reading progress bar*/
1868 .easyel-reading-progressbar-popup-setting {
1869 cursor: pointer;
1870 }
1871
1872 .easyel-reading-progressbar-settings-main-wrapper {
1873 display: flex;
1874 flex-direction: column;
1875 gap: 30px;
1876 max-height: 300px;
1877 overflow-y: auto;
1878 }
1879
1880 .easyel-reading-progressbar-heading {
1881 margin-bottom: 40px;
1882 }
1883
1884 .easyel-reading-progressbar-popup {
1885 position: fixed;
1886 top: 100px;
1887 left: 0;
1888 right: 0;
1889 width: 100%;
1890 max-width: 967px;
1891 margin: 0 auto;
1892 background: white;
1893 border-top: 1px solid #f1f0f3;
1894 box-shadow: 0px 10px 30px 5px rgba(19, 65, 98, 0.1);
1895 z-index: 104;
1896 visibility: hidden;
1897 opacity: 0;
1898 padding: 30px 20px;
1899 transition: opacity 0.3s linear, clip 0.6s linear, visibility 0s 0.2s;
1900 transform: translateZ(0);
1901 border-radius: 12px;
1902 opacity: 0;
1903 z-index: 1010;
1904 }
1905
1906 .easyel-reading-progressbar-popup .wrapper {
1907 font-weight: 400;
1908 }
1909
1910 .easyel-reading-progressbar-popup.active {
1911 visibility: visible;
1912 opacity: 1;
1913 transition: clip 0.6s linear, opacity 0.2s linear;
1914 }
1915
1916 .easyel-reading-progressbar-popup {
1917 overflow-x: hidden;
1918 overflow: hidden !important;
1919 }
1920
1921 .easyel-reading-progressbar-popup.active {
1922 overflow-x: hidden;
1923 overflow: visible !important;
1924 }
1925
1926 .easyel-reading-progressbar-popup-close-icon i.feather-search::before {
1927 content: "\ea02";
1928 }
1929
1930 .ajax-search-close-icon {
1931 position: relative;
1932 }
1933
1934 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon {
1935 position: absolute;
1936 right: -23px;
1937 top: -25px;
1938 width: 40px;
1939 height: 40px;
1940 z-index: 1020;
1941 border-radius: 50%;
1942 border: 1px solid #E3E0F5;
1943 display: flex;
1944 align-items: center;
1945 justify-content: center;
1946 background-color: #fff;
1947 cursor: pointer;
1948 }
1949
1950 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon i {
1951 color: #04122B;
1952 text-align: center;
1953 font-family: "Font Awesome 6 Pro";
1954 font-size: 22px;
1955 font-style: normal;
1956 font-weight: 400;
1957 line-height: 22px;
1958 cursor: pointer;
1959 }
1960
1961 .easyel-reading-progressbar-popup {
1962 position: fixed;
1963 top: 100px;
1964 left: 0;
1965 right: 0;
1966 width: 100%;
1967 max-width: 700px;
1968 margin: 0 auto;
1969 background: white;
1970 border-top: 1px solid #f1f0f3;
1971 box-shadow: 0px 10px 30px 5px rgba(19, 65, 98, 0.1);
1972 z-index: 104;
1973 visibility: hidden;
1974 opacity: 0;
1975 transition: opacity 0.3s linear, clip 0.6s linear, visibility 0s 0.2s;
1976 transform: translateZ(0);
1977 border-radius: 12px;
1978 opacity: 0;
1979 z-index: 1010;
1980 }
1981
1982 .easyel-reading-progressbar-popup.active {
1983 visibility: visible;
1984 opacity: 1;
1985 transition: clip 0.6s linear, opacity 0.2s linear;
1986 }
1987
1988 .easyel-reading-progressbar-popup {
1989 overflow-x: hidden;
1990 overflow: hidden !important;
1991 }
1992
1993 .easyel-reading-progressbar-popup.active {
1994 overflow-x: hidden;
1995 overflow: visible !important;
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 .easyel-reading-progressbar-popup-close-icon {
2007 position: absolute;
2008 right: -38px;
2009 top: -50px;
2010 width: 35px;
2011 height: 35px;
2012 z-index: 1020;
2013 border-radius: 50%;
2014 border: 1px solid #E3E0F5;
2015 display: flex;
2016 align-items: center;
2017 justify-content: center;
2018 background-color: #fff;
2019 cursor: pointer;
2020 }
2021
2022 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon i {
2023 color: #04122B;
2024 text-align: center;
2025 font-family: "Font Awesome 6 Pro";
2026 font-size: 22px;
2027 font-style: normal;
2028 font-weight: 400;
2029 line-height: 22px;
2030 cursor: pointer;
2031 }
2032
2033 .easyel-reading-progressbar-popup.active .rbt-search-all-product {
2034 overflow-y: auto !important;
2035 max-height: calc(100vh - 180px);
2036 }
2037
2038 .easyel-reading-progressbar-popup .rbt-search-all-product {
2039 overflow-x: hidden;
2040 }
2041
2042 .popup-opened #wpbody-content::before {
2043 content: " ";
2044 position: absolute;
2045 top: 0;
2046 left: 0;
2047 width: 100%;
2048 height: 100%;
2049 background-color: rgba(0, 0, 0, 0.52);
2050 z-index: 1002;
2051 transition: all 0.7s;
2052 }
2053
2054 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon:focus {
2055 outline: none;
2056 border: none;
2057 box-shadow: unset !important;
2058 }
2059
2060 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon:hover {
2061 background: var(--easy-primary-color);
2062 color: var(--easy-white-color);
2063 }
2064
2065 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon:hover svg path {
2066 fill: #fff !important;
2067 }
2068
2069 .reading-progressbar-popup-item-save {
2070 display: flex;
2071 align-items: center;
2072 justify-content: flex-end;
2073 }
2074
2075 .reading_progressbar_popup_item_save {
2076 font-size: 14px;
2077 font-weight: bold;
2078 line-height: 30px;
2079 padding: 2px 15px;
2080 background: var(--easy-primary-color);
2081 color: var(--easy-white-color);
2082 border: 1px solid #0074e0;
2083 border-radius: 5px;
2084 margin-top: 30px;
2085 cursor: pointer;
2086 }
2087
2088 .reading_progressbar-scroll-item {
2089 display: flex;
2090 align-items: center;
2091 gap: 15px;
2092 }
2093
2094 .easyel-reading-progressbar-item {
2095 display: flex;
2096 align-items: center;
2097 gap: 15px;
2098 padding-right: 30px;
2099 }
2100
2101 .easyel-reading-progressbar-item .easy-field-label {
2102 flex: 0 0 35%;
2103 }
2104
2105 .easyel-reading-progressbar-item .easyel-checkbox-group {
2106 display: flex;
2107 flex-direction: column;
2108 margin-top: 20px;
2109 gap: 15px;
2110 padding: 10px;
2111 }
2112
2113 .easyel-reading-progressbar-item .easyel-pro-notice {
2114 color: #d62b87;
2115 flex: 1 1 100%;
2116 font-size: 13px;
2117 }
2118
2119 .easyel-reading-progressbar-item .select2-container--default .select2-selection--single .select2-selection__rendered,
2120 .easyel-reading-progressbar-item .select2-container--default .select2-selection--single .select2-selection__rendered {
2121 line-height: 40px;
2122 padding-left: 14px;
2123 padding-right: 36px;
2124 color: #333;
2125 }
2126
2127 .easyel-reading-progressbar-item .select2-selection__placeholder,
2128 .easyel-reading-progressbar-item .select2-selection__placeholder {
2129 color: #9aa0a6;
2130 }
2131
2132 .easyel-extension-heading-group .easyel-group-toggle::before {
2133 display: none !important;
2134 }
2135
2136 .easyel-extension-heading-group .easyel-group-toggle {
2137 border: none;
2138 }