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

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

1,997 lines 44.7 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"] {
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"]:hover {
154 border-color: #00a0d2;
155 background: #e8f7ff;
156 }
157
158 /* Uploaded fonts grid */
159 #easyel-custom-fonts-upload-form input[type="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"]: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: 30px;
1143 max-height: 280px;
1144 overflow-y: auto;
1145 }
1146 .easyel-smooth-scroll-heading {
1147 margin-bottom: 40px;
1148 }
1149
1150 .easyel-smooth-scroll-popup {
1151 position: fixed;
1152 top: 100px;
1153 left: 0;
1154 right: 0;
1155 width: 100%;
1156 max-width: 967px;
1157 margin: 0 auto;
1158 background: white;
1159 border-top: 1px solid #f1f0f3;
1160 box-shadow: 0px 10px 30px 5px rgba(19, 65, 98, 0.10);
1161 z-index: 104;
1162 visibility: hidden;
1163 opacity: 0;
1164 padding: 30px 20px;
1165 transition: opacity 0.3s linear, clip 0.6s linear, visibility 0s 0.2s;
1166 transform: translateZ(0);
1167 border-radius: 12px;
1168 opacity: 0;
1169 z-index: 1010;
1170 }
1171
1172 .easyel-smooth-scroll-popup .wrapper {
1173 font-weight: 400;
1174 }
1175
1176 .easyel-smooth-scroll-popup.active {
1177 visibility: visible;
1178 opacity: 1;
1179 transition: clip 0.6s linear, opacity 0.2s linear;
1180 }
1181
1182 .easyel-smooth-scroll-popup {
1183 overflow-x: hidden;
1184 overflow: hidden!important;
1185 }
1186
1187 .easyel-smooth-scroll-popup.active {
1188 overflow-x: hidden;
1189 overflow: visible!important;
1190 }
1191
1192 .easyel-smooth-scroll-popup-close-icon i.feather-search::before {
1193 content: "\ea02";
1194 }
1195
1196 .ajax-search-close-icon {
1197 position: relative;
1198 }
1199
1200 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon {
1201 position: absolute;
1202 right: -23px;
1203 top: -25px;
1204 width: 40px;
1205 height: 40px;
1206 z-index: 1020;
1207 border-radius: 50%;
1208 border: 1px solid #E3E0F5;
1209 display: flex;
1210 align-items: center;
1211 justify-content: center;
1212 background-color: #fff;
1213 cursor: pointer;
1214 }
1215 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon i {
1216 color: #04122B;
1217 text-align: center;
1218 font-family: "Font Awesome 6 Pro";
1219 font-size: 22px;
1220 font-style: normal;
1221 font-weight: 400;
1222 line-height: 22px;
1223 cursor: pointer;
1224 }
1225
1226 .easyel-smooth-scroll-popup {
1227 position: fixed;
1228 top: 100px;
1229 left: 0;
1230 right: 0;
1231 width: 100%;
1232 max-width: 700px;
1233 margin: 0 auto;
1234 background: white;
1235 border-top: 1px solid #f1f0f3;
1236 box-shadow: 0px 10px 30px 5px rgba(19, 65, 98, 0.1);
1237 z-index: 104;
1238 visibility: hidden;
1239 opacity: 0;
1240 transition: opacity 0.3s linear, clip 0.6s linear, visibility 0s 0.2s;
1241 transform: translateZ(0);
1242 border-radius: 12px;
1243 opacity: 0;
1244 z-index: 1010;
1245 }
1246
1247 .easyel-smooth-scroll-popup.active {
1248 visibility: visible;
1249 opacity: 1;
1250 transition: clip 0.6s linear, opacity 0.2s linear;
1251 }
1252
1253 .easyel-smooth-scroll-popup {
1254 overflow-x: hidden;
1255 overflow: hidden !important;
1256 }
1257
1258 .easyel-smooth-scroll-popup.active {
1259 overflow-x: hidden;
1260 overflow: visible !important;
1261 }
1262
1263 .easyel-smooth-scroll-popup-close-icon i.feather-search::before {
1264 content: "\ea02";
1265 }
1266
1267 .ajax-search-close-icon {
1268 position: relative;
1269 }
1270
1271 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon {
1272 position: absolute;
1273 right: -38px;
1274 top: -50px;
1275 width: 35px;
1276 height: 35px;
1277 z-index: 1020;
1278 border-radius: 50%;
1279 border: 1px solid #E3E0F5;
1280 display: flex;
1281 align-items: center;
1282 justify-content: center;
1283 background-color: #fff;
1284 cursor: pointer;
1285 }
1286
1287 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon i {
1288 color: #04122B;
1289 text-align: center;
1290 font-family: "Font Awesome 6 Pro";
1291 font-size: 22px;
1292 font-style: normal;
1293 font-weight: 400;
1294 line-height: 22px;
1295 cursor: pointer;
1296 }
1297
1298 .easyel-smooth-scroll-popup.active .rbt-search-all-product {
1299 overflow-y: auto !important;
1300 max-height: calc(100vh - 180px);
1301 }
1302
1303 .easyel-smooth-scroll-popup .rbt-search-all-product {
1304 overflow-x: hidden;
1305 }
1306
1307 .popup-opened #wpbody-content::before {
1308 content: " ";
1309 position: absolute;
1310 top: 0;
1311 left: 0;
1312 width: 100%;
1313 height: 100%;
1314 background-color: rgb(0 0 0 / 52%);
1315 z-index: 1002;
1316 transition: all 0.7s;
1317 }
1318
1319 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon:focus {
1320 outline: none;
1321 border: none;
1322 box-shadow: unset!important;
1323 }
1324
1325 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon:hover {
1326 background: var(--easy-primary-color);
1327 color: var(--easy-white-color);
1328 }
1329
1330 .easyel-smooth-scroll-popup .easyel-smooth-scroll-popup-close-icon:hover svg path {
1331 fill: #fff!important;
1332 }
1333
1334 .smooth-scroll-popup-item-save {
1335 display: flex;
1336 align-items: center;
1337 justify-content: flex-end;
1338 }
1339
1340 .smooth_scroll_popup_item_save {
1341 font-size: 14px;
1342 font-weight: bold;
1343 line-height: 30px;
1344 padding: 2px 15px;
1345 background: var(--easy-primary-color);
1346 color: var(--easy-white-color);
1347 border: 1px solid #0074e0;
1348 border-radius: 5px;
1349 margin-top: 30px;
1350 cursor: pointer;
1351 }
1352
1353
1354 .easyel-smooth-scroll-item {
1355 display: flex;
1356 align-items: center;
1357 gap: 15px;
1358 }
1359
1360 .easyel-smooth-scroll-item .easy-field-label {
1361 flex: 0 0 35%;
1362 }
1363
1364 .easyel-smooth-scroll-item .easy-field-item input[type="number"] {
1365 width: 150px;
1366 }
1367
1368 #easyel-message-box {
1369 position: fixed;
1370 top: 60px;
1371 right: 20px;
1372 background-color: #0074E0;
1373 border: 1px solid #0074E0;
1374 padding: 10px 15px;
1375 z-index: 9999;
1376 box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
1377 border-radius: 5px;
1378 display: none;
1379 width: 200px;
1380 text-transform: capitalize;
1381 text-align: center;
1382 font-size: 18px;
1383 color: #fff;
1384 }
1385
1386 #easyel-message-box p {
1387 margin: 0;
1388 font-size: 14px;
1389 text-align: center;
1390 color: #fff;
1391 }
1392
1393 .easyel-plugin-main-settings-page {
1394 position: relative;
1395 }
1396
1397 .easyel-plugin-main-settings-page::after {
1398 content: "";
1399 position: absolute;
1400 inset: 0;
1401 background: rgba(255, 255, 255, 0.6);
1402 opacity: 0;
1403 visibility: hidden;
1404 transition: opacity 0.3s ease;
1405 z-index: 10;
1406 }
1407
1408
1409 .easyel-plugin-main-settings-page.is-saving::after {
1410 opacity: 1;
1411 visibility: visible;
1412 }
1413
1414 .easyel-saving-indicator {
1415 position: fixed;
1416 top: 50%;
1417 left: 50%;
1418 transform: translate(-50%, -50%);
1419 font-size: 14px;
1420 font-weight: 600;
1421 padding: 6px 14px;
1422 border-radius: 4px;
1423 z-index: 99999;
1424 color: #3b82f6;
1425 opacity: 0;
1426
1427 }
1428
1429 .easyel-plugin-main-settings-page.is-saving .easyel-saving-indicator {
1430 opacity: 1;
1431 }
1432
1433
1434 /*custom font*/
1435
1436 .easyel-custom-font {
1437 font-family: "Inter", sans-serif;
1438 color: #1e293b;
1439 max-width: 1000px;
1440 margin: 20px auto;
1441 padding: 0 15px;
1442 }
1443
1444 .easyel-custom-font-banner {
1445 background: linear-gradient(135deg, #6d28d9, #a855f7);
1446 color: #fff;
1447 padding: 50px 40px;
1448 border-radius: 14px;
1449 text-align: center;
1450 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
1451 margin-bottom: 40px;
1452 }
1453
1454 .easyel-custom-font-banner h1 {
1455 margin-bottom: 10px;
1456 font-size: 28px;
1457 font-weight: 700;
1458 color: #fff;
1459 }
1460
1461 .easyel-custom-font-banner p {
1462 font-size: 15px;
1463 opacity: 0.9;
1464 margin-bottom: 20px;
1465 }
1466
1467 .easyel-upgrade-btn-custom-font {
1468 background: #fff;
1469 color: #6d28d9;
1470 font-weight: 600;
1471 text-decoration: none;
1472 padding: 10px 22px;
1473 border-radius: 6px;
1474 transition: all 0.3s ease;
1475 display: inline-block;
1476 }
1477
1478 .easyel-upgrade-btn-custom-font:hover {
1479 background: #ede9fe;
1480 color: #4c1d95;
1481 }
1482
1483 .easyel-custom-font-page {
1484 font-family: "Inter", sans-serif;
1485 color: #1e293b;
1486 max-width: 1000px;
1487 margin: 20px auto;
1488 padding: 0 15px;
1489 }
1490
1491 .easyel-promo-right a {
1492 color: #fff;
1493 font-size: 18px;
1494 }
1495
1496 /****************************/
1497 /* End Settings Area */
1498 /****************************/
1499
1500 /****************************/
1501 /* Start Responsive Area */
1502 /****************************/
1503 @media only screen and (min-width: 1600px) and (max-width: 1700px) {
1504 .easyel-banner-section .easyel-shape-3 {
1505 width: 45%;
1506 height: 100%;
1507 }
1508 }
1509
1510 @media only screen and (min-width: 1367px) and (max-width: 1599px) {
1511 .easyel-banner-section .easyel-shape-3 {
1512 width: 40%;
1513 height: 100%;
1514 }
1515 }
1516
1517
1518 @media only screen and (max-width: 1400px) {
1519 .easyel-nav-tab-item {
1520 width: 25%;
1521 }
1522 .easyel-plugin-settings-wrapper{
1523 gap: 20px;
1524 }
1525 .easyel-section-gap {
1526 padding: 80px 10px;
1527 }
1528 }
1529
1530 @media only screen and (max-width: 1366px) {
1531 .easyel-banner-section .easyel-shape-3 {
1532 display: none;
1533 }
1534 }
1535 @media only screen and (max-width: 1250px) {
1536 .easyel-section-heading .easyel-title{
1537 font-size: 28px;
1538 }
1539 .easyel-section-heading .easyel-desc{
1540 font-size: 16px;
1541 }
1542 }
1543
1544 @media only screen and (max-width: 990px) {
1545 .easyel-plugin-settings-wrapper{
1546 display: grid;
1547 }
1548 .easyel-nav-tab-item,
1549 #easyel-tab-content {
1550 width: 100%;
1551 }
1552 .easyel-overview-area .easyel-banner-content .title{
1553 font-size: 36px;
1554 }
1555 .easyel-overview-area .easyel-position-rl{
1556 background-image: none;
1557 }
1558 .easyel-overview-area .easyel-banner-content-area {
1559 padding: 100px 26px 60px;
1560 }
1561 .easyel-overview-area .easyel-banner-rating{
1562 display: grid;
1563 }
1564 .easyel-nav-tab, .easyel-nav-tab-pro{
1565 margin-bottom: 0;
1566 }
1567 }
1568
1569
1570 /*popup pro modal css*/
1571
1572
1573 .easyel-pro-modal {
1574 display: none;
1575 position: fixed;
1576 inset: 0;
1577 z-index: 999999;
1578 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
1579 }
1580
1581 .easyel-pro-modal.active {
1582 display: block;
1583 }
1584
1585 .easyel-pro-modal-overlay {
1586 position: absolute;
1587 inset: 0;
1588 background: rgba(0,0,0,0.6);
1589 }
1590
1591 .easyel-pro-modal-content {
1592 position: relative;
1593 max-width: 520px;
1594 margin: 10% auto;
1595 background: #fff;
1596 border-radius: 12px;
1597 padding: 30px;
1598 text-align: center;
1599 box-shadow: 0 20px 50px rgba(0,0,0,.2);
1600 animation: easyelPop 0.3s ease;
1601 }
1602
1603 @keyframes easyelPop {
1604 from { transform: scale(.9); opacity: 0; }
1605 to { transform: scale(1); opacity: 1; }
1606 }
1607
1608 /* PRO Upgrade Modal */
1609 .easyel-admin-toggle-pro-modal {
1610 display: none;
1611 position: fixed;
1612 inset: 0;
1613 z-index: 999999;
1614 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
1615 }
1616
1617 .easyel-admin-toggle-pro-modal.active {
1618 display: block;
1619 }
1620
1621 .easyel-admin-toggle-pro-modal-overlay {
1622 position: absolute;
1623 inset: 0;
1624 background: rgba(0, 0, 0, 0.65);
1625 }
1626
1627 .easyel-admin-toggle-pro-modal-content {
1628 position: relative;
1629 max-width: 520px;
1630 margin: 10% auto;
1631 background: #fff;
1632 border-radius: 14px;
1633 padding: 32px;
1634 text-align: center;
1635 box-shadow: 0 25px 60px rgba(0,0,0,.25);
1636 animation: easyelAdminTogglePop .3s ease;
1637 }
1638
1639 @keyframes easyelAdminTogglePop {
1640 from { transform: scale(.92); opacity: 0; }
1641 to { transform: scale(1); opacity: 1; }
1642 }
1643
1644 .easyel-admin-toggle-pro-modal-close {
1645 position: absolute;
1646 top: 12px;
1647 right: 14px;
1648 background: none;
1649 border: none;
1650 font-size: 22px;
1651 cursor: pointer;
1652 }
1653
1654 .easyel-admin-toggle-pro-badge {
1655 display: inline-block;
1656 background: linear-gradient(135deg, #ff4d4d, #ff9f43);
1657 color: #fff;
1658 font-weight: 700;
1659 padding: 4px 14px;
1660 border-radius: 20px;
1661 font-size: 12px;
1662 margin-bottom: 12px;
1663 }
1664
1665 .easyel-admin-toggle-pro-feature-list {
1666 text-align: left;
1667 margin: 22px 0;
1668 padding-left: 0;
1669 list-style: none;
1670 }
1671
1672 .easyel-admin-toggle-pro-feature-list li {
1673 margin-bottom: 10px;
1674 font-size: 14px;
1675 }
1676
1677 .easyel-admin-toggle-pro-actions {
1678 display: flex;
1679 justify-content: center;
1680 gap: 14px;
1681 }
1682
1683 .easyel-admin-toggle-pro-upgrade-btn {
1684 background: #ff4d4d;
1685 color: #fff;
1686 padding: 12px 24px;
1687 border-radius: 10px;
1688 text-decoration: none;
1689 font-weight: 600;
1690 }
1691
1692 .easyel-admin-toggle-pro-upgrade-btn:hover {
1693 background: #e63e3e;
1694 }
1695
1696 .easyel-admin-toggle-pro-modal-cancel {
1697 background: #f0f0f0;
1698 border: none;
1699 padding: 12px 20px;
1700 border-radius: 10px;
1701 cursor: pointer;
1702 }
1703
1704 /* Locked widget feel */
1705 .easy-widget-item.easyel-pro-enable {
1706 cursor: pointer;
1707 }
1708
1709 .easy-widget-item.easyel-pro-enable .widget-toggle-checkbox {
1710 cursor: not-allowed;
1711 }
1712
1713 .easy-widget-item.easyel-pro-enable .easyel-widget-card-switcher {
1714 cursor: pointer;
1715 }
1716
1717 .easy-widget-item.easyel-pro-enable .widget-toggle-checkbox {
1718 pointer-events: none;
1719 }
1720
1721 .easyel-readingprogress-bar-popup-setting {
1722 cursor: pointer;
1723 }
1724
1725
1726 /*Reading progress bar*/
1727
1728 .easyel-reading-progressbar-popup-setting {
1729 cursor: pointer;
1730 }
1731
1732 .easyel-reading-progressbar-settings-main-wrapper {
1733 display: flex;
1734 flex-direction: column;
1735 gap: 30px;
1736 max-height: 300px;
1737 overflow-y: auto;
1738 }
1739 .easyel-reading-progressbar-heading {
1740 margin-bottom: 40px;
1741 }
1742
1743 .easyel-reading-progressbar-popup {
1744 position: fixed;
1745 top: 100px;
1746 left: 0;
1747 right: 0;
1748 width: 100%;
1749 max-width: 967px;
1750 margin: 0 auto;
1751 background: white;
1752 border-top: 1px solid #f1f0f3;
1753 box-shadow: 0px 10px 30px 5px rgba(19, 65, 98, 0.10);
1754 z-index: 104;
1755 visibility: hidden;
1756 opacity: 0;
1757 padding: 30px 20px;
1758 transition: opacity 0.3s linear, clip 0.6s linear, visibility 0s 0.2s;
1759 transform: translateZ(0);
1760 border-radius: 12px;
1761 opacity: 0;
1762 z-index: 1010;
1763 }
1764
1765 .easyel-reading-progressbar-popup .wrapper {
1766 font-weight: 400;
1767 }
1768
1769 .easyel-reading-progressbar-popup.active {
1770 visibility: visible;
1771 opacity: 1;
1772 transition: clip 0.6s linear, opacity 0.2s linear;
1773 }
1774
1775 .easyel-reading-progressbar-popup {
1776 overflow-x: hidden;
1777 overflow: hidden!important;
1778 }
1779
1780 .easyel-reading-progressbar-popup.active {
1781 overflow-x: hidden;
1782 overflow: visible!important;
1783 }
1784
1785 .easyel-reading-progressbar-popup-close-icon i.feather-search::before {
1786 content: "\ea02";
1787 }
1788
1789 .ajax-search-close-icon {
1790 position: relative;
1791 }
1792
1793 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon {
1794 position: absolute;
1795 right: -23px;
1796 top: -25px;
1797 width: 40px;
1798 height: 40px;
1799 z-index: 1020;
1800 border-radius: 50%;
1801 border: 1px solid #E3E0F5;
1802 display: flex;
1803 align-items: center;
1804 justify-content: center;
1805 background-color: #fff;
1806 cursor: pointer;
1807 }
1808 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon i {
1809 color: #04122B;
1810 text-align: center;
1811 font-family: "Font Awesome 6 Pro";
1812 font-size: 22px;
1813 font-style: normal;
1814 font-weight: 400;
1815 line-height: 22px;
1816 cursor: pointer;
1817 }
1818
1819 .easyel-reading-progressbar-popup {
1820 position: fixed;
1821 top: 100px;
1822 left: 0;
1823 right: 0;
1824 width: 100%;
1825 max-width: 700px;
1826 margin: 0 auto;
1827 background: white;
1828 border-top: 1px solid #f1f0f3;
1829 box-shadow: 0px 10px 30px 5px rgba(19, 65, 98, 0.1);
1830 z-index: 104;
1831 visibility: hidden;
1832 opacity: 0;
1833 transition: opacity 0.3s linear, clip 0.6s linear, visibility 0s 0.2s;
1834 transform: translateZ(0);
1835 border-radius: 12px;
1836 opacity: 0;
1837 z-index: 1010;
1838 }
1839
1840 .easyel-reading-progressbar-popup.active {
1841 visibility: visible;
1842 opacity: 1;
1843 transition: clip 0.6s linear, opacity 0.2s linear;
1844 }
1845
1846 .easyel-reading-progressbar-popup {
1847 overflow-x: hidden;
1848 overflow: hidden !important;
1849 }
1850
1851 .easyel-reading-progressbar-popup.active {
1852 overflow-x: hidden;
1853 overflow: visible !important;
1854 }
1855
1856 .easyel-reading-progressbar-popup-close-icon i.feather-search::before {
1857 content: "\ea02";
1858 }
1859
1860 .ajax-search-close-icon {
1861 position: relative;
1862 }
1863
1864 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon {
1865 position: absolute;
1866 right: -38px;
1867 top: -50px;
1868 width: 35px;
1869 height: 35px;
1870 z-index: 1020;
1871 border-radius: 50%;
1872 border: 1px solid #E3E0F5;
1873 display: flex;
1874 align-items: center;
1875 justify-content: center;
1876 background-color: #fff;
1877 cursor: pointer;
1878 }
1879
1880 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon i {
1881 color: #04122B;
1882 text-align: center;
1883 font-family: "Font Awesome 6 Pro";
1884 font-size: 22px;
1885 font-style: normal;
1886 font-weight: 400;
1887 line-height: 22px;
1888 cursor: pointer;
1889 }
1890
1891 .easyel-reading-progressbar-popup.active .rbt-search-all-product {
1892 overflow-y: auto !important;
1893 max-height: calc(100vh - 180px);
1894 }
1895
1896 .easyel-reading-progressbar-popup .rbt-search-all-product {
1897 overflow-x: hidden;
1898 }
1899
1900 .popup-opened #wpbody-content::before {
1901 content: " ";
1902 position: absolute;
1903 top: 0;
1904 left: 0;
1905 width: 100%;
1906 height: 100%;
1907 background-color: rgb(0 0 0 / 52%);
1908 z-index: 1002;
1909 transition: all 0.7s;
1910 }
1911
1912 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon:focus {
1913 outline: none;
1914 border: none;
1915 box-shadow: unset!important;
1916 }
1917
1918 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon:hover {
1919 background: var(--easy-primary-color);
1920 color: var(--easy-white-color);
1921 }
1922
1923 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon:hover svg path {
1924 fill: #fff!important;
1925 }
1926
1927 .reading-progressbar-popup-item-save {
1928 display: flex;
1929 align-items: center;
1930 justify-content: flex-end;
1931 }
1932
1933 .reading_progressbar_popup_item_save {
1934 font-size: 14px;
1935 font-weight: bold;
1936 line-height: 30px;
1937 padding: 2px 15px;
1938 background: var(--easy-primary-color);
1939 color: var(--easy-white-color);
1940 border: 1px solid #0074e0;
1941 border-radius: 5px;
1942 margin-top: 30px;
1943 cursor: pointer;
1944 }
1945
1946 .reading_progressbar-scroll-item {
1947 display: flex;
1948 align-items: center;
1949 gap: 15px;
1950 }
1951
1952 .easyel-reading-progressbar-item {
1953 display: flex;
1954 align-items: center;
1955 gap: 15px;
1956 padding-right: 30px;
1957 }
1958
1959 .easyel-reading-progressbar-item .easy-field-label {
1960 flex: 0 0 35%;
1961 }
1962
1963 .easyel-reading-progressbar-item .easyel-checkbox-group {
1964 display: flex;
1965 flex-direction: column;
1966 margin-top: 20px;
1967 gap: 15px;
1968 padding: 10px;
1969 }
1970
1971 .easyel-reading-progressbar-item .easyel-pro-notice {
1972 color: #d62b87;
1973 flex: 1 1 100%;
1974 font-size: 13px;
1975 }
1976
1977
1978 .easyel-reading-progressbar-item .select2-container--default .select2-selection--single .select2-selection__rendered,
1979 .easyel-reading-progressbar-item .select2-container--default .select2-selection--single .select2-selection__rendered {
1980 line-height: 40px;
1981 padding-left: 14px;
1982 padding-right: 36px;
1983 color: #333;
1984 }
1985
1986 .easyel-reading-progressbar-item .select2-selection__placeholder,
1987 .easyel-reading-progressbar-item .select2-selection__placeholder {
1988 color: #9aa0a6;
1989 }
1990
1991 .easyel-extension-heading-group .easyel-group-toggle::before {
1992 display: none !important;
1993 }
1994
1995 .easyel-extension-heading-group .easyel-group-toggle {
1996 border: none;
1997 }