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

1,998 lines 44.8 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 /*custom font*/
1436
1437 .easyel-custom-font {
1438 font-family: "Inter", sans-serif;
1439 color: #1e293b;
1440 max-width: 1000px;
1441 margin: 20px auto;
1442 padding: 0 15px;
1443 }
1444
1445 .easyel-custom-font-banner {
1446 background: linear-gradient(135deg, #6d28d9, #a855f7);
1447 color: #fff;
1448 padding: 50px 40px;
1449 border-radius: 14px;
1450 text-align: center;
1451 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
1452 margin-bottom: 40px;
1453 }
1454
1455 .easyel-custom-font-banner h1 {
1456 margin-bottom: 10px;
1457 font-size: 28px;
1458 font-weight: 700;
1459 color: #fff;
1460 }
1461
1462 .easyel-custom-font-banner p {
1463 font-size: 15px;
1464 opacity: 0.9;
1465 margin-bottom: 20px;
1466 }
1467
1468 .easyel-upgrade-btn-custom-font {
1469 background: #fff;
1470 color: #6d28d9;
1471 font-weight: 600;
1472 text-decoration: none;
1473 padding: 10px 22px;
1474 border-radius: 6px;
1475 transition: all 0.3s ease;
1476 display: inline-block;
1477 }
1478
1479 .easyel-upgrade-btn-custom-font:hover {
1480 background: #ede9fe;
1481 color: #4c1d95;
1482 }
1483
1484 .easyel-custom-font-page {
1485 font-family: "Inter", sans-serif;
1486 color: #1e293b;
1487 max-width: 1000px;
1488 margin: 20px auto;
1489 padding: 0 15px;
1490 }
1491
1492 .easyel-promo-right a {
1493 color: #fff;
1494 font-size: 18px;
1495 }
1496
1497 /****************************/
1498 /* End Settings Area */
1499 /****************************/
1500
1501 /****************************/
1502 /* Start Responsive Area */
1503 /****************************/
1504 @media only screen and (min-width: 1600px) and (max-width: 1700px) {
1505 .easyel-banner-section .easyel-shape-3 {
1506 width: 45%;
1507 height: 100%;
1508 }
1509 }
1510
1511 @media only screen and (min-width: 1367px) and (max-width: 1599px) {
1512 .easyel-banner-section .easyel-shape-3 {
1513 width: 40%;
1514 height: 100%;
1515 }
1516 }
1517
1518
1519 @media only screen and (max-width: 1400px) {
1520 .easyel-nav-tab-item {
1521 width: 25%;
1522 }
1523 .easyel-plugin-settings-wrapper{
1524 gap: 20px;
1525 }
1526 .easyel-section-gap {
1527 padding: 80px 10px;
1528 }
1529 }
1530
1531 @media only screen and (max-width: 1366px) {
1532 .easyel-banner-section .easyel-shape-3 {
1533 display: none;
1534 }
1535 }
1536 @media only screen and (max-width: 1250px) {
1537 .easyel-section-heading .easyel-title{
1538 font-size: 28px;
1539 }
1540 .easyel-section-heading .easyel-desc{
1541 font-size: 16px;
1542 }
1543 }
1544
1545 @media only screen and (max-width: 990px) {
1546 .easyel-plugin-settings-wrapper{
1547 display: grid;
1548 }
1549 .easyel-nav-tab-item,
1550 #easyel-tab-content {
1551 width: 100%;
1552 }
1553 .easyel-overview-area .easyel-banner-content .title{
1554 font-size: 36px;
1555 }
1556 .easyel-overview-area .easyel-position-rl{
1557 background-image: none;
1558 }
1559 .easyel-overview-area .easyel-banner-content-area {
1560 padding: 100px 26px 60px;
1561 }
1562 .easyel-overview-area .easyel-banner-rating{
1563 display: grid;
1564 }
1565 .easyel-nav-tab, .easyel-nav-tab-pro{
1566 margin-bottom: 0;
1567 }
1568 }
1569
1570
1571 /*popup pro modal css*/
1572
1573
1574 .easyel-pro-modal {
1575 display: none;
1576 position: fixed;
1577 inset: 0;
1578 z-index: 999999;
1579 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
1580 }
1581
1582 .easyel-pro-modal.active {
1583 display: block;
1584 }
1585
1586 .easyel-pro-modal-overlay {
1587 position: absolute;
1588 inset: 0;
1589 background: rgba(0,0,0,0.6);
1590 }
1591
1592 .easyel-pro-modal-content {
1593 position: relative;
1594 max-width: 520px;
1595 margin: 10% auto;
1596 background: #fff;
1597 border-radius: 12px;
1598 padding: 30px;
1599 text-align: center;
1600 box-shadow: 0 20px 50px rgba(0,0,0,.2);
1601 animation: easyelPop 0.3s ease;
1602 }
1603
1604 @keyframes easyelPop {
1605 from { transform: scale(.9); opacity: 0; }
1606 to { transform: scale(1); opacity: 1; }
1607 }
1608
1609 /* PRO Upgrade Modal */
1610 .easyel-admin-toggle-pro-modal {
1611 display: none;
1612 position: fixed;
1613 inset: 0;
1614 z-index: 999999;
1615 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
1616 }
1617
1618 .easyel-admin-toggle-pro-modal.active {
1619 display: block !important;
1620 }
1621
1622 .easyel-admin-toggle-pro-modal-overlay {
1623 position: absolute;
1624 inset: 0;
1625 background: rgba(0, 0, 0, 0.65);
1626 }
1627
1628 .easyel-admin-toggle-pro-modal-content {
1629 position: relative;
1630 max-width: 520px;
1631 margin: 10% auto;
1632 background: #fff;
1633 border-radius: 14px;
1634 padding: 32px;
1635 text-align: center;
1636 box-shadow: 0 25px 60px rgba(0,0,0,.25);
1637 animation: easyelAdminTogglePop .3s ease;
1638 }
1639
1640 @keyframes easyelAdminTogglePop {
1641 from { transform: scale(.92); opacity: 0; }
1642 to { transform: scale(1); opacity: 1; }
1643 }
1644
1645 .easyel-admin-toggle-pro-modal-close {
1646 position: absolute;
1647 top: 12px;
1648 right: 14px;
1649 background: none;
1650 border: none;
1651 font-size: 22px;
1652 cursor: pointer;
1653 }
1654
1655 .easyel-admin-toggle-pro-badge {
1656 display: inline-block;
1657 background: linear-gradient(135deg, #ff4d4d, #ff9f43);
1658 color: #fff;
1659 font-weight: 700;
1660 padding: 4px 14px;
1661 border-radius: 20px;
1662 font-size: 12px;
1663 margin-bottom: 12px;
1664 }
1665
1666 .easyel-admin-toggle-pro-feature-list {
1667 text-align: left;
1668 margin: 22px 0;
1669 padding-left: 0;
1670 list-style: none;
1671 }
1672
1673 .easyel-admin-toggle-pro-feature-list li {
1674 margin-bottom: 10px;
1675 font-size: 14px;
1676 }
1677
1678 .easyel-admin-toggle-pro-actions {
1679 display: flex;
1680 justify-content: center;
1681 gap: 14px;
1682 }
1683
1684 .easyel-admin-toggle-pro-upgrade-btn {
1685 background: #ff4d4d;
1686 color: #fff;
1687 padding: 12px 24px;
1688 border-radius: 10px;
1689 text-decoration: none;
1690 font-weight: 600;
1691 }
1692
1693 .easyel-admin-toggle-pro-upgrade-btn:hover {
1694 background: #e63e3e;
1695 }
1696
1697 .easyel-admin-toggle-pro-modal-cancel {
1698 background: #f0f0f0;
1699 border: none;
1700 padding: 12px 20px;
1701 border-radius: 10px;
1702 cursor: pointer;
1703 }
1704
1705 /* Locked widget feel */
1706 .easy-widget-item.easyel-pro-enable {
1707 cursor: pointer;
1708 }
1709
1710 .easy-widget-item.easyel-pro-enable .widget-toggle-checkbox {
1711 cursor: not-allowed;
1712 }
1713
1714 .easy-widget-item.easyel-pro-enable .easyel-widget-card-switcher {
1715 cursor: pointer;
1716 }
1717
1718 .easy-widget-item.easyel-pro-enable .widget-toggle-checkbox {
1719 pointer-events: none;
1720 }
1721
1722 .easyel-readingprogress-bar-popup-setting {
1723 cursor: pointer;
1724 }
1725
1726
1727 /*Reading progress bar*/
1728
1729 .easyel-reading-progressbar-popup-setting {
1730 cursor: pointer;
1731 }
1732
1733 .easyel-reading-progressbar-settings-main-wrapper {
1734 display: flex;
1735 flex-direction: column;
1736 gap: 30px;
1737 max-height: 300px;
1738 overflow-y: auto;
1739 }
1740 .easyel-reading-progressbar-heading {
1741 margin-bottom: 40px;
1742 }
1743
1744 .easyel-reading-progressbar-popup {
1745 position: fixed;
1746 top: 100px;
1747 left: 0;
1748 right: 0;
1749 width: 100%;
1750 max-width: 967px;
1751 margin: 0 auto;
1752 background: white;
1753 border-top: 1px solid #f1f0f3;
1754 box-shadow: 0px 10px 30px 5px rgba(19, 65, 98, 0.10);
1755 z-index: 104;
1756 visibility: hidden;
1757 opacity: 0;
1758 padding: 30px 20px;
1759 transition: opacity 0.3s linear, clip 0.6s linear, visibility 0s 0.2s;
1760 transform: translateZ(0);
1761 border-radius: 12px;
1762 opacity: 0;
1763 z-index: 1010;
1764 }
1765
1766 .easyel-reading-progressbar-popup .wrapper {
1767 font-weight: 400;
1768 }
1769
1770 .easyel-reading-progressbar-popup.active {
1771 visibility: visible;
1772 opacity: 1;
1773 transition: clip 0.6s linear, opacity 0.2s linear;
1774 }
1775
1776 .easyel-reading-progressbar-popup {
1777 overflow-x: hidden;
1778 overflow: hidden!important;
1779 }
1780
1781 .easyel-reading-progressbar-popup.active {
1782 overflow-x: hidden;
1783 overflow: visible!important;
1784 }
1785
1786 .easyel-reading-progressbar-popup-close-icon i.feather-search::before {
1787 content: "\ea02";
1788 }
1789
1790 .ajax-search-close-icon {
1791 position: relative;
1792 }
1793
1794 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon {
1795 position: absolute;
1796 right: -23px;
1797 top: -25px;
1798 width: 40px;
1799 height: 40px;
1800 z-index: 1020;
1801 border-radius: 50%;
1802 border: 1px solid #E3E0F5;
1803 display: flex;
1804 align-items: center;
1805 justify-content: center;
1806 background-color: #fff;
1807 cursor: pointer;
1808 }
1809 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon i {
1810 color: #04122B;
1811 text-align: center;
1812 font-family: "Font Awesome 6 Pro";
1813 font-size: 22px;
1814 font-style: normal;
1815 font-weight: 400;
1816 line-height: 22px;
1817 cursor: pointer;
1818 }
1819
1820 .easyel-reading-progressbar-popup {
1821 position: fixed;
1822 top: 100px;
1823 left: 0;
1824 right: 0;
1825 width: 100%;
1826 max-width: 700px;
1827 margin: 0 auto;
1828 background: white;
1829 border-top: 1px solid #f1f0f3;
1830 box-shadow: 0px 10px 30px 5px rgba(19, 65, 98, 0.1);
1831 z-index: 104;
1832 visibility: hidden;
1833 opacity: 0;
1834 transition: opacity 0.3s linear, clip 0.6s linear, visibility 0s 0.2s;
1835 transform: translateZ(0);
1836 border-radius: 12px;
1837 opacity: 0;
1838 z-index: 1010;
1839 }
1840
1841 .easyel-reading-progressbar-popup.active {
1842 visibility: visible;
1843 opacity: 1;
1844 transition: clip 0.6s linear, opacity 0.2s linear;
1845 }
1846
1847 .easyel-reading-progressbar-popup {
1848 overflow-x: hidden;
1849 overflow: hidden !important;
1850 }
1851
1852 .easyel-reading-progressbar-popup.active {
1853 overflow-x: hidden;
1854 overflow: visible !important;
1855 }
1856
1857 .easyel-reading-progressbar-popup-close-icon i.feather-search::before {
1858 content: "\ea02";
1859 }
1860
1861 .ajax-search-close-icon {
1862 position: relative;
1863 }
1864
1865 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon {
1866 position: absolute;
1867 right: -38px;
1868 top: -50px;
1869 width: 35px;
1870 height: 35px;
1871 z-index: 1020;
1872 border-radius: 50%;
1873 border: 1px solid #E3E0F5;
1874 display: flex;
1875 align-items: center;
1876 justify-content: center;
1877 background-color: #fff;
1878 cursor: pointer;
1879 }
1880
1881 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon i {
1882 color: #04122B;
1883 text-align: center;
1884 font-family: "Font Awesome 6 Pro";
1885 font-size: 22px;
1886 font-style: normal;
1887 font-weight: 400;
1888 line-height: 22px;
1889 cursor: pointer;
1890 }
1891
1892 .easyel-reading-progressbar-popup.active .rbt-search-all-product {
1893 overflow-y: auto !important;
1894 max-height: calc(100vh - 180px);
1895 }
1896
1897 .easyel-reading-progressbar-popup .rbt-search-all-product {
1898 overflow-x: hidden;
1899 }
1900
1901 .popup-opened #wpbody-content::before {
1902 content: " ";
1903 position: absolute;
1904 top: 0;
1905 left: 0;
1906 width: 100%;
1907 height: 100%;
1908 background-color: rgb(0 0 0 / 52%);
1909 z-index: 1002;
1910 transition: all 0.7s;
1911 }
1912
1913 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon:focus {
1914 outline: none;
1915 border: none;
1916 box-shadow: unset!important;
1917 }
1918
1919 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon:hover {
1920 background: var(--easy-primary-color);
1921 color: var(--easy-white-color);
1922 }
1923
1924 .easyel-reading-progressbar-popup .easyel-reading-progressbar-popup-close-icon:hover svg path {
1925 fill: #fff!important;
1926 }
1927
1928 .reading-progressbar-popup-item-save {
1929 display: flex;
1930 align-items: center;
1931 justify-content: flex-end;
1932 }
1933
1934 .reading_progressbar_popup_item_save {
1935 font-size: 14px;
1936 font-weight: bold;
1937 line-height: 30px;
1938 padding: 2px 15px;
1939 background: var(--easy-primary-color);
1940 color: var(--easy-white-color);
1941 border: 1px solid #0074e0;
1942 border-radius: 5px;
1943 margin-top: 30px;
1944 cursor: pointer;
1945 }
1946
1947 .reading_progressbar-scroll-item {
1948 display: flex;
1949 align-items: center;
1950 gap: 15px;
1951 }
1952
1953 .easyel-reading-progressbar-item {
1954 display: flex;
1955 align-items: center;
1956 gap: 15px;
1957 padding-right: 30px;
1958 }
1959
1960 .easyel-reading-progressbar-item .easy-field-label {
1961 flex: 0 0 35%;
1962 }
1963
1964 .easyel-reading-progressbar-item .easyel-checkbox-group {
1965 display: flex;
1966 flex-direction: column;
1967 margin-top: 20px;
1968 gap: 15px;
1969 padding: 10px;
1970 }
1971
1972 .easyel-reading-progressbar-item .easyel-pro-notice {
1973 color: #d62b87;
1974 flex: 1 1 100%;
1975 font-size: 13px;
1976 }
1977
1978
1979 .easyel-reading-progressbar-item .select2-container--default .select2-selection--single .select2-selection__rendered,
1980 .easyel-reading-progressbar-item .select2-container--default .select2-selection--single .select2-selection__rendered {
1981 line-height: 40px;
1982 padding-left: 14px;
1983 padding-right: 36px;
1984 color: #333;
1985 }
1986
1987 .easyel-reading-progressbar-item .select2-selection__placeholder,
1988 .easyel-reading-progressbar-item .select2-selection__placeholder {
1989 color: #9aa0a6;
1990 }
1991
1992 .easyel-extension-heading-group .easyel-group-toggle::before {
1993 display: none !important;
1994 }
1995
1996 .easyel-extension-heading-group .easyel-group-toggle {
1997 border: none;
1998 }