PluginProbe
Forumax – AI Powered Advanced Community Forum Plugin / 1.4.1
Forumax – AI Powered Advanced Community Forum Plugin v1.4.1
2.4.4 2.4.3 2.4.2 2.4.1 2.4.0 trunk 1.0.8 1.1.0 1.2.1 1.2.2 1.2.3 1.2.4 1.2.5 1.2.6 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.4.0 1.4.1 2.0.0 2.1.0 All 29 releases
bbp-core / assets / frontend / css / el-widgets.css

el-widgets.css in Forumax – AI Powered Advanced Community Forum Plugin 1.4.1, at assets/frontend/css/el-widgets.css

1,917 lines 42.9 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*----------------------------------------------------
2 @File: Default Styles
3
4 This file contains the styling for the actual template, this
5 is the file you need to edit to change the look of the
6 template.
7 ---------------------------------------------------- */
8 /*=====================================================================
9 @Template Name: Ama
10
11 @Default Styles
12 Table of Content:
13 01/ Variables
14 92/ Predefine
15 03/ forumPosts
16 04/ forum
17 05/ forums
18
19
20 =====================================================================*/
21 :root {
22 --rob: "Roboto", sans-serif;
23 --great: "Great Vibes", cursive;
24 --bg_gradient: linear-gradient(45deg, #F5FDFF, #FEEFEC);
25 --bbpc_brand_color: var(--bbpc_brand_color_opt,#0866ff);
26 --h_title: #1d2746;
27 --p_color: #6b707f;
28 --bs-white: #fff;
29 --black_25: #f9f9f9;
30 --black_50: #f2f2f2;
31 --black_75: #eeeeee;
32 --black_90: #e0e6f0;
33 --black_100: #d6d9dc;
34 --black_150: #c8ccd0;
35 --black_200: #bbc0c4;
36 --black_300: #9fa6ad;
37 --black_350: #9199a1;
38 --black_400: #848d95;
39 --black_500: #6a737c;
40 --black_600: #535a60;
41 --black_700: #3c4146;
42 --black_750: #2f3337;
43 --black_800: #242729;
44 --black_900: #0c0d0e;
45 --bbpc_color: #078669;
46 --baseColor2: #4a6ee0;
47 --bs_white: #fff;
48 }
49
50 /*font Variables*/
51 /**=== Functions ===**/
52 .col-md-offset-right-1,
53 .col-lg-offset-right-1 {
54 margin-right: 8.33333333%;
55 }
56
57 .community-post {
58 border-radius: 6px;
59 box-shadow: 0 2px 4px 0 rgba(2, 47, 57, 0.1);
60 padding: 23px 30px;
61 display: flex;
62 background: var(--bs-white);
63 align-items: center;
64 justify-content: space-between;
65 margin-bottom: 10px;
66 transition: all 0.3s ease-in-out;
67 border: 1px solid var(--black_50);
68 }
69 .community-post:hover {
70 box-shadow: 0 24px 40px 0 rgba(2, 47, 57, 0.12);
71 border-color: #eef3f6;
72 transform: translateX(10px);
73 }
74 .community-post .post-content {
75 display: flex;
76 align-items: center;
77 flex-wrap: wrap;
78 }
79 .community-post .post-content .author-avatar {
80 margin-right: 25px;
81 border-radius: 50%;
82 overflow: hidden;
83 margin-top: -2px;
84 }
85 .community-post .post-content .entry-content {
86 color: var(--black_600);
87 font-size: 16px;
88 font-family: "Roboto", sans-serif;
89 }
90 .community-post .post-content img {
91 border-radius: 50%;
92 }
93
94 .community-post.forum-item {
95 padding: 23px 15px;
96 }
97 .community-post.forum-item .post-content p {
98 font-size: 14px;
99 line-height: 1.3;
100 }
101 @media (max-width: 667px) {
102 .community-post {
103 display: block;
104 }
105 }
106 @media (max-width: 420px) {
107 .community-post {
108 padding: 20px 15px;
109 }
110 }
111 .community-post .post-content .author-avatar.forum-icon {
112 border-radius: 0;
113 }
114 .community-post .post-content .author-avatar.forum-icon img {
115 padding: 2px;
116 }
117 @media (max-width: 667px) {
118 .community-post .post-content .author-avatar {
119 margin-right: 20px;
120 }
121 }
122 @media (max-width: 420px) {
123 .community-post .post-content .author-avatar {
124 margin-right: 15px;
125 }
126 }
127 .community-post .post-content .entry-content {
128 flex: 2;
129 }
130 .community-post .post-content .entry-content .post-title {
131 font-size: 18px;
132 font-weight: 500;
133 margin: auto;
134 margin-bottom: 0;
135 line-height: 1.7;
136 }
137 .community-post .post-content .entry-content .post-title a {
138 text-decoration: none;
139 }
140 .community-post .post-content .entry-content .post-title a:hover {
141 color: var(--bbpc_brand_color);
142 }
143 .community-post .post-content .entry-content p {
144 margin: 0;
145 }
146 @media (max-width: 667px) {
147 .community-post .post-meta-wrapper {
148 margin-top: 15px;
149 margin-left: 70px;
150 }
151 }
152 .community-post .post-meta-wrapper .post-meta-info {
153 margin: 0;
154 padding: 0;
155 list-style: none;
156 }
157 @media (max-width: 991px) {
158 .community-post .post-meta-wrapper .post-meta-info li:not(:last-child) {
159 margin-right: 20px;
160 }
161 }
162 .community-post .post-meta-wrapper .post-meta-info li a {
163 display: block;
164 color: var(--black_600);
165 }
166 .community-post .post-meta-wrapper .post-meta-info li a i {
167 margin-right: 10px;
168 }
169 .community-post .post-meta-wrapper .post-meta-info li a:hover {
170 color: var(--bbpc_brand_color);
171 }
172 .community-post.style-two {
173 margin-bottom: 0;
174 border-radius: 0;
175 box-shadow: none;
176 position: relative;
177 }
178 .community-post.style-two .entry-content .post-title {
179 font-size: 16px;
180 }
181 .community-post.style-two .post-meta-wrapper .post-meta-info li i {
182 transition: all 0.3s ease-in-out;
183 }
184 .community-post.style-two .post-meta-wrapper .post-meta-info li:nth-child(2):hover a {
185 color: #b1b5c0;
186 }
187 .community-post.style-two .post-meta-wrapper .post-meta-info li:nth-child(2):hover i {
188 color: #f9ae44;
189 }
190 .community-post.style-two .com-featured {
191 position: absolute;
192 right: 0;
193 top: -2px;
194 height: 30px;
195 width: 30px;
196 z-index: 2;
197 text-align: center;
198 color: #fff;
199 padding: 0 15px;
200 }
201 .community-post.style-two .com-featured i {
202 z-index: 22;
203 position: relative;
204 font-size: 14px;
205 }
206 .community-post.style-two .com-featured:after {
207 content: "";
208 top: 0;
209 position: absolute;
210 right: 0;
211 width: 0;
212 height: 0;
213 border-left: 30px solid transparent;
214 border-right: 0 solid transparent;
215 border-top: 30px solid #00ae69;
216 z-index: 1;
217 }
218 .community-post.style-two .cat-wrap {
219 display: inline-block;
220 vertical-align: 3px;
221 }
222 .community-post .meta {
223 margin: 0;
224 padding: 0;
225 list-style: none;
226 }
227 .community-post .meta li img {
228 display: inline-block;
229 vertical-align: -2px;
230 }
231 .community-post .meta li i,
232 .community-post .meta li img {
233 margin-right: 10px;
234 font-size: 14px;
235 }
236 .community-post .meta li a {
237 font-size: 14px;
238 color: #838793;
239 }
240 .community-post .meta li a:hover {
241 color: var(--bbpc_brand_color);
242 }
243
244 .community-post .post-meta-wrapper .post-meta-info li:first-child {
245 margin-right: 40px;
246 }
247
248 .community-post .post-meta-wrapper .post-meta-info li {
249 display: inline-block;
250 }
251
252 .forum-post-content .forum-post-btm .taxonomy i,
253 .forum-post-content .forum-post-btm .taxonomy img,
254 .community-post .post-meta-wrapper .post-meta-info li a i,
255 .community-post .post-meta-wrapper .post-meta-info li a img,
256 .community-post.style-two .meta li i,
257 .community-post.style-two .meta li img {
258 margin-right: 5px;
259 }
260
261 .post-header .category-menu li i,
262 .community-post .post-meta-wrapper .post-meta-info li a i {
263 font-size: 14px;
264 }
265
266 .forum-category-area .col-custom {
267 width: 20%;
268 }
269 .forum-category-area .single-category-widget {
270 box-shadow: 0 1.6px 3.5px 0 rgba(51, 77, 114, 0.1490196078), 0 0.5px 1px 0 rgba(51, 77, 114, 0.1019607843);
271 background-color: var(--bs-white);
272 border-radius: 10px;
273 text-align: center;
274 padding: 25px;
275 transition: all 0.3s ease-out;
276 }
277 .forum-category-area .single-category-widget:hover {
278 box-shadow: 0 20px 20px 0 rgba(51, 77, 114, 0.0901960784);
279 }
280 .forum-category-area .single-category-widget:hover h5 {
281 color: var(--bbpc_brand_color) !important;
282 }
283 .forum-category-area .single-category-widget h5 {
284 font-size: 18px;
285 text-transform: capitalize;
286 font-family: var(--rob);
287 font-weight: 500;
288 line-height: 1.3;
289 color: #171d24;
290 margin-bottom: 0;
291 margin-top: 23px;
292 transition: all 0.3s ease-out;
293 }
294
295 .forum-category-area .col-custom {
296 margin-bottom: 30px;
297 }
298 .forum-category-area .col-custom.wow.fadeInUp {
299 padding: 0 12px;
300 }
301
302 .communities-boxes {
303 display: flex;
304 flex-wrap: wrap;
305 margin: 0 -30px;
306 gap: 30px;
307 }
308 @media (max-width: 1025px) {
309 .communities-boxes {
310 margin: 0 -10px;
311 }
312 }
313 @media (max-width: 992px) {
314 .communities-boxes {
315 flex-wrap: wrap;
316 justify-content: center;
317 width: calc(100% + 30px);
318 }
319 }
320 @media (max-width: 420px) {
321 .communities-boxes {
322 width: calc(100% + 15px);
323 }
324 }
325 .communities-boxes .com-box {
326 text-align: center;
327 margin-bottom: 57px;
328 width: 20%;
329 flex: 0 0 200px;
330 }
331 @media (max-width: 1200px) {
332 .communities-boxes .com-box {
333 flex: 0 0 165px;
334 }
335 }
336 @media (max-width: 991px) {
337 .communities-boxes .com-box {
338 flex: 0 0 180px;
339 }
340 }
341 @media (max-width: 768px) {
342 .communities-boxes .com-box {
343 flex: 0 0 185px;
344 }
345 }
346 @media (max-width: 426px) {
347 .communities-boxes .com-box {
348 flex: 0 0 170px;
349 margin-bottom: 30px;
350 }
351 }
352 .communities-boxes .com-box .icon-container {
353 border-radius: 6px;
354 background: var(--bs-white);
355 box-shadow: 0 40px 70px 0 rgba(2, 47, 57, 0.1);
356 display: flex;
357 align-items: center;
358 justify-content: center;
359 height: 100px;
360 width: 100px;
361 margin: 0 auto 20px;
362 }
363 .communities-boxes .com-box .com-box-content .title {
364 font-size: 20px;
365 line-height: 26px;
366 font-weight: 500;
367 color: var(--black_800);
368 margin-bottom: 5px;
369 transition: all 0.3s ease-in-out;
370 letter-spacing: normal;
371 margin-top: 10px;
372 }
373 .communities-boxes .com-box .com-box-content .title a {
374 color: var(--black_800);
375 }
376 .communities-boxes .com-box .com-box-content .title a:hover {
377 color: var(--bbpc_brand_color);
378 text-decoration: none;
379 }
380 .communities-boxes .com-box .com-box-content .title:hover {
381 color: var(--bbpc_brand_color);
382 }
383 .communities-boxes .com-box .com-box-content .total-post {
384 color: var(--p_color);
385 font-size: 14px;
386 margin-top: 0;
387 }
388
389 .more-communities {
390 padding: 22px 0;
391 border-top: 1px solid #e8ecee;
392 border-bottom: 1px solid #e8ecee;
393 }
394 .more-communities .collapse-wrap {
395 margin-top: 80px;
396 display: none;
397 }
398 .more-communities .collapse-btn-wrap {
399 text-align: center;
400 display: table;
401 color: var(--black_600);
402 font-weight: 500;
403 margin: auto;
404 }
405 .more-communities .collapse-btn-wrap:hover {
406 text-decoration: none;
407 color: var(--black_800);
408 }
409 .more-communities .collapse-btn-wrap svg {
410 position: relative;
411 vertical-align: middle;
412 display: inline;
413 }
414 .more-communities .collapse-btn-wrap .icon_plus path, .more-communities .collapse-btn-wrap .icon_plus line, .more-communities .collapse-btn-wrap .icon_minus path, .more-communities .collapse-btn-wrap .icon_minus line {
415 stroke: var(--bbpc_brand_color);
416 }
417 .more-communities .collapse-btn-wrap .icon_minus {
418 display: none;
419 }
420 .more-communities .collapse-btn-wrap.active .icon_plus {
421 display: none;
422 }
423 .more-communities .collapse-btn-wrap.active .icon_minus {
424 display: initial;
425 }
426
427 body.body_dark .communities-boxes .com-box .com-box-content .title a {
428 color: #fff;
429 }
430 body.body_dark .communities-boxes .com-box .com-box-content .title a:hover {
431 color: var(--bbpc_brand_color);
432 }
433 body.body_dark .communities-boxes .com-box .com-box-content .total-post {
434 color: #8b8b8b;
435 }
436 body.body_dark .more-communities {
437 border-color: #272727;
438 }
439 body.body_dark .single-forum-post-widget .post-info div {
440 color: #848d95;
441 }
442 body.body_dark .single-forum-post-widget .post-info .post-category a {
443 color: #848d95;
444 }
445 body.body_dark .single-forum-post-widget .post-info .post-category a:hover {
446 color: var(--bbpc_brand_color);
447 }
448 body.body_dark .community-area .nav-tabs .nav-item button.active {
449 color: #fff;
450 }
451
452 /** === Widgets === **/
453 .widget_display_stats dl dt {
454 float: left;
455 clear: left;
456 margin: 0 0 10px;
457 font-weight: 500;
458 }
459
460 .widget_display_stats dl dd {
461 float: right;
462 margin: 0;
463 }
464
465 .widget_display_replies li:before {
466 font-family: eleganticons;
467 content: "w";
468 font-size: 15px !important;
469 margin: 0 12px 0 0 !important;
470 padding: 0px !important;
471 line-height: 23px;
472 }
473
474 .widget_display_topics li div {
475 color: var(--black_400);
476 }
477 .widget_display_topics li::before {
478 font-family: eleganticons;
479 content: "b";
480 margin: -3px 12px 0 0;
481 font-size: 15px;
482 color: var(--black_800);
483 position: absolute;
484 left: 0;
485 top: 0;
486 }
487
488 .widget_display_topics .bbp-forum-title,
489 .widget_display_replies .bbp-forum-title {
490 display: inline-block;
491 line-height: 1.36;
492 color: var(--black_900);
493 }
494
495 .widget_display_topics li {
496 padding-left: 30px;
497 }
498
499 .widget_display_topics li,
500 .widget_display_replies li {
501 position: relative;
502 margin-bottom: 10px;
503 padding-bottom: 10px;
504 border-bottom: 1px solid #e5e7e9;
505 font-size: 16px;
506 }
507 .widget_display_topics li time,
508 .widget_display_replies li time {
509 color: var(--black_400);
510 display: block;
511 font-size: 14px;
512 }
513 .widget_display_topics li div,
514 .widget_display_replies li div {
515 font-size: 14px;
516 }
517
518 .widget_display_topics li a,
519 .widget_display_replies li a {
520 color: var(--black_800);
521 }
522 .widget_display_topics li a .bbp-author-avatar img,
523 .widget_display_replies li a .bbp-author-avatar img {
524 border-radius: 50px;
525 }
526
527 .widget_display_replies li .bbp-author-avatar {
528 margin-right: 5px;
529 }
530
531 .widget_display_topics li a:hover,
532 .widget_display_replies li a:hover {
533 color: var(--bbpc_brand_color);
534 }
535
536 .bbp-logged-in .avatar {
537 float: left;
538 margin: 0 15px 0 0;
539 border-radius: 99%;
540 }
541
542 .bbp-logged-in h4 {
543 font-weight: normal;
544 font-size: 18px;
545 clear: none;
546 margin: 0 0 5px;
547 }
548
549 .bbp-logged-in h4 a {
550 color: #333;
551 font-weight: 500;
552 }
553
554 .bbp-logged-in a.button.logout-link:hover,
555 .bbp-logged-in h4 a:hover {
556 color: var(--bbpc_brand_color);
557 }
558
559 .bbp-logged-in a.button.logout-link:hover,
560 .bbp-logged-in a.button.logout-link {
561 color: #666;
562 }
563
564 .forum-post-content .content img {
565 max-width: 100%;
566 height: auto;
567 }
568
569 ul.bbp-topics-widget.newness img {
570 border-radius: 50%;
571 margin: 5px;
572 }
573
574 .bbp-submit-wrapper {
575 float: left;
576 margin-top: 0;
577 }
578
579 .forum-post-content .forum-post-btm .taxonomy.forum-post-cat {
580 display: flex;
581 }
582
583 .bbp-topic-reply-link {
584 padding: 6px 20px;
585 font-weight: 400;
586 border-radius: 2px;
587 transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.18s ease-in-out;
588 background: #fff;
589 border: 1px solid #d0d8dc;
590 color: var(--black_800);
591 height: 26px;
592 font-size: 12px;
593 line-height: 26px;
594 }
595
596 .comment-content .bbp-topic-reply-link:hover {
597 background: #fff;
598 border: 1px solid var(--black_800);
599 color: var(--black_800);
600 }
601
602 .page-numbers {
603 cursor: pointer !important;
604 }
605
606 .pagination-wrapper .page-numbers.next {
607 display: flex;
608 align-items: center;
609 justify-content: center;
610 padding-bottom: 2px;
611 }
612
613 .post-header .support-total-info li a {
614 font-weight: 400;
615 }
616
617 .post-header .support-total-info li a {
618 color: #6b707f;
619 }
620
621 .post-header .support-total-info li a.open-data.loading {
622 color: var(--black_800);
623 font-weight: 500;
624 }
625
626 #tagList {
627 padding-left: 40px;
628 }
629
630 .userlist {
631 padding-left: 15px;
632 }
633
634 .post-header .category-menu .all-users a {
635 position: relative;
636 }
637
638 .post-header .category-menu .all-users a .count {
639 background: #ebedf0;
640 border-radius: 10px;
641 color: #838793;
642 font-size: 12px;
643 position: absolute;
644 margin-left: 5px;
645 padding: 1px 5px 0;
646 top: 8px;
647 width: auto;
648 height: auto;
649 }
650
651 /*=========== Forum Post Widget css ==========*/
652 .forum-post-widget .widget-header h2 {
653 font-size: 40px;
654 font-weight: 700;
655 line-height: 50px;
656 color: #000;
657 }
658 .forum-post-widget .widget-header .action_btn {
659 padding-bottom: 8px;
660 padding-top: 8px;
661 box-shadow: none;
662 }
663 .forum-post-widget .widget-header .action_btn:hover {
664 box-shadow: 0 20px 30px 0 rgba(17, 166, 131, 0.24);
665 }
666 .forum-post-widget .post-filter-widget {
667 box-shadow: 0 1.6px 3.5px 0 rgba(51, 77, 114, 0.1490196078), 0 0.5px 1px 0 rgba(51, 77, 114, 0.1019607843);
668 border-radius: 10px;
669 background-color: var(--bs-white);
670 padding: 16.5px 30px;
671 display: flex;
672 flex-wrap: wrap;
673 margin-bottom: 20px;
674 }
675 .forum-post-widget .post-filter-widget .single-filter-item {
676 margin-right: 30px;
677 display: flex;
678 align-items: center;
679 }
680 .forum-post-widget .post-filter-widget .single-filter-item a.data-active {
681 color: var(--bbpc_brand_color);
682 }
683 .forum-post-widget .post-filter-widget .single-filter-item i {
684 margin-right: 5px;
685 font-size: 12px;
686 }
687 @media (max-width: 1200px) and (min-width: 992px) {
688 .forum-post-widget .post-filter-widget .single-filter-item {
689 margin-right: 20px;
690 }
691 }
692 .forum-post-widget .post-filter-widget .single-filter-item:last-child {
693 margin-right: 0;
694 }
695 .forum-post-widget .post-filter-widget .single-filter-item input[type=radio] {
696 display: none;
697 }
698 .forum-post-widget .post-filter-widget .single-filter-item input[type=radio]:checked {
699 display: none;
700 }
701 .forum-post-widget .post-filter-widget .single-filter-item input[type=radio]:checked ~ label {
702 color: var(--bbpc_brand_color);
703 }
704 .forum-post-widget .post-filter-widget .single-filter-item input[type=radio]:checked ~ label .main-img {
705 display: none;
706 }
707 .forum-post-widget .post-filter-widget .single-filter-item input[type=radio]:checked ~ label .hover-img {
708 display: block;
709 }
710 .forum-post-widget .post-filter-widget .single-filter-item label {
711 display: flex;
712 align-items: center;
713 cursor: pointer;
714 font-size: 14px;
715 font-weight: 400;
716 line-height: 16px;
717 color: #6a737c;
718 }
719 .forum-post-widget .post-filter-widget .single-filter-item label img {
720 margin-right: 8.5px;
721 margin-bottom: 1px;
722 }
723 .forum-post-widget .post-filter-widget .single-filter-item label .main-img {
724 display: block;
725 }
726 .forum-post-widget .post-filter-widget .single-filter-item label .hover-img {
727 display: none;
728 }
729
730 .single-forum-post-widget {
731 box-shadow: 0 1.6px 3.5px 0 rgba(51, 77, 114, 0.1490196078), 0 0.5px 1px 0 rgba(51, 77, 114, 0.1019607843);
732 border-radius: 10px;
733 background-color: var(--bs-white);
734 transition: all 0.3s ease-out;
735 padding: 22px 35px 18px 30px;
736 display: flex;
737 align-items: center;
738 justify-content: space-between;
739 margin-top: 10px;
740 }
741 .single-forum-post-widget:first-child {
742 margin-top: 0;
743 }
744 .single-forum-post-widget:hover {
745 box-shadow: 0 20px 45px 0 rgba(51, 77, 114, 0.1490196078);
746 transform: translateX(2px);
747 }
748 .single-forum-post-widget:hover .post-title h6 a {
749 color: var(--bbpc_brand_color);
750 }
751 .single-forum-post-widget .post-title {
752 margin-bottom: 10px;
753 }
754 .single-forum-post-widget .post-title h6 {
755 margin-top: 0;
756 margin-bottom: 0;
757 line-height: 22px;
758 font-size: 16px;
759 font-weight: 500;
760 }
761 .single-forum-post-widget .post-title h6 a {
762 color: #171d24;
763 font-size: 18px;
764 }
765 .single-forum-post-widget .post-title i {
766 font-size: 15px;
767 color: #2ed83f;
768 vertical-align: middle;
769 margin-left: 6px;
770 }
771 .single-forum-post-widget .post-info {
772 display: flex;
773 flex-wrap: wrap;
774 }
775 .single-forum-post-widget .post-info > div {
776 margin-right: 15px;
777 color: var(--black_600);
778 font-size: 14px;
779 font-weight: 400;
780 line-height: 16px;
781 }
782 .single-forum-post-widget .post-info > div img {
783 margin-right: 5px;
784 height: 15px;
785 width: 15px;
786 margin-top: 0px;
787 }
788 .single-forum-post-widget .post-info .post-category a {
789 color: #4a6ee0;
790 }
791 .single-forum-post-widget .post-tags {
792 display: flex;
793 }
794 .single-forum-post-widget .post-tags .single-tag {
795 padding: 3px 9.5px;
796 border-radius: 3px;
797 font-size: 12px;
798 font-weight: 400;
799 line-height: 14px;
800 color: #fff;
801 margin: 12px 10px 0 0;
802 }
803 .single-forum-post-widget .post-tags .single-tag:last-child {
804 margin-right: 0;
805 }
806 .single-forum-post-widget .post-tags .single-tag.tag-jq {
807 background-color: #f7ab40;
808 }
809 .single-forum-post-widget .post-tags .single-tag.tag-php {
810 background-color: #7543e0;
811 }
812 .single-forum-post-widget .post-tags .single-tag.tag-wp {
813 background-color: #6078ce;
814 }
815 .single-forum-post-widget .post-tags .single-tag.tag-js {
816 background-color: #ff7245;
817 }
818 .single-forum-post-widget .post-tags .single-tag.tag-dvlp {
819 background-color: #48a6ea;
820 }
821 .single-forum-post-widget .post-tags .single-tag.tag-ecmrc {
822 background-color: #333333;
823 }
824 .single-forum-post-widget .post-tags .single-tag.tag-foram {
825 background-color: var(--bbpc_brand_color);
826 }
827 .single-forum-post-widget .post-tags .single-tag.tag-hlp {
828 background-color: #2c53df;
829 }
830 .single-forum-post-widget .post-tags .single-tag.tag-sprt {
831 background-color: #0cc72a;
832 }
833 .single-forum-post-widget .post-reach {
834 border-left: 1px solid var(--black_50);
835 padding-left: 10px;
836 }
837 .single-forum-post-widget .post-reach > div {
838 font-size: 12px;
839 font-weight: 400;
840 line-height: 14px;
841 color: #848d95;
842 margin-top: 10px;
843 display: flex;
844 align-items: center;
845 }
846 .single-forum-post-widget .post-reach > div:first-child {
847 margin-top: 0;
848 }
849 .single-forum-post-widget .post-reach > div img {
850 margin-right: 5px;
851 }
852
853 .single-forum-post-widget .post-category img {
854 width: 20px;
855 height: auto;
856 border-radius: 50%;
857 }
858
859 .single-filter-item a {
860 color: var(--black_600);
861 }
862 .single-filter-item a:hover {
863 text-decoration: none;
864 }
865
866 .single-forum-post-widget .post-content .post-category a {
867 font-size: 14px;
868 color: var(--black_600);
869 gap: 5px;
870 }
871 .single-forum-post-widget .post-content .post-category a:hover {
872 color: var(--bbpc_brand_color);
873 text-decoration: none;
874 }
875
876 body.body_dark .forum-post-widget .post-filter-widget .single-filter-item svg, body.body_dark .forum-post-widget .post-filter-widget .single-filter-item path {
877 fill: darkgrey;
878 }
879
880 #aj-post-filter-widget svg circle.bbpc-preloader {
881 stroke: var(--bbpc_brand_color) !important;
882 }
883
884 .ama-search-widget {
885 position: relative;
886 margin-left: auto;
887 margin-right: auto;
888 }
889 .ama-search-widget .header_search_keyword {
890 text-align: left;
891 display: flex;
892 flex-wrap: wrap;
893 align-items: center;
894 font-weight: 500;
895 justify-content: center;
896 margin-top: 10px;
897 }
898 .ama-search-widget .header_search_keyword span {
899 font-size: 14px;
900 margin-right: 10px;
901 }
902 .ama-search-widget .header_search_keyword ul {
903 margin: 0;
904 }
905 .ama-search-widget .header_search_keyword ul li {
906 display: inline-block;
907 margin: 0 3px 0;
908 }
909 .ama-search-widget .header_search_keyword ul li a {
910 display: block;
911 font-size: 13px;
912 padding: 0 19px;
913 border-radius: 45px;
914 background: var(--bbpc_color);
915 color: #fff;
916 font-weight: normal;
917 }
918 .ama-search-widget .header_search_keyword ul li a.header-search-form__keywords-label {
919 color: var(--black_800);
920 }
921 .ama-search-widget .search-box {
922 z-index: 99;
923 position: relative;
924 }
925 .ama-search-widget .search-box svg {
926 position: absolute;
927 right: 8px;
928 top: 49.59999%;
929 transform: translateY(-50%);
930 line-height: 22px;
931 padding: 10px;
932 border-radius: 4px;
933 border-left-color: transparent;
934 box-sizing: border-box;
935 color: var(--bbpc_brand_color);
936 }
937 .ama-search-widget .search-box input#searchInput {
938 border: 0 solid transparent;
939 box-shadow: none;
940 }
941 .ama-search-widget .search-box input {
942 width: 100%;
943 border-radius: 4px;
944 line-height: 35px;
945 text-indent: 15px;
946 padding-right: 43px;
947 }
948 .ama-search-widget .search-box #searchInput + .spinner {
949 position: absolute;
950 right: 45px;
951 top: 50% !important;
952 transform: translateY(-55%);
953 display: none;
954 background: #fff;
955 z-index: 999;
956 }
957 .ama-search-widget .search-box #searchInput + .spinner img {
958 width: 22px;
959 }
960 .ama-search-widget .elementor img {
961 height: auto;
962 max-width: 100%;
963 border: none;
964 border-radius: 0;
965 -webkit-box-shadow: none;
966 box-shadow: none;
967 }
968
969 ul.list-unstyled {
970 padding-left: 0;
971 }
972
973 .ama-search-keyword-wrapper .header_search_keyword ul li a {
974 color: var(--black_600);
975 background: var(--black_50);
976 font-weight: normal;
977 }
978
979 /* ------- Forum & Search -------- */
980 .single-forum-post-widget .post-category img {
981 width: 15px;
982 height: auto;
983 }
984
985 .single-filter-item a {
986 color: var(--black_600);
987 }
988
989 /** === Doc search form result === **/
990 #bbpc-search-result {
991 position: absolute;
992 width: 100%;
993 background: var(--bs-white);
994 font-size: 14px;
995 font-weight: 400;
996 display: none;
997 transition: all 0.4s;
998 margin-top: 2px;
999 border: 1px solid var(--black_50);
1000 border-radius: 4px;
1001 box-shadow: 0 3px 4px 0 rgba(4, 73, 89, 0.06);
1002 padding: 20px 25px;
1003 top: 45px;
1004 }
1005 #bbpc-search-result::before {
1006 content: "";
1007 width: 12px;
1008 height: 12px;
1009 background: var(--bs-white);
1010 position: absolute;
1011 top: -6px;
1012 transform: rotate(45deg);
1013 left: 40px;
1014 border-left: 1px solid var(--black_50);
1015 border-top: 1px solid var(--black_50);
1016 }
1017 #bbpc-search-result .searchbar-tabs {
1018 padding: 0 10px 15px 0;
1019 }
1020 #bbpc-search-result a {
1021 text-decoration: none;
1022 }
1023 #bbpc-search-result.ajax-search {
1024 display: block;
1025 }
1026 #bbpc-search-result .not-found-text,
1027 #bbpc-search-result .bbpc-not-found-text {
1028 display: none;
1029 font-weight: 700;
1030 font-size: 20px;
1031 margin: 12px 0 5px;
1032 letter-spacing: 0.1px;
1033 }
1034
1035 .search-results-tab .bbpc-search-title {
1036 font-size: 16px;
1037 color: var(--h_title);
1038 display: block;
1039 border-bottom: 1px solid var(--black_50);
1040 font-weight: 500;
1041 text-align: left;
1042 padding-left: 8px;
1043 margin: 12px 0 0;
1044 padding-bottom: 8px;
1045 text-transform: capitalize;
1046 }
1047
1048 /*
1049 keywords
1050 */
1051 .bbpc-search-keyword {
1052 display: block;
1053 text-align: center;
1054 margin: 15px 0 5px;
1055 }
1056 .bbpc-search-keyword.left {
1057 text-align: left;
1058 }
1059 .bbpc-search-keyword.right {
1060 text-align: right;
1061 }
1062 .bbpc-search-keyword ul {
1063 list-style: none;
1064 margin: 0 2px;
1065 padding: 0;
1066 display: inline-block;
1067 }
1068 .bbpc-search-keyword ul li {
1069 list-style: none;
1070 margin: 0 2px;
1071 padding: 0;
1072 display: inline-block;
1073 }
1074 .bbpc-search-keyword ul li a {
1075 color: #fff;
1076 background: rgba(2, 1, 1, 0.2117647059);
1077 font-size: 14px;
1078 text-transform: capitalize;
1079 padding: 4px 12px;
1080 border-radius: 15px;
1081 font-weight: 400;
1082 text-decoration: none !important;
1083 }
1084
1085 .bbpc_search_form_wrapper {
1086 position: relative;
1087 }
1088 .bbpc_search_form_wrapper .input-wrapper {
1089 position: relative;
1090 }
1091 .bbpc_search_form_wrapper .input-wrapper .spinner {
1092 position: absolute;
1093 right: 30px;
1094 top: 50%;
1095 transform: translateY(-55%);
1096 display: none;
1097 background: #fff;
1098 z-index: 999;
1099 border-radius: 50%;
1100 height: 21px;
1101 width: 21px;
1102 line-height: 0;
1103 }
1104 .bbpc_search_form_wrapper .input-wrapper .spinner img {
1105 width: 22px;
1106 }
1107 .bbpc_search_form_wrapper .input-wrapper input {
1108 width: 100%;
1109 padding: 0.75em;
1110 }
1111 .bbpc_search_form_wrapper .input-wrapper input::-webkit-search-cancel-button {
1112 -webkit-appearance: auto;
1113 position: absolute;
1114 right: 30px;
1115 }
1116 .bbpc_search_form_wrapper .input-wrapper .submit-btn-left {
1117 position: absolute;
1118 right: 0;
1119 top: 0;
1120 bottom: 0;
1121 display: flex;
1122 margin: auto;
1123 align-items: center;
1124 }
1125 .bbpc_search_form_wrapper .input-wrapper .submit-btn-right {
1126 position: absolute;
1127 left: 0;
1128 top: 2px;
1129 bottom: 2px;
1130 margin: auto;
1131 display: flex;
1132 height: fit-content;
1133 }
1134 .bbpc_search_form_wrapper .input-wrapper button {
1135 background: transparent;
1136 border: none;
1137 outline: none;
1138 cursor: pointer;
1139 padding: 0;
1140 margin: 0;
1141 color: black;
1142 }
1143 .bbpc_search_form_wrapper .input-wrapper button svg {
1144 width: auto;
1145 max-width: 100%;
1146 height: auto;
1147 max-height: 80%;
1148 }
1149 .bbpc_search_form_wrapper .search-result-item {
1150 padding: 10px 15px;
1151 display: flex;
1152 align-items: center;
1153 width: 100%;
1154 flex: 100%;
1155 transition: all 0.3s;
1156 }
1157 .bbpc_search_form_wrapper .search-result-item a {
1158 color: var(--p_color);
1159 }
1160 .bbpc_search_form_wrapper .search-result-item:hover {
1161 background: rgba(143, 187, 237, 0.1);
1162 }
1163
1164 .searchbar-tabs .tab-item {
1165 font-size: 14px;
1166 font-weight: 500;
1167 padding: 11px 8px;
1168 margin-right: 20px;
1169 border: none;
1170 background: 0 0;
1171 color: var(--black_400);
1172 text-transform: capitalize;
1173 cursor: pointer;
1174 }
1175 .searchbar-tabs .tab-item.active {
1176 color: var(--bbpc_brand_color);
1177 border-bottom: 3px solid var(--bbpc_brand_color);
1178 }
1179 .searchbar-tabs .tab-item:hover {
1180 text-decoration: none;
1181 outline: none;
1182 }
1183 .searchbar-tabs .tab-item:focus {
1184 text-decoration: none;
1185 outline: none;
1186 }
1187
1188 .forum-card .forum-card-thumbnail-area {
1189 padding: 0 !important;
1190 }
1191
1192 body.body_dark input#searchInput.input_focused {
1193 background: #fff;
1194 }
1195 body.body_dark .not-found-text, body.body_dark .bbpc-not-found-text {
1196 color: black;
1197 }
1198
1199 /** === Focus Search Form === **/
1200 body.bbpc-search-overlay {
1201 opacity: 1;
1202 visibility: visible;
1203 }
1204
1205 body:not(.bbpc-search-overlay) #bbpc-search-result.ajax-search {
1206 display: none;
1207 }
1208
1209 .bbpc-search-overlay.active {
1210 display: none;
1211 position: fixed;
1212 top: 0;
1213 left: 0;
1214 width: 100%;
1215 height: 100%;
1216 background: rgba(0, 0, 0, 0.4); /* Semi-transparent black overlay */
1217 justify-content: center;
1218 align-items: center;
1219 z-index: 99;
1220 transition: 0.3s all;
1221 }
1222
1223 .forum-with-topics {
1224 border-radius: 30px;
1225 }
1226 .forum-with-topics .thumb-area .forum-thumbnail {
1227 border-radius: 8px 8px 0 0;
1228 width: 100%;
1229 }
1230 .forum-with-topics .thumb-area .forum-thumbnail img {
1231 width: 100%;
1232 z-index: -1;
1233 }
1234 .forum-with-topics .topic-table .topic-heading {
1235 display: flex;
1236 flex-wrap: wrap;
1237 background: var(--bs-white);
1238 box-shadow: 0 20px 60px -5px rgba(51, 77, 114, 0.12);
1239 padding: 16px 30px;
1240 border-radius: 0 0 8px 8px;
1241 border: 1px solid var(--black_50);
1242 }
1243 .forum-with-topics .topic-table .topic-heading .icon-text {
1244 color: var(--black_600);
1245 font-size: 14px;
1246 font-weight: 400;
1247 display: flex;
1248 align-items: center;
1249 }
1250 .forum-with-topics .topic-table .topic-heading .icon-text svg {
1251 margin-right: 5px;
1252 }
1253 .forum-with-topics .topic-table .topic-heading .topic {
1254 width: 54%;
1255 }
1256 .forum-with-topics .topic-table .topic-heading .voice {
1257 width: 13%;
1258 }
1259 .forum-with-topics .topic-table .topic-heading .replies {
1260 width: 8%;
1261 }
1262 .forum-with-topics .topic-table .topic-heading .freshness {
1263 width: 20%;
1264 }
1265 .forum-with-topics .topic-table .topic-contents {
1266 display: flex;
1267 background: var(--bs-white);
1268 box-shadow: 0 1.6px 3.5px 0 rgba(51, 77, 114, 0.1490196078), 0 0.5px 1px 0 rgba(51, 77, 114, 0.1019607843);
1269 margin: 10px 0;
1270 border-radius: 8px;
1271 padding: 16px 30px;
1272 border: 1px solid var(--black_50);
1273 align-items: center;
1274 }
1275 .forum-with-topics .topic-table .topic-contents .title {
1276 width: 50%;
1277 }
1278 .forum-with-topics .topic-table .topic-contents .title:hover a {
1279 text-decoration: none;
1280 }
1281 .forum-with-topics .topic-table .topic-contents .title p {
1282 margin-top: 0;
1283 margin-bottom: 0;
1284 font-size: 15px;
1285 }
1286 .forum-with-topics .topic-table .topic-contents .title h3 {
1287 font-size: 16px;
1288 margin-bottom: 5px;
1289 margin-top: 0;
1290 line-height: 20px;
1291 }
1292 .forum-with-topics .topic-table .topic-contents .title h3:hover {
1293 color: var(--bbpc_brand_color);
1294 }
1295 .forum-with-topics .topic-table .topic-contents .voice {
1296 width: 12%;
1297 }
1298 .forum-with-topics .topic-table .topic-contents .topics {
1299 width: 14%;
1300 }
1301 .forum-with-topics .topic-table .topic-contents .voice,
1302 .forum-with-topics .topic-table .topic-contents .topics {
1303 text-align: center;
1304 }
1305 .forum-with-topics .topic-table .topic-contents .user {
1306 width: 25%;
1307 margin-top: 2px;
1308 }
1309 .forum-with-topics .topic-table .topic-contents .user .user-data {
1310 display: flex;
1311 }
1312 .forum-with-topics .topic-table .topic-contents .user .user-img {
1313 margin-right: 10px;
1314 }
1315 .forum-with-topics .topic-table .topic-contents .user .user-img img {
1316 border-radius: 50%;
1317 }
1318 .forum-with-topics .topic-table .topic-contents .user .user-info span.bbp-author-name {
1319 font-size: 14px;
1320 font-weight: 400;
1321 color: var(--black_800);
1322 letter-spacing: normal;
1323 margin-bottom: 8px;
1324 display: inline-block;
1325 }
1326 .forum-with-topics .topic-table .topic-contents .user .user-info .date {
1327 font-size: 13px;
1328 margin: 0;
1329 line-height: 1.5;
1330 }
1331 .forum-with-topics .topic-table .topic-contents .user .user-info .date a {
1332 color: var(--black_400);
1333 }
1334 .forum-with-topics .topic-table .topic-contents .user .user-info .date a:hover {
1335 color: var(--bbpc_brand_color);
1336 text-decoration: none;
1337 }
1338 .forum-with-topics .topic-table .topic-contents .user .user-info h3 {
1339 line-height: 0.5;
1340 margin: 0;
1341 }
1342 .forum-with-topics .topic-table .topic-contents h3 a {
1343 color: #171D24 !important;
1344 font-size: 16px;
1345 }
1346 .forum-with-topics .topic-table .topic-contents h3 a:hover {
1347 text-decoration: none;
1348 color: var(--bbpc_brand_color) !important;
1349 }
1350 .forum-with-topics .topic-table .topic-contents h3 a:hover span {
1351 color: var(--bbpc_brand_color) !important;
1352 }
1353
1354 .forum-info {
1355 padding: 50px 30px;
1356 }
1357 .forum-info .title-area {
1358 align-items: center;
1359 }
1360 @media all and (max-width: 560px) {
1361 .forum-info .title-area {
1362 margin-top: 10px;
1363 }
1364 }
1365 .forum-info .title-area .title,
1366 .forum-info .title-area .subtitle {
1367 color: #fff;
1368 }
1369 .forum-info .title-area .title {
1370 font-size: 28px;
1371 text-transform: capitalize;
1372 margin: 0;
1373 letter-spacing: normal;
1374 }
1375 @media all and (max-width: 560px) {
1376 .forum-info .title-area .title {
1377 margin-bottom: 4px;
1378 }
1379 }
1380 .forum-info .title-area .subtitle {
1381 font-style: italic;
1382 }
1383
1384 .forum-meta {
1385 display: flex;
1386 position: absolute;
1387 list-style-type: none;
1388 top: 20px;
1389 right: 20px;
1390 margin: 0;
1391 }
1392 .forum-meta li {
1393 display: flex;
1394 margin-right: 10px;
1395 line-height: 1 !important;
1396 border-radius: 3px;
1397 margin-left: 0;
1398 }
1399 .forum-meta li.button {
1400 padding: 0;
1401 }
1402 .forum-meta li.button:hover {
1403 text-decoration: none;
1404 }
1405 .forum-meta li:hover a {
1406 text-decoration: none;
1407 }
1408 .forum-meta li:last-child {
1409 margin-right: 0;
1410 }
1411 .forum-meta .topics,
1412 .forum-meta .replies {
1413 color: #fff;
1414 display: inline-flex;
1415 align-items: center;
1416 background: rgba(255, 255, 255, 0.15);
1417 padding: 8px;
1418 font-size: 14px !important;
1419 margin-top: 0;
1420 }
1421 .forum-meta .topics:hover,
1422 .forum-meta .replies:hover {
1423 background: rgba(255, 255, 255, 0.3);
1424 }
1425 .forum-meta .topics svg,
1426 .forum-meta .replies svg {
1427 margin-right: 5px;
1428 }
1429 .forum-meta .button a {
1430 color: #ffffff;
1431 background: var(--bbpc_brand_color);
1432 padding: 8px 14px;
1433 font-size: 14px !important;
1434 border-radius: 3px;
1435 }
1436 .forum-meta .button a:hover {
1437 background: #085d4c;
1438 }
1439
1440 .forum-card {
1441 background: var(--bs-white);
1442 border-radius: 8px 8px 8px 8px;
1443 border: 1px solid var(--black_50);
1444 overflow: hidden;
1445 }
1446 .forum-card .card-body {
1447 padding: 25px;
1448 }
1449 .forum-card .card-body p {
1450 margin-bottom: 0;
1451 }
1452 .forum-card .card-title h3 {
1453 font-size: 18px;
1454 margin-bottom: 5px;
1455 margin-top: unset;
1456 }
1457 .forum-card .card-title h3:hover a {
1458 color: #0b589d;
1459 }
1460 .forum-card .card-title a {
1461 text-decoration: none;
1462 }
1463 .forum-card .forum-card-thumbnail-area {
1464 position: relative;
1465 border-radius: 30px 30px 0 0;
1466 padding: 10px 25px;
1467 }
1468 .forum-card .forum-card-thumbnail-area img {
1469 width: auto;
1470 }
1471 .forum-card .forum-meta {
1472 display: flex;
1473 position: absolute;
1474 bottom: 0;
1475 right: 20px;
1476 top: auto;
1477 margin-bottom: 20px;
1478 }
1479 .forum-card .forum-meta .topics, .forum-card .forum-meta .replies {
1480 background: rgba(23, 29, 36, 0.7);
1481 }
1482 .forum-card .forum-meta .topics:hover, .forum-card .forum-meta .replies:hover {
1483 background: rgba(23, 29, 36, 0.8);
1484 }
1485
1486 @media all and (max-width: 560px) {
1487 .topic-contents .voice,
1488 .topic-contents .topics,
1489 .topic-contents .user {
1490 display: none;
1491 }
1492 .topic-table .topic-heading .voice,
1493 .topic-table .topic-heading .replies,
1494 .topic-table .topic-heading .freshness {
1495 display: none !important;
1496 }
1497 .topic-table .topic-heading .topic,
1498 .topic-table .topic-contents .title {
1499 width: 100% !important;
1500 }
1501 }
1502 .home-forum-counter .elementor-element-populated {
1503 background-color: var(--bs-white);
1504 }
1505 .home-forum-counter .elementor-element-populated .elementor-counter-number {
1506 color: var(--black_900);
1507 }
1508
1509 .home-forum-posts .elementor-post__card {
1510 background-color: var(--bs-white) !important;
1511 }
1512 .home-forum-posts .elementor-post__card .elementor-post__title a {
1513 color: var(--black_900);
1514 }
1515
1516 .card {
1517 position: relative;
1518 display: flex;
1519 flex-direction: column;
1520 }
1521
1522 body.body_dark .forum-with-topics .topic-table .topic-contents h3 a {
1523 color: #fff !important;
1524 }
1525 body.body_dark .forum-with-topics .topic-table .topic-contents h3 a:hover {
1526 color: var(--bbpc_brand_color) !important;
1527 }
1528 body.body_dark .forum-with-topics .topic-table .topic-contents .title p {
1529 color: var(--black_400);
1530 }
1531 body.body_dark .forum-with-topics .forum-card .card-body .card-title h3 a {
1532 color: #fff !important;
1533 }
1534 body.body_dark .forum-with-topics .forum-card .card-body .card-title h3 a:hover {
1535 color: var(--bbpc_brand_color) !important;
1536 }
1537 body.body_dark .forum-with-topics .forum-card .card-body:not(.card-title) {
1538 color: var(--black_400);
1539 }
1540
1541 .single-forum-post-widget {
1542 box-shadow: 0 1.6px 3.5px 0 rgba(51, 77, 114, 0.1490196078), 0 0.5px 1px 0 rgba(51, 77, 114, 0.1019607843);
1543 border-radius: 10px;
1544 background-color: var(--bs-white);
1545 transition: all 0.3s ease-out;
1546 padding: 22px 35px 18px 30px;
1547 display: flex;
1548 align-items: center;
1549 justify-content: space-between;
1550 margin-top: 10px;
1551 }
1552 .single-forum-post-widget:first-child {
1553 margin-top: 0;
1554 }
1555 .single-forum-post-widget:hover {
1556 box-shadow: 0 20px 45px 0 rgba(51, 77, 114, 0.1490196078);
1557 transform: translateX(2px);
1558 }
1559 .single-forum-post-widget:hover .post-title h6 a {
1560 color: var(--bbpc_brand_color);
1561 }
1562 .single-forum-post-widget .post-title {
1563 margin-bottom: 15px;
1564 }
1565 .single-forum-post-widget .post-title h6 {
1566 margin-bottom: 0;
1567 line-height: 22px;
1568 font-size: 16px;
1569 font-weight: 500;
1570 text-transform: capitalize;
1571 }
1572 .single-forum-post-widget .post-title h6 a {
1573 color: #171d24;
1574 font-size: 18px;
1575 }
1576 .single-forum-post-widget .post-title h6 a:hover {
1577 text-decoration: none;
1578 }
1579 .single-forum-post-widget .post-title i {
1580 font-size: 15px;
1581 color: #2ed83f;
1582 vertical-align: middle;
1583 margin-left: 6px;
1584 }
1585 .single-forum-post-widget .post-info {
1586 display: flex;
1587 flex-wrap: wrap;
1588 margin-bottom: 5px;
1589 }
1590 .single-forum-post-widget .post-info > div {
1591 margin-right: 15px;
1592 display: flex;
1593 color: var(--black_600);
1594 font-size: 14px;
1595 font-weight: 400;
1596 line-height: 16px;
1597 }
1598 .single-forum-post-widget .post-info > div img {
1599 margin-right: 5px;
1600 height: 15px;
1601 width: 15px;
1602 }
1603 .single-forum-post-widget .post-info > div a {
1604 color: #545454;
1605 }
1606 .single-forum-post-widget .post-tags {
1607 display: flex;
1608 }
1609 .single-forum-post-widget .post-tags .single-tag {
1610 padding: 3px 9.5px;
1611 border-radius: 3px;
1612 font-size: 12px;
1613 font-weight: 400;
1614 line-height: 14px;
1615 color: #fff;
1616 margin: 12px 10px 0 0;
1617 }
1618 .single-forum-post-widget .post-tags .single-tag:last-child {
1619 margin-right: 0;
1620 }
1621 .single-forum-post-widget .post-tags .single-tag.tag-jq {
1622 background-color: #f7ab40;
1623 }
1624 .single-forum-post-widget .post-tags .single-tag.tag-php {
1625 background-color: #7543e0;
1626 }
1627 .single-forum-post-widget .post-tags .single-tag.tag-wp {
1628 background-color: #6078ce;
1629 }
1630 .single-forum-post-widget .post-tags .single-tag.tag-js {
1631 background-color: #ff7245;
1632 }
1633 .single-forum-post-widget .post-tags .single-tag.tag-dvlp {
1634 background-color: #48a6ea;
1635 }
1636 .single-forum-post-widget .post-tags .single-tag.tag-ecmrc {
1637 background-color: #333333;
1638 }
1639 .single-forum-post-widget .post-tags .single-tag.tag-foram {
1640 background-color: var(--bbpc_brand_color);
1641 }
1642 .single-forum-post-widget .post-tags .single-tag.tag-hlp {
1643 background-color: #2c53df;
1644 }
1645 .single-forum-post-widget .post-tags .single-tag.tag-sprt {
1646 background-color: #0cc72a;
1647 }
1648 .single-forum-post-widget .post-reach {
1649 border-left: 1px solid var(--black_50);
1650 padding-left: 15px;
1651 }
1652 .single-forum-post-widget .post-reach > div {
1653 font-size: 12px;
1654 font-weight: 400;
1655 line-height: 14px;
1656 color: #848d95;
1657 margin-top: 10px;
1658 display: flex;
1659 align-items: center;
1660 }
1661 .single-forum-post-widget .post-reach > div:first-child {
1662 margin-top: 0;
1663 }
1664 .single-forum-post-widget .post-reach > div img {
1665 margin-right: 5px;
1666 }
1667
1668 .community-area .nav-tabs {
1669 border-bottom: 1px solid var(--black_50);
1670 }
1671 .community-area .nav-tabs .nav-item:hover button {
1672 color: var(--bbpc_brand_color);
1673 }
1674 .community-area .nav-tabs .nav-item button {
1675 background-color: transparent;
1676 font-size: 16px;
1677 font-weight: 400;
1678 line-height: 26px;
1679 color: #535a60;
1680 padding: 10px 0;
1681 margin-right: 30px;
1682 border: none;
1683 border-bottom: 2px solid transparent;
1684 cursor: pointer;
1685 }
1686 .community-area .nav-tabs .nav-item button.active {
1687 border-bottom-color: var(--bbpc_brand_color);
1688 color: #171d24;
1689 font-weight: 500;
1690 }
1691 .community-area .sec-btn-blue {
1692 border-radius: 26px;
1693 border: 1px solid rgba(74, 110, 224, 0.4);
1694 color: #4a6ee0;
1695 background-color: transparent;
1696 font-weight: 700;
1697 font-size: 16px;
1698 padding: 10px 37px;
1699 }
1700 .community-area .sec-btn-blue:hover {
1701 background-color: #4a6ee0;
1702 color: #fff;
1703 box-shadow: none;
1704 }
1705
1706 .community-topic-widget-box {
1707 box-shadow: 0 1.6px 3.5px 0 rgba(51, 77, 114, 0.1490196078), 0 0.5px 1px 0 rgba(51, 77, 114, 0.1019607843);
1708 border-radius: 10px;
1709 display: flex;
1710 padding: 40px;
1711 transition: all 0.3s ease-out;
1712 background-color: var(--bs-white);
1713 }
1714 .community-topic-widget-box:hover {
1715 box-shadow: 0 20px 45px 0 rgba(51, 77, 114, 0.1490196078);
1716 }
1717 .community-topic-widget-box img {
1718 margin-right: 24px;
1719 max-width: 48px;
1720 }
1721 .community-topic-widget-box h5 {
1722 font-size: 18px;
1723 font-weight: 500;
1724 line-height: 21px;
1725 color: #171d24;
1726 margin-bottom: 5px;
1727 margin-top: 0;
1728 text-transform: capitalize;
1729 }
1730 .community-topic-widget-box h5:hover a {
1731 color: var(--bbpc_brand_color);
1732 text-decoration: none;
1733 }
1734 .community-topic-widget-box span {
1735 font-size: 14px;
1736 font-weight: 400;
1737 line-height: 22px;
1738 color: #6a737c;
1739 display: inline-block;
1740 }
1741 .community-topic-widget-box span:nth-child(2) {
1742 padding-right: 8px;
1743 }
1744 .community-topic-widget-box span:nth-child(4) {
1745 padding-left: 8px;
1746 }
1747 .community-topic-widget-box span.vr-line {
1748 color: var(--black_75);
1749 }
1750
1751 .nav {
1752 display: flex;
1753 flex-wrap: wrap;
1754 padding-left: 0;
1755 margin-bottom: 0;
1756 list-style: none;
1757 margin-left: 0;
1758 }
1759
1760 .bbpc-community-topic-widget-main-wrapper {
1761 --bs-gutter-x: 1.5rem;
1762 --bs-gutter-y: 0;
1763 display: grid;
1764 grid-template-columns: repeat(3, 1fr);
1765 grid-gap: 20px;
1766 }
1767 .bbpc-community-topic-widget-main-wrapper .bbpc-community-topic-widget-wrapper {
1768 display: contents;
1769 }
1770 @media (max-width: 1024px) {
1771 .bbpc-community-topic-widget-main-wrapper {
1772 grid-template-columns: repeat(2, 1fr);
1773 }
1774 }
1775 @media (max-width: 768px) {
1776 .bbpc-community-topic-widget-main-wrapper {
1777 grid-template-columns: repeat(1, 1fr);
1778 }
1779 }
1780
1781 .bbpc-show-more-btn-wrapper {
1782 width: 100%;
1783 text-align: center;
1784 }
1785 .bbpc-show-more-btn-wrapper .show-more-btn {
1786 display: inline-block;
1787 box-shadow: 0 1.6px 3.5px 0 rgba(51, 77, 114, 0.1490196078), 0 0.5px 1px 0 rgba(51, 77, 114, 0.1019607843);
1788 transition: all 0.3s ease-out;
1789 font-size: 18px;
1790 font-weight: 400;
1791 color: #4a6ee0;
1792 height: 50px;
1793 border-radius: 5px;
1794 line-height: 48px;
1795 padding: 0 40px;
1796 text-align: center;
1797 background-color: var(--bs-white);
1798 margin-top: 50px;
1799 }
1800 .bbpc-show-more-btn-wrapper .show-more-btn:hover {
1801 box-shadow: 0 10px 30px 0 rgba(51, 77, 114, 0.1215686275);
1802 color: #4a6ee0;
1803 }
1804 .bbpc-show-more-btn-wrapper .show-more-btn i {
1805 color: #4a6ee0;
1806 vertical-align: middle;
1807 }
1808 .bbpc-show-more-btn-wrapper .show-more-btn.show-more-round {
1809 height: 48px;
1810 border-radius: 24px;
1811 line-height: 47px;
1812 }
1813 .bbpc-show-more-btn-wrapper .show-more-btn:hover {
1814 text-decoration: none;
1815 }
1816
1817 /*------- Forum Tab widget tags --------*/
1818 .single-forum-post-widget .post-tags a {
1819 font-weight: 400;
1820 line-height: 14px;
1821 font-size: 12px;
1822 padding: 3px 10px;
1823 background: #6078ce;
1824 margin: 12px 10px 0 0;
1825 border-radius: 3px;
1826 color: #fff;
1827 text-decoration: none;
1828 }
1829 .single-forum-post-widget .post-tags a:hover {
1830 background: #4766d5;
1831 }
1832
1833 .tab-content {
1834 padding-top: 40px;
1835 }
1836 .tab-content .tab {
1837 display: none;
1838 }
1839 .tab-content.active {
1840 display: block;
1841 }
1842
1843 .community-area .tab-content:not(.active) {
1844 display: none;
1845 }
1846
1847 .alert-warning {
1848 color: #664d03;
1849 background-color: #fff3cd;
1850 border-color: #ffecb5;
1851 }
1852
1853 .alert {
1854 position: relative;
1855 padding: 1rem 1rem;
1856 margin-bottom: 1rem;
1857 border: 1px solid transparent;
1858 border-radius: 0.25rem;
1859 }
1860
1861 .dbl-arrow-upper {
1862 display: inline-block;
1863 }
1864 .dbl-arrow-upper .arrow-cont {
1865 cursor: pointer;
1866 position: relative;
1867 display: inline-block;
1868 height: 24px;
1869 width: 20px;
1870 margin-right: 3px;
1871 }
1872 .dbl-arrow-upper .arrow-cont svg {
1873 position: absolute;
1874 bottom: 0;
1875 margin-left: 0;
1876 background-size: contain;
1877 top: 8px;
1878 left: 0;
1879 }
1880 .dbl-arrow-upper .arrow-cont .second {
1881 margin-top: 5px;
1882 }
1883 .dbl-arrow-upper:hover svg {
1884 animation-name: bounceAlphaUp;
1885 animation-duration: 1.4s;
1886 animation-iteration-count: infinite;
1887 animation-timing-function: linear;
1888 }
1889 .dbl-arrow-upper:hover svg.first {
1890 animation-name: bounceAlphaUp;
1891 animation-duration: 1.4s;
1892 animation-delay: 0.2s;
1893 animation-iteration-count: infinite;
1894 animation-timing-function: linear;
1895 }
1896
1897 @keyframes bounceAlphaUp {
1898 0% {
1899 opacity: 1;
1900 transform: translateY(0) scale(1);
1901 }
1902 25% {
1903 opacity: 0;
1904 transform: translateY(10px) scale(0.9);
1905 }
1906 26% {
1907 opacity: 0;
1908 transform: translateY(-10px) scale(0.9);
1909 }
1910 55% {
1911 opacity: 1;
1912 transform: translateY(0) scale(1);
1913 }
1914 }
1915
1916 /*# sourceMappingURL=el-widgets.css.map */
1917