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

2,358 lines 45.6 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 /* ========================================
1578 Quick View Popup Settings
1579 ======================================== */
1580 .easyel-quickview-popup {
1581 position: fixed;
1582 top: 100px;
1583 left: 0;
1584 right: 0;
1585 width: 100%;
1586 max-width: 700px;
1587 margin: 0 auto;
1588 background: white;
1589 border-top: 1px solid #f1f0f3;
1590 box-shadow: 0px 10px 30px 5px rgba(19, 65, 98, 0.1);
1591 z-index: 1010;
1592 visibility: hidden;
1593 opacity: 0;
1594 padding: 30px 20px;
1595 transition: opacity 0.3s linear, clip 0.6s linear, visibility 0s 0.2s;
1596 transform: translateZ(0);
1597 border-radius: 12px;
1598 overflow: hidden !important;
1599 max-height: 80vh;
1600 }
1601
1602 .easyel-quickview-popup .wrapper {
1603 font-weight: 400;
1604 }
1605
1606 .easyel-quickview-popup.active {
1607 visibility: visible;
1608 opacity: 1;
1609 transition: clip 0.6s linear, opacity 0.2s linear;
1610 }
1611
1612 .easyel-quickview-popup .easyel-quickview-popup-close-icon {
1613 position: absolute;
1614 right: -35px;
1615 top: -50px;
1616 width: 35px;
1617 height: 35px;
1618 z-index: 1020;
1619 border-radius: 50%;
1620 border: 1px solid #E3E0F5;
1621 display: flex;
1622 align-items: center;
1623 justify-content: center;
1624 background-color: #fff;
1625 cursor: pointer;
1626 text-decoration: none;
1627 }
1628
1629 .easyel-quickview-popup .easyel-quickview-popup-close-icon:focus {
1630 outline: none;
1631 border: none;
1632 box-shadow: unset !important;
1633 }
1634
1635 .easyel-quickview-popup .easyel-quickview-popup-close-icon:hover {
1636 background: var(--easy-primary-color);
1637 color: var(--easy-white-color);
1638 }
1639
1640 .easyel-quickview-popup .easyel-quickview-popup-close-icon:hover svg path {
1641 fill: #fff !important;
1642 }
1643
1644 .easyel-quickview-heading {
1645 font-size: 20px;
1646 font-weight: 600;
1647 margin-bottom: 20px;
1648 padding-bottom: 15px;
1649 border-bottom: 1px solid #f1f0f3;
1650 margin-top: 0;
1651 }
1652
1653 .easyel-quickview-section-title {
1654 font-size: 16px;
1655 font-weight: 600;
1656 margin: 25px 0 12px;
1657 padding-top: 15px;
1658 border-top: 1px solid #f1f0f3;
1659 color: #1e293b;
1660 }
1661
1662 .easyel-quickview-section-title:first-of-type {
1663 margin-top: 0;
1664 padding-top: 0;
1665 border-top: none;
1666 }
1667
1668 .easyel-quickview-item {
1669 display: flex;
1670 align-items: center;
1671 gap: 15px;
1672 margin-bottom: 12px;
1673 }
1674
1675 .easyel-quickview-item .easy-field-label {
1676 flex: 0 0 35%;
1677 font-weight: 500;
1678 font-size: 14px;
1679 }
1680
1681 .easyel-quickview-item .easy-field-item input[type=text],
1682 .easyel-quickview-item .easy-field-item input[type=number],
1683 .easyel-quickview-item .easy-field-item select {
1684 width: 250px;
1685 max-width: 100%;
1686 }
1687
1688 .easyel-quickview-item-sortable {
1689 align-items: flex-start;
1690 }
1691
1692 .easyel-quickview-sortable-list {
1693 list-style: none;
1694 margin: 0;
1695 padding: 0;
1696 width: 100%;
1697 max-width: 350px;
1698 }
1699
1700 .easyel-quickview-sortable-item {
1701 display: flex;
1702 align-items: center;
1703 gap: 10px;
1704 padding: 8px 12px;
1705 margin-bottom: 4px;
1706 background: #f8fafc;
1707 border: 1px solid #e2e8f0;
1708 border-radius: 6px;
1709 cursor: move;
1710 }
1711
1712 .easyel-quickview-sortable-item:hover {
1713 background: #f1f5f9;
1714 }
1715
1716 .easyel-quickview-drag-handle {
1717 color: #94a3b8;
1718 cursor: move;
1719 }
1720
1721 .easyel-quickview-sortable-label {
1722 flex: 1;
1723 font-size: 13px;
1724 font-weight: 500;
1725 }
1726
1727 .easyel-quickview-sortable-switch {
1728 flex-shrink: 0;
1729 }
1730
1731 .easyel-quickview-sortable-placeholder {
1732 height: 38px;
1733 margin-bottom: 4px;
1734 background: #e0f2fe;
1735 border: 2px dashed #7dd3fc;
1736 border-radius: 6px;
1737 }
1738
1739 .easyel-quickview-image-upload {
1740 display: flex;
1741 align-items: center;
1742 gap: 10px;
1743 }
1744
1745 .easyel-quickview-shortcode-notice {
1746 margin-top: 20px;
1747 padding: 10px 15px;
1748 background: #f0f9ff;
1749 border: 1px solid #bae6fd;
1750 border-radius: 6px;
1751 }
1752
1753 .easyel-quickview-shortcode-notice code {
1754 background: #e0f2fe;
1755 padding: 2px 6px;
1756 border-radius: 3px;
1757 font-size: 13px;
1758 }
1759
1760 .easyel-quickview-save-area {
1761 display: flex;
1762 align-items: center;
1763 justify-content: flex-end;
1764 gap: 10px;
1765 margin-top: 25px;
1766 padding-top: 15px;
1767 border-top: 1px solid #f1f0f3;
1768 }
1769
1770 .easyel_quickview_popup_item_save {
1771 font-size: 14px;
1772 font-weight: bold;
1773 line-height: 30px;
1774 padding: 2px 15px;
1775 background: var(--easy-primary-color);
1776 color: var(--easy-white-color);
1777 border: 1px solid #0074e0;
1778 border-radius: 5px;
1779 cursor: pointer;
1780 }
1781
1782 .easyel_quickview_popup_item_save:disabled {
1783 opacity: 0.6;
1784 cursor: not-allowed;
1785 }
1786
1787 .easyel_quickview_popup_item_reset {
1788 font-size: 14px;
1789 font-weight: 500;
1790 line-height: 30px;
1791 padding: 2px 15px;
1792 background: #fff;
1793 color: #64748b;
1794 border: 1px solid #cbd5e1;
1795 border-radius: 5px;
1796 cursor: pointer;
1797 }
1798
1799 .easyel_quickview_popup_item_reset:hover {
1800 background: #f1f5f9;
1801 color: #ef4444;
1802 border-color: #ef4444;
1803 }
1804
1805 /*custom font*/
1806 .easyel-custom-font {
1807 font-family: "Inter", sans-serif;
1808 color: #1e293b;
1809 max-width: 1000px;
1810 margin: 20px auto;
1811 padding: 0 15px;
1812 }
1813
1814 .easyel-custom-font-banner {
1815 background: linear-gradient(135deg, #6d28d9, #a855f7);
1816 color: #fff;
1817 padding: 50px 40px;
1818 border-radius: 14px;
1819 text-align: center;
1820 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
1821 margin-bottom: 40px;
1822 }
1823
1824 .easyel-custom-font-banner h1 {
1825 margin-bottom: 10px;
1826 font-size: 28px;
1827 font-weight: 700;
1828 color: #fff;
1829 }
1830
1831 .easyel-custom-font-banner p {
1832 font-size: 15px;
1833 opacity: 0.9;
1834 margin-bottom: 20px;
1835 }
1836
1837 .easyel-upgrade-btn-custom-font {
1838 background: #fff;
1839 color: #6d28d9;
1840 font-weight: 600;
1841 text-decoration: none;
1842 padding: 10px 22px;
1843 border-radius: 6px;
1844 transition: all 0.3s ease;
1845 display: inline-block;
1846 }
1847
1848 .easyel-upgrade-btn-custom-font:hover {
1849 background: #ede9fe;
1850 color: #4c1d95;
1851 }
1852
1853 .easyel-custom-font-page {
1854 font-family: "Inter", sans-serif;
1855 color: #1e293b;
1856 max-width: 1000px;
1857 margin: 20px auto;
1858 padding: 0 15px;
1859 }
1860
1861 .easyel-promo-right a {
1862 color: #fff;
1863 font-size: 18px;
1864 }
1865
1866 /****************************/
1867 /* End Settings Area */
1868 /****************************/
1869 /****************************/
1870 /* Start Responsive Area */
1871 /****************************/
1872 @media only screen and (min-width: 1600px) and (max-width: 1700px) {
1873 .easyel-banner-section .easyel-shape-3 {
1874 width: 45%;
1875 height: 100%;
1876 }
1877 }
1878 @media only screen and (min-width: 1367px) and (max-width: 1599px) {
1879 .easyel-banner-section .easyel-shape-3 {
1880 width: 40%;
1881 height: 100%;
1882 }
1883 }
1884 @media only screen and (max-width: 1400px) {
1885 .easyel-nav-tab-item {
1886 width: 25%;
1887 }
1888 .easyel-plugin-settings-wrapper {
1889 gap: 20px;
1890 }
1891 .easyel-section-gap {
1892 padding: 80px 10px;
1893 }
1894 }
1895 @media only screen and (max-width: 1366px) {
1896 .easyel-banner-section .easyel-shape-3 {
1897 display: none;
1898 }
1899 }
1900 @media only screen and (max-width: 1250px) {
1901 .easyel-section-heading .easyel-title {
1902 font-size: 28px;
1903 }
1904 .easyel-section-heading .easyel-desc {
1905 font-size: 16px;
1906 }
1907 }
1908 @media only screen and (max-width: 990px) {
1909 .easyel-plugin-settings-wrapper {
1910 display: grid;
1911 }
1912 .easyel-nav-tab-item,
1913 #easyel-tab-content {
1914 width: 100%;
1915 }
1916 .easyel-overview-area .easyel-banner-content .title {
1917 font-size: 36px;
1918 }
1919 .easyel-overview-area .easyel-position-rl {
1920 background-image: none;
1921 }
1922 .easyel-overview-area .easyel-banner-content-area {
1923 padding: 100px 26px 60px;
1924 }
1925 .easyel-overview-area .easyel-banner-rating {
1926 display: grid;
1927 }
1928 .easyel-nav-tab, .easyel-nav-tab-pro {
1929 margin-bottom: 0;
1930 }
1931 }
1932 /*popup pro modal css*/
1933 .easyel-pro-modal {
1934 display: none;
1935 position: fixed;
1936 inset: 0;
1937 z-index: 999999;
1938 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
1939 }
1940
1941 .easyel-pro-modal.active {
1942 display: block;
1943 }
1944
1945 .easyel-pro-modal-overlay {
1946 position: absolute;
1947 inset: 0;
1948 background: rgba(0, 0, 0, 0.6);
1949 }
1950
1951 .easyel-pro-modal-content {
1952 position: relative;
1953 max-width: 520px;
1954 margin: 10% auto;
1955 background: #fff;
1956 border-radius: 12px;
1957 padding: 30px;
1958 text-align: center;
1959 box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
1960 animation: easyelPop 0.3s ease;
1961 }
1962
1963 @keyframes easyelPop {
1964 from {
1965 transform: scale(0.9);
1966 opacity: 0;
1967 }
1968 to {
1969 transform: scale(1);
1970 opacity: 1;
1971 }
1972 }
1973 /* PRO Upgrade Modal */
1974 .easyel-admin-toggle-pro-modal {
1975 display: none;
1976 position: fixed;
1977 inset: 0;
1978 z-index: 999999;
1979 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
1980 }
1981
1982 .easyel-admin-toggle-pro-modal.active {
1983 display: block !important;
1984 }
1985
1986 .easyel-admin-toggle-pro-modal-overlay {
1987 position: absolute;
1988 inset: 0;
1989 background: rgba(0, 0, 0, 0.65);
1990 }
1991
1992 .easyel-admin-toggle-pro-modal-content {
1993 position: relative;
1994 max-width: 520px;
1995 margin: 10% auto;
1996 background: #fff;
1997 border-radius: 14px;
1998 padding: 32px;
1999 text-align: center;
2000 box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
2001 animation: easyelAdminTogglePop 0.3s ease;
2002 }
2003
2004 @keyframes easyelAdminTogglePop {
2005 from {
2006 transform: scale(0.92);
2007 opacity: 0;
2008 }
2009 to {
2010 transform: scale(1);
2011 opacity: 1;
2012 }
2013 }
2014 .easyel-admin-toggle-pro-modal-close {
2015 position: absolute;
2016 top: 12px;
2017 right: 14px;
2018 background: none;
2019 border: none;
2020 font-size: 22px;
2021 cursor: pointer;
2022 }
2023
2024 .easyel-admin-toggle-pro-badge {
2025 display: inline-block;
2026 background: linear-gradient(135deg, #ff4d4d, #ff9f43);
2027 color: #fff;
2028 font-weight: 700;
2029 padding: 4px 14px;
2030 border-radius: 20px;
2031 font-size: 12px;
2032 margin-bottom: 12px;
2033 }
2034
2035 .easyel-admin-toggle-pro-feature-list {
2036 text-align: left;
2037 margin: 22px 0;
2038 padding-left: 0;
2039 list-style: none;
2040 }
2041
2042 .easyel-admin-toggle-pro-feature-list li {
2043 margin-bottom: 10px;
2044 font-size: 14px;
2045 }
2046
2047 .easyel-admin-toggle-pro-actions {
2048 display: flex;
2049 justify-content: center;
2050 gap: 14px;
2051 }
2052
2053 .easyel-admin-toggle-pro-upgrade-btn {
2054 background: #ff4d4d;
2055 color: #fff;
2056 padding: 12px 24px;
2057 border-radius: 10px;
2058 text-decoration: none;
2059 font-weight: 600;
2060 }
2061
2062 .easyel-admin-toggle-pro-upgrade-btn:hover {
2063 background: #e63e3e;
2064 }
2065
2066 .easyel-admin-toggle-pro-modal-cancel {
2067 background: #f0f0f0;
2068 border: none;
2069 padding: 12px 20px;
2070 border-radius: 10px;
2071 cursor: pointer;
2072 }
2073
2074 /* Locked widget feel */
2075 .easy-widget-item.easyel-pro-enable {
2076 cursor: pointer;
2077 }
2078
2079 .easy-widget-item.easyel-pro-enable .widget-toggle-checkbox {
2080 cursor: not-allowed;
2081 }
2082
2083 .easy-widget-item.easyel-pro-enable .easyel-widget-card-switcher {
2084 cursor: pointer;
2085 }
2086
2087 .easy-widget-item.easyel-pro-enable .widget-toggle-checkbox {
2088 pointer-events: none;
2089 }
2090
2091 .easyel-readingprogress-bar-popup-setting {
2092 cursor: pointer;
2093 }
2094
2095 .easyel-quick-view-setting {
2096 cursor: pointer;
2097 }
2098
2099 /*Reading progress bar*/
2100 .easyel-reading-progressbar-popup-setting {
2101 cursor: pointer;
2102 }
2103
2104 .easyel-reading-progressbar-settings-main-wrapper {
2105 display: flex;
2106 flex-direction: column;
2107 gap: 30px;
2108 max-height: 300px;
2109 overflow-y: auto;
2110 }
2111
2112 .easyel-reading-progressbar-heading {
2113 margin-bottom: 40px;
2114 }
2115
2116 .easyel-reading-progressbar-popup {
2117 position: fixed;
2118 top: 100px;
2119 left: 0;
2120 right: 0;
2121 width: 100%;
2122 max-width: 967px;
2123 margin: 0 auto;
2124 background: white;
2125 border-top: 1px solid #f1f0f3;
2126 box-shadow: 0px 10px 30px 5px rgba(19, 65, 98, 0.1);
2127 z-index: 104;
2128 visibility: hidden;
2129 opacity: 0;
2130 padding: 30px 20px;
2131 transition: opacity 0.3s linear, clip 0.6s linear, visibility 0s 0.2s;
2132 transform: translateZ(0);
2133 border-radius: 12px;
2134 opacity: 0;
2135 z-index: 1010;
2136 }
2137
2138 .easyel-reading-progressbar-popup .wrapper {
2139 font-weight: 400;
2140 }
2141
2142 .easyel-reading-progressbar-popup {
2143 overflow-x: hidden;
2144 overflow: hidden !important;
2145 }
2146
2147 .easyel-reading-progressbar-popup.active {
2148 overflow-x: hidden;
2149 }
2150
2151 .easyel-quickview-popup.active {
2152 overflow: visible !important;
2153 }
2154
2155 .easyel-reading-progressbar-popup-close-icon i.feather-search::before {
2156 content: "\ea02";
2157 }
2158
2159 .ajax-search-close-icon {
2160 position: relative;
2161 }
2162
2163 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon {
2164 position: absolute;
2165 right: -35px;
2166 top: -50px;
2167 width: 40px;
2168 height: 40px;
2169 z-index: 1020;
2170 border-radius: 50%;
2171 border: 1px solid #E3E0F5;
2172 display: flex;
2173 align-items: center;
2174 justify-content: center;
2175 background-color: #fff;
2176 cursor: pointer;
2177 }
2178
2179 .easyel-quickview-popup .easyel-quickview-popup-close-icon {
2180 right: -35px;
2181 top: -50px;
2182 }
2183
2184 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon i,
2185 .easyel-quickview-popup .easyel-quickview-popup-close-icon i {
2186 color: #04122B;
2187 text-align: center;
2188 font-family: "Font Awesome 6 Pro";
2189 font-size: 22px;
2190 font-style: normal;
2191 font-weight: 400;
2192 line-height: 22px;
2193 cursor: pointer;
2194 }
2195
2196 .easyel-reading-progressbar-popup,
2197 .easyel-quickview-popup {
2198 position: fixed;
2199 top: 100px;
2200 left: 0;
2201 right: 0;
2202 width: 100%;
2203 max-width: 700px;
2204 margin: 0 auto;
2205 background: white;
2206 border-top: 1px solid #f1f0f3;
2207 box-shadow: 0px 10px 30px 5px rgba(19, 65, 98, 0.1);
2208 z-index: 104;
2209 visibility: hidden;
2210 opacity: 0;
2211 transition: opacity 0.3s linear, clip 0.6s linear, visibility 0s 0.2s;
2212 transform: translateZ(0);
2213 border-radius: 12px;
2214 opacity: 0;
2215 z-index: 1010;
2216 }
2217
2218 .easyel-reading-progressbar-popup.active,
2219 .easyel-quickview-popup.active {
2220 visibility: visible;
2221 opacity: 1;
2222 transition: clip 0.6s linear, opacity 0.2s linear;
2223 }
2224
2225 .easyel-reading-progressbar-popup,
2226 .easyel-quickview-popup {
2227 overflow-x: hidden;
2228 overflow: visible !important;
2229 }
2230
2231 .easyel-quickview-popup.active,
2232 .easyel-reading-progressbar-popup.active {
2233 overflow-x: hidden;
2234 }
2235
2236 .easyel-quickview-popup-close-icon i.feather-search::before,
2237 .easyel-reading-progressbar-popup-close-icon i.feather-search::before {
2238 content: "\ea02";
2239 }
2240
2241 .ajax-search-close-icon {
2242 position: relative;
2243 }
2244
2245 .easyel-reading-progressbar-popup.active .rbt-search-all-product {
2246 overflow-y: auto !important;
2247 max-height: calc(100vh - 180px);
2248 }
2249
2250 .easyel-reading-progressbar-popup .rbt-search-all-product {
2251 overflow-x: hidden;
2252 }
2253
2254 .popup-opened #wpbody-content::before {
2255 content: " ";
2256 position: absolute;
2257 top: 0;
2258 left: 0;
2259 width: 100%;
2260 height: 100%;
2261 background-color: rgba(0, 0, 0, 0.52);
2262 z-index: 1002;
2263 transition: all 0.7s;
2264 }
2265
2266 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon:focus,
2267 .easyel-quickview-popup .easyel-quickview-popup-close-icon:focus {
2268 outline: none;
2269 border: none;
2270 box-shadow: unset !important;
2271 }
2272
2273 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon:hover,
2274 .easyel-quickview-popup .easyel-quickview-popup-close-icon:hover {
2275 background: var(--easy-primary-color);
2276 color: var(--easy-white-color);
2277 }
2278
2279 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon:hover svg path,
2280 .easyel-quickview-popup .easyel-quickview-popup-close-icon:hover svg path {
2281 fill: #fff !important;
2282 }
2283
2284 .reading-progressbar-popup-item-save {
2285 display: flex;
2286 align-items: center;
2287 justify-content: flex-end;
2288 }
2289
2290 .reading_progressbar_popup_item_save,
2291 .easyel_quickview_popup_item_save {
2292 font-size: 14px;
2293 font-weight: bold;
2294 line-height: 30px;
2295 padding: 2px 15px;
2296 background: var(--easy-primary-color);
2297 color: var(--easy-white-color);
2298 border: 1px solid #0074e0;
2299 border-radius: 5px;
2300 cursor: pointer;
2301 margin-top: 20px;
2302 }
2303
2304 .easyel_quickview_popup_item_reset {
2305 margin-top: 20px;
2306 }
2307
2308 .reading_progressbar-scroll-item {
2309 display: flex;
2310 align-items: center;
2311 gap: 15px;
2312 }
2313
2314 .easyel-reading-progressbar-item {
2315 display: flex;
2316 align-items: center;
2317 gap: 15px;
2318 padding-right: 30px;
2319 }
2320
2321 .easyel-reading-progressbar-item .easy-field-label {
2322 flex: 0 0 35%;
2323 }
2324
2325 .easyel-reading-progressbar-item .easyel-checkbox-group {
2326 display: flex;
2327 flex-direction: column;
2328 margin-top: 20px;
2329 gap: 15px;
2330 padding: 10px;
2331 }
2332
2333 .easyel-reading-progressbar-item .easyel-pro-notice {
2334 color: #d62b87;
2335 flex: 1 1 100%;
2336 font-size: 13px;
2337 }
2338
2339 .easyel-reading-progressbar-item .select2-container--default .select2-selection--single .select2-selection__rendered,
2340 .easyel-reading-progressbar-item .select2-container--default .select2-selection--single .select2-selection__rendered {
2341 line-height: 40px;
2342 padding-left: 14px;
2343 padding-right: 36px;
2344 color: #333;
2345 }
2346
2347 .easyel-reading-progressbar-item .select2-selection__placeholder,
2348 .easyel-reading-progressbar-item .select2-selection__placeholder {
2349 color: #9aa0a6;
2350 }
2351
2352 .easyel-extension-heading-group .easyel-group-toggle::before {
2353 display: none !important;
2354 }
2355
2356 .easyel-extension-heading-group .easyel-group-toggle {
2357 border: none;
2358 }