PluginProbe ʕ •ᴥ•ʔ
Flex Import / 2.6
Flex Import v2.6
3.0 2.9 trunk 1.2 1.3 1.4 1.5 1.6 1.7 1.8 1.9 2.0 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8
flex-import / assets / css / admin-style.css
flex-import / assets / css Last commit date
admin-style.css 3 months ago dashboard-banner.css 3 months ago fleximp-license-style.css 3 months ago
admin-style.css
3487 lines
1 @font-face {
2 font-family: 'Segoe UI Bold';
3 src: url('../font/Segoe UI Bold.ttf') format('truetype');
4 font-style: normal;
5 font-stretch: normal;
6 font-display: swap;
7 }
8
9 @font-face {
10 font-family: 'Segoe UI';
11 src: url('../font/Segoe UI.ttf') format('truetype');
12 font-style: normal;
13 font-stretch: normal;
14 font-display: swap;
15 }
16
17 @font-face {
18 font-family: 'Segoe UI Semibold';
19 src: url('../font/Segoe UI Semibold.ttf') format('truetype');
20 }
21
22 .fleximp-setup-card {
23 background: #fff;
24 border: 1px solid #ddd;
25 padding: 20px;
26 margin-top: 20px;
27 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
28 border-radius: 5px;
29 }
30
31 .fleximp-setup-card p {
32 font-size: 14px;
33 color: #444;
34 }
35
36 .fleximp-setup-card .button-primary {
37 background-color: #0073aa;
38 border-color: #0073aa;
39 color: #fff;
40 text-decoration: none;
41 }
42
43 .fleximp-card-nav {
44 margin-bottom: 15px;
45 gap: 10px;
46 }
47
48 .fleximp-card-button {
49 max-width: 180px;
50 width: 100%;
51 font-size: 14px;
52 font-family: sans-serif;
53 font-weight: 600;
54 margin-right: 5px;
55 cursor: pointer;
56 }
57
58 .fleximp-card-content {
59 margin-top: 20px;
60 padding: 15px;
61 border-radius: 5px;
62 background-color: #0000;
63 text-align: center;
64 }
65
66 .fleximp-card-content {
67 margin-top: 0px;
68 }
69
70 #fleximp-start-now {
71 padding: 5px 20px;
72 font-size: 16px;
73 margin-top: 20px;
74 }
75
76 .fleximp-card-all #fleximp-next-step,
77 .fleximp-card-all button#fleximp-import-pages-data,
78 .fleximp-card-all .fleximp-btn-wrapper button#fleximp-start-import,
79 .fleximp-card-all button#fleximp-install-plugins {
80 padding: 0px 30px;
81 font-size: 16px;
82 border-radius: 6px;
83 background: #fff;
84 color: #2271b1;
85 border: 2px solid #2271b1;
86 font-size: 17px !important;
87 }
88
89 #fleximp-start-import {
90 padding: 5px 20px;
91 font-size: 16px;
92 margin-top: 20px;
93 }
94
95 button#fleximp-import-pages-data {
96 margin-bottom: 10px;
97 }
98
99 button.button {
100 border: 1px solid #2271b1;
101 }
102
103 .fleximp-card p {
104 font-size: 16px;
105 }
106
107 .fleximp-card-nav {
108 display: flex;
109 justify-content: center;
110 margin-bottom: 0px;
111 align-items: center;
112 padding: 20px 0px;
113 }
114
115 .fleximp-loader {
116 border: 4px solid #f3f3f3;
117 border-top: 4px solid #3498db;
118 border-radius: 50%;
119 width: 40px;
120 height: 40px;
121 animation: spin 2s linear infinite;
122 margin: 20px auto;
123 }
124
125 @keyframes spin {
126 0% {
127 transform: rotate(0deg);
128 }
129
130 100% {
131 transform: rotate(360deg);
132 }
133 }
134
135 /* demo import modal */
136 .fleximp-btn-wrapper button#fleximp-start-import {
137 margin: 0px;
138 }
139
140 .fleximp-btn-wrapper {
141 display: flex;
142 align-items: center;
143 justify-content: center;
144 gap: 0px 10px;
145 }
146
147 .fleximp-card-header {
148 display: flex;
149 align-items: center;
150 background: #fff;
151 padding: 10px 20px;
152 box-sizing: border-box;
153 margin: 0 auto 0 auto;
154 justify-content: center;
155 border-bottom: 1px solid #ccc;
156 font-size: 25px;
157 line-height: 20px;
158 height: 80px;
159 font-family: inherit;
160 }
161
162 button.fleximp-card-button span {
163 width: 13px;
164 height: 13px;
165 display: inline-block;
166 background: #a7aaad;
167 border-radius: 50%;
168 }
169
170 button.button {
171 font-size: 18px !important;
172 }
173
174 .fleximp-card-content p {
175 font-size: 18px;
176 font-weight: 500;
177 }
178
179 .fleximp-card-content input[type="text"] {
180 width: 100%;
181 height: 50px;
182 font-size: 20px;
183 text-align: center;
184 margin-top: 20px;
185 }
186
187 .fleximp-card-content input[type="text"] {
188 width: 100%;
189 height: 50px;
190 font-size: 20px;
191 text-align: center;
192 margin-top: 20px;
193 border: 1px solid rgba(44, 51, 56, 0.5);
194 color: #000;
195 }
196
197 form#fleximp_license_form {
198 max-width: 500px;
199 margin: 0px auto;
200 }
201
202 form#fleximp_license_form label {
203 font-size: 18px;
204 }
205
206 button.fleximp-card-button.active span {
207 background: #2271b1;
208 }
209
210 .card-inner {
211 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
212 }
213
214 .plugin-item {
215 display: flex;
216 align-items: center;
217 justify-content: space-between;
218 gap: 0px 10px;
219 border: 1px solid #707070;
220 border-radius: 10px;
221 }
222
223 .plugin-item h4 {
224 margin: 0px 0px;
225 }
226
227 .plugin-item:nth-child(odd) {
228 background: #2271b142;
229 }
230
231 .fleximp-card-header h2 {
232 color: #2271b1;
233 font-size: 24px;
234 }
235
236 div#required-plugins-list {
237 max-width: 65%;
238 margin: 0px auto;
239 }
240
241 button.fleximp-card-button.active {
242 color: #2271b1;
243 }
244
245 button#fleximp-import-pages-data {
246 padding: 5px 20px;
247 }
248
249 .fleximp-card {
250 position: relative;
251 min-width: 255px;
252 background: #0000;
253 max-width: 70%;
254 margin: 50px auto 0px;
255 }
256
257 .fleximp-card-content {
258 padding: 25px 15px;
259 border: 1px solid #ccc;
260 border-radius: 5px;
261 background-color: #fff;
262 border: none;
263 text-align: center;
264 }
265
266 #fleximp-install-elementor {
267 padding: 6px 20px;
268 font-size: 16px;
269 }
270
271 .fleximp-card-nav {
272 display: flex;
273 justify-content: center;
274 padding: 29px 0px 0px;
275 margin: 0px;
276 }
277
278 .plugin-item h4 {
279 font-size: 16px;
280 font-weight: 400;
281 }
282
283 /* loader */
284 .loader {
285 font-size: 16px;
286 margin-top: 10px;
287 font-weight: bold;
288 color: #555;
289 }
290
291 .plugin-names p {
292 margin: 5px 0;
293 color: green;
294 }
295
296 #fleximp-loader {
297 color: #0073aa;
298 font-size: 16px;
299 margin-top: 10px;
300 }
301
302 .fleximp-card-button svg {
303 width: 30px;
304 height: 30px;
305 margin-bottom: 10px;
306 }
307
308 .fleximp-card-button svg path {
309 fill: #2cff05 !important;
310 stroke: #2cff05;
311 }
312
313 .fleximp-card-button {
314 margin-right: 5px;
315 padding: 20px;
316 border: none;
317 border-radius: 6px;
318 text-transform: capitalize;
319 font-size: 13px;
320 margin-top: 0px;
321 background-color: #0000 !important;
322 }
323
324 .fleximp-card-button {
325 max-width: 180px;
326 width: 100%;
327 display: flex;
328 flex-direction: column;
329 gap: 20px;
330 justify-content: space-between;
331 height: 90px;
332 align-items: center;
333 }
334
335 .fleximp-card-button {
336 max-width: 180px;
337 width: 100%;
338 }
339
340 .fleximp-card-all {
341 width: 60%;
342 margin: 0px auto;
343 background: #0000 !important;
344 }
345
346 /* end */
347 .fleximp-from-btn-wrap {
348 margin: 20px 0px 10px;
349 }
350
351 .loader {
352 display: inline-block;
353 vertical-align: middle;
354 }
355
356 .loader img {
357 width: 20px;
358 height: 20px;
359 }
360
361 /* for notices */
362 .fleximp-card-all .fs-notice.updated {
363 display: none !important;
364 }
365
366 button.fleximp-card-button.active .circles {
367 visibility: visible;
368 }
369
370 .circles {
371 height: 10px;
372 width: 10px;
373 position: relative;
374 visibility: hidden;
375 }
376
377 .circles>div {
378 animation: growAndFade 3s infinite ease-out;
379 background-color: dodgerblue;
380 border-radius: 50%;
381 height: 40px;
382 opacity: 0;
383 position: absolute;
384 width: 40px;
385 top: -13px;
386 left: -13px;
387 }
388
389 .circles .circle1 {
390 animation-delay: 1s;
391 }
392
393 .circles .circle2 {
394 animation-delay: 2s;
395 }
396
397 .circles .circle3 {
398 animation-delay: 3s;
399 }
400
401 @keyframes growAndFade {
402 0% {
403 opacity: 0.25;
404 transform: scale(0);
405 }
406
407 100% {
408 opacity: 0;
409 transform: scale(1);
410 }
411 }
412
413 .loader .spinner-border {
414 width: 1rem;
415 height: 1rem;
416 border: 0.2em solid #007bff;
417 /* Adjust the color as needed */
418 border-top-color: transparent;
419 /* Transparent top to create spinning effect */
420 animation: spin 0.6s linear infinite;
421 }
422
423 @keyframes spin {
424 0% {
425 transform: rotate(0deg);
426 }
427
428 100% {
429 transform: rotate(360deg);
430 }
431 }
432
433 .fleximp-dash-box {
434 padding: 20px 0px;
435 }
436
437 .fleximp-dash-box {
438 /* background-color: #ffffff; */
439 /* padding: 20px;
440 border-radius: 8px; */
441 }
442
443 .flex-nav-tab-links .nav-link.active {
444 color: #ff1f5f !important;
445 background-color: #fff;
446 border-color: none;
447 border: none;
448 }
449
450 .flex-nav-tab-links .nav-link {
451 font-weight: bold;
452 }
453
454 .flex-nav-tab-links .nav-link:focus {
455 box-shadow: none;
456 outline: none;
457 }
458
459 .flex-nav-tab-links .nav-link:hover {
460 border: none;
461 }
462
463 .flex-nav-tab-links a.nav-link {
464 font-weight: bold !important;
465 color: #000 !important;
466 border: 0;
467 align-self: center;
468 font: 900 24px / 27px Segoe UI Bold;
469 }
470
471 .flex-imp-nav-box .nav-tabs .nav-item {
472 margin: 0px;
473 }
474
475 .flex-imp-nav-box .flex-demo-buttons a {
476 color: #fff !important;
477 background: transparent linear-gradient(270deg, #4E5DAA 0%, #9B76B5 100%) 0% 0% no-repeat padding-box;
478 border-radius: 4px;
479 font-size: 19px !important;
480 }
481
482 .flex-nav-tab-links {
483 border: 0px !important;
484 }
485
486 .flex-demo-btn {
487 border: 1px solid #707070 !important;
488 border-radius: 10px;
489 font-weight: bold !important;
490 }
491
492 .flex-gap {
493 gap: 130px;
494 }
495
496 .flex-dashboard-packages-box {
497 background: #ECECEC;
498 border-radius: 15px;
499 border: 1px solid #707070;
500 padding: 40px 20px;
501 }
502
503 .flex-dashboard-blog-box {
504 border-radius: 8px;
505 box-shadow: none;
506 border: 1px solid #707070;
507 padding: 20px;
508 }
509
510 h3.flex-support-title {
511 font-size: 24px !important;
512 color: #000;
513 font-weight: bold;
514 margin: 0;
515 line-height: 18px;
516 align-self: center;
517 font: 900 18px / 25px Segoe UI Bold;
518 }
519
520 .fleximp-subscription-box h3.flex-support-title,
521 .fleximp-blog-sidebar-main-box h3.flex-support-title {
522 font: 900 22px / 25px Segoe UI Bold;
523 }
524
525 .flex-support-div.d-flex {
526 gap: 10px;
527 margin: 0;
528 }
529
530 .flex-contact-btn {
531 border-radius: 5px;
532 color: #000;
533 font-size: 22px;
534 }
535
536 /* p.flex-supoort-description {
537 color: #111111;
538 font-size: 18px;
539 font: 500 16px / 25px Segoe UI;
540 margin: 10px 0px !important;
541 } */
542
543 p.flex-supoort-description {
544 color: #111111;
545 /* font: 500 16px / 25px Segoe UI; */
546 margin: 10px 0px !important;
547 font-size: 15px;
548 font-weight: normal !important;
549 }
550
551 .subscription-title.text-center {
552 background: transparent linear-gradient(270deg, #4C5CAA 0%, #9C77B5 100%) 0% 0% no-repeat padding-box;
553 padding: 20px 10px;
554 border-radius: 10px;
555 }
556
557 .flex-subscription {
558 padding-bottom: 30px;
559 border: 1px solid #707070;
560 border-radius: 15px;
561 }
562
563 .flex-gap-11 {
564 display: grid;
565 grid-template-columns: auto auto auto;
566 gap: 10px;
567 }
568
569 .subscription-title h3 {
570 color: #fff;
571 font: normal normal bold 28px / 40px Segoe UI;
572 margin: 0;
573 }
574
575 p.flex-price {
576 color: #fff;
577 margin: 0px;
578 font: normal normal 600 38px / 50px Segoe UI;
579 }
580
581 .flex-feature-list {
582 display: flex;
583 gap: 0px;
584 padding: 10px 0px;
585 }
586
587 p.flex-feature-title.m-0 {
588 font-size: 18px;
589 color: #000;
590 font-weight: 600;
591 text-align: left;
592 align-self: center;
593 font: 900 15px / 20px Segoe UI !important;
594 }
595
596 .flex-container-1 {
597 border: 1px solid #707070;
598 padding: 16px;
599 border-radius: 10px;
600 }
601
602 a.nav-link {
603 font-size: 20px;
604 }
605
606 .flex-demo-btn {
607 font-size: 20px !important;
608 }
609
610 .flex-dash-plugin-logo {
611 height: 70px;
612 width: 100px;
613 background: transparent linear-gradient(270deg, #4E5DAA 0%, #9B76B5 100%) 0% 0% no-repeat padding-box;
614 border-radius: 20px 0px 0px 20px;
615 padding: 10px 0px;
616 text-align: center;
617 }
618
619 .flex-imp-nav-box .flex-container-1 {
620 border-radius: 20px;
621 }
622 .flex-dash-plugin-logo img {
623 width: 100%;
624 height: 100%;
625 object-fit: contain;
626 }
627
628 .flex-container-1 {
629 display: flex;
630 flex-direction: column;
631 justify-content: center;
632 height: fit-content;
633 padding: 0px;
634 }
635
636 .flex-nav-tab-links {
637 gap: 15px;
638 }
639
640 h3.flex-wp-xyz-theme {
641 font-size: 25px;
642 color: #000;
643 font-weight: bold;
644 font: normal normal bold 25px/33px Segoe UI Bold;
645 }
646
647 h3.flex-template {
648 font-size: 28px;
649 font-weight: 600;
650 color: #000;
651 font: normal normal 600 28px/33px Segoe UI;
652 }
653
654 p.flex-content-1 {
655 font-size: 18px;
656 font-weight: 600;
657 color: #707070;
658 font: 900 18px / 25px Segoe UI Semibold;
659 }
660
661 .flex-dashboard-box .fleximp-dash-box-8 {
662 padding: 0px 0px 20px 0px;
663 }
664
665 .fleximp-dash-box.fleximp-dash-box-4.flex-dashboard-box {
666 border: 1px solid #707070;
667 padding: 20px;
668 display: flex;
669 flex-direction: column;
670 gap: 15px;
671 border-radius: 10px;
672 }
673
674 .fleximp-subscription-box .fleximp-dash-box {
675 padding: 15px 0px 15px 0px;
676 }
677
678 .fleximp-subscription-main-box .flex-demo-btn:hover {
679 background: transparent linear-gradient(270deg, #4C5CAA 0%, #9C77B5 100%) 0% 0% no-repeat padding-box;
680 text-decoration: none !important;
681 }
682
683 /* *************video-slider-css******* */
684 .swiper-container-2 {
685 position: relative;
686 width: 100%;
687 margin: auto;
688 overflow: hidden;
689 }
690
691 /* .swiper-wrapper {
692 display: flex;
693 } */
694
695 .video-slide {
696 position: relative;
697 cursor: pointer;
698 }
699
700 .video-image-box {
701 width: 308px;
702 }
703
704 .video-slide img {
705 width: 100%;
706 height: auto;
707 }
708
709 .play-icon {
710 position: absolute;
711 top: 0;
712 left: 0;
713 right: 0;
714 bottom: 0;
715 margin: auto;
716 /* width: 60px; */
717 height: fit-content;
718 border-radius: 50%;
719 display: flex;
720 align-items: center;
721 justify-content: center;
722 }
723
724 .play-icon::before {
725 content: "\25BA";
726 /* Play icon */
727 color: #ff1f5f;
728 font-size: 30px;
729 }
730
731 .swiper-container-2 .swiper-button-next::after,
732 .swiper-container-2 .swiper-button-prev::after {
733 font-size: 24px;
734 /* Adjust size */
735 color: white;
736 /* Ensure icon color */
737 font-family: "Swiper Icons";
738 /* Required for Swiper navigation */
739 }
740
741 /* Navigation Buttons - Both at Top Right */
742 .swiper-container-2 .swiper-button-next,
743 .swiper-container-2 .swiper-button-prev {
744 position: absolute;
745 top: 10px;
746 /* Adjusted to be at the top */
747 width: 40px;
748 height: 40px;
749 background: #000;
750 color: white;
751 border-radius: 7px;
752 display: flex;
753 align-items: center;
754 justify-content: center;
755 z-index: 10;
756 }
757
758 .swiper-container-2 .swiper-button-next {
759 right: 10px;
760 }
761
762 .swiper-container-2 .swiper-button-prev {
763 right: 60px;
764 /* Moved to the right, next to next button */
765 }
766
767 /* *****************05/04/2025************ */
768 .blog-content {
769 display: flex;
770 gap: 20px;
771 }
772
773 p.flex-blog-content {
774 font-size: 20px;
775 font-weight: 600;
776 color: #707070;
777 }
778
779 a.btn.flex-view-more-btn {
780 border: 1px solid #707070;
781 border-radius: 10px;
782 padding: 8px 30px;
783 font-size: 18px;
784 font-weight: 600;
785 font: normal normal 600 18px/24px Segoe UI;
786 }
787
788 .play-icon::before {
789 content: "\25BA";
790 /* Play icon */
791 color: #ff1f5f;
792 font-size: 50px;
793 position: relative;
794 /* bottom: 86%; */
795 }
796
797 .swiper-container-2 .swiper-button-next::after,
798 .swiper-container-2 .swiper-button-prev::after {
799 font-size: 24px;
800 /* Adjust size */
801 color: white;
802 /* Ensure icon color */
803 font-family: "Swiper Icons";
804 /* Required for Swiper navigation */
805 }
806
807 .swiper-button-next::after {
808 content: "\003E";
809
810 /* Unicode right arrow → */
811 font-weight: bold;
812 }
813
814 .swiper-button-prev::after {
815 content: "\003C";
816 /* Unicode left arrow ← */
817 font-weight: bold;
818 }
819
820 .flex-wp-social-media-icons {
821 display: flex;
822 gap: 15px;
823 align-items: center;
824 }
825
826 .flex-wp-social-media-icons img {
827 width: 50px;
828 max-width: 45px !important;
829 max-height: 45px !important;
830 }
831
832 .flex-swipper-nav-btn {
833 display: flex;
834 justify-content: end;
835 gap: 10px;
836 position: absolute;
837 z-index: 1;
838 right: 23px;
839 top: -55px;
840 }
841
842 .swiper-button-next i, .swiper-button-prev i {
843 font-weight: 600;
844 background: #000;
845 width: 45px;
846 height: 45px;
847 line-height: 45px;
848 border-radius: 7px;
849 color: #fff;
850 font-size: 30px;
851 text-align: center;
852 padding: 15px;
853 display: flex;
854 align-items: center;
855 justify-content: center;
856 }
857
858 .swiper-button-next::after,
859 .swiper-button-prev::after {
860 content: none;
861 }
862
863 .swiper-button-next i:hover,
864 .swiper-button-prev i:hover {
865 background: transparent linear-gradient(270deg, #4C5CAA 0%, #9C77B5 100%) 0% 0% no-repeat padding-box;
866 }
867
868 p.flex-video-content {
869 color: #707070;
870 font-size: 16px;
871 /* padding-top: 10px; */
872 padding-top: 18px;
873 font-weight: 600;
874 margin: 0;
875 font: 900 18px / 25px Segoe UI Semibold;
876 }
877
878 .flex-nav-tab-links .nav-link {
879 background-color: #fff !important;
880 }
881
882 .nav-link svg {
883 width: 20px;
884 }
885
886 .flex-icons {
887 display: flex;
888 }
889
890 .nav-link.active svg {
891 fill: #ff1f5f !important;
892 }
893
894 .nav-link {
895 padding: 0 7px;
896 display: block;
897 }
898
899 .flex-nav-tab-links {
900 justify-content: space-around;
901 /* margin: 0px 35px; */
902 }
903
904 /* ************************template tab css***************** */
905 .widget-social-media {
906 border: 1px solid;
907 padding: 10px;
908 border-radius: 15px 0px 0px 15px;
909 margin-top: 30px;
910 }
911
912 .templates-imgs img {
913 width: 50px !important;
914 }
915
916 p.plugin-img {
917 margin: 25px 0px;
918 }
919
920 button.install-btn {
921 background: #000;
922 color: #fff;
923 padding: 10px 25px;
924 border-radius: 7px;
925 font-size: 16px !important;
926 font-weight: bold;
927 }
928
929 .install-btn svg {
930 fill: #fff;
931 width: 27px;
932 }
933
934 .pagination {
935 justify-content: center;
936 }
937
938 .grid-item {
939 padding: 0px 0px 15px 0px !important;
940 }
941
942 .grid-item {
943 background: #fff;
944 border: 1px solid #707070;
945 padding: 15px;
946 text-align: center;
947 border-radius: 8px;
948 box-shadow: none;
949 }
950
951 .grid-container {
952 display: grid;
953 grid-template-columns: repeat(4, 1fr);
954 gap: 20px;
955 max-width: 100%;
956 margin: auto;
957 }
958
959 .buttons a {
960 display: inline-block;
961 margin: 5px;
962 padding: 9px 10px;
963 background: none;
964 color: #000000;
965 font-size: 12px;
966 font-weight: 600;
967 border-radius: 4px;
968 text-decoration: none;
969 border: 1px solid #707070 !important;
970 }
971
972 .buttons {
973 display: flex;
974 }
975
976 a.flex-template-buttons {
977 display: flex;
978 gap: 5px;
979 overflow: hidden;
980 display: -webkit-box;
981 -webkit-box-orient: vertical;
982 -webkit-line-clamp: 1;
983 align-self: center;
984 }
985
986 a.flex-template-buttons svg {
987 width: 13px;
988 margin-right: 5px;
989 }
990
991 .import-btn {
992 display: flex !important;
993 gap: 10px;
994 border: 1px solid #707070 !important;
995 }
996
997 .import-btn svg {
998 width: 12px !important;
999 margin-right: 0px;
1000 }
1001
1002 p.template-title {
1003 font-size: 14px !important;
1004 margin: 10px 0px 10px 10px;
1005 font-weight: bold;
1006 color: #000;
1007 white-space: nowrap;
1008 overflow: hidden;
1009 text-overflow: ellipsis;
1010 width: 152px;
1011 }
1012
1013 .flex-buttons {
1014 display: flex;
1015 padding: 0px 10px;
1016 align-content: center;
1017 justify-content: space-between;
1018 }
1019
1020 .flex-template-categories {
1021 font-size: 24px;
1022 font-weight: bold;
1023 color: #000;
1024 }
1025
1026 .content input {
1027 display: none;
1028 }
1029
1030 .content {
1031 display: flex;
1032 }
1033
1034 .flex-templates {
1035 display: flex;
1036 align-content: center;
1037 flex-direction: row;
1038 align-items: center;
1039 gap: 20px;
1040 }
1041
1042 p.flex-template-title {
1043 font-size: 30px;
1044 font-weight: bold;
1045 margin: 0px;
1046 }
1047
1048 .flex-templates svg {
1049 height: 40px;
1050 width: 40px;
1051 }
1052
1053 input.fname {
1054 border: none;
1055 }
1056
1057 input#flex-templates-search {
1058 border: none;
1059 }
1060
1061 .flex-search.text-right {
1062 display: flex;
1063 justify-content: flex-end;
1064 }
1065
1066 .search-flex {
1067 border: 1px solid #707070;
1068 padding: 10px 15px;
1069 border-radius: 15px;
1070 }
1071
1072 input:focus {
1073 box-shadow: 0 0 0 1px #2271b100 !important;
1074 }
1075
1076 input.fname {
1077 width: 389px;
1078 font: 400 16px / 16px Segoe UI;
1079 }
1080
1081 input#flex-templates-search {
1082 width: 389px;
1083 font: 400 21px / 16px Segoe UI;
1084 color: #707070;
1085 }
1086
1087 .grid-container {
1088 display: grid;
1089 grid-template-columns: repeat(4, 1fr);
1090 gap: 20px;
1091 }
1092
1093 .my_grid_container {
1094 grid-template-columns: repeat(3, 1fr);
1095 }
1096
1097 .grid-item {
1098 overflow: hidden;
1099 background: #fff;
1100 border: 1px solid #707070;
1101 background: #fff;
1102 padding: 15px;
1103 text-align: center;
1104 border-radius: 17px;
1105 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
1106 }
1107
1108 .flex-imp-temp-inner-box img {
1109 border-bottom: 1px solid #707070;
1110 }
1111 .grid-item img {
1112 max-width: 100%;
1113 }
1114
1115 .pagination {
1116 text-align: center;
1117 margin: 30px 0;
1118 margin-top: 5rem;
1119 }
1120
1121 .pagination a {
1122 margin: 0 6px;
1123 padding: 10px 20px;
1124 color: #eee;
1125 background: #000000;
1126 text-decoration: none;
1127 border-radius: 4px;
1128 border: none;
1129 font-size: 22px !important;
1130 font-weight: bold;
1131 }
1132
1133 .page-item.disabled .page-link {
1134 color: #eee !important;
1135 background-color: #000000 !important;
1136 border: none;
1137 cursor: pointer;
1138 }
1139
1140 .page-item.disabled .page-link:hover {}
1141
1142 .pagination a.active {
1143 background: #333;
1144 color: #fff;
1145 }
1146
1147 .pagination a:hover,
1148 .page-item.disabled .page-link:hover {
1149 background: transparent linear-gradient(270deg, #4C5CAA 0%, #9C77B5 100%) 0% 0% no-repeat padding-box !important;
1150 color: #fff;
1151 }
1152
1153 .list {
1154 border: 1px solid #707070;
1155 border-radius: 15px 0px 15px 0px;
1156 }
1157
1158 .list.col-2 {
1159 border: 1px solid #707070;
1160 padding: 20px;
1161 border-radius: 15px 0px 15px 0px;
1162 }
1163
1164 .line {
1165 border-bottom: 1px solid;
1166 margin-top: 13px;
1167 }
1168
1169 .list label {
1170 padding: 0px 20px;
1171 }
1172
1173 p.flex-plugin-title {
1174 font-size: 30px;
1175 font-weight: bold;
1176 }
1177
1178 p.flex-plugin-title {
1179 margin: 25px 0px;
1180 }
1181
1182 .plugin-table-head th {
1183 font-size: 20px;
1184 font-weight: bold;
1185 }
1186
1187 .plugin-input input[type="checkbox"] {
1188 width: 30px;
1189 height: 30px;
1190 margin: -67px 0px;
1191 }
1192
1193 .plugin-input input[type="checkbox"]:checked::before {
1194 margin: -0.1875rem 0 0 -0.25rem;
1195 width: 30px !important;
1196 height: 30px !important;
1197 position: relative;
1198 left: 1px;
1199 top: 3px;
1200 }
1201
1202 .plugin-tbl .table-striped tbody tr:nth-child(odd) {
1203 background-color: transparent;
1204 }
1205
1206 .plugin-tbl .table-striped tbody tr:nth-child(n + 2):nth-child(even) {
1207 /* background-color: #e8e8e8;
1208 border: 1px solid #ccc; */
1209 }
1210
1211 .plugin-img svg {
1212 height: 37px;
1213 }
1214
1215 thead.plugin-table-head {
1216 /* background: #e8e8e8; */
1217 }
1218
1219 #plugins-list .plugin-tbl {
1220 border-radius: 15px !important;
1221 border: 1px solid #707070;
1222 margin-top: 27px;
1223 padding: 20px 35px;
1224 padding-right: 0px;
1225 padding-bottom: 35px !important;
1226 }
1227
1228 table {
1229 border-collapse: separate;
1230 border-spacing: 0 10px;
1231 /* horizontal vertical */
1232 }
1233
1234
1235 #install-all-btn {
1236 position: relative;
1237 z-index: 1;
1238 }
1239
1240 .table-responsive-1 {
1241 width: 100%;
1242 overflow-x: auto;
1243 border-radius: 20px !important;
1244 }
1245
1246 /* ********************widget css************ */
1247 .widget-list {
1248 border: 1px solid #707070;
1249 border-radius: 15px 0px 0px 15px;
1250 }
1251
1252 .vt-tab-btn {
1253 padding: 15px;
1254 cursor: pointer;
1255 font-size: 20px;
1256 font-weight: bold;
1257 }
1258
1259 .buttons.widgets-btn {
1260 display: flex;
1261 justify-content: space-between;
1262 align-items: center;
1263 }
1264
1265 .vt-tab-btn.vt-active {
1266 color: #ff1f5f;
1267 font-weight: bold;
1268 }
1269
1270 .vt-content-area {
1271 flex: 3;
1272 padding: 20px;
1273 background: white;
1274 border: 1px solid #707070;
1275 border-radius: 0px 15px 15px 0px;
1276 }
1277
1278 .vt-content {
1279 display: none;
1280 }
1281
1282 .vt-content.vt-active {
1283 display: block;
1284 }
1285
1286 .vt-content-area-1 {
1287 border: none;
1288 }
1289
1290 .widgets-btn a:hover {
1291 text-decoration: none;
1292 color: #000;
1293 }
1294
1295 .widgets-btn a:hover {
1296 text-decoration: none;
1297 color: #000;
1298 box-shadow: none;
1299 }
1300
1301 .flex-plugin-title-1 {
1302 font-size: 30px;
1303 font-weight: bold;
1304 vertical-align: middle !important;
1305 }
1306
1307 .flex-align {
1308 vertical-align: middle !important;
1309 }
1310
1311 /* *****************modal-csss************** */
1312 .flex-model-div-main {
1313 /* display: flex !important;
1314 gap: 10px; */
1315 }
1316
1317 p#modal-template-title {
1318 font-size: 40px;
1319 font-weight: bold;
1320 font: 900 40px / 55px Segoe UI Bold !important;
1321 }
1322
1323 p.flex-modal-content {
1324 font-size: 20px;
1325 font-weight: 400;
1326 color: #707070;
1327 font: 900 18px / 25px Segoe UI Semibold;
1328 }
1329
1330 .flex-plugin-main-file {
1331 display: none;
1332 }
1333
1334 .loader {
1335 width: 15px;
1336 height: 15px;
1337 border: 2px solid #ccc;
1338 border-top: 2px solid #000;
1339 border-radius: 50%;
1340 display: inline-block;
1341 animation: spin 1s linear infinite;
1342 }
1343
1344 .loader-success {
1345 border: 2px solid green;
1346 border-radius: 50%;
1347 display: inline-block;
1348 }
1349
1350 .loader-active {
1351 border: 2px solid blue;
1352 border-radius: 50%;
1353 display: inline-block;
1354 }
1355
1356 @keyframes spin {
1357 0% {
1358 transform: rotate(0deg);
1359 }
1360
1361 100% {
1362 transform: rotate(360deg);
1363 }
1364 }
1365
1366 #free-import-process-plugins-list , #import-process-plugins-list {
1367 display: flex;
1368 flex-direction: column;
1369 gap: 30px;
1370 margin: 35px 0px;
1371 }
1372
1373 .import-modal-main {
1374 display: flex;
1375 }
1376
1377 .flex-modal-icons svg {
1378 height: 18px;
1379 width: 18px;
1380 margin-right: 5px;
1381 position: relative;
1382 top: 10px;
1383 }
1384
1385 .flex-insatlling-pluins-title {
1386 font-size: 16px;
1387 font-weight: bold;
1388 margin: 0;
1389 color: #000000;
1390 }
1391
1392 .flex-modal-icons li {
1393 display: flex;
1394 gap: 5px;
1395 justify-content: space-between;
1396 }
1397
1398 .flex-modal-template-mobile-title {
1399 font-size: 40px;
1400 color: #000;
1401 font-weight: bold;
1402 }
1403
1404 .importing-process-title-1 {
1405 font-size: 18px;
1406 font-weight: bold;
1407 }
1408
1409 .flex-import-btn svg {
1410 width: 18px;
1411 height: 18px;
1412 fill: #fff;
1413 margin-left: 7px;
1414 }
1415
1416 button.flex-import-btn {
1417 background-color: #000;
1418 border: none;
1419 font-size: 18px;
1420 font-weight: bold;
1421 font: 900 16px / 25px Segoe UI Bold;
1422 padding: 8px 30px;
1423 border-radius: 6px;
1424 }
1425
1426 #step-done p {
1427 font-size: 38px;
1428 font-weight: bold;
1429 text-align: center;
1430 }
1431
1432 .flex-main-dive {
1433 display: flex;
1434 flex-direction: column;
1435 gap: 15px;
1436 padding: 45px 0px;
1437 }
1438
1439 .steps-done {
1440 font: 900 35px Segoe UI Bold;
1441 color: #000;
1442 font-size: 44px;
1443 }
1444
1445 .template-education-image {
1446 height: 100%;
1447 margin: 0 auto;
1448 display: flex;
1449 justify-content: center;
1450 align-items: center;
1451 /* margin-left: 3rem !important; */
1452 padding: 20px 0px;
1453 /* box-shadow: 0px 0px 10px 0px #00000073; */
1454 }
1455
1456 .template-education-image img {
1457 width: 100%;
1458 height: 100%;
1459 box-shadow: 0px 0px 15px 0px #00000073;
1460 border: 1px solid #707070;
1461 }
1462
1463 .template-education .view-site {
1464 background: #000 !important;
1465 color: #fff !important;
1466 border: none !important;
1467 border-radius: 7px !important;
1468 font-size: 14px !important;
1469 font-weight: 600 !important;
1470 padding: 10px 20px !important;
1471 line-height: unset;
1472 }
1473
1474 .flex-modal-btns {
1475 display: flex;
1476 gap: 10px;
1477 flex-wrap: wrap;
1478 justify-content: center;
1479 }
1480
1481 .template-education .view-site:hover {
1482 background: transparent linear-gradient(270deg, #4C5CAA 0%, #9C77B5 100%) 0% 0% no-repeat padding-box !important;
1483 border-radius: 7px;
1484 }
1485
1486 .view-site svg {
1487 height: 18px;
1488 width: 28px;
1489 fill: #fff;
1490 }
1491
1492 .view-btton-div {
1493 display: flex;
1494 justify-content: center;
1495 gap: 20px;
1496 text-align: center;
1497 flex-wrap: wrap;
1498 }
1499
1500 .flex-template-buttons {
1501 padding: 9px 4px;
1502 }
1503
1504 .import-btn {
1505 padding: 5px 5px;
1506 }
1507
1508 .import-modal-main {
1509 border: 1px solid #707070;
1510 border-radius: 15px;
1511 padding: 0px 20px;
1512 }
1513
1514 #free-import-process-plugins .view-site , #import-process-plugins .view-site {
1515 background: #000 !important;
1516 color: #fff !important;
1517 border: none !important;
1518 border-radius: 7px !important;
1519 font-size: 16px !important;
1520 font-weight: 600 !important;
1521 padding: 8px 25px !important;
1522 }
1523
1524 #free-import-process-plugins .view-site:hover, #import-process-plugins .view-site:hover,
1525 #import-process-uninstall-btn:hover, #free-import-process-uninstall-btn:hover {
1526 background: transparent linear-gradient(270deg, #4C5CAA 0%, #9C77B5 100%) 0% 0% no-repeat padding-box !important;
1527 }
1528
1529 #free-import-process-plugins .flex-modal-icons svg , #import-process-plugins .flex-modal-icons svg {
1530 height: 18px;
1531 width: 18px;
1532 margin-right: 5px;
1533 position: relative;
1534 top: -6px;
1535 }
1536
1537 #free-import-process-plugins .step-status , #import-process-plugins .step-status {
1538 font-weight: bold;
1539 margin-left: 10px;
1540 align-self: center;
1541 }
1542
1543 #free-import-process-plugins .fleximp-temp-tab-inner-image , #import-process-plugins .fleximp-temp-tab-inner-image {
1544 height: 100%;
1545 /* width: auto; */
1546 /* box-shadow: 0px 0px 10px 0px #00000073; */
1547 /* margin: 30px 0px; */
1548 }
1549
1550 #free-import-process-plugins .fleximp-temp-tab-inner-image img , #import-process-plugins .fleximp-temp-tab-inner-image img {
1551 width: 100%;
1552 /* height: 100%; */
1553 object-fit: contain;
1554 margin: 30px 0px;
1555 box-shadow: 0px 0px 10px 0px #00000073;
1556 }
1557
1558 @media screen and (min-width: 1514px) and (max-width: 1528px) {
1559 button.btn.flex-template-buttons, a.btn.flex-template-buttons {
1560 padding: 8px !important;
1561 }
1562 }
1563
1564 @media screen and (min-width: 1500px) and (max-width: 1513px) {
1565 button.btn.flex-template-buttons, a.btn.flex-template-buttons {
1566 padding: 9px 6px !important;
1567 }
1568 }
1569
1570 @media screen and (min-width: 1200px) and (max-width: 1484px) {
1571 button.btn.flex-template-buttons, a.btn.flex-template-buttons {
1572 padding: 4px 16px !important;
1573 }
1574 }
1575
1576 @media screen and (min-width: 992px) and (max-width: 1078px) {
1577 button.btn.flex-template-buttons, a.btn.flex-template-buttons {
1578 padding: 4px 16px !important;
1579 }
1580 }
1581
1582 @media screen and (min-width: 1448px) and (max-width: 2000px) {}
1583
1584 /* *********************22/04/2025*********** */
1585 @media screen and (min-width: 1250px) and (max-width: 1600px) {
1586 .templates-imgs img {
1587 width: 30px !important;
1588 }
1589
1590 .flex-wp-social-media-icons {
1591
1592 gap: 2px;
1593 }
1594 }
1595
1596 @media screen and (min-width: 992px) and (max-width: 1249px) {
1597 .templates-imgs img {
1598 width: 20px !important;
1599 }
1600
1601 .flex-wp-social-media-icons {
1602
1603 gap: 2px;
1604 }
1605 }
1606
1607 button.btn.flex-template-buttons, a.btn.flex-template-buttons {
1608 padding: 8px 15px !important;
1609 background: transparent linear-gradient(270deg, #4C5CAA 0%, #9C77B5 100%) 0% 0% no-repeat padding-box;
1610 border-radius: 7px;
1611 color: #fff;
1612 font: 600 13px / 18px Segoe UI !important;
1613 letter-spacing: 0.5px;
1614 /* width: 45%; */
1615 }
1616
1617 button.btn.flex-template-buttons, a.btn.flex-template-buttons:hover {
1618 background: #000;
1619 }
1620
1621 .template-item .flex-temp-btn.btn {
1622 padding: 8px 15px !important;
1623 background: #000;
1624 border-radius: 7px;
1625 color: #fff;
1626 font: 600 12px / 18px Segoe UI !important;
1627 letter-spacing: 0.5px;
1628 text-transform: uppercase;
1629 opacity: 1 !important;
1630 /* width: 55%; */
1631 }
1632
1633 .template-item .flex-temp-btn.btn:hover {
1634 background: transparent linear-gradient(270deg, #4C5CAA 0%, #9C77B5 100%) 0% 0% no-repeat padding-box;
1635 }
1636
1637 h3.flex-categories-list {
1638 font-size: 24px !important;
1639 color: #000;
1640 font-weight: bold;
1641 }
1642
1643 .flex-template-categories-list li {
1644 font-size: 20px;
1645 font-weight: bold;
1646 color: #707070;
1647 padding: 15px 10px;
1648 margin: 0;
1649 cursor: pointer;
1650 }
1651
1652 .flex-template-categories-list li:hover {
1653 color: #ff1f5f;
1654 }
1655
1656 .col-sm-12.col-lg-10.px-md-0.px-lg-2.p-0.pt-md-2.pt-sm-2.grid-container-column {
1657 padding: 0 15px 0 15px !important;
1658 }
1659
1660 .import-btn {
1661 padding: 0px !important;
1662 align-items: center;
1663 }
1664
1665 .flex-template-buttons {
1666 margin: 0px !important;
1667 align-items: center;
1668 padding: 4px 15px !important;
1669 font-weight: 600 !important;
1670 font-size: 14px !important;
1671 }
1672
1673 .flex-gap-div {
1674 gap: 10px;
1675 justify-content: center;
1676 }
1677
1678 .vt-tab-btn {
1679 font-size: 20px;
1680 font-weight: bold;
1681 color: #707070;
1682 }
1683
1684 .flex-template-form {
1685 padding-right: 16px;
1686 }
1687
1688 .flex-widgets-display {
1689 padding: 0px 20px !important;
1690 }
1691
1692 .flex-widget-title {
1693 width: auto !important;
1694 }
1695
1696 /* *************23/04/2025********** */
1697 .video-slide {
1698 cursor: pointer;
1699 }
1700
1701 a.plugin-posts {
1702 display: flex;
1703 gap: 10px;
1704 align-items: center;
1705 flex-direction: column;
1706 }
1707
1708 .plugin-item {
1709 background: none !important;
1710 }
1711
1712 a.plugin-posts:hover {
1713 color: #0056b3;
1714 text-decoration: none;
1715 }
1716
1717 .plugin-post-title {
1718 color: #000;
1719 font: 900 18px / 22px Segoe UI;
1720 text-align: center;
1721 letter-spacing: 0px;
1722 padding: 10px 18px;
1723 }
1724
1725 .swiper-container-2 .swiper-slide.video-slide {
1726 width: auto !important;
1727 margin: 0px !important;
1728 }
1729
1730 .swiper-container-2 img {
1731 cursor: default;
1732 width: 100%;
1733 height: 100%;
1734 object-fit: cover;
1735 max-width: 100% !important;
1736 max-height: 100% !important;
1737 border-radius: 10px 10px 0px 0px;
1738 }
1739
1740 .swiper-container-2 video {
1741 width: 100%;
1742 height: 100%;
1743 position: absolute;
1744 top: 0px;
1745 margin: 0px;
1746 bottom: 10px !important;
1747 }
1748
1749 @media screen and (max-width: 1366px) {
1750 .search-flex {
1751 border: 1px solid #707070;
1752 padding: 6px 15px;
1753 border-radius: 10px;
1754 }
1755 }
1756
1757 @media screen and (max-width: 575px) {
1758 .flex-swipper-nav-btn {
1759 right: 8px;
1760 }
1761
1762 input#flex-templates-search {
1763 width: 100%;
1764 }
1765 }
1766
1767 #modal-template-mobile-image {
1768 width: 150px;
1769 }
1770
1771 /* for coming soon in widget tab */
1772 .coming-soon {
1773 text-align: center;
1774 padding: 100px 0;
1775 background-color: #f5f5f5;
1776 }
1777
1778 .coming-soon h1 {
1779 font-size: 64px;
1780 font-weight: bold;
1781 color: #333;
1782 }
1783
1784 /* new add */
1785 .fleximp-dash-btn.flex-demo-btn {
1786 font-size: 12px !important;
1787 line-height: 15px;
1788 border-radius: 8px;
1789 background: #000;
1790 color: #fff;
1791 text-transform: uppercase;
1792 text-decoration: none;
1793 width: fit-content;
1794 display: flex;
1795 /* margin: 0 auto; */
1796 padding: 12px 25px;
1797 }
1798
1799 .fleximp-dash-btn.flex-demo-btn:hover {
1800 background: transparent linear-gradient(270deg, #4C5CAA 0%, #9C77B5 100%) 0% 0% no-repeat padding-box;
1801 }
1802
1803 .plugin-item .fleximp-dash-btn.flex-demo-btn {
1804 margin: 0 auto;
1805 }
1806
1807 /* home css */
1808 .fleximp-subscription-main-box .flex-feature-list-main {
1809 width: fit-content;
1810 margin: auto;
1811 }
1812
1813 .fleximp-subscription-main-box .flex-feature-list-main .flex-feature-list img {
1814 width: 35px;
1815 }
1816
1817 .fleximp-subscription-main-box .flex-feature-list-main .flex-feature-list {
1818 display: flex;
1819 gap: 5px;
1820 padding: 8px 0px;
1821 }
1822
1823 .fleximp-subscription-main-box .flex-feature-list-main .flex-feature-list .flex-feature-title {
1824 font-size: 16px;
1825 }
1826
1827 .fleximp-subscription-main-box .flex-demo-btn {
1828 padding: 8px 30px;
1829 border-radius: 8px;
1830 font: 500 16px / 18px Segoe UI !important;
1831 color: #fff;
1832 background: #000;
1833 text-transform: uppercase;
1834 letter-spacing: 0px;
1835 margin: 0 auto;
1836 }
1837
1838 .fleximp-subscription-main-box {
1839 gap: 30px;
1840 }
1841
1842 .fleximp-social-box .flex-wp-social-media-icons {
1843 display: flex;
1844 gap: 20px;
1845 }
1846
1847 .fleximp-blog-sidebar-main-box .plugin-item {
1848 padding: 10px 0px
1849 }
1850
1851 .flex-imp-sidebar-image-box {
1852 width: 100%;
1853 height: 100%;
1854 }
1855
1856 .fleximp-blog-sidebar-main-box .plugin-item img {
1857 width: 100%;
1858 height: 100%;
1859 object-fit: cover;
1860 border-radius: 10px;
1861 max-width: unset !important;
1862 max-height: unset !important;
1863 }
1864
1865 .fleximp-dash-box .fleximp-temp-btn {
1866 padding: 12px 20px;
1867 border-radius: 10px;
1868 font: normal normal 600 18px / 24px Segoe UI;
1869 }
1870
1871 /* template */
1872 #wpbody-content {
1873 padding: 0px 5%;
1874 }
1875 #wpbody-content {
1876 padding-bottom: 65px !important;
1877 }
1878
1879 .fleximp-template-main-box .flex-template-title,
1880 .fleximp-widgets-main-box .flex-template-title,
1881 .fleximp-plugin-main-box .flex-template-title {
1882 font-size: 22px;
1883 color: #000;
1884 font: 900 24px / 27px Segoe UI Bold;
1885 }
1886
1887 .fleximp-template-main-box .flex-templates svg {
1888 height: 35px;
1889 width: 35px;
1890 }
1891
1892 .fleximp-template-main-box .flex-template-categories-list li {
1893 font-size: 18px;
1894 font: normal normal bold 19px/30px Segoe UI Bold;
1895 }
1896
1897 .fleximp-template-main-box .line {
1898 border-bottom: 1px solid;
1899 margin-top: 0px;
1900 }
1901
1902 .fleximp-template-main-box .flex-template-categories {
1903 font-size: 18px;
1904 align-self: center;
1905 font: normal normal bold 20px/30px Segoe UI Bold;
1906 }
1907
1908 .flex-template-categories-icon {
1909 font-size: 30px;
1910 color: #000000;
1911 }
1912
1913 .fleximp-template-main-box .my_grid_container {
1914 grid-template-columns: repeat(3, 1fr);
1915 row-gap: 65px;
1916 }
1917
1918 .fleximp-template-main-box .grid-item {
1919 padding: 0px 0px 0px 0px !important;
1920 border-radius: 15px !important;
1921 border: 1px solid #707070;
1922 background: #fff;
1923 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
1924 }
1925
1926 .btn.flex-template-buttons:hover {
1927 background: transparent linear-gradient(90deg, #A279B6 0%, #465BA9 100%) 0% 0% no-repeat padding-box;
1928 color: white;
1929 }
1930
1931 .btn.flex-template-buttons:hover svg {
1932 fill: white;
1933 }
1934
1935 .fleximp-template-main-box p.template-title {
1936 font-weight: bold;
1937 color: #111111;
1938 white-space: nowrap;
1939 overflow: hidden;
1940 text-overflow: ellipsis;
1941 width: 200px;
1942 margin: 0;
1943 text-align: start;
1944 font: 900 20px / 26px Segoe UI Bold !important;
1945 /* font-family: 'Roboto' !important; */
1946 }
1947
1948 #plugins-list .table thead th {
1949 font: 900 22px / 20px Segoe UI Bold;
1950 border: none;
1951 text-align: start;
1952 padding-bottom: 45px;
1953 color: #000000;
1954 font-size: 24px !important;
1955 }
1956
1957 .fleximp-template-main-box .flex-wp-social-media-icons>img {
1958 width: 50px !important;
1959 margin-right: 20px;
1960 }
1961
1962 .fleximp-template-main-box .flex-wp-social-media-icons img {
1963 width: 40px !important;
1964 gap: 20px !important;
1965 }
1966
1967 /* plugin tab */
1968 .fleximp-plugin-main-box .table tr td:nth-child(1) {
1969 display: block !important;
1970 margin: 25px 0px;
1971 border: none !important;
1972 }
1973
1974 .fleximp-plugin-main-box .flex-plugin-title {
1975 color: #000 !important;
1976 }
1977
1978 .fleximp-plugin-main-box .flex-plugin-title {
1979 margin: 14px 0px;
1980 vertical-align: middle !important;
1981 font-size: 21px !important;
1982 }
1983
1984 .fleximp-plugin-main-box .flex-plugin-title {
1985 font-size: 18px;
1986 font-weight: bold;
1987 font: 900 19px / 20px Segoe UI Bold;
1988 }
1989
1990 .fleximp-plugin-main-box td {
1991 font-size: 18px;
1992 font: 900 19px / 20px Segoe UI Bold;
1993 border-top: none !important;
1994 text-align: start;
1995 vertical-align: middle !important;
1996 padding-right: 5rem !important;
1997 color: #000000;
1998 }
1999
2000 /* .fleximp-plugin-main-box button.download-btn {
2001 width: 180px;
2002 background-color: #000;
2003 color: #fff;
2004 padding: 10px;
2005 border-radius: 4px;
2006 font-size: 16px;
2007 font-weight: bold;
2008 } */
2009
2010 .download-btn {
2011 color: #000000;
2012 padding: 10px;
2013 border-radius: 4px;
2014 font-size: 20px;
2015 font-weight: bold;
2016 text-decoration: none;
2017 display: inline-block;
2018 text-align: center;
2019 transition: background-color 0.3s ease, transform 0.2s ease;
2020 cursor: pointer;
2021 }
2022
2023 .download-btn:hover {
2024 /* background-color: #333; */
2025 color: #000;
2026 transform: translateY(-1px);
2027 }
2028
2029 .download-btn:active {
2030 transform: translateY(0);
2031 }
2032
2033 .download-btn.activated {
2034 cursor: not-allowed;
2035 opacity: 0.7;
2036 }
2037
2038 .download-btn.installing {
2039 cursor: wait;
2040 }
2041
2042 .download-btn.installing::after {
2043 content: '';
2044 display: inline-block;
2045 animation: spin 1s linear infinite;
2046 }
2047
2048 @keyframes spin {
2049 0% {
2050 transform: rotate(0deg);
2051 }
2052
2053 100% {
2054 transform: rotate(360deg);
2055 }
2056 }
2057
2058 .fleximp-plugin-main-box button.install-btn {
2059 font-size: 18px;
2060 }
2061
2062 .fleximp-template-main-box .fleximp-temp-buttons {
2063 padding: 20px;
2064 }
2065
2066 /* video add */
2067 .video-container {
2068 /* position: absolute; */
2069 top: 0;
2070 bottom: 0;
2071 height: 100%;
2072 width: 100%;
2073 left: 0;
2074 right: 0;
2075 }
2076
2077 .video-iframe-wrapper {
2078 height: 100%;
2079 }
2080
2081 /* new add for */
2082 #categories-list .category-item.active {
2083 /* background-color: #ff1f5f; */
2084 color: #ff1f5f;
2085 font-weight: bold;
2086 border-radius: 4px;
2087 }
2088
2089 .no-templates-message {
2090 text-align: center;
2091 padding: 40px;
2092 font-size: 18px;
2093 color: #999;
2094 }
2095
2096 /* new add for pagination */
2097
2098 .page-item.active .page-link {
2099 z-index: 3;
2100 color: #fff;
2101 background: transparent linear-gradient(270deg, #4C5CAA 0%, #9C77B5 100%) 0% 0% no-repeat padding-box !important;
2102 border: none;
2103 }
2104
2105 /* new i add */
2106
2107 #import-process-mobile-image {
2108 /* width: 200px; */
2109 }
2110
2111 /* Add to existing CSS */
2112 .step-icon-static {
2113 display: inline-block;
2114 width: 20px;
2115 height: 20px;
2116 margin-right: 10px;
2117 vertical-align: middle;
2118 }
2119
2120 .step-loader {
2121 animation: spin 1s linear infinite;
2122 }
2123
2124 .step-success {
2125 color: #28a745;
2126 }
2127
2128 .step-error {
2129 color: #dc3545;
2130 }
2131
2132 .step-status {
2133 font-weight: bold;
2134 margin-left: 10px;
2135 align-self: center;
2136 }
2137
2138 .status-icon {
2139 display: inline-block;
2140 margin-right: 5px;
2141 width: 16px;
2142 height: 16px;
2143 vertical-align: middle;
2144 }
2145
2146 .status-icon .loader {
2147 width: 16px;
2148 height: 16px;
2149 border: 2px solid #f3f3f3;
2150 border-top: 2px solid #3498db;
2151 border-radius: 50%;
2152 animation: spin 1s linear infinite;
2153 top: -10px;
2154 position: relative;
2155 }
2156
2157 @keyframes spin {
2158 0% {
2159 transform: rotate(0deg);
2160 }
2161
2162 100% {
2163 transform: rotate(360deg);
2164 }
2165 }
2166
2167 /* new add for badge */
2168 #import-process-cancel-btn {
2169 display: none !important;
2170 }
2171
2172 .premium-badge {
2173 color: #232323;
2174 /* padding: 4px 8px; */
2175 font-size: 20px;
2176 border-radius: 4px;
2177 font-weight: 800;
2178 /* font-family: 'Roboto'; */
2179 }
2180
2181 .flex-explore-section {
2182 background: #fff;
2183 padding: 50px 0;
2184 font-family: 'Inter', sans-serif;
2185 }
2186
2187 .explore-heading {
2188 font-size: 44px;
2189 font-weight: 700;
2190 color: #000;
2191 margin-bottom: 30px;
2192 }
2193
2194 /* Filters */
2195 .template-filters {
2196 display: flex;
2197 justify-content: center;
2198 align-items: center;
2199 gap: 15px;
2200 flex-wrap: wrap;
2201 margin-bottom: 40px;
2202 width: fit-content;
2203 margin: auto;
2204 border: 1px solid #c7c7c7;
2205 border-radius: 10px;
2206 }
2207
2208 #categories-list, #free-categories-list {
2209 padding: 8px 10px;
2210 border-right: 1px solid #ccc !important;
2211 border: none;
2212 border-radius: 10px 0px 0px 10px;
2213 }
2214
2215 .template-category {
2216 padding: 10px 15px;
2217 border: 1px solid #ccc;
2218 border-radius: 6px;
2219 font-size: 15px;
2220 color: #333;
2221 background: #fff;
2222 cursor: pointer;
2223 }
2224 .template-search button i::before {
2225 font-size: 24px;
2226 }
2227 .wp-core-ui select {
2228 font-size: 21px;
2229 line-height: unset;
2230 color: #707070;
2231 border-color: #8c8f94;
2232 box-shadow: none;
2233 border-radius: 3px;
2234 padding: 0 24px 0 8px;
2235 -webkit-appearance: none;
2236 background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 5px top 55%;
2237 background-size: 16px 16px;
2238 cursor: pointer;
2239 vertical-align: middle;
2240 }
2241
2242 .template-search {
2243 display: flex;
2244 align-items: center;
2245 /* border: 1px solid #ccc;
2246 border-radius: 30px;
2247 overflow: hidden; */
2248 }
2249
2250 .template-search input {
2251 border: none;
2252 outline: none;
2253 padding: 10px 15px;
2254 font-size: 15px;
2255 width: 220px;
2256 }
2257
2258 .template-search button {
2259 background: transparent linear-gradient(270deg, #4E5DAA 0%, #9B76B5 100%) 0% 0% no-repeat padding-box;
2260 border-radius: 8px;
2261 border: none;
2262 color: #fff;
2263 padding: 12px 15px;
2264 cursor: pointer;
2265 transition: 0.3s;
2266 }
2267
2268 .template-search button:hover {
2269 background-color: #5d44d6;
2270 }
2271
2272 .fles-dash-buttons {
2273 display: flex;
2274 font-size: 10px;
2275 gap: 10px;
2276 }
2277
2278 .btn.flex-demo-btn.btn-secondary {
2279 width: fit-content;
2280 font-size: 15px !important;
2281 background: #000;
2282 color: #FFFFFF;
2283 padding: 10px 15px;
2284 }
2285
2286 .btn.flex-demo-btn.btn-secondary:hover {
2287 background: transparent linear-gradient(270deg, #4C5CAA 0%, #9C77B5 100%) 0% 0% no-repeat padding-box;
2288 }
2289
2290 /* new add for blog posts in slider */
2291 .flex-support-div {
2292 display: flex;
2293 align-items: center;
2294 gap: 10px;
2295 margin-bottom: 15px;
2296 }
2297
2298 .flex-support-title {
2299 font-size: 1.2rem;
2300 font-weight: 600;
2301 margin: 0;
2302 color: #333;
2303 }
2304
2305 .video-img {
2306 display: inline-block;
2307 max-width: 25px;
2308 max-height: 25px;
2309 }
2310
2311 /* uninstall button in import section */
2312 #import-process-uninstall-btn, #free-import-process-uninstall-btn {
2313 background-color: #000 !important;
2314 color: #fff !important;
2315 border: none !important;
2316 border-radius: 7px !important;
2317 font-size: 15px !important;
2318 font-weight: bold !important;
2319 padding: 4px 13px !important;
2320 }
2321
2322 .template-education {
2323 border: 1px solid #707070;
2324 padding: 0px 5px;
2325 border-radius: 15px;
2326 }
2327
2328 .template-education-contents p {
2329 font: 500 18px / 30px Segoe UI;
2330 color: #707070;
2331 }
2332
2333 #free-import-process-done p , #import-process-done p {
2334 text-align: center;
2335 font-size: 18px;
2336 line-height: 30px;
2337 margin: 35px 0px;
2338 }
2339
2340 .view-site {
2341 background-color: #000 !important;
2342 color: #fff !important;
2343 border: none !important;
2344 border-radius: 7px !important;
2345 font-size: 15px !important;
2346 font-weight: bold !important;
2347 padding: 4px 13px !important;
2348 }
2349
2350 .view-site:hover {
2351 background: transparent linear-gradient(270deg, #4C5CAA 0%, #9C77B5 100%) 0% 0% no-repeat padding-box !important;
2352 }
2353
2354 #free-import-process-done .fleximp-temp-tab-image , #import-process-done .fleximp-temp-tab-image {
2355 /* height: 300px; */
2356 }
2357
2358 #free-import-process-done .fleximp-temp-tab-image img , #import-process-done .fleximp-temp-tab-image img {
2359 width: 100%;
2360 /* height: 100%; */
2361 /* object-fit: contain; */
2362 /* box-shadow: 0px 0px 15px 0px #00000073;
2363 border: 1px solid #707070; */
2364 }
2365
2366 .import-done-process-box {
2367 border: 1px solid #707070;
2368 padding: 15px 20px;
2369 border-radius: 15px;
2370 padding-left: 0px;
2371 }
2372
2373 button.btn.flex-template-buttons.uninstall-btn {
2374 color: #fff;
2375 background: #000;
2376 width: 52%;
2377 border-radius: 6px;
2378 text-transform: uppercase;
2379 font-size: 12px !important;
2380 }
2381
2382 @media screen and (min-width: 767px) and (max-width: 1440px) {
2383 p.flex-price {
2384 font: normal normal 600 28px / 50px Segoe UI;
2385 }
2386
2387 .subscription-title h3 {
2388 font: normal normal bold 20px / 30px Segoe UI;
2389 }
2390 }
2391
2392 @media screen and (max-width: 1366px) {
2393 .flex-nav-tab-links a.nav-link {
2394 font-weight: bold;
2395 color: #000 !important;
2396 border: 0;
2397 align-self: center;
2398 font: 900 18px / 20px Segoe UI Bold;
2399 }
2400
2401 .flex-imp-nav-box .flex-demo-buttons a {
2402 padding: 7px 8px;
2403 }
2404 }
2405
2406 @media screen and (min-width: 769px) and (max-width: 1199px) {
2407 .grid-container {
2408 grid-template-columns: repeat(2, 1fr) !important;
2409 }
2410
2411 .content .list label {
2412 line-height: 37px;
2413 font-size: 17px;
2414 }
2415 }
2416
2417 @media screen and (min-width: 700px) and (max-width: 768px) {
2418 .grid-container {
2419 grid-template-columns: repeat(2, 1fr) !important;
2420 }
2421 }
2422
2423 @media screen and (min-width: 1200px) and (max-width: 1440px) {
2424 .grid-container {
2425 grid-template-columns: repeat(3, 1fr) !important;
2426 }
2427
2428 .content .list label {
2429 line-height: 36px !important;
2430 font-size: 18px;
2431 }
2432 }
2433
2434 @media screen and (max-width: 767px) {
2435 .content {
2436 display: block !important;
2437 }
2438
2439 .grid-container {
2440 grid-template-columns: repeat(1, 1fr) !important;
2441 }
2442
2443 .flex-search.text-right {
2444 display: block !important;
2445 justify-content: flex-end;
2446 }
2447
2448 .flex-import-logo-box {
2449 justify-content: center;
2450 }
2451
2452 .flex-imp-nav-box .nav-tabs .nav-item {
2453 justify-content: center;
2454 }
2455
2456 input#flex-templates-search {
2457 width: auto;
2458 }
2459
2460 button.btn.flex-template-buttons, a.btn.flex-template-buttons {
2461 font: 600 12px / 18px Segoe UI !important;
2462 }
2463 }
2464
2465 @media screen and (max-width: 767px) and (min-width: 576px) {
2466 button.btn.flex-template-buttons, a.btn.flex-template-buttons {
2467 margin: 0px auto 10px auto !important;
2468 }
2469
2470 button.btn.flex-template-buttons, a.btn.flex-template-buttons,
2471 .template-item .flex-temp-btn.btn {
2472 width: 80%;
2473 }
2474 }
2475
2476 @media screen and (max-width: 575px) {
2477 .flex-dash-plugin-logo {
2478 border-radius: 0px;
2479 width: auto;
2480 }
2481
2482 .grid-container {
2483 grid-template-columns: repeat(1, 1fr) !important;
2484 }
2485
2486 .flex-dashboard-box-1 {
2487 margin: 20px 0px;
2488 }
2489
2490 #categories-list, #free-categories-list {
2491 border-right: none !important;
2492 }
2493
2494 .fles-dash-buttons {
2495 flex-direction: column;
2496 }
2497
2498 .fles-dash-buttons a {
2499 width: fit-content;
2500 margin: 0 auto;
2501 }
2502 }
2503
2504 @media screen and (min-width: 769px) and (max-width: 991px) {
2505 .flex-dashboard-box-1 {
2506 margin-top: 0px !important;
2507 }
2508 }
2509
2510 @media screen and (min-width: 1024px) and (max-width: 1199px) {
2511 .swiper-container-2 .swiper-slide img {
2512 /* width: 240px; */
2513 }
2514 }
2515
2516 @media screen and (min-width: 1200px) and (max-width: 1810px) {
2517 .video-slide img {
2518 width: 200px;
2519 }
2520 }
2521
2522 @media screen and (max-width: 768px) {}
2523
2524 /* *************07/04/02025***************** */
2525
2526 @media screen and (max-width: 768px) {
2527 a.nav-link {
2528 font-size: 18px;
2529 }
2530
2531 .flex-demo-btn {
2532 font-size: 13px !important;
2533 }
2534
2535 .flex-nav-tab-links a.nav-link {
2536 font-weight: bold;
2537 color: #000 !important;
2538 border: 0;
2539 align-self: center;
2540 font: 900 17px / 16px Segoe UI Bold;
2541 }
2542
2543 img.logo-img {
2544 width: 50px;
2545 height: 50px;
2546 }
2547
2548 .flex-demo-buttons {
2549 text-align: center;
2550 }
2551 }
2552
2553 @media screen and (max-width: 441px) {
2554 a.btn.flex-demo-btn.flex-btn-space {
2555 margin: 10px 0px;
2556 }
2557 }
2558
2559 @media screen and (min-width: 562px) and (max-width: 768px) {
2560 a.nav-link {
2561 padding: 5px;
2562 }
2563
2564 .flex-nav-tab-links {
2565 gap: 0px;
2566 }
2567 }
2568
2569 @media screen and (min-width: 769px) and (max-width: 1200px) {
2570 .flex-demo-buttons {
2571 text-align: center;
2572 }
2573
2574 a.nav-link {
2575 padding: 5px;
2576 }
2577
2578 .flex-nav-tab-links {
2579 gap: 0px;
2580 }
2581
2582 .flex-demo-btn {
2583 font-size: 18px !important;
2584 }
2585
2586 a.nav-link {
2587 font-size: 18px;
2588 }
2589 }
2590
2591 @media screen and (min-width: 769px) and (max-width: 1592px) {
2592 .flex-demo-buttons {
2593 text-align: center;
2594 }
2595
2596 a.nav-link {
2597 padding: 5px;
2598 }
2599
2600 .flex-nav-tab-links {
2601 gap: 0px;
2602 }
2603
2604 .flex-demo-btn {
2605 font-size: 16px !important;
2606 }
2607
2608 a.nav-link {
2609 font-size: 18px;
2610 }
2611 }
2612
2613 @media (max-width: 991px) {
2614 button.fleximp-card-button span {
2615 width: 10px;
2616 height: 10px;
2617 display: inline-block;
2618 background: #a7aaad;
2619 border-radius: 50%;
2620 }
2621
2622 .circles>div {
2623 width: 40px;
2624 top: -10px;
2625 left: -10px;
2626 }
2627
2628 .fleximp-subscription-main-box .flex-feature-list-main {
2629 padding: 0 10px;
2630 }
2631 }
2632
2633 @media (max-width: 575px) {
2634 .fleximp-card-all {
2635 width: 90% !important;
2636 margin: 0px auto;
2637 background: #0000 !important;
2638 }
2639
2640 .fleximp-card-button {
2641 gap: 10px;
2642 }
2643
2644 .fleximp-card-button {
2645 padding: 10px;
2646 }
2647
2648 div#required-plugins-list {
2649 max-width: 100%;
2650 margin: 0px auto;
2651 }
2652 }
2653
2654 @media screen and (min-width: 753px) and (max-width: 1024px) {
2655 .flex-menu-btn {
2656 gap: 0px;
2657 }
2658
2659 .flex-gap {
2660 gap: 0px;
2661 justify-content: space-evenly;
2662 }
2663 }
2664
2665 @media screen and (max-width: 767px) {
2666 .flex-nav-tab-links {
2667 flex-wrap: wrap !important;
2668 align-content: center;
2669 }
2670
2671 .flex-gap-11 {
2672 display: block !important;
2673 }
2674
2675 .fleximp-subscription-main-box .flex-feature-list-main {
2676 padding: 0 10px;
2677 }
2678 }
2679
2680 @media screen and (min-width: 992px) and (max-width: 1880px) {
2681 .flex-wp-social-media-icons {
2682 display: flex;
2683 gap: 10px;
2684 }
2685
2686 .templates-imgs img {
2687 width: 20px !important;
2688 }
2689 }
2690
2691 @media screen and (max-width: 700px) {
2692 .flex-import-modal-step {
2693 width: 350px !important;
2694 }
2695
2696 .import-modal-main {
2697 display: block;
2698 }
2699
2700 p#modal-template-title {
2701 font-size: 20px;
2702 }
2703
2704 .flex-modal-template-mobile-title {
2705 font-size: 20px;
2706 }
2707
2708 .view-btton-div {
2709 flex-direction: column;
2710 }
2711
2712 .flex-model-div-main {
2713 flex-direction: column;
2714 }
2715 }
2716
2717 @media (max-width: 991px) {
2718 .table thead {
2719 display: none;
2720 /* Hide table header */
2721 }
2722
2723 .table tbody,
2724 .table tr,
2725 .table td {
2726 display: block;
2727 width: 100%;
2728 }
2729
2730 .table tr {
2731 margin-bottom: 15px;
2732 border: 1px solid #ddd;
2733 border-radius: 8px;
2734 background: #fff;
2735 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
2736 overflow: hidden;
2737 }
2738
2739 .table td {
2740 text-align: left;
2741 padding: 10px 15px;
2742 border: none;
2743 border-bottom: 1px solid #f0f0f0;
2744 position: relative;
2745 }
2746
2747 /* Label each cell using its corresponding header */
2748 .table td::before {
2749 content: attr(data-label);
2750 font-weight: 600;
2751 display: block;
2752 margin-bottom: 5px;
2753 color: #333;
2754 }
2755
2756 /* Buttons and images alignment */
2757 .table td img {
2758 width: 40px;
2759 height: 40px;
2760 object-fit: cover;
2761 }
2762
2763 .download-btn {
2764 width: 100%;
2765 padding: 8px 12px;
2766 font-size: 14px;
2767 }
2768
2769 .plugin-checkbox {
2770 transform: scale(1.1);
2771 }
2772 }
2773
2774 /* Skeleton Loader Styles */
2775 #templates-skeleton-loader {
2776 position: relative;
2777 width: 100%;
2778 padding: 20px 0;
2779 }
2780
2781 .skeleton-grid {
2782 display: grid;
2783 grid-template-columns: repeat(3, 1fr);
2784 gap: 20px;
2785 max-width: 100%;
2786 margin: auto;
2787 }
2788
2789 .skeleton-item {
2790 background: #fff;
2791 border: 1px solid #707070;
2792 padding: 15px;
2793 text-align: center;
2794 border-radius: 17px;
2795 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
2796 }
2797
2798 .skeleton-image {
2799 width: 100%;
2800 height: 200px;
2801 background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
2802 background-size: 200% 100%;
2803 animation: skeleton-loading 1.5s infinite;
2804 border-radius: 8px;
2805 margin-bottom: 15px;
2806 }
2807
2808 .skeleton-content {
2809 display: flex;
2810 flex-direction: column;
2811 gap: 10px;
2812 }
2813
2814 .skeleton-title {
2815 width: 80%;
2816 height: 20px;
2817 background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
2818 background-size: 200% 100%;
2819 animation: skeleton-loading 1.5s infinite;
2820 border-radius: 4px;
2821 margin: 0 auto;
2822 }
2823
2824 .skeleton-badge {
2825 width: 50px;
2826 height: 20px;
2827 background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
2828 background-size: 200% 100%;
2829 animation: skeleton-loading 1.5s infinite;
2830 border-radius: 4px;
2831 margin: 0 auto;
2832 }
2833
2834 .skeleton-buttons {
2835 display: flex;
2836 gap: 10px;
2837 justify-content: center;
2838 margin-top: 10px;
2839 }
2840
2841 .skeleton-button {
2842 width: 100px;
2843 height: 35px;
2844 background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
2845 background-size: 200% 100%;
2846 animation: skeleton-loading 1.5s infinite;
2847 border-radius: 4px;
2848 }
2849
2850 @keyframes skeleton-loading {
2851 0% {
2852 background-position: -200% 0;
2853 }
2854
2855 100% {
2856 background-position: 200% 0;
2857 }
2858 }
2859
2860 /* Responsive adjustments for skeleton loader */
2861 @media screen and (min-width: 769px) and (max-width: 1199px) {
2862 .skeleton-grid {
2863 grid-template-columns: repeat(2, 1fr) !important;
2864 }
2865 }
2866
2867 @media screen and (min-width: 700px) and (max-width: 768px) {
2868 .skeleton-grid {
2869 grid-template-columns: repeat(2, 1fr) !important;
2870 }
2871 }
2872
2873 @media screen and (min-width: 1200px) and (max-width: 1440px) {
2874 .skeleton-grid {
2875 grid-template-columns: repeat(3, 1fr) !important;
2876 }
2877 }
2878
2879 @media screen and (max-width: 767px) {
2880 .skeleton-grid {
2881 grid-template-columns: repeat(2, 1fr) !important;
2882 }
2883 }
2884
2885 @media screen and (max-width: 575px) {
2886 .skeleton-grid {
2887 grid-template-columns: repeat(1, 1fr) !important;
2888 }
2889 }
2890
2891
2892 /* flex template tab bubndle css */
2893
2894 .flex-template-tab-bundle {
2895 width: 100%;
2896 display: flex;
2897 justify-content: center;
2898 }
2899
2900 .flex-template-tab-bundle__card {
2901 width: 360px;
2902 background: #ffffff;
2903 border: 2px solid #e6e6e6;
2904 border-radius: 18px;
2905 padding: 24px 22px 28px;
2906 text-align: center;
2907 }
2908
2909 /* Image */
2910 .flex-template-tab-bundle__image {
2911 margin-bottom: 20px;
2912 }
2913
2914 .flex-template-tab-bundle__image img {
2915 max-width: 100%;
2916 height: auto;
2917 display: block;
2918 margin: 0 auto;
2919 }
2920
2921 /* Title */
2922 .flex-template-tab-bundle__title {
2923 font-size: 23px;
2924 font-weight: bold;
2925 color: #111111;
2926 margin: 0 0 14px;
2927 }
2928
2929 /* Price */
2930 .flex-template-tab-bundle__price {
2931 margin-bottom: 10px;
2932 text-align: center;
2933 padding: 0px 20px;
2934 }
2935
2936 .flex-template-tab-bundle__old-price {
2937 font-size: 23px !important;
2938 color: #606060 !important;
2939 text-decoration: line-through;
2940 margin-right: 8px;
2941 font-weight: bold;
2942 }
2943 .flex-template-tab-bundle__price span {
2944 font-size: 23px;
2945 color: #707070;
2946 }
2947
2948 .flex-template-tab-bundle__new-price {
2949 font-size: 30px !important;
2950 font-weight: bold;
2951 color: #111111 !important;
2952 }
2953
2954 /* Description */
2955 .flex-template-tab-bundle__description {
2956 font-size: 13px;
2957 line-height: 1.6;
2958 color: #707070;
2959 margin: 0 0 22px;
2960 }
2961
2962 /* Button */
2963 .flex-template-tab-bundle__button {
2964 display: inline-block;
2965 color: #fff !important;
2966 background: transparent linear-gradient(270deg, #4E5DAA 0%, #9B76B5 100%) 0% 0% no-repeat padding-box;
2967 text-decoration: none;
2968 padding: 14px 22px;
2969 border-radius: 10px;
2970 font-size: 16px;
2971 font-weight: 600;
2972 transition: background 0.3s ease, transform 0.2s ease;
2973 }
2974
2975
2976 .flex-template-tab-bundle__button:hover {
2977 background: #000000;
2978 color: #fff !important;
2979 transform: translateY(-2px);
2980 text-decoration: none;
2981 }
2982
2983
2984 .flex-template-dasboard-tab__blog-section .flex-support-div h3 {
2985 color: #111111;
2986 font-size: 24px;
2987 font-weight: bold;
2988 margin-bottom: 10px;
2989 }
2990
2991 /* dashboard tab css with new flow */
2992
2993 .flex-template-dasboard-tab {
2994 width: 100%;
2995 }
2996 .flex-template-dasboard-tab__card--bundle h3 {
2997 color: #111111;
2998 font-size: 28px;
2999 }
3000 .flex-template-dasboard-tab__card--bundle p {
3001 font-size: 15px;
3002 font-weight: normal !important;
3003 padding: 0px 20px;
3004 }
3005 .flex-template-dasboard-tab__card--bundle .fles-dash-buttons a.btn-secondary {
3006 font-size: 12px !important;
3007 color: #FFFFFF;
3008 font-weight: 600;
3009 }
3010 /* ---------- TOP GRID ---------- */
3011 .flex-template-dasboard-tab__top-grid {
3012 display: grid;
3013 grid-template-columns: 2fr 1fr;
3014 grid-template-rows: auto auto;
3015 gap: 24px;
3016 margin-bottom: 20px;
3017 max-width: 1520px;
3018 margin-top: 4rem;
3019 }
3020
3021 .flex-template-dasboard-tab__card {
3022 border: 2px solid #e6e6e6;
3023 border-radius: 16px;
3024 padding: 20px;
3025 background: #ECECEC;
3026 height: 97%;
3027 }
3028
3029
3030 /* Large Card */
3031 .flex-template-dasboard-tab__card--large {
3032 display: flex;
3033 justify-content: space-between;
3034 gap: 20px;
3035 height: max-content;
3036 background: #ECECEC;
3037 border: 1px solid #707070;
3038 padding: 0px 30px;
3039 }
3040 .flex-template-dasboard-tab__card .flex-template-dasboard-tab__card-content {
3041 margin: 30px 0px;
3042 }
3043 .flex-template-dasboard-tab__card-image{
3044 margin-right: 40px;
3045 & img{
3046 height: 100% !important;
3047 }
3048 }
3049 .flex-template-dasboard-tab__card-content h3 {
3050 margin: 0 0 10px;
3051 color: #111111;
3052 font-size: 28px;
3053 font-weight: bold;
3054 }
3055
3056 .flex-template-dasboard-tab__card-content p {
3057 color: #707070;
3058 margin-bottom: 25px;
3059 font-size: 15px;
3060 font-weight: normal !important;
3061 }
3062
3063 .flex-template-dasboard-tab__btn {
3064 display: inline-block;
3065 background: #000;
3066 color: #fff;
3067 padding: 10px 16px;
3068 border-radius: 8px;
3069 text-decoration: none;
3070 font-size: 13px;
3071 }
3072
3073 /* .flex-template-dasboard-tab__card-image img {
3074 max-width: 200px;
3075 } */
3076
3077 /* Bundle Card */
3078 .flex-template-dasboard-tab__card--bundle img {
3079 max-width: 100%;
3080 margin-bottom: 10px;
3081 padding: 0px 20px;
3082 }
3083
3084 .flex-template-dasboard-tab__price {
3085 margin: 10px 0;
3086 }
3087
3088 .flex-template-dasboard-tab__price .old {
3089 text-decoration: line-through;
3090 color: #999;
3091 margin-right: 6px;
3092 }
3093
3094 .flex-template-dasboard-tab__price .new {
3095 font-size: 22px;
3096 font-weight: 700;
3097 }
3098
3099 .flex-template-dasboard-tab__actions {
3100 display: flex;
3101 gap: 8px;
3102 flex-wrap: wrap;
3103 }
3104
3105 .flex-template-dasboard-tab__actions a {
3106 padding: 8px 12px;
3107 border-radius: 8px;
3108 font-size: 12px;
3109 text-decoration: none;
3110 }
3111
3112 .flex-template-dasboard-tab__actions .primary {
3113 background: #7b61ff;
3114 color: #fff;
3115 }
3116
3117 .flex-template-dasboard-tab__actions .secondary {
3118 background: #000;
3119 color: #fff;
3120 }
3121
3122 /* ---------- INFO GRID ---------- */
3123 .flex-template-dasboard-tab__info-grid {
3124 display: grid;
3125 grid-template-columns: 1fr 1fr;
3126 gap: 20px;
3127 margin-bottom: 20px;
3128 }
3129
3130 .flex-template-dasboard-tab__info-card {
3131 background: #fff;
3132 border: 2px solid #e6e6e6;
3133 border-radius: 14px;
3134 padding: 16px;
3135 }
3136
3137 /* ---------- BLOG SECTION ---------- */
3138 .flex-template-dasboard-tab__blog-header {
3139 display: flex;
3140 justify-content: space-between;
3141 align-items: center;
3142 margin-bottom: 14px;
3143 }
3144
3145 .flex-template-dasboard-tab__blog-header button {
3146 background: #000;
3147 color: #fff;
3148 border: none;
3149 border-radius: 6px;
3150 padding: 6px 10px;
3151 }
3152
3153 .flex-template-dasboard-tab__blog-grid {
3154 display: grid;
3155 grid-template-columns: repeat(4, 1fr);
3156 gap: 16px;
3157 }
3158
3159 .flex-template-dasboard-tab__blog-card {
3160 background: #fff;
3161 border: 2px solid #e6e6e6;
3162 border-radius: 14px;
3163 padding: 14px;
3164 text-align: center;
3165 }
3166
3167 .flex-template-dasboard-tab__blog-card img {
3168 max-width: 100%;
3169 margin-bottom: 10px;
3170 }
3171
3172 .flex-template-dasboard-tab__blog-card h5 {
3173 font-size: 14px;
3174 margin-bottom: 10px;
3175 }
3176
3177 .flex-template-dasboard-tab__blog-card a {
3178 display: inline-block;
3179 background: #000;
3180 color: #fff;
3181 padding: 6px 12px;
3182 border-radius: 6px;
3183 font-size: 12px;
3184 text-decoration: none;
3185 }
3186
3187
3188 /* new one */
3189
3190 /* Left large card – row 1 */
3191 .flex-template-dasboard-tab__card--large {
3192 grid-column: 1 / 2;
3193 grid-row: 1 / 2;
3194 }
3195
3196 /* Right bundle card – span both rows */
3197 .flex-template-dasboard-tab__card--bundle {
3198 grid-column: 2 / 3;
3199 grid-row: 1 / 3; /* THIS makes it tall */
3200 }
3201
3202 /* Info cards – below large card */
3203 .flex-template-dasboard-tab__info-grid {
3204 grid-column: 1 / 2;
3205 grid-row: 2 / 3;
3206 }
3207
3208
3209
3210 /* Respomsive media */
3211 @media (max-width: 1900px) and (min-width: 1600px) {
3212 .flex-template-dasboard-tab__card-image img{
3213 height: 100% !important;
3214 width: 25rem !important;
3215 }
3216 .flex-template-dasboard-tab__card-image {
3217 margin-right: 0px !important;
3218 }
3219 }
3220 @media (max-width: 1600px) and (min-width: 1440px) {
3221 button.btn.flex-template-buttons, a.btn.flex-template-buttons {
3222 padding: 8px 15px !important;
3223 background: transparent linear-gradient(270deg, #4C5CAA 0%, #9C77B5 100%) 0% 0% no-repeat padding-box;
3224 border-radius: 7px;
3225 color: #fff;
3226 font: 600 13px / 18px Segoe UI !important;
3227 letter-spacing: 0.5px;
3228 width: 50%;
3229 line-height: 1.5 !important;
3230 }
3231 .flex-template-dasboard-tab__card-image img{
3232 height: 100% !important;
3233 width: 20rem !important;
3234 }
3235 .flex-template-dasboard-tab__card-image {
3236 margin-right: 0px !important;
3237 }
3238 .btn.flex-demo-btn.btn-secondary {
3239 padding: 10px 9px;
3240 }
3241
3242 }
3243 @media (max-width: 1440px) and (min-width: 1199px) {
3244 .flex-template-dasboard-tab__card--large {
3245 padding: 0px 20px;
3246 padding-right: 0px;
3247 }
3248 .flex-template-dasboard-tab__card-image img{
3249 height: 100% !important;
3250 width: 15rem !important;
3251 }
3252 .flex-template-dasboard-tab__card-image {
3253 margin-right: 0px !important;
3254 }
3255 .fles-dash-buttons {
3256 flex-wrap: wrap;
3257 justify-content: center;
3258 }
3259 .fleximp-plugin-main-box td {
3260 padding-right: 2rem !important;
3261 }
3262 .fleximp-plugin-main-box .flex-plugin-title {
3263 font-size: 18px !important;
3264 }
3265 #plugins-list .table thead th {
3266 font-size: 22px !important;
3267 }
3268 .flex-imp-nav-box .flex-demo-buttons a {
3269 font-size: 13px !important;
3270 }
3271 #plugins-list .plugin-tbl {
3272 padding: 20px 15px !important;
3273 }
3274 .flex-gap-div {
3275 gap: 10px;
3276 justify-content: center;
3277 flex-wrap: wrap;
3278 }
3279 .fleximp-template-main-box p.template-title {
3280 text-align: center;
3281 }
3282 .buttons.widgets-btn {
3283 display: flex;
3284 flex-direction: column;
3285 justify-content: center !important;
3286 align-items: center;
3287 }
3288 }
3289 @media (max-width: 1199px) and (min-width: 991px) {
3290 .flex-gap-div {
3291 gap: 10px;
3292 justify-content: center;
3293 flex-wrap: wrap;
3294 }
3295 .fleximp-template-main-box p.template-title {
3296 text-align: center;
3297 }
3298 .buttons.widgets-btn {
3299 display: flex;
3300 flex-direction: column;
3301 justify-content: center !important;
3302 align-items: center;
3303 }
3304 .fleximp-plugin-main-box td {
3305 padding-right: 1rem !important;
3306 }
3307 .fleximp-plugin-main-box .flex-plugin-title {
3308 font-size: 18px !important;
3309 }
3310 #plugins-list .table thead th {
3311 font-size: 22px !important;
3312 }
3313 .flex-imp-nav-box .flex-demo-buttons a {
3314 font-size: 18px !important;
3315 }
3316 #plugins-list .plugin-tbl {
3317 padding: 20px 15px !important;
3318 }
3319 .flex-gap-div {
3320 gap: 10px;
3321 justify-content: center;
3322 flex-wrap: wrap;
3323 }
3324 .flex-template-dasboard-tab__top-grid {
3325 display: block !important;
3326
3327 }
3328 .flex-template-dasboard-tab__card {
3329 margin: 25px 0px !important;
3330 }
3331 .flex-template-dasboard-tab__card {
3332 margin: 25px 0px !important;
3333 flex-wrap: wrap;
3334 justify-content: center;
3335 align-items: center;
3336 padding: 20px;
3337 }
3338 }
3339 @media (max-width: 991px) and (min-width: 768px) {
3340 .flex-template-dasboard-tab__card {
3341 margin: 25px 0px !important;
3342 flex-wrap: wrap;
3343 justify-content: center;
3344 align-items: center;
3345 padding: 20px;
3346 }
3347 .flex-template-dasboard-tab__top-grid {
3348 display: block !important;
3349
3350 }
3351 .flex-template-dasboard-tab__card {
3352 margin: 25px 0px !important;
3353 }
3354 .cnt-flex-row{
3355 flex-direction: column-reverse !important;
3356 }
3357 .cnt-flex-row .grid-container-column{
3358 max-width: 100% !important;
3359 }
3360 .fleximp-plugin-main-box td {
3361 padding-right: 1rem !important;
3362 text-align: center;
3363 }
3364 .fleximp-plugin-main-box .flex-plugin-title {
3365 font-size: 18px !important;
3366 }
3367 #plugins-list .table thead th {
3368 font-size: 22px !important;
3369 }
3370 .flex-imp-nav-box .flex-demo-buttons a {
3371 font-size: 16px !important;
3372 }
3373 #plugins-list .plugin-tbl {
3374 padding: 20px 15px !important;
3375 }
3376 /* .table thead {
3377 display: block;
3378 } */
3379 .plugin-tbl .table-striped tbody tr{
3380 display: flex !important;
3381 flex-wrap: wrap !important;
3382 }
3383 .flex-gap-div {
3384 gap: 10px;
3385 justify-content: center;
3386 flex-wrap: wrap;
3387 }
3388 .fleximp-template-main-box p.template-title {
3389 text-align: center;
3390 }
3391 .buttons.widgets-btn {
3392 display: flex;
3393 flex-direction: column;
3394 justify-content: center !important;
3395 align-items: center;
3396 }
3397 }
3398 @media screen and (max-width: 767px) {
3399 .fleximp-template-main-box p.template-title {
3400 text-align: center;
3401 }
3402 .buttons.widgets-btn {
3403 display: flex;
3404 flex-direction: column;
3405 justify-content: center !important;
3406 align-items: center;
3407 }
3408 .flex-template-dasboard-tab__card-image {
3409 /* margin-right: 40px; */
3410 width: 100% !important;
3411 margin: 0 auto;
3412 }
3413 .flex-template-dasboard-tab__card-image img {
3414 /* margin-right: 40px; */
3415 width: 100% !important;
3416 }
3417 .flex-template-dasboard-tab__card .flex-template-dasboard-tab__card-content {
3418 text-align: center;
3419 }
3420 .flex-template-dasboard-tab__card {
3421 margin: 25px 0px !important;
3422 flex-wrap: wrap;
3423 justify-content: center;
3424 align-items: center;
3425 padding: 20px;
3426 }
3427 .flex-template-dasboard-tab__top-grid {
3428 display: block !important;
3429
3430 }
3431 .flex-template-dasboard-tab__card {
3432 margin: 25px 0px !important;
3433 }
3434
3435 .cnt-flex-row{
3436 flex-direction: column-reverse !important;
3437 }
3438 .cnt-flex-row .grid-container-column{
3439 max-width: 100% !important;
3440 }
3441 .fleximp-plugin-main-box td {
3442 padding-right: 0rem !important;
3443 text-align: center;
3444 }
3445 .fleximp-plugin-main-box .flex-plugin-title {
3446 font-size: 18px !important;
3447 }
3448 #plugins-list .table thead th {
3449 font-size: 22px !important;
3450 }
3451 .flex-imp-nav-box .flex-demo-buttons a {
3452 font-size: 16px !important;
3453 }
3454 #plugins-list .plugin-tbl {
3455 padding: 20px 15px !important;
3456 }
3457 /* .table thead {
3458 display: block;
3459 } */
3460 .plugin-tbl .table-striped tbody tr{
3461 display: flex !important;
3462 flex-wrap: wrap !important;
3463 }
3464 .flex-gap-div {
3465 gap: 10px;
3466 justify-content: center;
3467 flex-wrap: wrap;
3468 }
3469 }
3470
3471
3472 .plugin-post-title {
3473 display: -webkit-box;
3474 -webkit-line-clamp: 2;
3475 -webkit-box-orient: vertical;
3476 overflow: hidden;
3477 }
3478 .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after ,.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{
3479 display: none;
3480 }
3481 .swiper-button-next, .swiper-rtl .swiper-button-prev {
3482 right: 0;
3483 }
3484 .swiper-button-prev, .swiper-rtl .swiper-button-next {
3485 left: -90px !important;
3486 right: auto;
3487 }