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