PluginProbe ʕ •ᴥ•ʔ
Spider Elements – Premium Elementor Widgets & Addons Library / 1.5.0
Spider Elements – Premium Elementor Widgets & Addons Library v1.5.0
trunk 1.0.0 1.1.0 1.5.0 1.6.0 1.6.1 1.6.2 1.6.3 1.6.4 1.6.5 1.6.6 1.6.7 1.7.0 1.8.0 1.9.0
spider-elements / assets / css / admin.css
spider-elements / assets / css Last commit date
admin.css 1 year ago admin.css.map 1 year ago elementor-editor.css 1 year ago extension.css 1 year ago extension.css.map 1 year ago main.css 1 year ago main.css.map 1 year ago rtl.css 1 year ago rtl.css.map 1 year ago
admin.css
1452 lines
1 /*=====================================================================
2 @Template Name: Spider Elements
3
4 @Default Styles
5 Table of Content:
6 01/ Notice
7
8 =====================================================================*/
9 .spider-elements-elementor-notice {
10 padding: 15px !important;
11 }
12 .spider-elements-elementor-notice .spider-elements-elementor-notice-inner {
13 display: flex;
14 justify-content: space-between;
15 align-items: center;
16 }
17 .spider-elements-elementor-notice .spider-elements-elementor-notice-inner .spider-elements-elementor-notice-content h3 {
18 margin: 0;
19 }
20 .spider-elements-elementor-notice .spider-elements-elementor-notice-inner .spider-elements-elementor-install-now .button {
21 padding: 6px 16px;
22 line-height: 1;
23 }
24
25 .ezd-grid {
26 display: grid;
27 grid-column-gap: 25px;
28 }
29
30 .ezd-grid-cols-12 {
31 grid-template-columns: repeat(12, minmax(0, 1fr));
32 }
33
34 .ezd-grid-column-full {
35 grid-column: 1/-1;
36 }
37
38 @media (max-width: 991px) {
39 [class^=ezd-lg-col] {
40 grid-column: 1/-1;
41 }
42 }
43 @media (min-width: 576px) {
44 .ezd-sm-col-4 {
45 grid-column: span 4/span 4;
46 }
47
48 .ezd-sm-col-3 {
49 grid-column: span 3/span 3;
50 }
51
52 .ezd-sm-col-5 {
53 grid-column: span 5/span 5;
54 }
55
56 .ezd-sm-col-6 {
57 grid-column: span 6/span 6;
58 }
59
60 .ezd-sm-col-7 {
61 grid-column: span 7/span 7;
62 }
63
64 .ezd-sm-col-8 {
65 grid-column: span 8/span 8;
66 }
67
68 .ezd-sm-col-9 {
69 grid-column: span 9/span 9;
70 }
71
72 .ezd-sm-col-10 {
73 grid-column: span 10/span 10;
74 }
75
76 .ezd-sm-col-2 {
77 grid-column: span 2/span 2;
78 }
79
80 .ezd-sm-col-11 {
81 grid-column: span 11/span 11;
82 }
83
84 .ezd-sm-col-12 {
85 grid-column: span 12/span 12;
86 }
87 }
88 @media (min-width: 768px) {
89 .ezd-md-col-4 {
90 grid-column: span 4/span 4;
91 }
92
93 .ezd-md-col-3 {
94 grid-column: span 3/span 3;
95 }
96
97 .ezd-md-col-5 {
98 grid-column: span 5/span 5;
99 }
100
101 .ezd-md-col-6 {
102 grid-column: span 6/span 6;
103 }
104
105 .ezd-md-col-7 {
106 grid-column: span 7/span 7;
107 }
108
109 .ezd-md-col-8 {
110 grid-column: span 8/span 8;
111 }
112
113 .ezd-md-col-9 {
114 grid-column: span 9/span 9;
115 }
116
117 .ezd-md-col-10 {
118 grid-column: span 10/span 10;
119 }
120
121 .ezd-md-col-11 {
122 grid-column: span 11/span 11;
123 }
124
125 .ezd-md-col-12 {
126 grid-column: span 12/span 12;
127 }
128
129 .ezd-md-col-2 {
130 grid-column: span 2/span 2;
131 }
132 }
133 @media (min-width: 992px) {
134 .ezd-lg-col-4 {
135 grid-column: span 4/span 4;
136 }
137
138 .ezd-lg-col-3 {
139 grid-column: span 3/span 3;
140 }
141
142 .ezd-lg-col-5 {
143 grid-column: span 5/span 5;
144 }
145
146 .ezd-lg-col-6 {
147 grid-column: span 6/span 6;
148 }
149
150 .ezd-lg-col-8 {
151 grid-column: span 8/span 8;
152 }
153
154 .ezd-lg-col-7 {
155 grid-column: span 7/span 7;
156 }
157
158 .ezd-lg-col-9 {
159 grid-column: span 9/span 9;
160 }
161
162 .ezd-lg-col-10 {
163 grid-column: span 10/span 10;
164 }
165
166 .ezd-lg-col-11 {
167 grid-column: span 11/span 11;
168 }
169
170 .ezd-lg-col-12 {
171 grid-column: span 12/span 12;
172 }
173
174 .ezd-lg-col-2 {
175 grid-column: span 2/span 2;
176 }
177 }
178 @media (min-width: 1200px) {
179 .ezd-xl-col-4 {
180 grid-column: span 4/span 4;
181 }
182
183 .ezd-xl-col-3 {
184 grid-column: span 3/span 3;
185 }
186
187 .ezd-xl-col-5 {
188 grid-column: span 5/span 5;
189 }
190
191 .ezd-xl-col-6 {
192 grid-column: span 6/span 6;
193 }
194
195 .ezd-xl-col-8 {
196 grid-column: span 8/span 8;
197 }
198
199 .ezd-xl-col-7 {
200 grid-column: span 7/span 7;
201 }
202
203 .ezd-xl-col-9 {
204 grid-column: span 9/span 9;
205 }
206
207 .ezd-xl-col-10 {
208 grid-column: span 10/span 10;
209 }
210
211 .ezd-xl-col-11 {
212 grid-column: span 11/span 11;
213 }
214
215 .ezd-xl-col-12 {
216 grid-column: span 12/span 12;
217 }
218
219 .ezd-xl-col-2 {
220 grid-column: span 2/span 2;
221 }
222 }
223 .ezd-list-unstyled {
224 list-style: none;
225 margin: 0;
226 padding-left: 0;
227 }
228
229 .ezd-text-center {
230 text-align: center;
231 }
232
233 .ezd-d-flex {
234 display: flex;
235 flex-wrap: wrap;
236 margin-left: -12px;
237 margin-right: -12px;
238 }
239 .ezd-d-flex [class*=ezd-colum-space-] {
240 padding-left: 12px;
241 padding-right: 12px;
242 }
243
244 .ezd-colum-space-6 {
245 width: 50%;
246 }
247
248 .ezd-colum-space-4 {
249 flex: 1;
250 width: 33.3333333333%;
251 box-sizing: border-box;
252 }
253
254 .spel_dashboard {
255 display: flex;
256 flex-wrap: wrap;
257 padding: 60px 20px;
258 margin-right: 20px;
259 }
260 @media (max-width: 1400px) {
261 .spel_dashboard {
262 padding: 40px 0;
263 }
264 }
265 .spel_dashboard .sidebar_navigation {
266 width: 18%;
267 margin-right: 30px;
268 }
269 .spel_dashboard .sidebar_navigation .sticky_sidebar {
270 background: #fff;
271 align-items: flex-start;
272 border-radius: 8px;
273 position: sticky;
274 top: 70px;
275 }
276 .spel_dashboard .sidebar_navigation .tab_left_content {
277 padding: 0;
278 margin: 0;
279 border-radius: 8px;
280 overflow: hidden;
281 }
282 .spel_dashboard .sidebar_navigation .tab_left_content li {
283 margin: 0;
284 }
285 .spel_dashboard .sidebar_navigation .tab_left_content li .icon {
286 background: #f0e9fc;
287 border-radius: 50%;
288 width: 35px;
289 height: 35px;
290 display: flex;
291 justify-content: center;
292 align-items: center;
293 margin-right: 12px;
294 color: #571fb7;
295 }
296 @media (max-width: 1400px) {
297 .spel_dashboard .sidebar_navigation .tab_left_content li .icon {
298 margin-right: 5px;
299 }
300 }
301 .spel_dashboard .sidebar_navigation .tab_left_content li .icon i {
302 font-size: 18px;
303 }
304 .spel_dashboard .sidebar_navigation .tab_left_content li:nth-child(2) .icon {
305 color: #ff70ee;
306 background: #fff0fe;
307 }
308 .spel_dashboard .sidebar_navigation .tab_left_content li:nth-child(3) .icon {
309 color: #1fb75c;
310 background: #e4fbd2;
311 }
312 .spel_dashboard .sidebar_navigation .tab_left_content li:nth-child(4) .icon {
313 color: #ff70ee;
314 background: #fff0fe;
315 }
316 .spel_dashboard .sidebar_navigation .tab_left_content li:nth-child(5) .icon {
317 color: #ffa30d;
318 background: #fbebd2;
319 }
320 .spel_dashboard .sidebar_navigation .tab_left_content li:nth-child(6) .icon {
321 color: #fb7f49;
322 background: #ffe9e2;
323 }
324 .spel_dashboard .sidebar_navigation .tab_left_content .tab-menu-link {
325 text-decoration: none;
326 }
327 .spel_dashboard .sidebar_navigation .tab_left_content .tab-menu-link .tab_menu_contents {
328 display: flex;
329 align-items: center;
330 padding: 18px 25px;
331 transition: all 0.3s linear;
332 }
333 @media (max-width: 1400px) {
334 .spel_dashboard .sidebar_navigation .tab_left_content .tab-menu-link .tab_menu_contents {
335 padding: 16px 10px;
336 }
337 }
338 .spel_dashboard .sidebar_navigation .tab_left_content .tab-menu-link .tab_menu_contents .content h3 {
339 margin-top: 0;
340 font-size: 18px;
341 font-weight: 500;
342 line-height: 24px;
343 color: #0c0d0e;
344 font-family: "Roboto", sans-serif;
345 margin-bottom: 2px;
346 }
347 .spel_dashboard .sidebar_navigation .tab_left_content .tab-menu-link .tab_menu_contents .content p {
348 margin-bottom: 0;
349 font-family: "Inter", sans-serif;
350 font-size: 14px;
351 font-weight: 400;
352 color: #6a737c;
353 line-height: 22px;
354 margin-top: 0;
355 }
356 @media (max-width: 1400px) {
357 .spel_dashboard .sidebar_navigation .tab_left_content .tab-menu-link .tab_menu_contents .content p {
358 font-size: 13px;
359 }
360 }
361 .spel_dashboard .sidebar_navigation .tab_left_content .tab-menu-link.active .tab_menu_contents {
362 background: linear-gradient(90deg, #7460ff 0%, #9d70ff 100%);
363 }
364 .spel_dashboard .sidebar_navigation .tab_left_content .tab-menu-link.active .tab_menu_contents .icon {
365 background: #fff;
366 color: #571fb7;
367 }
368 .spel_dashboard .sidebar_navigation .tab_left_content .tab-menu-link.active .tab_menu_contents .content h3, .spel_dashboard .sidebar_navigation .tab_left_content .tab-menu-link.active .tab_menu_contents .content p {
369 color: #fff;
370 }
371 .spel_dashboard .tab_contents {
372 flex: 1;
373 max-width: 1200px;
374 }
375 .spel_dashboard .tab_contents .tab-box {
376 display: none;
377 }
378 .spel_dashboard .tab_contents .tab-box.active {
379 display: block;
380 opacity: 1;
381 }
382 .spel_dashboard .tab_contents .tab-box .support_item {
383 background: #fff;
384 border-radius: 8px;
385 padding: 40px;
386 margin-top: 25px;
387 }
388 .spel_dashboard .tab_contents .tab-box .support_item .icon {
389 width: 56px;
390 height: 56px;
391 background: #e2d4fa;
392 border-radius: 50%;
393 font-size: 24px;
394 color: #411789;
395 display: flex;
396 align-items: center;
397 justify-content: center;
398 margin-bottom: 20px;
399 }
400 .spel_dashboard .tab_contents .tab-box .support_item .dashboard_title {
401 margin-bottom: 15px;
402 }
403 .spel_dashboard .tab_contents .tab-box .support_item p {
404 font-size: 16px;
405 font-family: "Inter", sans-serif;
406 color: #535a60;
407 line-height: 32px;
408 margin-top: 0;
409 margin-bottom: 25px;
410 }
411 .spel_dashboard .tab_contents .tab-box .support_item.dashboard_img {
412 background: transparent;
413 padding-top: 10px;
414 padding-bottom: 10px;
415 }
416 .spel_dashboard .tab_contents .tab-box .support_item .note {
417 background: #f0e9fc;
418 padding: 12px 30px;
419 margin-top: 10px;
420 }
421 .spel_dashboard .tab_contents .tab-box .support_item .note p {
422 margin-bottom: 0;
423 font-size: 12px;
424 color: #2f3337;
425 font-family: "Inter", sans-serif;
426 line-height: 26px;
427 }
428 .spel_dashboard .tab_contents .tab-box .filter_content .element_right .link a img {
429 width: 12px;
430 height: 12px;
431 }
432 .spel_dashboard .tab_contents .dashboard_btn {
433 text-decoration: none;
434 padding: 15px 26px;
435 font-size: 16px;
436 font-weight: 500;
437 color: #524cff;
438 font-family: "Roboto", sans-serif;
439 border-radius: 4px;
440 border: 1px solid #524cff;
441 display: inline-block;
442 transition: all 0.3s;
443 cursor: pointer;
444 }
445 .spel_dashboard .tab_contents .dashboard_btn.save_btn {
446 color: #fff;
447 background: #6d27e5;
448 padding: 12px 24px;
449 }
450 .spel_dashboard .tab_contents .dashboard_btn.save_btn:hover {
451 background: #524cff;
452 }
453 .spel_dashboard .tab_contents .dashboard_btn:hover {
454 background: #524cff;
455 color: #fff;
456 }
457 .spel_dashboard .tab_contents .dashboard_banner {
458 background: url(../images/dashboard/dashboard_banner.png) no-repeat scroll center 0/cover;
459 padding: 60px 50px;
460 border-radius: 12px;
461 overflow: hidden;
462 }
463 .spel_dashboard .tab_contents .dashboard_banner.text-center {
464 text-align: center;
465 }
466 .spel_dashboard .tab_contents .dashboard_banner h2 {
467 color: #fff;
468 font-size: 36px;
469 font-weight: 700;
470 line-height: 1.1;
471 font-family: "Roboto", sans-serif;
472 margin-top: 0;
473 margin-bottom: 16px;
474 }
475 .spel_dashboard .tab_contents .dashboard_banner p {
476 font-family: "Inter", sans-serif;
477 color: #fff;
478 font-size: 16px;
479 line-height: 1.8;
480 margin-bottom: 0;
481 }
482 .spel_dashboard .tab_contents .widget_progress_item {
483 border-radius: 8px;
484 padding: 30px 40px;
485 background: #fff;
486 margin-top: 25px;
487 }
488 .spel_dashboard .tab_contents .widget_progress_item h3 {
489 margin: 0 0 10px;
490 font-size: 20px;
491 line-height: 28px;
492 font-weight: 600;
493 font-family: "Roboto", sans-serif;
494 color: #0c0d0e;
495 }
496 .spel_dashboard .tab_contents .widget_progress_item .progress_info_list {
497 display: flex;
498 justify-content: center;
499 margin-top: 6px;
500 }
501 .spel_dashboard .tab_contents .widget_progress_item .progress_info_list li {
502 font-size: 10px;
503 color: #6a737c;
504 font-family: "Roboto", sans-serif;
505 font-weight: 400;
506 margin-bottom: 0;
507 }
508 .spel_dashboard .tab_contents .widget_progress_item .progress_info_list li + li {
509 margin-left: 20px;
510 }
511 .spel_dashboard .tab_contents .widget_progress_item svg.radial-progress {
512 height: auto;
513 max-width: 130px;
514 padding: 0.5em;
515 transform: rotate(90deg);
516 }
517 .spel_dashboard .tab_contents .widget_progress_item svg.radial-progress circle {
518 fill: transparent;
519 stroke: #fff;
520 stroke-dashoffset: 219.9114857513;
521 stroke-width: 10px;
522 }
523 .spel_dashboard .tab_contents .widget_progress_item svg.radial-progress circle.incomplete {
524 opacity: 0.25;
525 }
526 .spel_dashboard .tab_contents .widget_progress_item svg.radial-progress circle.complete {
527 stroke-dasharray: 219.9114857513;
528 }
529 .spel_dashboard .tab_contents .widget_progress_item .circle_progress {
530 position: relative;
531 }
532 .spel_dashboard .tab_contents .widget_progress_item .circle_progress text {
533 color: #02a4ff;
534 font-size: 30px;
535 font-weight: 600;
536 text-anchor: middle;
537 font-family: "Roboto", sans-serif;
538 left: 50%;
539 top: 50%;
540 transform: translate(-50%, -50%);
541 position: absolute;
542 }
543 .spel_dashboard .tab_contents .widget_progress_item svg.radial-progress circle.complete {
544 stroke: #6bccfe;
545 stroke-linecap: round;
546 }
547 .spel_dashboard .tab_contents .widget_progress_item svg.radial-progress circle.incomplete {
548 stroke: #4fbaf0;
549 }
550 .spel_dashboard .tab_contents .dashboard_title {
551 font-size: 22px;
552 color: #031933;
553 font-weight: 700;
554 font-family: "Roboto", sans-serif;
555 line-height: 1.1;
556 margin-top: 0;
557 margin-bottom: 20px;
558 }
559 .spel_dashboard .tab_contents .premium_banner {
560 background: url(../images/dashboard/premium_banner.jpg) no-repeat scroll center 0/cover;
561 position: relative;
562 padding: 66px;
563 }
564 .spel_dashboard .tab_contents .premium_banner h2 {
565 font-size: 24px;
566 font-weight: 600;
567 margin-bottom: 12px;
568 }
569 .spel_dashboard .tab_contents .premium_banner p {
570 font-size: 14px;
571 font-weight: 500;
572 line-height: 24px;
573 margin-top: 0;
574 max-width: 405px;
575 margin-left: auto;
576 margin-right: auto;
577 }
578 .spel_dashboard .tab_contents .premium_banner .banner_btn {
579 color: #fff;
580 font-size: 14px;
581 font-weight: 500;
582 font-family: "Inter", sans-serif;
583 text-decoration: underline;
584 display: inline-block;
585 margin-top: 15px;
586 }
587 .spel_dashboard .tab_contents .premium_banner .rocket_img {
588 position: absolute;
589 top: 50%;
590 right: 100px;
591 transform: translateY(-50%);
592 }
593 .spel_dashboard .tab_contents .requirement_list li {
594 font-size: 14px;
595 font-family: "Roboto", sans-serif;
596 color: #535a60;
597 display: flex;
598 align-items: center;
599 margin-bottom: 0;
600 padding: 16px 24px;
601 background: #f5f5f5;
602 }
603 .spel_dashboard .tab_contents .requirement_list li strong {
604 font-size: 16px;
605 font-weight: 500;
606 color: #2f3337;
607 flex: 40%;
608 }
609 .spel_dashboard .tab_contents .requirement_list li span {
610 flex: 60%;
611 }
612 .spel_dashboard .tab_contents .requirement_list li span.invalid i {
613 background: #e9336b;
614 }
615 .spel_dashboard .tab_contents .requirement_list li i {
616 font-size: 8px;
617 width: 24px;
618 height: 24px;
619 display: inline-flex;
620 align-items: center;
621 justify-content: center;
622 background: #4caf50;
623 border-radius: 3px;
624 color: #fff;
625 margin-right: 12px;
626 }
627 .spel_dashboard .tab_contents .requirement_list li:nth-child(even) {
628 background: #fafafa;
629 }
630 .spel_dashboard .tab_contents .elements_pro_popup {
631 display: none;
632 position: fixed;
633 z-index: 9;
634 left: 0;
635 top: 0;
636 height: 100%;
637 width: 100%;
638 overflow: auto;
639 background-color: rgba(0, 0, 0, 0.6);
640 opacity: 1;
641 -webkit-transition: opacity 0.3s ease-in-out;
642 transition: opacity 0.3s ease-in-out;
643 }
644 .spel_dashboard .tab_contents .elements_pro_popup .message_content {
645 position: fixed;
646 top: 50%;
647 left: 50%;
648 z-index: 10001;
649 min-width: 300px;
650 padding: 50px 36px;
651 background: #fff;
652 border-radius: 10px;
653 text-align: center;
654 -webkit-animation: hide-popup 0.3s forwards;
655 animation: hide-popup 0.3s forwards;
656 text-align: center;
657 }
658 .spel_dashboard .tab_contents .elements_pro_popup .message_content .pro-close {
659 position: absolute;
660 right: 20px;
661 top: 20px;
662 cursor: pointer;
663 }
664 .spel_dashboard .tab_contents .elements_pro_popup .message_content h3 {
665 font-size: 28px;
666 font-family: "Roboto", sans-serif;
667 color: #242729;
668 font-weight: 700;
669 margin-bottom: 12px;
670 }
671 .spel_dashboard .tab_contents .elements_pro_popup .message_content p {
672 font-size: 16px;
673 font-weight: 500;
674 font-family: "Inter", sans-serif;
675 margin-top: 0;
676 }
677 .spel_dashboard .tab_contents .elements_pro_popup .message_content .dashboard_btn {
678 padding: 15px 27px;
679 margin-top: 8px;
680 }
681 .spel_dashboard .tab_contents .elements_pro_popup.popup-visible {
682 opacity: 1;
683 display: block;
684 }
685 .spel_dashboard .tab_contents .elements_pro_popup.popup-visible .message_content {
686 animation: show-popup 0.3s forwards;
687 }
688
689 @-webkit-keyframes show-popup {
690 0% {
691 -webkit-transform: translate(-50%, -50%) scale(0.7);
692 transform: translate(-50%, -50%) scale(0.7);
693 opacity: 0;
694 }
695 45% {
696 -webkit-transform: translate(-50%, -50%) scale(1.05);
697 transform: translate(-50%, -50%) scale(1.05);
698 opacity: 1;
699 }
700 80% {
701 -webkit-transform: translate(-50%, -50%) scale(0.95);
702 transform: translate(-50%, -50%) scale(0.95);
703 }
704 100% {
705 -webkit-transform: translate(-50%, -50%) scale(1);
706 transform: translate(-50%, -50%) scale(1);
707 }
708 }
709 @keyframes show-popup {
710 0% {
711 -webkit-transform: translate(-50%, -50%) scale(0.7);
712 transform: translate(-50%, -50%) scale(0.7);
713 opacity: 0;
714 }
715 45% {
716 -webkit-transform: translate(-50%, -50%) scale(1.05);
717 transform: translate(-50%, -50%) scale(1.05);
718 opacity: 1;
719 }
720 80% {
721 -webkit-transform: translate(-50%, -50%) scale(0.95);
722 transform: translate(-50%, -50%) scale(0.95);
723 }
724 100% {
725 -webkit-transform: translate(-50%, -50%) scale(1);
726 transform: translate(-50%, -50%) scale(1);
727 }
728 }
729 @-webkit-keyframes hide-popup {
730 0% {
731 -webkit-transform: translate(-50%, -50%) scale(1);
732 transform: translate(-50%, -50%) scale(1);
733 opacity: 1;
734 }
735 100% {
736 -webkit-transform: translate(-50%, -50%) scale(0.5);
737 transform: translate(-50%, -50%) scale(0.5);
738 opacity: 0;
739 }
740 }
741 @keyframes hide-popup {
742 0% {
743 -webkit-transform: translate(-50%, -50%) scale(1);
744 transform: translate(-50%, -50%) scale(1);
745 opacity: 1;
746 }
747 100% {
748 -webkit-transform: translate(-50%, -50%) scale(0.5);
749 transform: translate(-50%, -50%) scale(0.5);
750 opacity: 0;
751 }
752 }
753 .elements_tab_menu {
754 display: flex;
755 justify-content: space-between;
756 background: #fff;
757 padding: 24px;
758 border-radius: 5px;
759 }
760 .elements_tab_menu .tab_contents {
761 display: flex;
762 align-items: center;
763 transition: all 0.3s linear;
764 }
765 .elements_tab_menu .tab_contents .icon {
766 color: #fff;
767 border-radius: 50%;
768 width: 35px;
769 height: 35px;
770 display: flex;
771 justify-content: center;
772 align-items: center;
773 margin-right: 12px;
774 font-size: 18px;
775 background: linear-gradient(90deg, #7460ff 0%, #9d70ff 100%);
776 }
777 .elements_tab_menu .tab_contents .content h3 {
778 margin-top: 0;
779 font-size: 18px;
780 font-weight: 600;
781 line-height: 27px;
782 color: #0c0d0e;
783 font-family: "Roboto", sans-serif;
784 margin-bottom: 2px;
785 }
786 .elements_tab_menu .tab_contents.api_title_color .icon {
787 background: #fff0fe;
788 color: #ff70ee;
789 }
790 .elements_tab_menu .tab_contents.integration_title_color .icon {
791 background: #fbebd2;
792 color: #ffa30d;
793 }
794 .elements_tab_menu .menu_right_content {
795 display: flex;
796 align-items: center;
797 }
798 .elements_tab_menu .menu_right_content .plugin_active_switcher {
799 display: flex;
800 font-size: 12px;
801 font-family: "Roboto", sans-serif;
802 font-weight: 400;
803 color: #242729;
804 }
805 .elements_tab_menu .menu_right_content .plugin_active_switcher input {
806 display: none;
807 }
808 .elements_tab_menu .menu_right_content .plugin_active_switcher input:checked + .switch {
809 background: #7fb71f;
810 }
811 .elements_tab_menu .menu_right_content .plugin_active_switcher input:checked + .switch::before {
812 transform: translateX(12px);
813 }
814 .elements_tab_menu .menu_right_content .plugin_active_switcher .switch {
815 width: 32px;
816 height: 18px;
817 background: #848d95;
818 border-radius: 45px;
819 position: relative;
820 display: block;
821 margin: 0 20px;
822 }
823 .elements_tab_menu .menu_right_content .plugin_active_switcher .switch::before {
824 width: 12px;
825 height: 12px;
826 border-radius: 50%;
827 content: "";
828 position: absolute;
829 background: #fff;
830 top: 3px;
831 left: 4px;
832 transition: all 0.2s;
833 }
834 .elements_tab_menu .dashboard_btn {
835 border: 0;
836 padding: 8px 21px;
837 font-size: 16px;
838 margin-left: 40px;
839 cursor: pointer;
840 }
841
842 .elements_tab {
843 background: #f0e9fc;
844 padding: 15px 24px;
845 display: flex;
846 margin: 32px 0;
847 gap: 5px;
848 border-radius: 5px;
849 }
850 .elements_tab .filter_data {
851 font-size: 14px;
852 font-family: "Roboto", sans-serif;
853 color: #535a60;
854 padding: 10px 23px;
855 border-radius: 4px;
856 transition: all 0.3s;
857 cursor: pointer;
858 }
859 .elements_tab .filter_data:hover {
860 background: rgba(109, 39, 229, 0.3);
861 }
862 .elements_tab .filter_data i {
863 margin-right: 5px;
864 }
865 .elements_tab .filter_data.active {
866 background: #6d27e5;
867 color: #fff;
868 }
869
870 .filter_content {
871 margin-left: -12px;
872 margin-right: -12px;
873 }
874
875 .ezd-colum-space-4 {
876 margin-bottom: 25px;
877 }
878
879 .element_box {
880 padding: 30px 25px;
881 border-radius: 8px;
882 background: #fff;
883 transition: all 0.2s linear;
884 }
885 .element_box:hover {
886 box-shadow: 0 5px 15px 0 rgba(51, 77, 114, 0.1);
887 }
888 .element_box:hover .link {
889 opacity: 1;
890 visibility: visible;
891 }
892
893 .element_switch {
894 display: flex;
895 justify-content: space-between;
896 align-items: center;
897 position: relative;
898 overflow: hidden;
899 }
900 .element_switch .badge {
901 width: 64px;
902 height: 64px;
903 text-align: center;
904 border-radius: 5px;
905 color: #fff;
906 position: absolute;
907 left: -36px;
908 top: -36px;
909 font-size: 12px;
910 font-family: "Roboto", sans-serif;
911 cursor: pointer;
912 background: #e9336b;
913 -webkit-transform: rotate(-45deg);
914 transform: rotate(-45deg);
915 text-transform: uppercase;
916 padding: 3px;
917 display: flex;
918 align-items: flex-end;
919 justify-content: center;
920 font-weight: 700;
921 }
922 .element_switch .element_content {
923 font-size: 14px;
924 font-weight: 400;
925 font-family: "Roboto", sans-serif;
926 display: flex;
927 align-items: center;
928 }
929 .element_switch .element_content i {
930 font-size: 32px;
931 color: #000000;
932 margin-right: 20px;
933 }
934 .element_switch input {
935 display: none;
936 }
937 .element_switch input:checked + .widget_switcher {
938 background: #7fb71f;
939 }
940 .element_switch input:checked + .widget_switcher:before {
941 transform: translateX(19px);
942 }
943 .element_switch .widget_switcher {
944 width: 40px;
945 height: 20px;
946 background: #848d95;
947 border-radius: 45px;
948 position: relative;
949 display: block;
950 }
951 .element_switch .widget_switcher::before {
952 content: "";
953 width: 14px;
954 height: 14px;
955 border-radius: 50%;
956 left: 4px;
957 top: 3px;
958 position: absolute;
959 background: #fff;
960 transition: all 0.2s linear;
961 }
962
963 .element_right {
964 display: flex;
965 align-items: center;
966 }
967 .element_right a {
968 margin-right: 8px;
969 display: inline-block;
970 line-height: 1;
971 }
972 .element_right .link {
973 margin-right: 5px;
974 opacity: 0;
975 visibility: hidden;
976 transition: all 0.3s linear;
977 }
978 .element_right .link .tooltip-top {
979 position: relative;
980 display: inline-block;
981 text-decoration: none;
982 }
983 .element_right .link .tooltip-top::before {
984 content: attr(data-tooltip);
985 top: -40px;
986 left: -20px;
987 transform: translateX(-50%);
988 background-color: #333;
989 color: #fff;
990 text-align: center;
991 border-radius: 6px;
992 padding: 8px 8px;
993 opacity: 0;
994 visibility: hidden;
995 transition: opacity 0.2s;
996 position: absolute;
997 width: 190px;
998 }
999 .element_right .link .tooltip-top:hover::before {
1000 opacity: 1;
1001 visibility: visible;
1002 }
1003
1004 /*===== start api_box ==========*/
1005 .api_box {
1006 padding: 24px;
1007 }
1008 .api_box h3 {
1009 font-size: 16px;
1010 font-weight: 600;
1011 line-height: 24px;
1012 font-family: "Roboto", sans-serif;
1013 color: #242729;
1014 margin-top: 0;
1015 margin-bottom: 6px;
1016 }
1017 .api_box p {
1018 font-size: 12px;
1019 line-height: 18px;
1020 font-weight: 500;
1021 color: #535a60;
1022 font-family: "Inter", sans-serif;
1023 margin-top: 0;
1024 }
1025 .api_box .api_panel .api_inner h5 {
1026 font-size: 14px;
1027 font-weight: 500;
1028 line-height: 22px;
1029 color: #242729;
1030 font-family: "Roboto", sans-serif;
1031 margin-bottom: 12px;
1032 margin-top: 0;
1033 }
1034 .api_box .api_panel .api_inner input {
1035 width: 100%;
1036 border: 1px solid #bbc0c4;
1037 font-size: 14px;
1038 padding: 4px 10px;
1039 color: #242729;
1040 font-family: "Roboto", sans-serif;
1041 line-height: 30px;
1042 margin: 0;
1043 outline: none;
1044 box-shadow: none;
1045 }
1046 .api_box .api_panel .api_inner input.placeholder {
1047 color: #bbc0c4;
1048 }
1049 .api_box .api_panel .api_inner input:-moz-placeholder {
1050 color: #bbc0c4;
1051 }
1052 .api_box .api_panel .api_inner input::-moz-placeholder {
1053 color: #bbc0c4;
1054 }
1055 .api_box .api_panel .api_inner input::-webkit-input-placeholder {
1056 color: #bbc0c4;
1057 }
1058 .api_box .api_panel .api_inner input:focus {
1059 border-color: #6d27e5b0;
1060 }
1061 .api_box .api_panel p {
1062 font-size: 12px;
1063 font-family: "Inter", sans-serif;
1064 line-height: 20px;
1065 color: #535a60;
1066 margin-top: 10px;
1067 }
1068 .api_box .api_panel + .api_panel {
1069 margin-top: 10px;
1070 }
1071
1072 .integration_banner {
1073 text-align: left;
1074 padding: 45px;
1075 }
1076
1077 .integration_item {
1078 margin-top: 25px;
1079 padding: 40px;
1080 }
1081 .integration_item img {
1082 width: 40px;
1083 height: 40px;
1084 }
1085 .integration_item h3 {
1086 font-size: 18px;
1087 font-weight: 600;
1088 font-family: "Roboto", sans-serif;
1089 color: #0c0d0e;
1090 margin-top: 12px;
1091 margin-bottom: 10px;
1092 line-height: 1.3;
1093 }
1094 .integration_item p {
1095 font-size: 14px;
1096 color: #3c4146;
1097 line-height: 26px;
1098 font-family: "Inter", sans-serif;
1099 margin-bottom: 0;
1100 margin-top: 0;
1101 }
1102 .integration_item .dashboard_btn {
1103 padding: 9px 32px;
1104 margin-top: 25px;
1105 }
1106 .integration_item .dashboard_btn.active_btn {
1107 background: #848d95;
1108 cursor: not-allowed;
1109 }
1110 .integration_item .dashboard_btn.active_btn:hover {
1111 box-shadow: none;
1112 }
1113
1114 .mt-25 {
1115 margin-top: 25px;
1116 }
1117
1118 .pr_promo_box {
1119 background: #fff;
1120 border-radius: 8px;
1121 padding: 16px 16px 30px;
1122 margin-top: 25px;
1123 }
1124 .pr_promo_box h2 {
1125 font-weight: 700;
1126 font-size: 28px;
1127 color: #242729;
1128 font-family: "Roboto", sans-serif;
1129 margin-bottom: 18px;
1130 }
1131 .pr_promo_box p {
1132 font-size: 18px;
1133 line-height: 28px;
1134 color: #535a60;
1135 font-family: "Inter", sans-serif;
1136 margin-top: 0;
1137 }
1138 .pr_promo_box .demo_btn {
1139 font-size: 14px;
1140 font-weight: 500;
1141 color: #e9336b;
1142 font-family: "Inter", sans-serif;
1143 text-decoration: none;
1144 }
1145 .pr_promo_box .demo_btn i {
1146 margin-left: 4px;
1147 transition: all 0.2s linear;
1148 }
1149 .pr_promo_box .demo_btn:hover i {
1150 transform: translateX(5px);
1151 }
1152 .pr_promo_box .promo_video {
1153 background: #6d27e5;
1154 border-radius: 4px;
1155 padding: 12px;
1156 position: relative;
1157 }
1158 .pr_promo_box .promo_video img {
1159 width: 100%;
1160 border-radius: 4px;
1161 }
1162 .pr_promo_box .promo_video .popup_youtube {
1163 position: absolute;
1164 width: 40px;
1165 background: #fff;
1166 filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.12));
1167 text-align: center;
1168 line-height: 38px;
1169 color: #0c0d0e;
1170 font-size: 18px;
1171 border-radius: 50%;
1172 height: 40px;
1173 top: 50%;
1174 left: 50%;
1175 transform: translate(-50%, -50%);
1176 border: 0;
1177 transition: all 0.3s;
1178 display: flex;
1179 align-items: center;
1180 justify-content: center;
1181 }
1182 .pr_promo_box .promo_video .popup_youtube::before, .pr_promo_box .promo_video .popup_youtube:after {
1183 content: "";
1184 width: 100%;
1185 height: 100%;
1186 border: 1.2px solid #fff;
1187 border-radius: 50%;
1188 opacity: 0.3;
1189 position: absolute;
1190 left: 50%;
1191 top: 50%;
1192 }
1193 .pr_promo_box .promo_video .popup_youtube::before {
1194 transform: translate(-50%, -50%) scale(1.32);
1195 }
1196 .pr_promo_box .promo_video .popup_youtube:after {
1197 border-radius: 50%;
1198 box-shadow: 0 1px 15px 1px rgba(255, 255, 255, 0.3);
1199 transform: scale(8);
1200 animation: spe_pulse 2s infinite;
1201 }
1202 .pr_promo_box .promo_video .popup_youtube:hover {
1203 transform: translate(-50%, -50%) scale(1.02);
1204 }
1205
1206 /*============ qa_inner css ===============*/
1207 .qa_inner {
1208 border-radius: 12px;
1209 background: #fff;
1210 padding: 48px 56px;
1211 flex-wrap: nowrap;
1212 align-items: start;
1213 }
1214 .qa_inner img {
1215 margin-right: 25px;
1216 }
1217 .qa_inner h2 {
1218 font-size: 24px;
1219 font-weight: 600;
1220 font-family: "Roboto", sans-serif;
1221 margin-bottom: 15px;
1222 color: #0c0d0e;
1223 }
1224 .qa_inner p {
1225 font-size: 16px;
1226 line-height: 32px;
1227 color: #2f3337;
1228 margin-top: 0;
1229 }
1230
1231 /*============ keyframes animation =============*/
1232 @-webkit-keyframes spe_pulse {
1233 0% {
1234 opacity: 1;
1235 -webkit-transform: translate(-50%, -50%) scale(1);
1236 transform: translate(-50%, -50%) scale(1);
1237 }
1238 100% {
1239 opacity: 0;
1240 -webkit-transform: translate(-50%, -50%) scale(2);
1241 transform: translate(-50%, -50%) scale(2);
1242 }
1243 }
1244 @keyframes spe_pulse {
1245 0% {
1246 opacity: 1;
1247 -webkit-transform: translate(-50%, -50%) scale(1);
1248 transform: translate(-50%, -50%) scale(1);
1249 }
1250 100% {
1251 opacity: 0;
1252 -webkit-transform: translate(-50%, -50%) scale(2);
1253 transform: translate(-50%, -50%) scale(2);
1254 }
1255 }
1256 .fancybox-slide--iframe .fancybox-content,
1257 .fancybox-slide--map .fancybox-content,
1258 .fancybox-slide--pdf .fancybox-content,
1259 .fancybox-slide--video .fancybox-content {
1260 width: 55%;
1261 height: 50%;
1262 }
1263
1264 .filter_content .pro .badge {
1265 position: relative;
1266 }
1267 .filter_content .pro .badge::before {
1268 content: "Pro";
1269 width: 62px;
1270 height: 62px;
1271 text-align: center;
1272 border-radius: 5px;
1273 color: #fff;
1274 position: absolute;
1275 left: -36px;
1276 top: -36px;
1277 font-size: 10px;
1278 font-family: "Roboto", sans-serif;
1279 cursor: pointer;
1280 background: #e9336b;
1281 transform: rotate(-45deg);
1282 text-transform: uppercase;
1283 padding: 3px;
1284 display: flex;
1285 align-items: flex-end;
1286 justify-content: center;
1287 font-weight: 700;
1288 }
1289
1290 #spel_theme_builder_modal {
1291 display: none;
1292 position: fixed;
1293 top: 0;
1294 left: 0;
1295 width: 100%;
1296 height: 100%;
1297 background: rgba(0, 0, 0, 0.5);
1298 backdrop-filter: blur(5px);
1299 z-index: 9999;
1300 opacity: 0;
1301 visibility: hidden;
1302 transition: opacity 0.3s ease, visibility 0.3s ease;
1303 }
1304 #spel_theme_builder_modal.show-popup {
1305 opacity: 1;
1306 visibility: visible;
1307 }
1308
1309 .spel_theme_builder_wrapper.spel-modal.spel-fade {
1310 transition: opacity 0.15s linear;
1311 }
1312 .spel_theme_builder_wrapper.spel-modal .modal-dialog {
1313 width: 500px;
1314 margin: 0 auto;
1315 position: absolute;
1316 top: 50%;
1317 left: 50%;
1318 transform: translate(-50%, -50%);
1319 display: flex;
1320 align-items: center;
1321 transition: all 0.3s ease;
1322 }
1323 .spel_theme_builder_wrapper.spel-modal .modal-dialog.modal-dialog-centered {
1324 display: flex;
1325 align-items: center;
1326 min-height: calc(100% - 1rem);
1327 }
1328 .spel_theme_builder_wrapper.spel-modal form {
1329 width: 100%;
1330 }
1331 .spel_theme_builder_wrapper.spel-modal form .modal-content {
1332 position: relative;
1333 background-color: #fff;
1334 border: 1px solid #ccc;
1335 border-radius: 0.3rem;
1336 box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
1337 }
1338 .spel_theme_builder_wrapper.spel-modal form .modal-content.show-popup {
1339 opacity: 1;
1340 transform: scale(1);
1341 }
1342 .spel_theme_builder_wrapper.spel-modal form .modal-content .modal-title {
1343 margin: 0;
1344 line-height: 1.5;
1345 }
1346 .spel_theme_builder_wrapper.spel-modal form .modal-content .modal-close {
1347 background: transparent;
1348 border: none;
1349 font-size: 20px;
1350 cursor: pointer;
1351 }
1352 .spel_theme_builder_wrapper.spel-modal form .modal-content .modal-close:hover {
1353 color: red;
1354 }
1355 .spel_theme_builder_wrapper.spel-modal form .modal-content .modal-header,
1356 .spel_theme_builder_wrapper.spel-modal form .modal-content .modal-footer {
1357 display: flex;
1358 justify-content: space-between;
1359 align-items: center;
1360 padding: 15px;
1361 border-bottom: 1px solid #e9ecef;
1362 }
1363 .spel_theme_builder_wrapper.spel-modal form .modal-content .modal-footer {
1364 border-top: 1px solid #e9ecef;
1365 }
1366 .spel_theme_builder_wrapper.spel-modal form .modal-content .modal-body {
1367 position: relative;
1368 flex: 1 1 auto;
1369 padding: 1rem;
1370 }
1371 .spel_theme_builder_wrapper.spel-modal form .modal-content .modal-body .input-group {
1372 margin-bottom: 1rem;
1373 }
1374 .spel_theme_builder_wrapper.spel-modal form .modal-content .form-control {
1375 display: block;
1376 width: 100%;
1377 padding: 0.375rem 0.75rem;
1378 font-size: 1rem;
1379 line-height: 1.5;
1380 color: #495057;
1381 background-color: #fff;
1382 background-clip: padding-box;
1383 border: 1px solid #ced4da;
1384 border-radius: 0.25rem;
1385 transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
1386 }
1387 .spel_theme_builder_wrapper.spel-modal form .modal-content .btn.btn-default {
1388 color: #333;
1389 background-color: #fff;
1390 border-color: #ccc;
1391 }
1392 .spel_theme_builder_wrapper.spel-modal form .modal-content .btn.btn-default:hover {
1393 color: #333;
1394 background-color: #e6e6e6;
1395 border-color: #adadad;
1396 }
1397 .spel_theme_builder_wrapper.spel-modal form .modal-content .btn.btn-primary {
1398 color: #fff;
1399 background-color: #007bff;
1400 border-color: #007bff;
1401 }
1402 .spel_theme_builder_wrapper.spel-modal form .modal-content .btn.btn-primary:hover {
1403 color: #fff;
1404 background-color: #0056b3;
1405 border-color: #004085;
1406 }
1407 .spel_theme_builder_wrapper.spel-modal form .modal-content .switch-group {
1408 display: flex;
1409 align-items: center;
1410 }
1411 .spel_theme_builder_wrapper.spel-modal form .modal-content .switch-group .admin-input-switch {
1412 position: relative;
1413 display: inline-block;
1414 width: 50px;
1415 height: 25px;
1416 }
1417 .spel_theme_builder_wrapper.spel-modal form .modal-content .switch-group .admin-input-switch input {
1418 opacity: 0;
1419 width: 0;
1420 height: 0;
1421 }
1422 .spel_theme_builder_wrapper.spel-modal form .modal-content .switch-group .admin-input-switch .admin-control-label {
1423 position: absolute;
1424 cursor: pointer;
1425 top: 0;
1426 left: 0;
1427 right: 0;
1428 bottom: 0;
1429 background-color: #ccc;
1430 transition: 0.4s;
1431 border-radius: 25px;
1432 }
1433 .spel_theme_builder_wrapper.spel-modal form .modal-content .switch-group .admin-input-switch .admin-control-label:before {
1434 position: absolute;
1435 content: "";
1436 height: 21px;
1437 width: 21px;
1438 left: 2px;
1439 bottom: 2px;
1440 background-color: white;
1441 transition: 0.4s;
1442 border-radius: 50%;
1443 }
1444 .spel_theme_builder_wrapper.spel-modal form .modal-content .switch-group .admin-input-switch input:checked + .admin-control-label {
1445 background-color: #2196F3;
1446 }
1447 .spel_theme_builder_wrapper.spel-modal form .modal-content .switch-group .admin-input-switch input:checked + .admin-control-label:before {
1448 transform: translateX(25px);
1449 }
1450
1451 /*# sourceMappingURL=admin.css.map */
1452