PluginProbe
Forumax – AI Powered Advanced Community Forum Plugin / 1.3.2
Forumax – AI Powered Advanced Community Forum Plugin v1.3.2
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 / admin / css / admin-ui-style.css

admin-ui-style.css in Forumax – AI Powered Advanced Community Forum Plugin 1.3.2, at assets/admin/css/admin-ui-style.css

2,076 lines 42.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /**
2 * Convert font-size from px to rem with px fallback
3 *
4 * @param $size - the value in pixel you want to convert
5 *
6 * e.g. p font-size: fs-rem(12px);
7 * e.g. p {@include fontSize(12px);}
8 *
9 */
10 /*--------------------------------------
11 - Base
12 ----------------------------------------*/
13 /**
14 * Convert font-size from px to rem with px fallback
15 *
16 * @param $size - the value in pixel you want to convert
17 *
18 * e.g. p {@include fontSize(12px);}
19 *
20 */
21 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
22 .col {
23 position: relative;
24 width: 100%;
25 padding-right: 15px;
26 padding-left: 15px;
27 }
28
29 /*--------------------------------------
30 - Utilities
31 ----------------------------------------*/
32 :root {
33 --container-width: 100%;
34 --container-sm: 33.75rem;
35 --container-md: 45rem;
36 --container-lg: 60rem;
37 --container-xl: 71.25rem;
38 --container-xxl: 90rem;
39 --container-fluid: 100%;
40 --gutter-x: 1.875rem;
41 --gutter-3: 0.125rem;
42 --gutter-5: 0.225rem;
43 --gutter-10: 0.625rem;
44 --gutter-15: 0.9375rem;
45 --gutter-20: 1.25rem;
46 --gutter-25: 1.5625rem;
47 --gutter-30: 1.875rem;
48 --gutter-32: 2rem;
49 --gutter-35: 2.1875rem;
50 --gutter-40: 2.5rem;
51 --gutter-45: 2.8125rem;
52 --gutter-50: 3.125rem;
53 --ff-roboto: "Roboto", sans-serif;
54 --fw-100: 100;
55 --fw-200: 200;
56 --fw-300: 300;
57 --fw-400: 400;
58 --fw-500: 500;
59 --fw-600: 600;
60 --fw-700: 700;
61 --fw-800: 800;
62 --fw-900: 900;
63 --fs-12: 0.75rem;
64 --fs-13: 0.8125rem;
65 --fs-14: 0.875rem;
66 --fs-15: 0.9375rem;
67 --fs-16: 1rem;
68 --fs-17: 1.0625rem;
69 --fs-18: 1.125rem;
70 --fs-20: 1.25rem;
71 --fs-21: 1.3125rem;
72 --fs-24: 1.5rem;
73 --fs-25: 1.5625rem;
74 --fs-28: 1.75rem;
75 --fs-30: 1.875rem;
76 --fs-32: 2rem;
77 --fs-35: 2.1875rem;
78 --fs-40: 2.5rem;
79 --fs-45: 2.8125rem;
80 --hr-bg: var(--clr-black);
81 --hr-width: 100%;
82 --hr-height: 0.3125rem;
83 --hr-gutter-y: 1.875rem;
84 --hr-gutter-x: 0;
85 --hr-padding: 0;
86 --hr-radius: 0;
87 --m: 0;
88 --mt: 0;
89 --mr: 0;
90 --mb: 0;
91 --ml: 0;
92 --mx: 0;
93 --my: 0;
94 --m-auto: auto;
95 --my-auto: auto;
96 --mx-auto: auto;
97 --p: 0;
98 --pt: 0;
99 --pr: 0;
100 --pb: 0;
101 --pl: 0;
102 --px: 0;
103 --py: 0;
104 --p-auto: auto;
105 --py-auto: auto;
106 --px-auto: auto;
107 --border-width: 0.0625rem;
108 --border-style: solid;
109 --border-clr: transparent;
110 --border: var(--border-width) var(--border-style) var(--border-clr);
111 --border-t: var(--border-width) var(--border-style) var(--border-clr);
112 --border-r: var(--border-width) var(--border-style) var(--border-clr);
113 --border-b: var(--border-width) var(--border-style) var(--border-clr);
114 --border-l: var(--border-width) var(--border-style) var(--border-clr);
115 --border-x: var(--border-width) var(--border-style) var(--border-clr);
116 --border-y: var(--border-width) var(--border-style) var(--border-clr);
117 --radius: 0;
118 --radius-t: 0;
119 --radius-r: 0;
120 --radius-b: 0;
121 --radius-l: 0;
122 --radius-full: 50%;
123 --btn-bg: transparent;
124 --btn-clr: inherit;
125 --btn-ff: var(--ff-roboto);
126 --btn-fs: var(--fs-15);
127 --btn-py: 0.625rem;
128 --btn-px: 1.125rem;
129 --btn-my: var(--my);
130 --btn-mx: var(--mx);
131 --clr-black: #000;
132 --clr-black-100: #0D0E2B;
133 --clr-dark: #252733;
134 --clr-text: #575766;
135 --clr-text-light: #9199A1;
136 --clr-white: #fff;
137 --clr-blue: #4C4CF1;
138 --clr-orange: #ff5a46;
139 --clr-yellow: #FFE132;
140 --black_50: #ebebeb;
141 --black_100: #d6d9dc;
142 --black_150: #c8ccd0;
143 --black_200: #bbc0c4;
144 --black_300: #9fa6ad;
145 --black_350: #9199a1;
146 --black_400: #848d95;
147 --black_500: #6a737c;
148 --black_600: #535a60;
149 --black_700: #3c4146;
150 --black_750: #2f3337;
151 --black_800: #242729;
152 --black_900: #0c0d0e;
153 }
154
155 /* Box sizing rules */
156 *,
157 *::before,
158 *::after {
159 box-sizing: border-box;
160 }
161
162 /* Remove default margin */
163 body,
164 h1,
165 h2,
166 h3,
167 h4,
168 p,
169 figure,
170 blockquote,
171 dl,
172 dd {
173 margin: 0;
174 }
175
176 /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
177 ul[role=list],
178 ol[role=list] {
179 list-style: none;
180 }
181
182 /* Set core root defaults */
183 html:focus-within {
184 scroll-behavior: smooth;
185 }
186
187 /* Set core body defaults */
188 body {
189 font-family: var(--ff-roboto);
190 font-weight: 400;
191 font-size: var(--fs-15);
192 line-height: 1.5625rem;
193 text-rendering: optimizeSpeed;
194 color: var(--clr-black);
195 }
196
197 /* A elements that don't have a class get default styles */
198 a:not([class]) {
199 text-decoration-skip-ink: auto;
200 }
201
202 /* Make images easier to work with */
203 img,
204 picture {
205 max-width: 100%;
206 display: block;
207 }
208
209 /* Inherit fonts for inputs and buttons */
210 input,
211 button,
212 textarea,
213 select {
214 font: inherit;
215 }
216
217 button {
218 border: none;
219 background: transparent;
220 outline: none;
221 cursor: pointer;
222 }
223
224 .hr {
225 background: var(--clr-black-200);
226 width: 100%;
227 height: 1px;
228 margin: 50px 0;
229 padding: 0;
230 border: none;
231 border-radius: 0;
232 opacity: 1;
233 }
234
235 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
236 @media (prefers-reduced-motion: reduce) {
237 html:focus-within {
238 scroll-behavior: auto;
239 }
240 *,
241 *::before,
242 *::after {
243 animation-duration: 0.01ms !important;
244 animation-iteration-count: 1 !important;
245 transition-duration: 0.01ms !important;
246 scroll-behavior: auto !important;
247 }
248 }
249 .fill-current {
250 fill: currentColor;
251 }
252
253 .scrollToTop {
254 width: 30px;
255 height: 30px;
256 line-height: 30px;
257 text-align: center;
258 color: var(--clr-blue);
259 font-size: 25px;
260 background: transparent;
261 position: fixed;
262 right: 20px;
263 bottom: 50px;
264 display: none;
265 z-index: 99999;
266 border-radius: 50%;
267 }
268 @media screen and (min-width: 576px) {
269 .scrollToTop {
270 width: 50px;
271 height: 50px;
272 line-height: 50px;
273 }
274 }
275 .scrollToTop:hover {
276 color: var(--clr-blue);
277 }
278
279 .no-scroll-y {
280 overflow-y: hidden;
281 }
282
283 .text-blue {
284 color: var(--clr-blue);
285 }
286
287 .green {
288 color: #27ae60;
289 }
290
291 .red {
292 color: #e74c3c;
293 }
294
295 h1,
296 h2,
297 h3,
298 h4,
299 h5,
300 h6 {
301 font-family: var(--ff-roboto);
302 color: #14183E;
303 line-height: 1.4;
304 }
305
306 h1 a,
307 h2 a,
308 h3 a,
309 h4 a,
310 h5 a,
311 h6 a {
312 color: inherit;
313 }
314
315 h1 {
316 font-size: 2rem;
317 }
318 @media screen and (min-width: 20rem) {
319 h1 {
320 font-size: calc(2rem + 1.75 * (100vw - 20rem) / 55);
321 }
322 }
323 @media screen and (min-width: 75rem) {
324 h1 {
325 font-size: 3.75rem;
326 }
327 }
328
329 h2 {
330 font-size: 2rem;
331 }
332 @media screen and (min-width: 20rem) {
333 h2 {
334 font-size: calc(2rem + 1 * (100vw - 20rem) / 55);
335 }
336 }
337 @media screen and (min-width: 75rem) {
338 h2 {
339 font-size: 3rem;
340 }
341 }
342
343 h3 {
344 font-size: 1.375rem;
345 }
346 @media screen and (min-width: 20rem) {
347 h3 {
348 font-size: calc(1.375rem + 0.125 * (100vw - 20rem) / 55);
349 }
350 }
351 @media screen and (min-width: 75rem) {
352 h3 {
353 font-size: 1.5rem;
354 }
355 }
356
357 h4 {
358 font-size: 1rem;
359 }
360 @media screen and (min-width: 20rem) {
361 h4 {
362 font-size: calc(1rem + 0.125 * (100vw - 20rem) / 55);
363 }
364 }
365 @media screen and (min-width: 75rem) {
366 h4 {
367 font-size: 1.125rem;
368 }
369 }
370
371 ul {
372 margin: 0;
373 padding: 0;
374 }
375
376 li {
377 list-style: none;
378 }
379
380 hr {
381 background: #c2cfff;
382 width: 50px;
383 height: 3px;
384 margin: 35px 0;
385 padding: 0;
386 border: none;
387 }
388 @media screen and (min-width: 768px) {
389 hr {
390 margin-top: 25px;
391 margin-bottom: 25px;
392 }
393 }
394
395 p {
396 margin: 0;
397 }
398
399 label {
400 color: var(--clr-black);
401 cursor: pointer;
402 font-size: 14px;
403 font-weight: 400;
404 }
405
406 /*Home 3 Default Font Family*/
407 .home-3 {
408 font-size: var(--fs-15);
409 font-weight: var(--fw-400);
410 color: var(--clr-black);
411 font-family: var(--font-quicksand);
412 }
413
414 /*Home 3 Default Font Family*/
415 .home-4 {
416 font-size: var(--fs-15);
417 font-weight: var(--fw-400);
418 font-family: var(--font-arimo);
419 }
420
421 .alignment-center {
422 align-items: center;
423 }
424
425 .justify-content-between {
426 justify-content: space-between;
427 }
428
429 .justify-content-end {
430 justify-content: end;
431 }
432
433 /*--------------------------------------
434 - Color
435 ----------------------------------------*/
436 .color {
437 color: var(--clr-black);
438 }
439
440 .text-black {
441 color: var(--clr-black) !important;
442 }
443
444 .bg-black {
445 background: var(--clr-black);
446 }
447
448 .text-white {
449 color: var(--clr-white) !important;
450 }
451
452 .bg-white {
453 background: var(--clr-white);
454 }
455
456 .d-block {
457 display: block;
458 }
459
460 .d-inline-block {
461 display: inline-block;
462 }
463
464 .d-grid {
465 display: grid;
466 }
467
468 .d-flex {
469 display: flex;
470 }
471
472 .flex-row {
473 flex-direction: row;
474 }
475
476 .flex-reverse {
477 flex-direction: row-reverse;
478 }
479
480 .flex-column {
481 flex-direction: column;
482 }
483
484 .flex-column-reverse {
485 flex-direction: column-reverse;
486 }
487
488 /*--
489 - Font Famaly
490 -----------------------------------------*/
491 /*--
492 - Font weight
493 -----------------------------------------*/
494 .font-regular {
495 font-weight: var(--fw-400);
496 }
497
498 .font-medium {
499 font-weight: var(--fw-500);
500 }
501
502 .font-semi-bold {
503 font-weight: var(--fw-600);
504 }
505
506 .font-bold {
507 font-weight: var(--fw-700);
508 }
509
510 .font-black {
511 font-weight: var(--fw-900);
512 }
513
514 /*--
515 - Font Size
516 -----------------------------------------*/
517 /*--
518 - Margin
519 -------------------------------------------*/
520 .mt-n3 {
521 margin-top: -0.4375rem;
522 }
523
524 .mt-n4 {
525 margin-top: -0.75rem;
526 }
527
528 .m-auto {
529 margin: auto;
530 }
531
532 .mx-auto {
533 margin-left: auto;
534 margin-right: auto;
535 }
536
537 .mt-0 {
538 margin-top: 0;
539 }
540
541 .mt-73 {
542 margin-top: 4.5625rem;
543 }
544
545 .mb-8 {
546 margin-bottom: 2rem;
547 }
548
549 .mr-1 {
550 margin-right: 0.25rem;
551 }
552
553 @media (min-width: 768px) {
554 .mt-md-n4 {
555 margin-top: -0.75rem;
556 }
557 }
558
559 .mt-40 {
560 margin-top: 40px;
561 }
562
563 /*---
564 -- Padding
565 -------------------------------------------*/
566 /*----------------------------------------*/
567 /* Component CSS
568 /*----------------------------------------*/
569 .easydocs-accordion {
570 position: relative;
571 padding: 0;
572 list-style: none;
573 margin: 10px 0 20px;
574 background: var(--clr-white);
575 border-radius: 5px;
576 overflow: hidden;
577 border: 1px solid #edeae9;
578 }
579 .easydocs-accordion .acc_active .accordion-title {
580 border-bottom: 1px solid #edeae9;
581 }
582 .easydocs-accordion .acc_active .accordion-title::before {
583 transform: translateY(-50%) rotate(90deg);
584 }
585 .easydocs-accordion .ui-state-highlight {
586 height: 50px;
587 background: #f9f9f9;
588 border-top: 1px solid #afabac;
589 border-bottom: 1px solid #afabac;
590 }
591
592 .easydocs-accordion-item {
593 width: 100%;
594 margin: 0;
595 }
596 .easydocs-accordion-item + .easydocs-accordion-item {
597 border-top: 1px solid #edeae9;
598 }
599 .easydocs-accordion-item.is-accordion-open:last-child .accordion-title {
600 border-bottom-left-radius: 0;
601 border-bottom-right-radius: 0;
602 }
603 .easydocs-accordion-item.child-one .child-right-content {
604 align-items: center;
605 }
606 .easydocs-accordion-item.child-one .child-right-content .progress-text {
607 font-size: var(--fs-12);
608 color: var(--clr-text-light);
609 margin-right: var(--gutter-30);
610 }
611 .easydocs-accordion-item.child-one .accordion-title::before {
612 transform: translateY(-50%);
613 }
614 .easydocs-accordion-item.child-one.acc_active .accordion-title::before {
615 transform: translateY(-50%) rotate(90deg);
616 }
617 .easydocs-accordion-item.child-one a {
618 padding: 0;
619 }
620 .easydocs-accordion-item.child-one .accordion-title.has-child a.section-last-label {
621 margin-left: 19px;
622 }
623 .easydocs-accordion-item.child-one .accordion-title.has-child::before {
624 left: 52px;
625 }
626 .easydocs-accordion-item.child-one .nesting-accordion a.child-last-label {
627 margin: 10px 50px 10px 70px;
628 }
629
630 .accordion-title {
631 position: relative;
632 background: #fff;
633 padding: 13px 30px 13px 30px;
634 cursor: pointer;
635 display: flex;
636 align-items: center;
637 justify-content: space-between;
638 }
639 @media (max-width: 1440px) {
640 .accordion-title {
641 padding: 12px 20px 12px 34px;
642 }
643 }
644 .accordion-title.ez-section-title h4 {
645 font-weight: var(--fw-500);
646 }
647 @media (max-width: 1440px) {
648 .accordion-title.ez-section-title::before {
649 left: 20px;
650 }
651 }
652 .accordion-title.has-child::before {
653 content: "";
654 top: 50%;
655 left: 32px;
656 position: absolute;
657 width: 0;
658 height: 0;
659 border-style: solid;
660 border-width: 5px 0 5px 6px;
661 border-color: transparent transparent transparent var(--clr-text);
662 display: block;
663 transform: translateY(-50%);
664 -webkit-transition: 0.3s ease-out;
665 transition: 0.3s ease-out;
666 }
667 @media (max-width: 1440px) {
668 .accordion-title.has-child::before {
669 left: 20px;
670 }
671 }
672 .accordion-title .count {
673 margin-left: 5px;
674 color: #fff;
675 background: var(--black_200);
676 }
677 .accordion-title ul.actions {
678 display: flex;
679 }
680 .accordion-title ul.actions li {
681 margin: 0;
682 }
683 .accordion-title:hover {
684 background: #f9f9f9;
685 }
686 .accordion-title:hover h4 {
687 color: var(--clr-dark);
688 }
689 .accordion-title:hover ul.actions {
690 display: flex;
691 }
692 .accordion-title:hover ul.actions li {
693 margin: 0;
694 line-height: normal;
695 }
696 .accordion-title h4 {
697 font-size: var(--fs-14);
698 color: var(--clr-text);
699 display: flex;
700 align-items: center;
701 font-weight: normal;
702 }
703 .accordion-title h4 a {
704 text-decoration: none;
705 }
706 .accordion-title .accordion-category-icon {
707 width: 1.25rem;
708 height: 1.25rem;
709 line-height: 1.25rem;
710 border-radius: 50%;
711 text-align: center;
712 margin-left: 5px;
713 }
714 .accordion-title .light-green {
715 background: rgba(45, 178, 45, 0.1);
716 --category-icon: #2db22d;
717 }
718 .accordion-title .light-orange {
719 background: rgba(204, 128, 51, 0.1);
720 --category-icon: #cc8033;
721 }
722 .accordion-title .light-blue {
723 background: rgba(2, 117, 216, 0.1);
724 --category-icon: var(--clr-blue);
725 }
726 .accordion-title .light-gray {
727 background: rgba(66, 66, 66, 0.1);
728 --category-icon: #424242;
729 }
730 .accordion-title ul.actions {
731 display: none;
732 align-items: center;
733 gap: var(--gutter-10);
734 --section-icon: #9199a1;
735 margin-left: 15px;
736 }
737 .accordion-title ul.actions .duplicate {
738 order: 1;
739 }
740 .accordion-title ul.actions .delete {
741 order: 2;
742 }
743 .accordion-title ul.actions li:hover {
744 --section-icon: var(--clr-dark);
745 }
746 .accordion-title ul.actions li a {
747 text-decoration: none;
748 }
749 .accordion-title ul.actions li a .dashicons {
750 color: var(--black_150);
751 font-size: 18px;
752 padding-top: 3px;
753 }
754 .accordion-title ul.actions li a .dashicons:hover {
755 color: var(--black_400);
756 }
757 .accordion-title ul.actions li a img {
758 opacity: 0.5;
759 }
760 .accordion-title ul.actions li a img:hover {
761 opacity: 1;
762 }
763 .accordion-title ul.actions li a.st-pro-notice .dashicons {
764 color: #f1bd6c;
765 }
766 .accordion-title .left-content {
767 display: flex;
768 align-items: center;
769 }
770 .accordion-title .left-content .topic-status {
771 width: 30px;
772 height: 20px;
773 text-align: left;
774 margin-right: 5px;
775 }
776 .accordion-title .right-content {
777 display: flex;
778 align-items: center;
779 }
780 .accordion-title .right-content .progress-text {
781 font-size: var(--fs-12);
782 color: var(--clr-text-light);
783 margin-left: var(--gutter-30);
784 }
785
786 .easydocs-accordion-body {
787 background: var(--clr-white);
788 color: var(--clr-text);
789 font-size: var(--fs-14);
790 padding: 10px 50px 10px 50px;
791 }
792
793 .nesting-accordion {
794 padding: 0;
795 }
796 .nesting-accordion a {
797 text-decoration: none;
798 }
799
800 .child-docs-wrap {
801 border-bottom: 1px solid #edeae9;
802 }
803 .child-docs-wrap:hover {
804 background-color: #f9f9f9;
805 }
806 .child-docs-wrap .child-right-content {
807 visibility: hidden;
808 }
809 .child-docs-wrap:hover .child-right-content {
810 visibility: visible;
811 }
812
813 a.child-delete,
814 a.child-view-link {
815 padding-left: 5px !important;
816 padding-right: 5px !important;
817 }
818 a.child-delete img,
819 a.child-view-link img {
820 opacity: 0.5;
821 }
822 a.child-delete img:hover,
823 a.child-view-link img:hover {
824 opacity: 1;
825 }
826
827 a.child-delete {
828 padding-right: 28px !important;
829 }
830
831 /* replies count */
832 .count-replies span {
833 position: absolute;
834 top: 1px;
835 left: 8px;
836 color: #fff;
837 font-size: 0.55em;
838 }
839
840 .bbpc-reply-count {
841 box-sizing: border-box;
842 display: block;
843 padding: 0;
844 min-width: 22px;
845 height: 2em;
846 border-radius: 5px;
847 background-color: var(--black_200);
848 color: #fff;
849 font-size: 10px;
850 line-height: 1.9090909;
851 text-align: center;
852 margin-left: 10px;
853 }
854 .bbpc-reply-count:after {
855 content: "";
856 display: block;
857 margin-left: 11px;
858 width: 0;
859 height: 0;
860 border-top: 5px solid var(--black_200);
861 border-right: 5px solid transparent;
862 }
863 .bbpc-reply-count.bbpc-published-replies {
864 background-color: #cc8033;
865 }
866 .bbpc-reply-count.bbpc-published-replies:after {
867 border-top: 5px solid #cc8033;
868 }
869
870 .bbpc-pending-replies:hover, .bbpc-pending-replies:active {
871 background: #0275d8;
872 }
873 .bbpc-pending-replies:hover:after, .bbpc-pending-replies:active:after {
874 border-top-color: #0275d8;
875 }
876
877 .bbpc-nested-replies {
878 margin-left: 30px;
879 display: none;
880 }
881
882 .ez-section-title div:has(.active) .bbpc-pending-replies {
883 background: #0275d8;
884 }
885 .ez-section-title div:has(.active) .bbpc-pending-replies:after {
886 border-top-color: #0275d8;
887 }
888
889 .bbpc-reply-wrap {
890 background-color: #fff;
891 padding: 8px 0;
892 margin-left: 20px;
893 }
894 .bbpc-reply-wrap a {
895 width: 22px;
896 height: 22px;
897 display: inline-block;
898 }
899 .bbpc-reply-wrap:hover {
900 background: #f9f9f9;
901 }
902 .bbpc-reply-wrap:not(:last-child) {
903 border-bottom: 1px solid #edeae9;
904 }
905
906 .ezd-btn {
907 --btn-fs: var(--fs-16);
908 --btn-ff: var(--ff-roboto);
909 --btn-py: 0.5rem;
910 --btn-px: 1.6rem;
911 position: relative;
912 font-family: var(--btn-ff);
913 font-size: var(--btn-fs);
914 font-weight: var(--fw-400);
915 line-height: 1.5;
916 background: var(--btn-bg);
917 color: var(--btn-clr);
918 border: var(--btn-bw, var(--border-width)) var(--btn-bs, var(--border-style)) var(--btn-bc, var(--btn-bg));
919 text-transform: capitalize;
920 text-decoration: none;
921 border-radius: var(--btn-radius, var(--radius));
922 padding: var(--btn-py) var(--btn-px);
923 margin: var(--btn-mx) var(--btn-mx);
924 display: inline-block;
925 overflow: hidden;
926 text-align: center;
927 cursor: pointer;
928 -webkit-transition: 0.3s ease-out;
929 transition: 0.3s ease-out;
930 }
931 .ezd-btn-sm {
932 --btn-py: 0.3125rem;
933 }
934 .ezd-btn-lg {
935 --btn-py: 0.625rem;
936 }
937 .ezd-btn-xl {
938 --btn-py: 0.75rem;
939 }
940 .ezd-btn-none {
941 --btn-radius: 0;
942 }
943 .ezd-btn-round {
944 --btn-radius: 0.375rem;
945 }
946 .ezd-btn-rounded {
947 --btn-radius: 1.875rem;
948 }
949 .ezd-btn-round-full {
950 --btn-radius: 50%;
951 }
952 .ezd-btn-disabled {
953 pointer-events: none;
954 opacity: 0.65;
955 }
956 .ezd-btn-black-light {
957 --btn-bg: rgba(13, 14, 43, 0.1);
958 --btn-clr: #0D0E2B;
959 --btn-bc: transparent;
960 }
961 .ezd-btn-black-light:hover {
962 --btn-clr: #0D0E2B;
963 --btn-bg: rgba(13, 14, 43, 0.1);
964 --btn-bc: #0D0E2B;
965 }
966 .ezd-btn-black-light:focus {
967 outline: 0;
968 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
969 }
970 .ezd-btn-green-light {
971 --btn-bg: rgba(45, 178, 45, 0.1);
972 --btn-clr: #2DB22D;
973 --btn-bc: transparent;
974 }
975 .ezd-btn-green-light:hover {
976 --btn-clr: #2DB22D;
977 --btn-bg: rgba(45, 178, 45, 0.1);
978 --btn-bc: #2DB22D;
979 }
980 .ezd-btn-green-light:focus {
981 outline: 0;
982 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
983 }
984 .ezd-btn-blue-light {
985 --btn-bg: rgba(2, 117, 216, 0.1);
986 --btn-clr: #0275D8;
987 --btn-bc: transparent;
988 }
989 .ezd-btn-blue-light:hover {
990 --btn-clr: #0275D8;
991 --btn-bg: rgba(2, 117, 216, 0.1);
992 --btn-bc: #0275D8;
993 }
994 .ezd-btn-blue-light:focus {
995 outline: 0;
996 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
997 }
998 .ezd-btn-orange-light {
999 --btn-bg: rgba(204, 128, 51, 0.1);
1000 --btn-clr: #CC8033;
1001 --btn-bc: transparent;
1002 }
1003 .ezd-btn-orange-light:hover {
1004 --btn-clr: #CC8033;
1005 --btn-bg: rgba(204, 128, 51, 0.1);
1006 --btn-bc: #CC8033;
1007 }
1008 .ezd-btn-orange-light:focus {
1009 outline: 0;
1010 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
1011 }
1012 .ezd-btn-gray-light {
1013 --btn-bg: rgba(66, 66, 66, 0.1);
1014 --btn-clr: #424242;
1015 --btn-bc: transparent;
1016 }
1017 .ezd-btn-gray-light:hover {
1018 --btn-clr: #424242;
1019 --btn-bg: rgba(66, 66, 66, 0.1);
1020 --btn-bc: #424242;
1021 }
1022 .ezd-btn-gray-light:focus {
1023 outline: 0;
1024 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
1025 }
1026 .ezd-btn-blue {
1027 --btn-bg: var(--clr-blue);
1028 --btn-clr: var(--clr-white);
1029 --btn-bc: var(--clr-blue);
1030 }
1031 .ezd-btn-blue:hover {
1032 --btn-clr: var(--clr-blue);
1033 --btn-bg: transparent;
1034 --btn-bc: var(--clr-blue);
1035 }
1036 .ezd-btn-blue:focus {
1037 outline: 0;
1038 box-shadow: 0 0 0 0.4rem rgba(65, 65, 230, 0.5);
1039 }
1040 .ezd-btn-outline-blue {
1041 --btn-clr: #4141E6;
1042 --btn-bc: #4141E6;
1043 }
1044 .ezd-btn-outline-blue:hover {
1045 --btn-clr: var(--clr-white);
1046 --btn-bg: #4141E6;
1047 --btn-bc: #4141E6;
1048 }
1049 .ezd-btn-outline-blue:focus {
1050 outline: 0;
1051 box-shadow: 0 0 0 0.4rem rgba(65, 65, 230, 0.5);
1052 }
1053 .ezd-btn-white {
1054 --btn-bg: var(--clr-white);
1055 --btn-clr: var(--clr-white);
1056 --btn-bc: var(--clr-white);
1057 }
1058 .ezd-btn-white:hover {
1059 --btn-clr: var(--clr-white);
1060 --btn-bg: transparent;
1061 --btn-bc: var(--clr-white);
1062 }
1063 .ezd-btn-white:focus {
1064 outline: 0;
1065 box-shadow: 0 0 0 0.4rem rgba(255, 255, 255, 0.5);
1066 }
1067 .ezd-btn-outline-white {
1068 --btn-clr: var(--clr-white);
1069 --btn-bc: var(--clr-white);
1070 }
1071 .ezd-btn-outline-white:hover {
1072 --btn-clr: var(--clr-black);
1073 --btn-bg: var(--clr-white);
1074 --btn-bc: var(--clr-white);
1075 }
1076 .ezd-btn-outline-white:focus {
1077 outline: 0;
1078 box-shadow: 0 0 0 0.4rem rgba(var(--clr-white), 0.5);
1079 }
1080 .ezd-btn-gray {
1081 --btn-bg: rgba(37, 39, 51, 0.1);
1082 --btn-clr: var(--clr-dark);
1083 --btn-bc: transparent;
1084 }
1085 .ezd-btn-gray:hover {
1086 --btn-clr: var(--clr-white);
1087 --btn-bg: var(--clr-blue);
1088 --btn-bc: transparent;
1089 }
1090 .ezd-btn-gray:focus {
1091 outline: 0;
1092 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
1093 }
1094
1095 .easydocs-dropdown {
1096 top: 130%;
1097 right: -20px;
1098 position: absolute;
1099 -webkit-box-shadow: 0 30px 40px 0 rgba(4, 73, 89, 0.1) 0 0 0 rgba(var(--clr-black), 1);
1100 -moz-box-shadow: 0 30px 40px 0 rgba(4, 73, 89, 0.1) 0 0 0 rgba(var(--clr-black), 1);
1101 box-shadow: 0 30px 40px 0 rgba(4, 73, 89, 0.1) 0 0 0 rgba(var(--clr-black), 1);
1102 background-color: var(--clr-white);
1103 border-radius: 0.5rem;
1104 z-index: 999;
1105 -webkit-transition: 0.3s ease-out;
1106 transition: 0.3s ease-out;
1107 display: none;
1108 }
1109 .easydocs-dropdown.is-active {
1110 opacity: 1;
1111 visibility: visible;
1112 top: 130%;
1113 }
1114
1115 .notification-dropdown {
1116 width: 340px;
1117 border-bottom: 1px solid rgba(0, 0, 0, 0.08);
1118 border-left: 1px solid rgba(0, 0, 0, 0.05);
1119 border-radius: 3px;
1120 box-shadow: 3px 2px 7px 1px rgba(0, 0, 0, 0.08);
1121 }
1122 .notification-dropdown::before {
1123 content: "";
1124 top: -0.625rem;
1125 right: 28px;
1126 position: absolute;
1127 width: 0;
1128 height: 0;
1129 border-style: solid;
1130 border-width: 0 10px 10px 10px;
1131 border-color: transparent transparent #f9f9f9 transparent;
1132 display: block;
1133 }
1134
1135 .notification-head {
1136 padding: 9px 12px;
1137 background: #f9f9f9;
1138 -webkit-box-shadow: 0 1px 0 0 #edeef2;
1139 -moz-box-shadow: 0 1px 0 0 #edeef2;
1140 box-shadow: 0 1px 0 0 #edeef2;
1141 }
1142 .notification-head.no-notification-text {
1143 padding: 20px 12px;
1144 background: rgba(190, 190, 190, 0.1490196078);
1145 display: block;
1146 text-align: center;
1147 }
1148 .notification-head .header-text {
1149 color: var(--clr-dark);
1150 font-size: var(--fs-13);
1151 font-weight: var(--fw-500);
1152 line-height: 1;
1153 }
1154 .notification-head .right-text {
1155 color: var(--clr-text);
1156 font-size: var(--fs-12);
1157 line-height: 1;
1158 }
1159
1160 .form-control {
1161 font-family: var(--ff-roboto);
1162 font-size: var(--fs-14);
1163 color: #9199a1;
1164 background: transparent;
1165 text-transform: capitalize;
1166 padding: 0.75rem 1.25rem;
1167 margin: 0 auto;
1168 width: 100%;
1169 height: auto;
1170 max-width: 37.5rem;
1171 border: 1px solid #EDEAE9;
1172 border-radius: 0.625rem;
1173 -webkit-transition: 0.3s ease-out;
1174 transition: 0.3s ease-out;
1175 }
1176 .form-control:focus {
1177 outline: none;
1178 }
1179 .form-control:focus {
1180 background: white;
1181 box-shadow: none !important;
1182 border: 1px solid #4c4cf1 !important;
1183 border-radius: 0.625rem;
1184 box-sizing: border-box !important;
1185 line-height: unset !important;
1186 }
1187 .form-control:focus ~ .search-icon {
1188 background: var(--clr-blue);
1189 --search-icon: var(--clr-white);
1190 }
1191 .form-control:focus ~ .search-icon .dashicons {
1192 color: #fff;
1193 }
1194
1195 .easydocs-search-form {
1196 position: relative;
1197 max-width: 37.5rem;
1198 flex: 1;
1199 margin-left: auto;
1200 margin-right: auto;
1201 }
1202 .easydocs-search-form .search-icon {
1203 position: absolute;
1204 -webkit-transition: 0.3s ease-out;
1205 transition: 0.3s ease-out;
1206 left: 20px;
1207 transform: translateY(50%);
1208 }
1209 .easydocs-search-form input#bbpc-search {
1210 color: #9199a1;
1211 padding: 10px 15px 10px 48px;
1212 border: 1px solid #EDEAE9;
1213 box-sizing: border-box;
1214 line-height: unset;
1215 box-shadow: 0 1px 1px rgba(11, 80, 115, 0.3), 0 1px 5px rgba(60, 64, 67, 0.1);
1216 background: rgba(255, 255, 255, 0.35);
1217 border-radius: 25px;
1218 }
1219 .easydocs-search-form input#bbpc-search:hover {
1220 box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
1221 }
1222 .easydocs-search-form input#bbpc-search:focus {
1223 background: #fff;
1224 color: #242729;
1225 outline: none;
1226 }
1227
1228 .easydocs-accordion-item progress {
1229 -webkit-appearance: none;
1230 appearance: none;
1231 height: 6px;
1232 border-radius: 32px;
1233 width: 100px;
1234 }
1235 .easydocs-accordion-item progress::-webkit-progress-bar {
1236 background-color: #e74c3c;
1237 }
1238 .easydocs-accordion-item progress::-webkit-progress-value {
1239 background-color: #27ae60;
1240 }
1241
1242 .badge {
1243 display: inline-block;
1244 padding: 0.35em 0.65em 0.3em;
1245 font-size: 0.75em;
1246 font-weight: 400;
1247 line-height: 1;
1248 color: #fff;
1249 text-align: center;
1250 white-space: nowrap;
1251 vertical-align: baseline;
1252 border-radius: 0.25rem;
1253 }
1254
1255 /*----------------------------------------*/
1256 /* 02. Header Area
1257 /*----------------------------------------*/
1258 .easydocs-header-area {
1259 padding-top: 40px;
1260 padding-bottom: 50px;
1261 }
1262 .easydocs-header-area .easydocs-row {
1263 margin-left: 0;
1264 margin-right: 0;
1265 }
1266
1267 .navbar-left {
1268 gap: var(--gutter-20);
1269 }
1270 .navbar-left .easydocs-btn {
1271 --btn-icon: var(--clr-blue);
1272 --btn-py: 0.5rem;
1273 --btn-px: 1rem;
1274 --btn-fs: var(--fs-12);
1275 font-weight: 500;
1276 gap: 6px;
1277 display: flex;
1278 border: 1px solid var(--clr-blue);
1279 align-items: center;
1280 text-decoration: none;
1281 padding: 8px 15px;
1282 border-radius: 6px;
1283 color: var(--clr-blue);
1284 }
1285 .navbar-left .easydocs-btn span.dashicons {
1286 font-size: 14px;
1287 margin-bottom: -4px;
1288 }
1289 .navbar-left .easydocs-btn:hover {
1290 --btn-icon: var(--clr-white);
1291 background: var(--clr-blue);
1292 }
1293 .navbar-left .easydocs-btn:focus {
1294 box-shadow: 0 0 0 0.4rem rgba(65, 65, 230, 0.5);
1295 }
1296
1297 .easydocs-logo-area a {
1298 text-decoration: none;
1299 color: var(--clr-dark);
1300 font-size: var(--fs-24);
1301 font-weight: var(--fw-700);
1302 }
1303
1304 :is(.easydocs-notification, .easydocs-settings) .header-notify-icon {
1305 width: 2.5rem;
1306 height: 2.5rem;
1307 line-height: 2.5rem;
1308 border-radius: 50%;
1309 background: rgba(37, 39, 51, 0.05);
1310 text-align: center;
1311 cursor: pointer;
1312 }
1313 :is(.easydocs-notification, .easydocs-settings) .header-notify-icon:hover {
1314 background: rgba(37, 39, 51, 0.09);
1315 }
1316 :is(.easydocs-notification, .easydocs-settings) .header-notify-icon svg {
1317 position: relative;
1318 top: 0.3rem;
1319 }
1320
1321 .easydocs-notification {
1322 margin-right: 1.6875rem;
1323 position: relative;
1324 }
1325 .easydocs-notification .easydocs-badge {
1326 top: -0.4375rem;
1327 right: -0.5rem;
1328 position: absolute;
1329 background: #FA3E3E;
1330 color: var(--clr-white);
1331 top: -0.4375rem;
1332 right: -0.2rem;
1333 position: absolute;
1334 padding: 0 4px;
1335 min-width: 18px;
1336 max-width: 18px;
1337 border-radius: 50%;
1338 text-align: center;
1339 font-size: 10px;
1340 font-weight: 700;
1341 line-height: 18px;
1342 height: 16px;
1343 display: inline-table;
1344 font-family: "Roboto";
1345 }
1346
1347 .easydocs-settings .header-notify-icons a {
1348 text-decoration: none;
1349 padding-top: 5px;
1350 display: inline-block;
1351 }
1352
1353 :is(.knobs, .layer) {
1354 inset: 0;
1355 position: absolute;
1356 }
1357
1358 .navbar-right .js-darkmode-btn .day svg {
1359 color: #fff;
1360 }
1361 .navbar-right .js-darkmode-btn .night svg {
1362 color: var(--clr-dark);
1363 }
1364
1365 .body_dark .navbar-right .js-darkmode-btn .day svg {
1366 --toggle-icon: #575766;
1367 }
1368 .body_dark .navbar-right .js-darkmode-btn .night svg {
1369 --toggle-icon: #fff;
1370 }
1371
1372 .navbar-right {
1373 display: flex;
1374 align-items: center;
1375 justify-content: flex-end;
1376 }
1377 .navbar-right > ul {
1378 align-items: center;
1379 gap: 8px;
1380 }
1381 .navbar-right .js-darkmode-btn {
1382 display: flex;
1383 align-items: center;
1384 justify-content: space-between;
1385 width: 5rem;
1386 height: 2.5rem;
1387 position: relative;
1388 background: rgba(37, 39, 51, 0.05);
1389 padding: 0 10px;
1390 color: #fff;
1391 border-radius: 24px;
1392 -webkit-transition: 0.3s ease-out;
1393 transition: 0.3s ease-out;
1394 }
1395 .navbar-right .js-darkmode-btn .day svg {
1396 --toggle-icon: #fff;
1397 -webkit-transition: 0.3s ease-out;
1398 transition: 0.3s ease-out;
1399 margin-top: 7px;
1400 }
1401 .navbar-right .js-darkmode-btn .night svg {
1402 --toggle-icon: #575766;
1403 -webkit-transition: 0.3s ease-out;
1404 transition: 0.3s ease-out;
1405 margin-top: 7px;
1406 }
1407 .navbar-right .js-darkmode-btn label {
1408 margin: 0;
1409 cursor: pointer;
1410 position: relative;
1411 z-index: 2;
1412 }
1413 .navbar-right .js-darkmode-btn .ball {
1414 height: 30px;
1415 width: 30px;
1416 position: absolute;
1417 background-color: var(--clr-blue);
1418 border-radius: 50%;
1419 left: 4px;
1420 top: 50%;
1421 transform: translateY(-50%);
1422 cursor: default;
1423 transition: all 0.3s linear 0s;
1424 z-index: 1;
1425 }
1426 .navbar-right .js-darkmode-btn svg {
1427 font-size: 16px;
1428 transition: all 0.3s linear 0s;
1429 }
1430 .navbar-right .js-darkmode-btn input {
1431 display: none;
1432 }
1433
1434 .settings-pro-icon {
1435 position: absolute;
1436 right: 0px;
1437 top: -5px;
1438 }
1439
1440 .swal2-styled.swal2-confirm.upgrade-premium-button > a {
1441 color: black;
1442 font-weight: normal;
1443 text-decoration: none;
1444 }
1445
1446 .swal2-footer.notification-pro-footer-wrap > a {
1447 text-decoration: none;
1448 }
1449
1450 .notification-body .filter-button-group {
1451 display: flex;
1452 gap: 8px;
1453 padding-left: var(--gutter-25);
1454 padding-right: var(--gutter-25);
1455 }
1456 .notification-body .filter-button-group svg {
1457 top: 0;
1458 }
1459 .notification-body .filter-button-group .easydocs-btn {
1460 --notification-icon: var(--clr-dark);
1461 --btn-px: 1rem;
1462 --btn-fs: var(--fs-14);
1463 --btn-py: 0.4rem;
1464 display: flex;
1465 align-items: center;
1466 gap: 1px;
1467 --btn-bg: #e4e6eb;
1468 --btn-clr: var(--clr-dark);
1469 --btn-bc: transparent;
1470 }
1471 .notification-body .filter-button-group .easydocs-btn.mixitup-control-active {
1472 background-color: #e7f3ff;
1473 color: #1877f2;
1474 --notification-icon: #1877f2;
1475 }
1476 .notification-body .filter-button-group .easydocs-btn.mixitup-control-active .dashicons-screenoptions:before {
1477 color: #1877f2;
1478 }
1479 .notification-body .filter-button-group .easydocs-btn.mixitup-control-active:hover {
1480 background-color: #d2e6f9;
1481 }
1482 .notification-body .filter-button-group .easydocs-btn:hover {
1483 --notification-icon: var(--clr-white);
1484 background: #cdcdcd;
1485 }
1486
1487 .notify-column {
1488 max-height: 25rem;
1489 overflow-y: auto;
1490 scrollbar-width: thin;
1491 /* Notification updated css */
1492 }
1493 .notify-column::-webkit-scrollbar-track {
1494 background-color: var(--clr-text-light);
1495 }
1496 .notify-column::-webkit-scrollbar {
1497 width: 8px;
1498 background-color: #F5F5F5;
1499 }
1500 .notify-column::-webkit-scrollbar-thumb {
1501 background-color: var(--clr-text);
1502 }
1503 .notify-column ul li {
1504 border-bottom: 1px solid #f1f2f3;
1505 margin-bottom: 0;
1506 }
1507 .notify-column ul li a {
1508 text-decoration: none;
1509 gap: 9px;
1510 align-content: space-around;
1511 padding: 10px;
1512 box-sizing: border-box;
1513 }
1514 .notify-column ul li a .notify-icon {
1515 padding-top: 5px;
1516 }
1517 .notify-column ul li a .notify-content-wrap {
1518 width: -webkit-fill-available;
1519 }
1520 .notify-column ul li a .notify-content-wrap .notify-content-header {
1521 color: hsl(210, 8%, 35%);
1522 font-size: 12px;
1523 }
1524 .notify-column ul li a .notify-content-wrap .notify-content-header .noti-type {
1525 color: var(--black_800);
1526 font-weight: 500;
1527 }
1528 .notify-column ul li a .notify-content-wrap .notify-content-summary p {
1529 color: hsl(206, 100%, 40%);
1530 font-size: 13px;
1531 }
1532 .notify-column ul li a:focus {
1533 box-shadow: none;
1534 }
1535 .notify-column ul li:hover {
1536 background: hsl(210, 8%, 90%);
1537 }
1538 .notify-column ul li:last-child {
1539 border-bottom: none;
1540 }
1541
1542 .notification-item {
1543 display: flex;
1544 align-items: flex-start;
1545 cursor: pointer;
1546 gap: var(--gutter-10);
1547 padding: var(--gutter-10) 15px;
1548 margin-left: var(--gutter-10);
1549 margin-right: var(--gutter-10);
1550 -webkit-transition: 0.3s ease-out;
1551 transition: 0.3s ease-out;
1552 border-radius: 0.3125rem;
1553 }
1554 .notification-item .notification-image {
1555 width: 2.5rem;
1556 height: 2.5rem;
1557 border-radius: 50%;
1558 position: relative;
1559 }
1560 .notification-item .notification-image .notify-badge {
1561 right: 0;
1562 bottom: 0;
1563 position: absolute;
1564 width: 1.125rem;
1565 height: 1.125rem;
1566 line-height: 1.125rem;
1567 border-radius: 50%;
1568 text-align: center;
1569 }
1570 .notification-item .notification-image .notify-badge .dashicons {
1571 top: 0;
1572 }
1573 .notification-item .notification-image .notify-badge-blue {
1574 background-color: #22AAF1;
1575 background-image: linear-gradient(180deg, #22AAF1 0%, #066BDA 100%);
1576 }
1577 .notification-item .notification-image .notify-badge-blue .dashicons {
1578 font-size: 12px;
1579 color: white;
1580 padding-top: 2.5px;
1581 }
1582 .notification-item .notification-image .notify-badge-green {
1583 background-color: #62D77E;
1584 background-image: linear-gradient(180deg, #62D77E 0%, #2BB64E 100%);
1585 }
1586 .notification-item .notification-image .notify-badge-green .dashicons {
1587 font-size: 12px;
1588 color: white;
1589 padding-top: 4px;
1590 }
1591 .notification-item:hover {
1592 background: rgba(76, 76, 241, 0.05);
1593 }
1594
1595 .notification-content .notify-name {
1596 font-size: var(--fs-14);
1597 font-weight: var(--fw-500);
1598 color: var(--clr-dark);
1599 padding-right: 0.5rem;
1600 margin: 0;
1601 line-height: 1;
1602 }
1603 .notification-content .notify-name a {
1604 text-decoration: none;
1605 }
1606 .notification-content .reply-text {
1607 font-size: 14px;
1608 color: var(--clr-text-light);
1609 line-height: 1;
1610 margin-top: 5px;
1611 }
1612
1613 .notify-short-description {
1614 font-size: var(--fs-14);
1615 color: var(--clr-text);
1616 line-height: 1;
1617 margin-top: 0.325rem;
1618 }
1619
1620 .notify-date {
1621 text-align: left;
1622 color: var(--clr-text-light);
1623 line-height: 1;
1624 margin-top: 0.375rem;
1625 }
1626
1627 .eazydocs-no-content {
1628 display: block;
1629 text-align: center;
1630 margin-top: 250px;
1631 }
1632 .eazydocs-no-content img {
1633 width: auto;
1634 max-width: 50px;
1635 height: auto;
1636 margin: 0px auto 10px;
1637 }
1638
1639 .bbpc-trash-filter {
1640 border-radius: 1.875rem;
1641 margin-bottom: 0;
1642 background-color: rgba(212, 23, 23, 0.1);
1643 transition: all 0.3s;
1644 }
1645 .bbpc-trash-filter:hover {
1646 background-color: rgba(212, 23, 23, 0.3);
1647 }
1648 .bbpc-trash-filter:hover a {
1649 color: #c10000;
1650 }
1651 .bbpc-trash-filter svg {
1652 fill: rgb(212, 23, 23);
1653 }
1654 .bbpc-trash-filter a {
1655 justify-content: center;
1656 gap: 0.3125rem;
1657 padding: 5px 15px;
1658 font-size: 14px;
1659 display: flex;
1660 align-items: center;
1661 color: rgb(212, 23, 23);
1662 text-decoration: none;
1663 }
1664
1665 .bbpc-settings-icon {
1666 background: rgba(0, 0, 255, 0.058);
1667 padding: 10px;
1668 border-radius: 50%;
1669 }
1670
1671 /*----------------------------------------*/
1672 /* Grid Layout
1673 /*----------------------------------------*/
1674 .container {
1675 width: 100%;
1676 padding-right: 15px;
1677 padding-left: 15px;
1678 margin-right: auto;
1679 margin-left: auto;
1680 }
1681 @media (min-width: 576px) {
1682 .container {
1683 max-width: 540px;
1684 }
1685 }
1686 @media (min-width: 768px) {
1687 .container {
1688 max-width: 720px;
1689 }
1690 }
1691 @media (min-width: 992px) {
1692 .container {
1693 max-width: 960px;
1694 }
1695 }
1696 @media (min-width: 1200px) {
1697 .container {
1698 max-width: 1170px;
1699 }
1700 }
1701 @media (min-width: 1441px) {
1702 .container {
1703 max-width: 1170px;
1704 }
1705 }
1706
1707 .container-fluid {
1708 width: 100%;
1709 padding-right: 15px;
1710 padding-left: 15px;
1711 margin-right: auto;
1712 margin-left: auto;
1713 }
1714
1715 .row {
1716 display: flex;
1717 flex-wrap: wrap;
1718 margin-right: -15px;
1719 margin-left: -15px;
1720 }
1721
1722 .no-gutters {
1723 margin-right: 0;
1724 margin-left: 0;
1725 }
1726 .no-gutters > .col,
1727 .no-gutters > [class*=col-] {
1728 padding-right: 0;
1729 padding-left: 0;
1730 }
1731
1732 html, body {
1733 height: auto !important;
1734 }
1735
1736 body.bbpc-forum-ui {
1737 background: radial-gradient(80.99% 100% at 50% 0%, #00FF0A 0%, #36008E 100%), radial-gradient(50% 123.47% at 50% 50%, #EFE7C8 0%, #36008E 100%), linear-gradient(301.28deg, #FF006B 0%, #48DD9E 100%), linear-gradient(294.84deg, #5A60E4 0%, #D30000 100%), linear-gradient(52.29deg, #000000 0%, #00FF85 100%), radial-gradient(100% 138.69% at 100% 0%, #0007A5 0%, #FF7A00 100%), radial-gradient(70.41% 100% at 50% 0%, #D5B300 0%, #2200AA 100%);
1738 background-blend-mode: screen, screen, lighten, overlay, lighten, difference, normal;
1739 }
1740
1741 /*----------------------------------------*/
1742 /* 03. Sidebar Area
1743 /*----------------------------------------*/
1744 .tab-container {
1745 display: flex;
1746 }
1747
1748 .tab-menu {
1749 position: relative;
1750 background: #000000;
1751 background: -moz-linear-gradient(to right, #000000 0%, #0a1852 100%);
1752 background: -webkit-linear-gradient(to right, #000000 0%, #0a1852 100%);
1753 background: linear-gradient(to right, #000000 0%, #0a1852 100%);
1754 flex: 0 0 auto;
1755 width: auto;
1756 }
1757 .tab-menu.short {
1758 height: 100vh;
1759 }
1760 @media (max-width: 1680px) {
1761 .tab-menu {
1762 width: 30%;
1763 }
1764 }
1765 .tab-menu .tab-menu-left-layer {
1766 position: absolute;
1767 top: 0;
1768 left: 0;
1769 width: 80px;
1770 height: 100%;
1771 -webkit-transition: 0.3s ease-out;
1772 transition: 0.3s ease-out;
1773 background: rgba(143, 143, 143, 0.3);
1774 }
1775
1776 .easydocs-tab {
1777 display: none;
1778 }
1779 .easydocs-tab.tab-active {
1780 display: block;
1781 }
1782
1783 .easydocs-navitem {
1784 display: flex;
1785 align-items: center;
1786 justify-content: space-between;
1787 padding: 12px 30px 12px 15px;
1788 margin-bottom: 5px;
1789 cursor: pointer;
1790 -webkit-transition: 0.3s ease-out;
1791 transition: 0.3s ease-out;
1792 position: relative;
1793 border-left: 5px solid transparent;
1794 }
1795 @media (max-width: 1680px) {
1796 .easydocs-navitem {
1797 padding: 13px 25px 13px 20px;
1798 }
1799 }
1800 .easydocs-navitem .link-wrapper {
1801 display: flex;
1802 align-items: center;
1803 justify-content: end;
1804 width: 110px;
1805 }
1806 .easydocs-navitem.is-active {
1807 border-left-color: #b88eff;
1808 background: rgba(159, 162, 180, 0.2);
1809 --title-opacity: 1;
1810 --total-page-opacity: 1;
1811 }
1812 .easydocs-navitem.is-active::before {
1813 content: "";
1814 right: 0;
1815 position: absolute;
1816 width: 0;
1817 height: 0;
1818 border-style: solid;
1819 border-width: 7px 10px 7px 0;
1820 border-color: transparent var(--clr-white) transparent transparent;
1821 display: block;
1822 }
1823 .easydocs-navitem.is-active .total-page {
1824 display: none;
1825 }
1826 .easydocs-navitem.is-active .link {
1827 display: flex;
1828 }
1829 .easydocs-navitem .title {
1830 display: flex;
1831 align-items: center;
1832 gap: 20px;
1833 -webkit-transition: 0.3s ease-out;
1834 transition: 0.3s ease-out;
1835 text-decoration: none;
1836 font-size: var(--fs-16);
1837 font-weight: 500;
1838 color: var(--clr-white);
1839 opacity: var(--title-opacity, 0.7);
1840 }
1841 .easydocs-navitem .title .featured-image {
1842 background: #fff;
1843 width: 40px;
1844 height: 40px;
1845 padding: 5px;
1846 border-radius: 7px;
1847 display: flex;
1848 align-items: center;
1849 justify-content: center;
1850 }
1851 .easydocs-navitem .title .featured-image img {
1852 width: 100%;
1853 height: auto;
1854 }
1855 .easydocs-navitem .title .featured-image span.dashicons {
1856 width: 32px;
1857 color: #000;
1858 }
1859 .easydocs-navitem .title span.easydocs-forums-title {
1860 padding-left: 20px;
1861 }
1862 .easydocs-navitem .total-page {
1863 font-size: var(--fs-12);
1864 color: var(--clr-white);
1865 opacity: var(--total-page-opacity, 0.5);
1866 -webkit-transition: 0.3s ease-out;
1867 transition: 0.3s ease-out;
1868 position: absolute;
1869 right: 30px;
1870 }
1871 .easydocs-navitem:hover {
1872 background: rgba(159, 162, 180, 0.2);
1873 --title-opacity: 1;
1874 --total-page-opacity: 1;
1875 }
1876 .easydocs-navitem:hover .total-page {
1877 display: none;
1878 }
1879 .easydocs-navitem:hover .link {
1880 display: flex;
1881 }
1882 .easydocs-navitem:hover .link a {
1883 padding-left: 2px;
1884 padding-right: 2px;
1885 }
1886
1887 .link {
1888 align-items: center;
1889 gap: 0.325rem;
1890 display: none;
1891 -webkit-transition: 0.3s ease-out;
1892 transition: 0.3s ease-out;
1893 }
1894 .link a {
1895 text-decoration: none;
1896 }
1897 .link a .dashicons {
1898 color: var(--black_200);
1899 font-size: 18px;
1900 padding-top: 2px;
1901 }
1902 .link a .dashicons:hover {
1903 color: #fff;
1904 }
1905 .link a.st-pro-notice .dashicons {
1906 color: #f1bd6c;
1907 }
1908 .link:hover svg {
1909 color: #fff;
1910 fill-color: #fff;
1911 }
1912
1913 .easydocs-tab-content {
1914 flex: 1;
1915 width: auto;
1916 padding: 0 40px 40px 40px;
1917 }
1918 @media (max-width: 1680px) {
1919 .easydocs-tab-content {
1920 width: 70%;
1921 }
1922 }
1923 @media (max-width: 1440px) {
1924 .easydocs-tab-content {
1925 width: 70%;
1926 padding: 20px;
1927 }
1928 }
1929 .easydocs-tab-content .button {
1930 padding: 6px 25px;
1931 }
1932
1933 .easydocs-filter-container {
1934 background: var(--clr-white);
1935 padding: var(--gutter-15) var(--gutter-30);
1936 border-radius: 0.375rem;
1937 display: flex;
1938 align-items: center;
1939 justify-content: space-between;
1940 background: linear-gradient(125.95deg, #C700BF 10.95%, #7DA900 100%), linear-gradient(341.1deg, #00C2FF 7.52%, #4E00B1 77.98%), linear-gradient(222.34deg, #A90000 12.99%, #00FFE0 87.21%), linear-gradient(130.22deg, #8FA600 18.02%, #5A31FF 100%);
1941 background-blend-mode: screen, color-dodge, color-dodge, normal;
1942 padding-left: 16px;
1943 }
1944 @media (max-width: 1440px) {
1945 .easydocs-filter-container {
1946 padding: 10px 20px;
1947 }
1948 }
1949
1950 .single-item-filter {
1951 display: flex;
1952 align-items: center;
1953 gap: 5px;
1954 }
1955 .single-item-filter.all-available li {
1956 padding: 5px 15px;
1957 }
1958 .single-item-filter .easydocs-btn {
1959 display: flex;
1960 align-items: center;
1961 justify-content: center;
1962 font-size: 12px;
1963 gap: 0.3125rem;
1964 --btn-fs: var(--fs-14);
1965 transition: all 0.3s;
1966 border-radius: 15px;
1967 padding: 5px 25px;
1968 cursor: pointer;
1969 margin: 0;
1970 }
1971 .single-item-filter .easydocs-btn:hover {
1972 background-color: rgba(0, 0, 0, 0.1);
1973 }
1974 .single-item-filter .easydocs-btn.is-active {
1975 background-color: rgba(0, 0, 0, 0.8);
1976 color: #f1f1f1;
1977 }
1978 .single-item-filter .easydocs-btn.is-active img {
1979 filter: brightness(0) invert(1);
1980 }
1981 .single-item-filter .easydocs-btn.easydocs-btn-black-light {
1982 --btn-icon: #0D0E2B;
1983 }
1984 .single-item-filter .easydocs-btn.easydocs-btn-black-light svg {
1985 fill: #0D0E2B;
1986 }
1987 .single-item-filter .easydocs-btn.easydocs-btn-black-light.mixitup-control-active {
1988 --btn-bg: #0D0E2B;
1989 --btn-clr: var(--clr-white);
1990 --btn-icon: var(--clr-white);
1991 }
1992 .single-item-filter .easydocs-btn.easydocs-btn-black-light.mixitup-control-active svg {
1993 fill: #ffffff;
1994 }
1995 .single-item-filter .easydocs-btn.easydocs-btn-green-light {
1996 --btn-icon: #2DB22D;
1997 }
1998 .single-item-filter .easydocs-btn.easydocs-btn-green-light svg {
1999 fill: #2DB22D;
2000 }
2001 .single-item-filter .easydocs-btn.easydocs-btn-green-light.mixitup-control-active {
2002 --btn-bg: #2DB22D;
2003 --btn-clr: var(--clr-white);
2004 --btn-icon: var(--clr-white);
2005 }
2006 .single-item-filter .easydocs-btn.easydocs-btn-green-light.mixitup-control-active svg {
2007 fill: #ffffff;
2008 }
2009 .single-item-filter .easydocs-btn.easydocs-btn-blue-light {
2010 --btn-icon: #0275D8;
2011 }
2012 .single-item-filter .easydocs-btn.easydocs-btn-blue-light svg {
2013 fill: #0275D8;
2014 }
2015 .single-item-filter .easydocs-btn.easydocs-btn-blue-light.mixitup-control-active {
2016 --btn-bg: #0275D8;
2017 --btn-clr: var(--clr-white);
2018 --btn-icon: var(--clr-white);
2019 }
2020 .single-item-filter .easydocs-btn.easydocs-btn-blue-light.mixitup-control-active svg {
2021 fill: #fff;
2022 }
2023 .single-item-filter .easydocs-btn.easydocs-btn-orange-light {
2024 --btn-icon: #CC8033;
2025 }
2026 .single-item-filter .easydocs-btn.easydocs-btn-orange-light svg {
2027 fill: #CC8033;
2028 }
2029 .single-item-filter .easydocs-btn.easydocs-btn-orange-light.mixitup-control-active {
2030 --btn-bg: #CC8033;
2031 --btn-clr: var(--clr-white);
2032 --btn-icon: var(--clr-white);
2033 }
2034 .single-item-filter .easydocs-btn.easydocs-btn-orange-light.mixitup-control-active svg {
2035 fill: #fff;
2036 }
2037 .single-item-filter .easydocs-btn.easydocs-btn-gray-light {
2038 --btn-icon: #424242;
2039 }
2040 .single-item-filter .easydocs-btn.easydocs-btn-gray-light.mixitup-control-active {
2041 --btn-bg: #424242;
2042 --btn-clr: var(--clr-white);
2043 --btn-icon: var(--clr-white);
2044 }
2045
2046 .single-grid-container {
2047 display: flex;
2048 align-items: center;
2049 border: 1px solid #EDEAE9;
2050 border-radius: 0.375rem;
2051 --grid-icon: #9199A1;
2052 }
2053 .single-grid-container a {
2054 text-decoration: none;
2055 padding: 0.3rem 0.5rem 0.5rem;
2056 height: 1.875rem;
2057 }
2058 .single-grid-container a:first-child {
2059 border-right: 1px solid #EDEAE9;
2060 }
2061 .single-grid-container .is-active {
2062 background: rgba(37, 39, 51, 0.05);
2063 --grid-icon: var(--clr-blue);
2064 }
2065
2066 @media screen and (min-width: 1200px) {
2067 .container {
2068 max-width: 1170px;
2069 }
2070 }
2071 #wpcontent {
2072 height: 100vh;
2073 }
2074
2075 /*# sourceMappingURL=admin-ui-style.css.map */
2076