PluginProbe
Easy Elements for Elementor – Addons & Website Templates / 1.4.3
Easy Elements for Elementor – Addons & Website Templates v1.4.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.scss

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

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