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

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

2,034 lines 41.5 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 35px;
634 display: block;
635 cursor: pointer;
636 display: flex;
637 align-items: center;
638 justify-content: space-between;
639 }
640 @media (max-width: 1440px) {
641 .accordion-title {
642 padding: 12px 20px 12px 34px;
643 }
644 }
645 .accordion-title.ez-section-title h4 {
646 font-weight: var(--fw-500);
647 }
648 @media (max-width: 1440px) {
649 .accordion-title.ez-section-title::before {
650 left: 20px;
651 }
652 }
653 .accordion-title.has-child::before {
654 content: "";
655 top: 50%;
656 left: 32px;
657 position: absolute;
658 width: 0;
659 height: 0;
660 border-style: solid;
661 border-width: 5px 0 5px 6px;
662 border-color: transparent transparent transparent var(--clr-text);
663 display: block;
664 transform: translateY(-50%);
665 -webkit-transition: 0.3s ease-out;
666 transition: 0.3s ease-out;
667 }
668 @media (max-width: 1440px) {
669 .accordion-title.has-child::before {
670 left: 20px;
671 }
672 }
673 .accordion-title .count {
674 margin-left: 5px;
675 color: #fff;
676 background: var(--black_200);
677 }
678 .accordion-title ul.actions {
679 display: flex;
680 }
681 .accordion-title ul.actions li {
682 margin: 0;
683 }
684 .accordion-title:hover {
685 background: #f9f9f9;
686 }
687 .accordion-title:hover h4 {
688 color: var(--clr-dark);
689 }
690 .accordion-title:hover ul.actions {
691 display: flex;
692 }
693 .accordion-title:hover ul.actions li {
694 margin: 0;
695 line-height: normal;
696 }
697 .accordion-title h4 {
698 font-size: var(--fs-14);
699 color: var(--clr-text);
700 display: flex;
701 align-items: center;
702 font-weight: normal;
703 }
704 .accordion-title h4 a {
705 text-decoration: none;
706 }
707 .accordion-title .accordion-category-icon {
708 width: 1.25rem;
709 height: 1.25rem;
710 line-height: 1.25rem;
711 border-radius: 50%;
712 text-align: center;
713 margin-left: 5px;
714 }
715 .accordion-title .light-green {
716 background: rgba(45, 178, 45, 0.1);
717 --category-icon: #2db22d;
718 }
719 .accordion-title .light-orange {
720 background: rgba(204, 128, 51, 0.1);
721 --category-icon: #cc8033;
722 }
723 .accordion-title .light-blue {
724 background: rgba(2, 117, 216, 0.1);
725 --category-icon: var(--clr-blue);
726 }
727 .accordion-title .light-gray {
728 background: rgba(66, 66, 66, 0.1);
729 --category-icon: #424242;
730 }
731 .accordion-title ul.actions {
732 display: none;
733 align-items: center;
734 gap: var(--gutter-10);
735 --section-icon: #9199a1;
736 margin-left: 15px;
737 }
738 .accordion-title ul.actions .duplicate {
739 order: 1;
740 }
741 .accordion-title ul.actions .delete {
742 order: 2;
743 }
744 .accordion-title ul.actions li:hover {
745 --section-icon: var(--clr-dark);
746 }
747 .accordion-title ul.actions li a {
748 text-decoration: none;
749 }
750 .accordion-title ul.actions li a .dashicons {
751 color: var(--black_150);
752 font-size: 18px;
753 padding-top: 3px;
754 }
755 .accordion-title ul.actions li a .dashicons:hover {
756 color: var(--black_400);
757 }
758 .accordion-title ul.actions li a img {
759 opacity: 0.5;
760 }
761 .accordion-title ul.actions li a img:hover {
762 opacity: 1;
763 }
764 .accordion-title ul.actions li a.st-pro-notice .dashicons {
765 color: #f1bd6c;
766 }
767 .accordion-title .left-content {
768 display: flex;
769 }
770 .accordion-title .right-content {
771 display: flex;
772 align-items: center;
773 }
774 .accordion-title .right-content .progress-text {
775 font-size: var(--fs-12);
776 color: var(--clr-text-light);
777 margin-left: var(--gutter-30);
778 }
779
780 .easydocs-accordion-body {
781 background: var(--clr-white);
782 color: var(--clr-text);
783 font-size: var(--fs-14);
784 padding: 10px 50px 10px 50px;
785 }
786
787 .nesting-accordion {
788 padding: 0;
789 }
790 .nesting-accordion a {
791 text-decoration: none;
792 }
793
794 .child-docs-wrap {
795 border-bottom: 1px solid #edeae9;
796 }
797 .child-docs-wrap:hover {
798 background-color: #f9f9f9;
799 }
800 .child-docs-wrap .child-right-content {
801 visibility: hidden;
802 }
803 .child-docs-wrap:hover .child-right-content {
804 visibility: visible;
805 }
806
807 a.child-delete,
808 a.child-view-link {
809 padding-left: 5px !important;
810 padding-right: 5px !important;
811 }
812 a.child-delete img,
813 a.child-view-link img {
814 opacity: 0.5;
815 }
816 a.child-delete img:hover,
817 a.child-view-link img:hover {
818 opacity: 1;
819 }
820
821 a.child-delete {
822 padding-right: 28px !important;
823 }
824
825 /* replies count */
826 .count-replies span {
827 position: absolute;
828 top: 1px;
829 left: 8px;
830 color: #fff;
831 font-size: 0.55em;
832 }
833
834 .bbpc-reply-count {
835 box-sizing: border-box;
836 display: block;
837 padding: 0;
838 min-width: 22px;
839 height: 2em;
840 border-radius: 5px;
841 background-color: var(--black_200);
842 color: #fff;
843 font-size: 10px;
844 line-height: 1.9090909;
845 text-align: center;
846 margin-left: 10px;
847 }
848 .bbpc-reply-count:after {
849 content: "";
850 display: block;
851 margin-left: 11px;
852 width: 0;
853 height: 0;
854 border-top: 5px solid var(--black_200);
855 border-right: 5px solid transparent;
856 }
857 .bbpc-reply-count.bbpc-published-replies {
858 background-color: #cc8033;
859 }
860 .bbpc-reply-count.bbpc-published-replies:after {
861 border-top: 5px solid #cc8033;
862 }
863
864 .bbpc-pending-replies:hover, .bbpc-pending-replies:active {
865 background: #0275d8;
866 }
867 .bbpc-pending-replies:hover:after, .bbpc-pending-replies:active:after {
868 border-top-color: #0275d8;
869 }
870
871 .bbpc-nested-replies {
872 margin-left: 30px;
873 display: none;
874 }
875
876 .ez-section-title div:has(.active) .bbpc-pending-replies {
877 background: #0275d8;
878 }
879 .ez-section-title div:has(.active) .bbpc-pending-replies:after {
880 border-top-color: #0275d8;
881 }
882
883 .bbpc-reply-wrap {
884 background-color: #fff;
885 padding: 8px 0;
886 margin-left: 20px;
887 }
888 .bbpc-reply-wrap a {
889 width: 22px;
890 height: 22px;
891 display: inline-block;
892 }
893 .bbpc-reply-wrap:hover {
894 background: #f9f9f9;
895 }
896 .bbpc-reply-wrap:not(:last-child) {
897 border-bottom: 1px solid #edeae9;
898 }
899
900 .easydocs-btn {
901 --btn-fs: var(--fs-16);
902 --btn-ff: var(--ff-roboto);
903 --btn-py: 0.5rem;
904 --btn-px: 1.6rem;
905 position: relative;
906 font-family: var(--btn-ff);
907 font-size: var(--btn-fs);
908 font-weight: var(--fw-400);
909 line-height: 1.5;
910 background: var(--btn-bg);
911 color: var(--btn-clr);
912 border: var(--btn-bw, var(--border-width)) var(--btn-bs, var(--border-style)) var(--btn-bc, var(--btn-bg));
913 text-transform: capitalize;
914 text-decoration: none;
915 border-radius: var(--btn-radius, var(--radius));
916 padding: var(--btn-py) var(--btn-px);
917 margin: var(--btn-mx) var(--btn-mx);
918 display: inline-block;
919 overflow: hidden;
920 text-align: center;
921 cursor: pointer;
922 -webkit-transition: 0.3s ease-out;
923 transition: 0.3s ease-out;
924 }
925 .easydocs-btn-sm {
926 --btn-py: 0.3125rem;
927 }
928 .easydocs-btn-lg {
929 --btn-py: 0.625rem;
930 }
931 .easydocs-btn-xl {
932 --btn-py: 0.75rem;
933 }
934 .easydocs-btn-none {
935 --btn-radius: 0;
936 }
937 .easydocs-btn-round {
938 --btn-radius: 0.375rem;
939 }
940 .easydocs-btn-rounded {
941 --btn-radius: 1.875rem;
942 }
943 .easydocs-btn-round-full {
944 --btn-radius: 50%;
945 }
946 .easydocs-btn-disabled {
947 pointer-events: none;
948 opacity: 0.65;
949 }
950 .easydocs-btn-black-light {
951 --btn-bg: rgba(13, 14, 43, 0.1);
952 --btn-clr: #0D0E2B;
953 --btn-bc: transparent;
954 }
955 .easydocs-btn-black-light:hover {
956 --btn-clr: #0D0E2B;
957 --btn-bg: rgba(13, 14, 43, 0.1);
958 --btn-bc: #0D0E2B;
959 }
960 .easydocs-btn-black-light:focus {
961 outline: 0;
962 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
963 }
964 .easydocs-btn-green-light {
965 --btn-bg: rgba(45, 178, 45, 0.1);
966 --btn-clr: #2DB22D;
967 --btn-bc: transparent;
968 }
969 .easydocs-btn-green-light:hover {
970 --btn-clr: #2DB22D;
971 --btn-bg: rgba(45, 178, 45, 0.1);
972 --btn-bc: #2DB22D;
973 }
974 .easydocs-btn-green-light:focus {
975 outline: 0;
976 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
977 }
978 .easydocs-btn-blue-light {
979 --btn-bg: rgba(2, 117, 216, 0.1);
980 --btn-clr: #0275D8;
981 --btn-bc: transparent;
982 }
983 .easydocs-btn-blue-light:hover {
984 --btn-clr: #0275D8;
985 --btn-bg: rgba(2, 117, 216, 0.1);
986 --btn-bc: #0275D8;
987 }
988 .easydocs-btn-blue-light:focus {
989 outline: 0;
990 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
991 }
992 .easydocs-btn-orange-light {
993 --btn-bg: rgba(204, 128, 51, 0.1);
994 --btn-clr: #CC8033;
995 --btn-bc: transparent;
996 }
997 .easydocs-btn-orange-light:hover {
998 --btn-clr: #CC8033;
999 --btn-bg: rgba(204, 128, 51, 0.1);
1000 --btn-bc: #CC8033;
1001 }
1002 .easydocs-btn-orange-light:focus {
1003 outline: 0;
1004 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
1005 }
1006 .easydocs-btn-gray-light {
1007 --btn-bg: rgba(66, 66, 66, 0.1);
1008 --btn-clr: #424242;
1009 --btn-bc: transparent;
1010 }
1011 .easydocs-btn-gray-light:hover {
1012 --btn-clr: #424242;
1013 --btn-bg: rgba(66, 66, 66, 0.1);
1014 --btn-bc: #424242;
1015 }
1016 .easydocs-btn-gray-light:focus {
1017 outline: 0;
1018 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
1019 }
1020 .easydocs-btn-blue {
1021 --btn-bg: var(--clr-blue);
1022 --btn-clr: var(--clr-white);
1023 --btn-bc: var(--clr-blue);
1024 }
1025 .easydocs-btn-blue:hover {
1026 --btn-clr: var(--clr-blue);
1027 --btn-bg: transparent;
1028 --btn-bc: var(--clr-blue);
1029 }
1030 .easydocs-btn-blue:focus {
1031 outline: 0;
1032 box-shadow: 0 0 0 0.4rem rgba(65, 65, 230, 0.5);
1033 }
1034 .easydocs-btn-outline-blue {
1035 --btn-clr: #4141E6;
1036 --btn-bc: #4141E6;
1037 }
1038 .easydocs-btn-outline-blue:hover {
1039 --btn-clr: var(--clr-white);
1040 --btn-bg: #4141E6;
1041 --btn-bc: #4141E6;
1042 }
1043 .easydocs-btn-outline-blue:focus {
1044 outline: 0;
1045 box-shadow: 0 0 0 0.4rem rgba(65, 65, 230, 0.5);
1046 }
1047 .easydocs-btn-white {
1048 --btn-bg: var(--clr-white);
1049 --btn-clr: var(--clr-white);
1050 --btn-bc: var(--clr-white);
1051 }
1052 .easydocs-btn-white:hover {
1053 --btn-clr: var(--clr-white);
1054 --btn-bg: transparent;
1055 --btn-bc: var(--clr-white);
1056 }
1057 .easydocs-btn-white:focus {
1058 outline: 0;
1059 box-shadow: 0 0 0 0.4rem rgba(255, 255, 255, 0.5);
1060 }
1061 .easydocs-btn-outline-white {
1062 --btn-clr: var(--clr-white);
1063 --btn-bc: var(--clr-white);
1064 }
1065 .easydocs-btn-outline-white:hover {
1066 --btn-clr: var(--clr-black);
1067 --btn-bg: var(--clr-white);
1068 --btn-bc: var(--clr-white);
1069 }
1070 .easydocs-btn-outline-white:focus {
1071 outline: 0;
1072 box-shadow: 0 0 0 0.4rem rgba(var(--clr-white), 0.5);
1073 }
1074 .easydocs-btn-gray {
1075 --btn-bg: rgba(37, 39, 51, 0.1);
1076 --btn-clr: var(--clr-dark);
1077 --btn-bc: transparent;
1078 }
1079 .easydocs-btn-gray:hover {
1080 --btn-clr: var(--clr-white);
1081 --btn-bg: var(--clr-blue);
1082 --btn-bc: transparent;
1083 }
1084 .easydocs-btn-gray:focus {
1085 outline: 0;
1086 box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5);
1087 }
1088
1089 .easydocs-dropdown {
1090 top: 130%;
1091 right: -20px;
1092 position: absolute;
1093 -webkit-box-shadow: 0 30px 40px 0 rgba(4, 73, 89, 0.1) 0 0 0 rgba(var(--clr-black), 1);
1094 -moz-box-shadow: 0 30px 40px 0 rgba(4, 73, 89, 0.1) 0 0 0 rgba(var(--clr-black), 1);
1095 box-shadow: 0 30px 40px 0 rgba(4, 73, 89, 0.1) 0 0 0 rgba(var(--clr-black), 1);
1096 background-color: var(--clr-white);
1097 border-radius: 0.5rem;
1098 z-index: 999;
1099 -webkit-transition: 0.3s ease-out;
1100 transition: 0.3s ease-out;
1101 display: none;
1102 }
1103 .easydocs-dropdown.is-active {
1104 opacity: 1;
1105 visibility: visible;
1106 top: 130%;
1107 }
1108
1109 .notification-dropdown {
1110 width: 340px;
1111 border-bottom: 1px solid rgba(0, 0, 0, 0.08);
1112 border-left: 1px solid rgba(0, 0, 0, 0.05);
1113 border-radius: 3px;
1114 box-shadow: 3px 2px 7px 1px rgba(0, 0, 0, 0.08);
1115 }
1116 .notification-dropdown::before {
1117 content: "";
1118 top: -0.625rem;
1119 right: 28px;
1120 position: absolute;
1121 width: 0;
1122 height: 0;
1123 border-style: solid;
1124 border-width: 0 10px 10px 10px;
1125 border-color: transparent transparent #f9f9f9 transparent;
1126 display: block;
1127 }
1128
1129 .notification-head {
1130 padding: 9px 12px;
1131 background: #f9f9f9;
1132 -webkit-box-shadow: 0 1px 0 0 #edeef2;
1133 -moz-box-shadow: 0 1px 0 0 #edeef2;
1134 box-shadow: 0 1px 0 0 #edeef2;
1135 }
1136 .notification-head.no-notification-text {
1137 padding: 20px 12px;
1138 background: rgba(190, 190, 190, 0.1490196078);
1139 display: block;
1140 text-align: center;
1141 }
1142 .notification-head .header-text {
1143 color: var(--clr-dark);
1144 font-size: var(--fs-13);
1145 font-weight: var(--fw-500);
1146 line-height: 1;
1147 }
1148 .notification-head .right-text {
1149 color: var(--clr-text);
1150 font-size: var(--fs-12);
1151 line-height: 1;
1152 }
1153
1154 .form-control {
1155 font-family: var(--ff-roboto);
1156 font-size: var(--fs-14);
1157 color: #9199a1;
1158 background: transparent;
1159 text-transform: capitalize;
1160 padding: 0.75rem 1.25rem;
1161 margin: 0 auto;
1162 width: 100%;
1163 height: auto;
1164 max-width: 37.5rem;
1165 border: 1px solid #EDEAE9;
1166 border-radius: 0.625rem;
1167 -webkit-transition: 0.3s ease-out;
1168 transition: 0.3s ease-out;
1169 }
1170 .form-control:focus {
1171 outline: none;
1172 }
1173 .form-control:focus {
1174 background: white;
1175 box-shadow: none !important;
1176 border: 1px solid #4c4cf1 !important;
1177 border-radius: 0.625rem;
1178 box-sizing: border-box !important;
1179 line-height: unset !important;
1180 }
1181 .form-control:focus ~ .search-icon {
1182 background: var(--clr-blue);
1183 --search-icon: var(--clr-white);
1184 }
1185 .form-control:focus ~ .search-icon .dashicons {
1186 color: #fff;
1187 }
1188
1189 .easydocs-search-form {
1190 position: relative;
1191 max-width: 37.5rem;
1192 flex: 1;
1193 margin-left: auto;
1194 margin-right: auto;
1195 }
1196 .easydocs-search-form .search-icon {
1197 position: absolute;
1198 -webkit-transition: 0.3s ease-out;
1199 transition: 0.3s ease-out;
1200 left: 20px;
1201 transform: translateY(50%);
1202 }
1203 .easydocs-search-form input#bbpc-search {
1204 color: #9199a1;
1205 padding: 10px 15px 10px 48px;
1206 border: 1px solid #EDEAE9;
1207 box-sizing: border-box;
1208 line-height: unset;
1209 box-shadow: 0 1px 1px rgba(11, 80, 115, 0.3), 0 1px 5px rgba(60, 64, 67, 0.1);
1210 background: rgba(255, 255, 255, 0.35);
1211 border-radius: 25px;
1212 }
1213 .easydocs-search-form input#bbpc-search:hover {
1214 box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
1215 }
1216 .easydocs-search-form input#bbpc-search:focus {
1217 background: #fff;
1218 color: #242729;
1219 outline: none;
1220 }
1221
1222 .easydocs-accordion-item progress {
1223 -webkit-appearance: none;
1224 appearance: none;
1225 height: 6px;
1226 border-radius: 32px;
1227 width: 100px;
1228 }
1229 .easydocs-accordion-item progress::-webkit-progress-bar {
1230 background-color: #e74c3c;
1231 }
1232 .easydocs-accordion-item progress::-webkit-progress-value {
1233 background-color: #27ae60;
1234 }
1235
1236 .badge {
1237 display: inline-block;
1238 padding: 0.35em 0.65em 0.3em;
1239 font-size: 0.75em;
1240 font-weight: 400;
1241 line-height: 1;
1242 color: #fff;
1243 text-align: center;
1244 white-space: nowrap;
1245 vertical-align: baseline;
1246 border-radius: 0.25rem;
1247 }
1248
1249 /*----------------------------------------*/
1250 /* 02. Header Area
1251 /*----------------------------------------*/
1252 .easydocs-header-area {
1253 padding-top: 40px;
1254 padding-bottom: 50px;
1255 }
1256 .easydocs-header-area .easydocs-row {
1257 margin-left: 0;
1258 margin-right: 0;
1259 }
1260
1261 .navbar-left {
1262 gap: var(--gutter-20);
1263 }
1264 .navbar-left .easydocs-btn {
1265 --btn-icon: var(--clr-blue);
1266 --btn-py: 0.5rem;
1267 --btn-px: 1rem;
1268 --btn-fs: var(--fs-12);
1269 font-weight: 500;
1270 display: flex;
1271 align-items: center;
1272 gap: 6px;
1273 }
1274 .navbar-left .easydocs-btn span.dashicons {
1275 font-size: 14px;
1276 margin-bottom: -4px;
1277 }
1278 .navbar-left .easydocs-btn:hover {
1279 --btn-icon: var(--clr-white);
1280 }
1281
1282 .easydocs-logo-area a {
1283 text-decoration: none;
1284 color: var(--clr-dark);
1285 font-size: var(--fs-24);
1286 font-weight: var(--fw-700);
1287 }
1288
1289 :is(.easydocs-notification, .easydocs-settings) .header-notify-icon {
1290 width: 2.5rem;
1291 height: 2.5rem;
1292 line-height: 2.5rem;
1293 border-radius: 50%;
1294 background: rgba(37, 39, 51, 0.05);
1295 text-align: center;
1296 cursor: pointer;
1297 }
1298 :is(.easydocs-notification, .easydocs-settings) .header-notify-icon:hover {
1299 background: rgba(37, 39, 51, 0.09);
1300 }
1301 :is(.easydocs-notification, .easydocs-settings) .header-notify-icon svg {
1302 position: relative;
1303 top: 0.3rem;
1304 }
1305
1306 .easydocs-notification {
1307 margin-right: 1.6875rem;
1308 position: relative;
1309 }
1310 .easydocs-notification .easydocs-badge {
1311 top: -0.4375rem;
1312 right: -0.5rem;
1313 position: absolute;
1314 background: #FA3E3E;
1315 color: var(--clr-white);
1316 top: -0.4375rem;
1317 right: -0.2rem;
1318 position: absolute;
1319 padding: 0 4px;
1320 min-width: 18px;
1321 max-width: 18px;
1322 border-radius: 50%;
1323 text-align: center;
1324 font-size: 10px;
1325 font-weight: 700;
1326 line-height: 18px;
1327 height: 16px;
1328 display: inline-table;
1329 font-family: "Roboto";
1330 }
1331
1332 .easydocs-settings .header-notify-icons a {
1333 text-decoration: none;
1334 padding-top: 5px;
1335 display: inline-block;
1336 }
1337
1338 :is(.knobs, .layer) {
1339 inset: 0;
1340 position: absolute;
1341 }
1342
1343 .navbar-right .js-darkmode-btn .day svg {
1344 color: #fff;
1345 }
1346 .navbar-right .js-darkmode-btn .night svg {
1347 color: var(--clr-dark);
1348 }
1349
1350 .body_dark .navbar-right .js-darkmode-btn .day svg {
1351 --toggle-icon: #575766;
1352 }
1353 .body_dark .navbar-right .js-darkmode-btn .night svg {
1354 --toggle-icon: #fff;
1355 }
1356
1357 .navbar-right {
1358 display: flex;
1359 align-items: center;
1360 justify-content: flex-end;
1361 }
1362 .navbar-right > ul {
1363 align-items: center;
1364 gap: 8px;
1365 }
1366 .navbar-right .js-darkmode-btn {
1367 display: flex;
1368 align-items: center;
1369 justify-content: space-between;
1370 width: 5rem;
1371 height: 2.5rem;
1372 position: relative;
1373 background: rgba(37, 39, 51, 0.05);
1374 padding: 0 10px;
1375 color: #fff;
1376 border-radius: 24px;
1377 -webkit-transition: 0.3s ease-out;
1378 transition: 0.3s ease-out;
1379 }
1380 .navbar-right .js-darkmode-btn .day svg {
1381 --toggle-icon: #fff;
1382 -webkit-transition: 0.3s ease-out;
1383 transition: 0.3s ease-out;
1384 margin-top: 7px;
1385 }
1386 .navbar-right .js-darkmode-btn .night svg {
1387 --toggle-icon: #575766;
1388 -webkit-transition: 0.3s ease-out;
1389 transition: 0.3s ease-out;
1390 margin-top: 7px;
1391 }
1392 .navbar-right .js-darkmode-btn label {
1393 margin: 0;
1394 cursor: pointer;
1395 position: relative;
1396 z-index: 2;
1397 }
1398 .navbar-right .js-darkmode-btn .ball {
1399 height: 30px;
1400 width: 30px;
1401 position: absolute;
1402 background-color: var(--clr-blue);
1403 border-radius: 50%;
1404 left: 4px;
1405 top: 50%;
1406 transform: translateY(-50%);
1407 cursor: default;
1408 transition: all 0.3s linear 0s;
1409 z-index: 1;
1410 }
1411 .navbar-right .js-darkmode-btn svg {
1412 font-size: 16px;
1413 transition: all 0.3s linear 0s;
1414 }
1415 .navbar-right .js-darkmode-btn input {
1416 display: none;
1417 }
1418
1419 .settings-pro-icon {
1420 position: absolute;
1421 right: 0px;
1422 top: -5px;
1423 }
1424
1425 .swal2-styled.swal2-confirm.upgrade-premium-button > a {
1426 color: black;
1427 font-weight: normal;
1428 text-decoration: none;
1429 }
1430
1431 .swal2-footer.notification-pro-footer-wrap > a {
1432 text-decoration: none;
1433 }
1434
1435 .notification-body .filter-button-group {
1436 display: flex;
1437 gap: 8px;
1438 padding-left: var(--gutter-25);
1439 padding-right: var(--gutter-25);
1440 }
1441 .notification-body .filter-button-group svg {
1442 top: 0;
1443 }
1444 .notification-body .filter-button-group .easydocs-btn {
1445 --notification-icon: var(--clr-dark);
1446 --btn-px: 1rem;
1447 --btn-fs: var(--fs-14);
1448 --btn-py: 0.4rem;
1449 display: flex;
1450 align-items: center;
1451 gap: 1px;
1452 --btn-bg: #e4e6eb;
1453 --btn-clr: var(--clr-dark);
1454 --btn-bc: transparent;
1455 }
1456 .notification-body .filter-button-group .easydocs-btn.mixitup-control-active {
1457 background-color: #e7f3ff;
1458 color: #1877f2;
1459 --notification-icon: #1877f2;
1460 }
1461 .notification-body .filter-button-group .easydocs-btn.mixitup-control-active .dashicons-screenoptions:before {
1462 color: #1877f2;
1463 }
1464 .notification-body .filter-button-group .easydocs-btn.mixitup-control-active:hover {
1465 background-color: #d2e6f9;
1466 }
1467 .notification-body .filter-button-group .easydocs-btn:hover {
1468 --notification-icon: var(--clr-white);
1469 background: #cdcdcd;
1470 }
1471
1472 .notify-column {
1473 max-height: 25rem;
1474 overflow-y: auto;
1475 scrollbar-width: thin;
1476 /* Notification updated css */
1477 }
1478 .notify-column::-webkit-scrollbar-track {
1479 background-color: var(--clr-text-light);
1480 }
1481 .notify-column::-webkit-scrollbar {
1482 width: 8px;
1483 background-color: #F5F5F5;
1484 }
1485 .notify-column::-webkit-scrollbar-thumb {
1486 background-color: var(--clr-text);
1487 }
1488 .notify-column ul li {
1489 border-bottom: 1px solid #f1f2f3;
1490 margin-bottom: 0;
1491 }
1492 .notify-column ul li a {
1493 text-decoration: none;
1494 gap: 9px;
1495 align-content: space-around;
1496 padding: 10px;
1497 box-sizing: border-box;
1498 }
1499 .notify-column ul li a .notify-icon {
1500 padding-top: 5px;
1501 }
1502 .notify-column ul li a .notify-content-wrap {
1503 width: -webkit-fill-available;
1504 }
1505 .notify-column ul li a .notify-content-wrap .notify-content-header {
1506 color: hsl(210, 8%, 35%);
1507 font-size: 12px;
1508 }
1509 .notify-column ul li a .notify-content-wrap .notify-content-header .noti-type {
1510 color: var(--black_800);
1511 font-weight: 500;
1512 }
1513 .notify-column ul li a .notify-content-wrap .notify-content-summary p {
1514 color: hsl(206, 100%, 40%);
1515 font-size: 13px;
1516 }
1517 .notify-column ul li a:focus {
1518 box-shadow: none;
1519 }
1520 .notify-column ul li:hover {
1521 background: hsl(210, 8%, 90%);
1522 }
1523 .notify-column ul li:last-child {
1524 border-bottom: none;
1525 }
1526
1527 .notification-item {
1528 display: flex;
1529 align-items: flex-start;
1530 cursor: pointer;
1531 gap: var(--gutter-10);
1532 padding: var(--gutter-10) 15px;
1533 margin-left: var(--gutter-10);
1534 margin-right: var(--gutter-10);
1535 -webkit-transition: 0.3s ease-out;
1536 transition: 0.3s ease-out;
1537 border-radius: 0.3125rem;
1538 }
1539 .notification-item .notification-image {
1540 width: 2.5rem;
1541 height: 2.5rem;
1542 border-radius: 50%;
1543 position: relative;
1544 }
1545 .notification-item .notification-image .notify-badge {
1546 right: 0;
1547 bottom: 0;
1548 position: absolute;
1549 width: 1.125rem;
1550 height: 1.125rem;
1551 line-height: 1.125rem;
1552 border-radius: 50%;
1553 text-align: center;
1554 }
1555 .notification-item .notification-image .notify-badge .dashicons {
1556 top: 0;
1557 }
1558 .notification-item .notification-image .notify-badge-blue {
1559 background-color: #22AAF1;
1560 background-image: linear-gradient(180deg, #22AAF1 0%, #066BDA 100%);
1561 }
1562 .notification-item .notification-image .notify-badge-blue .dashicons {
1563 font-size: 12px;
1564 color: white;
1565 padding-top: 2.5px;
1566 }
1567 .notification-item .notification-image .notify-badge-green {
1568 background-color: #62D77E;
1569 background-image: linear-gradient(180deg, #62D77E 0%, #2BB64E 100%);
1570 }
1571 .notification-item .notification-image .notify-badge-green .dashicons {
1572 font-size: 12px;
1573 color: white;
1574 padding-top: 4px;
1575 }
1576 .notification-item:hover {
1577 background: rgba(76, 76, 241, 0.05);
1578 }
1579
1580 .notification-content .notify-name {
1581 font-size: var(--fs-14);
1582 font-weight: var(--fw-500);
1583 color: var(--clr-dark);
1584 padding-right: 0.5rem;
1585 margin: 0;
1586 line-height: 1;
1587 }
1588 .notification-content .notify-name a {
1589 text-decoration: none;
1590 }
1591 .notification-content .reply-text {
1592 font-size: 14px;
1593 color: var(--clr-text-light);
1594 line-height: 1;
1595 margin-top: 5px;
1596 }
1597
1598 .notify-short-description {
1599 font-size: var(--fs-14);
1600 color: var(--clr-text);
1601 line-height: 1;
1602 margin-top: 0.325rem;
1603 }
1604
1605 .notify-date {
1606 text-align: left;
1607 color: var(--clr-text-light);
1608 line-height: 1;
1609 margin-top: 0.375rem;
1610 }
1611
1612 .eazydocs-no-content {
1613 display: block;
1614 text-align: center;
1615 margin-top: 250px;
1616 }
1617 .eazydocs-no-content img {
1618 width: auto;
1619 max-width: 50px;
1620 height: auto;
1621 margin: 0px auto 10px;
1622 }
1623
1624 .bbpc-trash-filter {
1625 border-radius: 1.875rem;
1626 margin-bottom: 0;
1627 background-color: rgba(212, 23, 23, 0.1);
1628 transition: all 0.3s;
1629 }
1630 .bbpc-trash-filter:hover {
1631 background-color: rgba(212, 23, 23, 0.3);
1632 }
1633 .bbpc-trash-filter svg {
1634 fill: rgb(212, 23, 23);
1635 }
1636 .bbpc-trash-filter a {
1637 justify-content: center;
1638 gap: 0.3125rem;
1639 padding: 5px 15px;
1640 font-size: 14px;
1641 display: flex;
1642 align-items: center;
1643 color: rgb(212, 23, 23);
1644 text-decoration: none;
1645 }
1646
1647 .bbpc-settings-icon {
1648 background: rgba(0, 0, 255, 0.058);
1649 padding: 10px;
1650 border-radius: 50%;
1651 }
1652
1653 /*----------------------------------------*/
1654 /* Grid Layout
1655 /*----------------------------------------*/
1656 .container {
1657 width: 100%;
1658 padding-right: 15px;
1659 padding-left: 15px;
1660 margin-right: auto;
1661 margin-left: auto;
1662 }
1663 @media (min-width: 576px) {
1664 .container {
1665 max-width: 540px;
1666 }
1667 }
1668 @media (min-width: 768px) {
1669 .container {
1670 max-width: 720px;
1671 }
1672 }
1673 @media (min-width: 992px) {
1674 .container {
1675 max-width: 960px;
1676 }
1677 }
1678 @media (min-width: 1200px) {
1679 .container {
1680 max-width: 1170px;
1681 }
1682 }
1683 @media (min-width: 1441px) {
1684 .container {
1685 max-width: 1170px;
1686 }
1687 }
1688
1689 .container-fluid {
1690 width: 100%;
1691 padding-right: 15px;
1692 padding-left: 15px;
1693 margin-right: auto;
1694 margin-left: auto;
1695 }
1696
1697 .row {
1698 display: flex;
1699 flex-wrap: wrap;
1700 margin-right: -15px;
1701 margin-left: -15px;
1702 }
1703
1704 .no-gutters {
1705 margin-right: 0;
1706 margin-left: 0;
1707 }
1708 .no-gutters > .col,
1709 .no-gutters > [class*=col-] {
1710 padding-right: 0;
1711 padding-left: 0;
1712 }
1713
1714 html, body {
1715 height: auto !important;
1716 }
1717
1718 body.bbpc-forum-ui {
1719 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%);
1720 background-blend-mode: screen, screen, lighten, overlay, lighten, difference, normal;
1721 }
1722
1723 /*----------------------------------------*/
1724 /* 03. Sidebar Area
1725 /*----------------------------------------*/
1726 .tab-container {
1727 display: flex;
1728 }
1729
1730 .tab-menu {
1731 position: relative;
1732 background: #000000;
1733 background: -moz-linear-gradient(to right, #000000 0%, #0a1852 100%);
1734 background: -webkit-linear-gradient(to right, #000000 0%, #0a1852 100%);
1735 background: linear-gradient(to right, #000000 0%, #0a1852 100%);
1736 flex: 0 0 auto;
1737 width: 28%;
1738 }
1739 .tab-menu.short {
1740 height: 100vh;
1741 }
1742 @media (max-width: 1680px) {
1743 .tab-menu {
1744 width: 30%;
1745 }
1746 }
1747 .tab-menu .tab-menu-left-layer {
1748 position: absolute;
1749 top: 0;
1750 left: 0;
1751 width: 60px;
1752 height: 100%;
1753 -webkit-transition: 0.3s ease-out;
1754 transition: 0.3s ease-out;
1755 background: rgba(143, 143, 143, 0.3);
1756 }
1757
1758 .easydocs-tab {
1759 display: none;
1760 }
1761 .easydocs-tab.tab-active {
1762 display: block;
1763 }
1764
1765 .easydocs-navitem {
1766 display: flex;
1767 align-items: center;
1768 justify-content: space-between;
1769 padding: 12px 30px 12px 12px;
1770 margin-bottom: 5px;
1771 cursor: pointer;
1772 -webkit-transition: 0.3s ease-out;
1773 transition: 0.3s ease-out;
1774 position: relative;
1775 border-left: 5px solid transparent;
1776 }
1777 @media (max-width: 1680px) {
1778 .easydocs-navitem {
1779 padding: 13px 25px 13px 20px;
1780 }
1781 }
1782 .easydocs-navitem.is-active {
1783 border-left-color: #72aee6;
1784 background: rgba(159, 162, 180, 0.2);
1785 --title-opacity: 1;
1786 --total-page-opacity: 1;
1787 }
1788 .easydocs-navitem.is-active::before {
1789 content: "";
1790 right: 0;
1791 position: absolute;
1792 width: 0;
1793 height: 0;
1794 border-style: solid;
1795 border-width: 7px 10px 7px 0;
1796 border-color: transparent var(--clr-white) transparent transparent;
1797 display: block;
1798 }
1799 .easydocs-navitem.is-active .total-page {
1800 display: none;
1801 }
1802 .easydocs-navitem.is-active .link {
1803 display: flex;
1804 }
1805 .easydocs-navitem .title {
1806 display: flex;
1807 align-items: center;
1808 gap: 0.625rem;
1809 -webkit-transition: 0.3s ease-out;
1810 transition: 0.3s ease-out;
1811 text-decoration: none;
1812 font-size: var(--fs-16);
1813 font-weight: 500;
1814 color: var(--clr-white);
1815 opacity: var(--title-opacity, 0.7);
1816 }
1817 .easydocs-navitem .title img {
1818 border-radius: 7px;
1819 padding: 5px;
1820 height: auto;
1821 background: #fff;
1822 width: 30px;
1823 }
1824 .easydocs-navitem .title span.dashicons {
1825 width: 32px;
1826 }
1827 .easydocs-navitem .title span.easydocs-forums-title {
1828 padding-left: 20px;
1829 }
1830 .easydocs-navitem .total-page {
1831 font-size: var(--fs-12);
1832 color: var(--clr-white);
1833 opacity: var(--total-page-opacity, 0.5);
1834 -webkit-transition: 0.3s ease-out;
1835 transition: 0.3s ease-out;
1836 }
1837 .easydocs-navitem:hover {
1838 background: rgba(159, 162, 180, 0.2);
1839 --title-opacity: 1;
1840 --total-page-opacity: 1;
1841 }
1842 .easydocs-navitem:hover .total-page {
1843 display: none;
1844 }
1845 .easydocs-navitem:hover .link {
1846 display: flex;
1847 }
1848 .easydocs-navitem:hover .link a {
1849 padding-left: 2px;
1850 padding-right: 2px;
1851 }
1852
1853 .link {
1854 align-items: center;
1855 gap: 0.325rem;
1856 display: none;
1857 -webkit-transition: 0.3s ease-out;
1858 transition: 0.3s ease-out;
1859 }
1860 .link a {
1861 text-decoration: none;
1862 }
1863 .link a .dashicons {
1864 color: var(--black_200);
1865 font-size: 18px;
1866 padding-top: 2px;
1867 }
1868 .link a .dashicons:hover {
1869 color: #fff;
1870 }
1871 .link a.st-pro-notice .dashicons {
1872 color: #f1bd6c;
1873 }
1874 .link:hover svg {
1875 color: #fff;
1876 fill-color: #fff;
1877 }
1878
1879 .easydocs-tab-content {
1880 flex: 0 0 auto;
1881 width: 72%;
1882 padding: 0 40px 40px 40px;
1883 }
1884 @media (max-width: 1680px) {
1885 .easydocs-tab-content {
1886 width: 70%;
1887 }
1888 }
1889 @media (max-width: 1440px) {
1890 .easydocs-tab-content {
1891 width: 70%;
1892 padding: 20px;
1893 }
1894 }
1895 .easydocs-tab-content .button {
1896 padding: 6px 25px;
1897 }
1898
1899 .easydocs-filter-container {
1900 background: var(--clr-white);
1901 padding: var(--gutter-15) var(--gutter-30);
1902 border-radius: 0.375rem;
1903 display: flex;
1904 align-items: center;
1905 justify-content: space-between;
1906 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%);
1907 background-blend-mode: screen, color-dodge, color-dodge, normal;
1908 padding-left: 16px;
1909 }
1910 @media (max-width: 1440px) {
1911 .easydocs-filter-container {
1912 padding: 10px 20px;
1913 }
1914 }
1915
1916 .single-item-filter {
1917 display: flex;
1918 align-items: center;
1919 gap: 5px;
1920 }
1921 .single-item-filter.all-available li {
1922 padding: 5px 15px;
1923 }
1924 .single-item-filter .easydocs-btn {
1925 display: flex;
1926 align-items: center;
1927 justify-content: center;
1928 font-size: 12px;
1929 gap: 0.3125rem;
1930 --btn-fs: var(--fs-14);
1931 transition: all 0.3s;
1932 border-radius: 15px;
1933 padding: 5px 25px;
1934 }
1935 .single-item-filter .easydocs-btn:hover {
1936 background-color: rgba(0, 0, 0, 0.1);
1937 }
1938 .single-item-filter .easydocs-btn.is-active {
1939 background-color: rgba(0, 0, 0, 0.8);
1940 color: #f1f1f1;
1941 }
1942 .single-item-filter .easydocs-btn.easydocs-btn-black-light {
1943 --btn-icon: #0D0E2B;
1944 }
1945 .single-item-filter .easydocs-btn.easydocs-btn-black-light svg {
1946 fill: #0D0E2B;
1947 }
1948 .single-item-filter .easydocs-btn.easydocs-btn-black-light.mixitup-control-active {
1949 --btn-bg: #0D0E2B;
1950 --btn-clr: var(--clr-white);
1951 --btn-icon: var(--clr-white);
1952 }
1953 .single-item-filter .easydocs-btn.easydocs-btn-black-light.mixitup-control-active svg {
1954 fill: #ffffff;
1955 }
1956 .single-item-filter .easydocs-btn.easydocs-btn-green-light {
1957 --btn-icon: #2DB22D;
1958 }
1959 .single-item-filter .easydocs-btn.easydocs-btn-green-light svg {
1960 fill: #2DB22D;
1961 }
1962 .single-item-filter .easydocs-btn.easydocs-btn-green-light.mixitup-control-active {
1963 --btn-bg: #2DB22D;
1964 --btn-clr: var(--clr-white);
1965 --btn-icon: var(--clr-white);
1966 }
1967 .single-item-filter .easydocs-btn.easydocs-btn-green-light.mixitup-control-active svg {
1968 fill: #ffffff;
1969 }
1970 .single-item-filter .easydocs-btn.easydocs-btn-blue-light {
1971 --btn-icon: #0275D8;
1972 }
1973 .single-item-filter .easydocs-btn.easydocs-btn-blue-light svg {
1974 fill: #0275D8;
1975 }
1976 .single-item-filter .easydocs-btn.easydocs-btn-blue-light.mixitup-control-active {
1977 --btn-bg: #0275D8;
1978 --btn-clr: var(--clr-white);
1979 --btn-icon: var(--clr-white);
1980 }
1981 .single-item-filter .easydocs-btn.easydocs-btn-blue-light.mixitup-control-active svg {
1982 fill: #fff;
1983 }
1984 .single-item-filter .easydocs-btn.easydocs-btn-orange-light {
1985 --btn-icon: #CC8033;
1986 }
1987 .single-item-filter .easydocs-btn.easydocs-btn-orange-light svg {
1988 fill: #CC8033;
1989 }
1990 .single-item-filter .easydocs-btn.easydocs-btn-orange-light.mixitup-control-active {
1991 --btn-bg: #CC8033;
1992 --btn-clr: var(--clr-white);
1993 --btn-icon: var(--clr-white);
1994 }
1995 .single-item-filter .easydocs-btn.easydocs-btn-orange-light.mixitup-control-active svg {
1996 fill: #fff;
1997 }
1998 .single-item-filter .easydocs-btn.easydocs-btn-gray-light {
1999 --btn-icon: #424242;
2000 }
2001 .single-item-filter .easydocs-btn.easydocs-btn-gray-light.mixitup-control-active {
2002 --btn-bg: #424242;
2003 --btn-clr: var(--clr-white);
2004 --btn-icon: var(--clr-white);
2005 }
2006
2007 .single-grid-container {
2008 display: flex;
2009 align-items: center;
2010 border: 1px solid #EDEAE9;
2011 border-radius: 0.375rem;
2012 --grid-icon: #9199A1;
2013 }
2014 .single-grid-container a {
2015 text-decoration: none;
2016 padding: 0.3rem 0.5rem 0.5rem;
2017 height: 1.875rem;
2018 }
2019 .single-grid-container a:first-child {
2020 border-right: 1px solid #EDEAE9;
2021 }
2022 .single-grid-container .is-active {
2023 background: rgba(37, 39, 51, 0.05);
2024 --grid-icon: var(--clr-blue);
2025 }
2026
2027 @media screen and (min-width: 1200px) {
2028 .container {
2029 max-width: 1170px;
2030 }
2031 }
2032
2033 /*# sourceMappingURL=admin-ui-style.css.map */
2034