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

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

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