@charset "UTF-8"; /** * Convert font-size from px to rem with px fallback * * @param $size - the value in pixel you want to convert * * e.g. p font-size: fs-rem(12px); * e.g. p {@include fontSize(12px);} * */ /*-------------------------------------- - Base ----------------------------------------*/ /** * Convert font-size from px to rem with px fallback * * @param $size - the value in pixel you want to convert * * e.g. p {@include fontSize(12px);} * */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"); .col { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } /*-------------------------------------- - Utilities ----------------------------------------*/ :root { --container-width: 100%; --container-sm: 33.75rem; --container-md: 45rem; --container-lg: 60rem; --container-xl: 71.25rem; --container-xxl: 90rem; --container-fluid: 100%; --gutter-x: 1.875rem; --gutter-3: 0.125rem; --gutter-5: 0.225rem; --gutter-10: 0.625rem; --gutter-15: 0.9375rem; --gutter-20: 1.25rem; --gutter-25: 1.5625rem; --gutter-30: 1.875rem; --gutter-32: 2rem; --gutter-35: 2.1875rem; --gutter-40: 2.5rem; --gutter-45: 2.8125rem; --gutter-50: 3.125rem; --ff-roboto: "Roboto", sans-serif; --fw-100: 100; --fw-200: 200; --fw-300: 300; --fw-400: 400; --fw-500: 500; --fw-600: 600; --fw-700: 700; --fw-800: 800; --fw-900: 900; --fs-12: 0.75rem; --fs-13: 0.8125rem; --fs-14: 0.875rem; --fs-15: 0.9375rem; --fs-16: 1rem; --fs-17: 1.0625rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-21: 1.3125rem; --fs-24: 1.5rem; --fs-25: 1.5625rem; --fs-28: 1.75rem; --fs-30: 1.875rem; --fs-32: 2rem; --fs-35: 2.1875rem; --fs-40: 2.5rem; --fs-45: 2.8125rem; --hr-bg: var(--clr-black); --hr-width: 100%; --hr-height: 0.3125rem; --hr-gutter-y: 1.875rem; --hr-gutter-x: 0; --hr-padding: 0; --hr-radius: 0; --m: 0; --mt: 0; --mr: 0; --mb: 0; --ml: 0; --mx: 0; --my: 0; --m-auto: auto; --my-auto: auto; --mx-auto: auto; --p: 0; --pt: 0; --pr: 0; --pb: 0; --pl: 0; --px: 0; --py: 0; --p-auto: auto; --py-auto: auto; --px-auto: auto; --border-width: 0.0625rem; --border-style: solid; --border-clr: transparent; --border: var(--border-width) var(--border-style) var(--border-clr); --border-t: var(--border-width) var(--border-style) var(--border-clr); --border-r: var(--border-width) var(--border-style) var(--border-clr); --border-b: var(--border-width) var(--border-style) var(--border-clr); --border-l: var(--border-width) var(--border-style) var(--border-clr); --border-x: var(--border-width) var(--border-style) var(--border-clr); --border-y: var(--border-width) var(--border-style) var(--border-clr); --radius: 0; --radius-t: 0; --radius-r: 0; --radius-b: 0; --radius-l: 0; --radius-full: 50%; --btn-bg: transparent; --btn-clr: inherit; --btn-ff: var(--ff-roboto); --btn-fs: var(--fs-15); --btn-py: 0.625rem; --btn-px: 1.125rem; --btn-my: var(--my); --btn-mx: var(--mx); --clr-black: #000; --clr-black-100: #0D0E2B; --clr-dark: #252733; --clr-text: #575766; --clr-text-light: #9199A1; --clr-white: #fff; --frmx_brand_color: #6a28ea; --clr-orange: #ff5a46; --clr-yellow: #FFE132; --black_50: #ebebeb; --black_100: #d6d9dc; --black_150: #c8ccd0; --black_200: #bbc0c4; --black_300: #9fa6ad; --black_350: #9199a1; --black_400: #848d95; --black_500: #6a737c; --black_600: #535a60; --black_700: #3c4146; --black_750: #2f3337; --black_800: #242729; --black_900: #0c0d0e; } /* Box sizing rules */ *, *::before, *::after { box-sizing: border-box; } /* Remove default margin */ body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; } /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ ul[role=list], ol[role=list] { list-style: none; } /* Set core root defaults */ html:focus-within { scroll-behavior: smooth; } /* Set core body defaults */ body { font-family: var(--ff-roboto); font-weight: 400; font-size: var(--fs-15); line-height: 1.5625rem; text-rendering: optimizeSpeed; color: var(--clr-black); } /* A elements that don't have a class get default styles */ a:not([class]) { -webkit-text-decoration-skip: ink; text-decoration-skip-ink: auto; } /* Make images easier to work with */ img, picture { max-width: 100%; display: block; } /* Inherit fonts for inputs and buttons */ input, button, textarea, select { font: inherit; } button { border: none; background: transparent; outline: none; cursor: pointer; } .hr { background: var(--clr-black-200); width: 100%; height: 1px; margin: 50px 0; padding: 0; border: none; border-radius: 0; opacity: 1; } /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */ @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .fill-current { fill: currentColor; } .scrollToTop { width: 30px; height: 30px; line-height: 30px; text-align: center; color: var(--frmx_brand_color); font-size: 25px; background: transparent; position: fixed; right: 20px; bottom: 50px; display: none; z-index: 99999; border-radius: 50%; } @media screen and (min-width: 576px) { .scrollToTop { width: 50px; height: 50px; line-height: 50px; } } .scrollToTop:hover { color: var(--frmx_brand_color); } .no-scroll-y { overflow-y: hidden; } .text-blue { color: var(--frmx_brand_color); } .green { color: #27ae60; } .red { color: #e74c3c; } h1, h2, h3, h4, h5, h6 { font-family: var(--ff-roboto); color: #14183E; line-height: 1.4; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; } h1 { font-size: 2rem; } @media screen and (min-width: 20rem) { h1 { font-size: calc(2rem + 1.75 * (100vw - 20rem) / 55); } } @media screen and (min-width: 75rem) { h1 { font-size: 3.75rem; } } h2 { font-size: 2rem; } @media screen and (min-width: 20rem) { h2 { font-size: calc(2rem + 1 * (100vw - 20rem) / 55); } } @media screen and (min-width: 75rem) { h2 { font-size: 3rem; } } h3 { font-size: 1.375rem; } @media screen and (min-width: 20rem) { h3 { font-size: calc(1.375rem + 0.125 * (100vw - 20rem) / 55); } } @media screen and (min-width: 75rem) { h3 { font-size: 1.5rem; } } h4 { font-size: 1rem; } @media screen and (min-width: 20rem) { h4 { font-size: calc(1rem + 0.125 * (100vw - 20rem) / 55); } } @media screen and (min-width: 75rem) { h4 { font-size: 1.125rem; } } ul { margin: 0; padding: 0; } li { list-style: none; } hr { background: #c2cfff; width: 50px; height: 3px; margin: 35px 0; padding: 0; border: none; } @media screen and (min-width: 768px) { hr { margin-top: 25px; margin-bottom: 25px; } } p { margin: 0; } label { color: var(--clr-black); cursor: pointer; font-size: 14px; font-weight: 400; } /*Home 3 Default Font Family*/ .home-3 { font-size: var(--fs-15); font-weight: var(--fw-400); color: var(--clr-black); font-family: var(--font-quicksand); } /*Home 3 Default Font Family*/ .home-4 { font-size: var(--fs-15); font-weight: var(--fw-400); font-family: var(--font-arimo); } .alignment-center { align-items: center; } .justify-content-between { justify-content: space-between; } .justify-content-end { justify-content: end; } /*-------------------------------------- - Color ----------------------------------------*/ .color { color: var(--clr-black); } .text-black { color: var(--clr-black) !important; } .bg-black { background: var(--clr-black); } .text-white { color: var(--clr-white) !important; } .bg-white { background: var(--clr-white); } .d-block { display: block; } .d-inline-block { display: inline-block; } .d-grid { display: grid; } .d-flex { display: flex; } .flex-row { flex-direction: row; } .flex-reverse { flex-direction: row-reverse; } .flex-column { flex-direction: column; } .flex-column-reverse { flex-direction: column-reverse; } /*-- - Font Famaly -----------------------------------------*/ /*-- - Font weight -----------------------------------------*/ .font-regular { font-weight: var(--fw-400); } .font-medium { font-weight: var(--fw-500); } .font-semi-bold { font-weight: var(--fw-600); } .font-bold { font-weight: var(--fw-700); } .font-black { font-weight: var(--fw-900); } /*-- - Font Size -----------------------------------------*/ /*-- - Margin -------------------------------------------*/ .mt-n3 { margin-top: -0.4375rem; } .mt-n4 { margin-top: -0.75rem; } .m-auto { margin: auto; } .mx-auto { margin-left: auto; margin-right: auto; } .mt-0 { margin-top: 0; } .mt-73 { margin-top: 4.5625rem; } .mb-8 { margin-bottom: 2rem; } .mr-1 { margin-right: 0.25rem; } @media (min-width: 768px) { .mt-md-n4 { margin-top: -0.75rem; } } .mt-40 { margin-top: 40px; } /*--- -- Padding -------------------------------------------*/ /*----------------------------------------*/ /* Component CSS /*----------------------------------------*/ .easydocs-accordion { position: relative; padding: 0; list-style: none; margin: 10px 0 20px; background: var(--clr-white); border-radius: 5px; overflow: hidden; border: 1px solid #edeae9; } .easydocs-accordion .acc_active .accordion-title { border-bottom: 1px solid #edeae9; } .easydocs-accordion .acc_active .accordion-title::before { transform: translateY(-50%) rotate(90deg); } .easydocs-accordion .ui-state-highlight { height: 50px; background: #f9f9f9; border-top: 1px solid #afabac; border-bottom: 1px solid #afabac; } .easydocs-accordion-item { width: 100%; margin: 0; } .easydocs-accordion-item + .easydocs-accordion-item { border-top: 1px solid #edeae9; } .easydocs-accordion-item.is-accordion-open:last-child .accordion-title { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .easydocs-accordion-item.child-one .child-right-content { align-items: center; } .easydocs-accordion-item.child-one .child-right-content .progress-text a { font-size: 14px; color: var(--clr-text-light); margin-right: var(--gutter-30); text-decoration: none; } .easydocs-accordion-item.child-one .accordion-title::before { transform: translateY(-50%); } .easydocs-accordion-item.child-one.acc_active .accordion-title::before { transform: translateY(-50%) rotate(90deg); } .easydocs-accordion-item.child-one a { padding: 0; } .easydocs-accordion-item.child-one .accordion-title.has-child a.section-last-label { margin-left: 19px; } .easydocs-accordion-item.child-one .accordion-title.has-child::before { left: 52px; } .easydocs-accordion-item.child-one .nesting-accordion a.child-last-label { margin: 10px 50px 10px 70px; } .accordion-title { position: relative; background: #fff; padding: 15px 30px 15px 30px; cursor: pointer; } @media (max-width: 1440px) { .accordion-title { padding: 12px 20px 12px 34px; } } .accordion-title.ez-section-title h4 { font-weight: var(--fw-500); } @media (max-width: 1440px) { .accordion-title.ez-section-title::before { left: 20px; } } .accordion-title.has-child::before { content: ""; top: 50%; left: 32px; position: absolute; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 6px; border-color: transparent transparent transparent var(--clr-text); display: block; transform: translateY(-50%); transition: 0.3s ease-out; } @media (max-width: 1440px) { .accordion-title.has-child::before { left: 20px; } } .accordion-title .count { margin-left: 5px; color: #fff; background: var(--black_200); } .accordion-title ul.actions { display: flex; } .accordion-title ul.actions li { margin: 0; } .accordion-title:hover { background: #f9f9f9; } .accordion-title:hover h4 { color: var(--clr-dark); } .accordion-title:hover ul.actions { display: flex; } .accordion-title:hover ul.actions li { margin: 0; line-height: normal; } .accordion-title { display: flex; align-items: center; justify-content: space-between; } .accordion-title h4 { font-size: var(--fs-14); color: var(--clr-text); display: flex; align-items: center; font-weight: normal; } .accordion-title h4 a { text-decoration: none; } .accordion-title .accordion-category-icon { width: 1.25rem; height: 1.25rem; line-height: 1.25rem; border-radius: 50%; text-align: center; margin-left: 5px; } .accordion-title .light-green { background: rgba(45, 178, 45, 0.1); --category-icon: #2db22d; } .accordion-title .light-orange { background: rgba(204, 128, 51, 0.1); --category-icon: #cc8033; } .accordion-title .light-blue { background: rgba(2, 117, 216, 0.1); --category-icon: var(--frmx_brand_color); } .accordion-title .light-gray { background: rgba(66, 66, 66, 0.1); --category-icon: #424242; } .accordion-title ul.actions { display: none; align-items: center; gap: var(--gutter-10); --section-icon: #9199a1; margin-left: 15px; } .accordion-title ul.actions .duplicate { order: 1; } .accordion-title ul.actions .delete { order: 2; } .accordion-title ul.actions li:hover { --section-icon: var(--clr-dark); } .accordion-title ul.actions li a { text-decoration: none; } .accordion-title ul.actions li a .dashicons { color: var(--black_150); font-size: 18px; padding-top: 3px; } .accordion-title ul.actions li a .dashicons:hover { color: var(--black_400); } .accordion-title ul.actions li a img { opacity: 0.5; } .accordion-title ul.actions li a img:hover { opacity: 1; } .accordion-title ul.actions li a.st-pro-notice .dashicons { color: #f1bd6c; } .accordion-title .left-content { display: flex; align-items: center; } .accordion-title .left-content .topic-status { width: 30px; height: 20px; text-align: left; margin-right: 5px; } .accordion-title .left-content .bbpc-author-name { font-size: 14px; color: var(--clr-text-light); } .accordion-title .left-content .bbpc-author-name a { text-decoration: none; } .accordion-title .right-content { display: flex; align-items: center; } .accordion-title .right-content .progress-text a { font-size: 14px; color: var(--clr-text-light); margin-left: var(--gutter-30); text-decoration: none; } .easydocs-accordion-body { background: var(--clr-white); color: var(--clr-text); font-size: var(--fs-14); padding: 10px 50px 10px 50px; } .nesting-accordion { padding: 0; } .nesting-accordion a { text-decoration: none; } .child-docs-wrap { border-bottom: 1px solid #edeae9; } .child-docs-wrap:hover { background-color: #f9f9f9; } .child-docs-wrap .child-right-content { visibility: hidden; } .child-docs-wrap:hover .child-right-content { visibility: visible; } a.child-delete, a.child-view-link { padding-left: 5px !important; padding-right: 5px !important; } a.child-delete img, a.child-view-link img { opacity: 0.5; } a.child-delete img:hover, a.child-view-link img:hover { opacity: 1; } a.child-delete { padding-right: 28px !important; } /* replies count */ .count-replies span { position: absolute; top: 1px; left: 8px; color: #fff; font-size: 0.55em; } .bbpc-reply-count { box-sizing: border-box; display: block; padding: 0; min-width: 22px; height: 2em; border-radius: 5px; background-color: var(--black_200); color: #fff; font-size: 10px; line-height: 1.9090909; text-align: center; margin-left: 10px; } .bbpc-reply-count:after { content: ""; display: block; margin-left: 11px; width: 0; height: 0; border-top: 5px solid var(--black_200); border-right: 5px solid transparent; } .bbpc-reply-count.bbpc-published-replies { background-color: #cc8033; } .bbpc-reply-count.bbpc-published-replies:after { border-top: 5px solid #cc8033; } .bbpc-pending-replies:hover, .bbpc-pending-replies:active { background: #0275d8; } .bbpc-pending-replies:hover:after, .bbpc-pending-replies:active:after { border-top-color: #0275d8; } .bbpc-nested-replies { margin-left: 30px; display: none; } .ez-section-title div:has(.active) .bbpc-pending-replies { background: #0275d8; } .ez-section-title div:has(.active) .bbpc-pending-replies:after { border-top-color: #0275d8; } .bbpc-reply-wrap { background-color: #fff; padding: 8px 0; margin-left: 20px; } .bbpc-reply-wrap a { width: 22px; height: 22px; display: inline-block; } .bbpc-reply-wrap:hover { background: #f9f9f9; } .bbpc-reply-wrap:not(:last-child) { border-bottom: 1px solid #edeae9; } .bbpc-admin-pagination { margin-bottom: 15px; } .bbpc-admin-pagination button { border: 1px solid; min-width: 35px; border-radius: 4px; background: rgba(0, 0, 0, 0.8); color: white; } .bbpc-admin-pagination button:hover, .bbpc-admin-pagination button.mixitup-control-active { background: var(--frmx_brand_color); } .ezd-btn { --btn-fs: var(--fs-16); --btn-ff: var(--ff-roboto); --btn-py: 0.5rem; --btn-px: 1.6rem; position: relative; font-family: var(--btn-ff); font-size: var(--btn-fs); font-weight: var(--fw-400); line-height: 1.5; background: var(--btn-bg); color: var(--btn-clr); border: var(--btn-bw, var(--border-width)) var(--btn-bs, var(--border-style)) var(--btn-bc, var(--btn-bg)); text-transform: capitalize; text-decoration: none; border-radius: var(--btn-radius, var(--radius)); padding: var(--btn-py) var(--btn-px); margin: var(--btn-mx) var(--btn-mx); display: inline-block; overflow: hidden; text-align: center; cursor: pointer; transition: 0.3s ease-out; } .ezd-btn-sm { --btn-py: 0.3125rem; } .ezd-btn-lg { --btn-py: 0.625rem; } .ezd-btn-xl { --btn-py: 0.75rem; } .ezd-btn-none { --btn-radius: 0; } .ezd-btn-round { --btn-radius: 0.375rem; } .ezd-btn-rounded { --btn-radius: 1.875rem; } .ezd-btn-round-full { --btn-radius: 50%; } .ezd-btn-disabled { pointer-events: none; opacity: 0.65; } .ezd-btn-black-light { --btn-bg: rgba(13, 14, 43, 0.1); --btn-clr: #0D0E2B; --btn-bc: transparent; } .ezd-btn-black-light:hover { --btn-clr: #0D0E2B; --btn-bg: rgba(13, 14, 43, 0.1); --btn-bc: #0D0E2B; } .ezd-btn-black-light:focus { outline: 0; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5); } .ezd-btn-green-light { --btn-bg: rgba(45, 178, 45, 0.1); --btn-clr: #2DB22D; --btn-bc: transparent; } .ezd-btn-green-light:hover { --btn-clr: #2DB22D; --btn-bg: rgba(45, 178, 45, 0.1); --btn-bc: #2DB22D; } .ezd-btn-green-light:focus { outline: 0; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5); } .ezd-btn-blue-light { --btn-bg: rgba(2, 117, 216, 0.1); --btn-clr: #0275D8; --btn-bc: transparent; } .ezd-btn-blue-light:hover { --btn-clr: #0275D8; --btn-bg: rgba(2, 117, 216, 0.1); --btn-bc: #0275D8; } .ezd-btn-blue-light:focus { outline: 0; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5); } .ezd-btn-orange-light { --btn-bg: rgba(204, 128, 51, 0.1); --btn-clr: #CC8033; --btn-bc: transparent; } .ezd-btn-orange-light:hover { --btn-clr: #CC8033; --btn-bg: rgba(204, 128, 51, 0.1); --btn-bc: #CC8033; } .ezd-btn-orange-light:focus { outline: 0; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5); } .ezd-btn-gray-light { --btn-bg: rgba(66, 66, 66, 0.1); --btn-clr: #424242; --btn-bc: transparent; } .ezd-btn-gray-light:hover { --btn-clr: #424242; --btn-bg: rgba(66, 66, 66, 0.1); --btn-bc: #424242; } .ezd-btn-gray-light:focus { outline: 0; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5); } .ezd-btn-blue { --btn-bg: var(--frmx_brand_color); --btn-clr: var(--clr-white); --btn-bc: var(--frmx_brand_color); } .ezd-btn-blue:hover { --btn-clr: var(--frmx_brand_color); --btn-bg: transparent; --btn-bc: var(--frmx_brand_color); } .ezd-btn-blue:focus { outline: 0; box-shadow: 0 0 0 0.4rem rgba(65, 65, 230, 0.5); } .ezd-btn-outline-blue { --btn-clr: #4141E6; --btn-bc: #4141E6; } .ezd-btn-outline-blue:hover { --btn-clr: var(--clr-white); --btn-bg: #4141E6; --btn-bc: #4141E6; } .ezd-btn-outline-blue:focus { outline: 0; box-shadow: 0 0 0 0.4rem rgba(65, 65, 230, 0.5); } .ezd-btn-white { --btn-bg: var(--clr-white); --btn-clr: var(--clr-white); --btn-bc: var(--clr-white); } .ezd-btn-white:hover { --btn-clr: var(--clr-white); --btn-bg: transparent; --btn-bc: var(--clr-white); } .ezd-btn-white:focus { outline: 0; box-shadow: 0 0 0 0.4rem rgba(255, 255, 255, 0.5); } .ezd-btn-outline-white { --btn-clr: var(--clr-white); --btn-bc: var(--clr-white); } .ezd-btn-outline-white:hover { --btn-clr: var(--clr-black); --btn-bg: var(--clr-white); --btn-bc: var(--clr-white); } .ezd-btn-outline-white:focus { outline: 0; box-shadow: 0 0 0 0.4rem rgba(var(--clr-white), 0.5); } .ezd-btn-gray { --btn-bg: rgba(37, 39, 51, 0.1); --btn-clr: var(--clr-dark); --btn-bc: transparent; } .ezd-btn-gray:hover { --btn-clr: var(--clr-white); --btn-bg: var(--frmx_brand_color); --btn-bc: transparent; } .ezd-btn-gray:focus { outline: 0; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.5); } .forumax-empty-actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; } .forumax-empty-actions .ezd-btn { display: inline-flex; align-items: center; gap: 6px; } .forumax-empty-actions .ezd-btn .dashicons { font-size: 18px; width: 18px; height: 18px; line-height: 1; } .forumax-actions-separator { color: #6b7280; font-size: 14px; font-weight: 500; } .forumax-import-demo-btn { background: linear-gradient(135deg, #7c3aed, #a855f7) !important; border-color: transparent !important; color: #fff !important; transition: all 0.3s ease; } .forumax-import-demo-btn:hover { background: linear-gradient(135deg, #6d28d9, #9333ea) !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3); } .forumax-import-demo-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3); } .forumax-import-demo-btn .dashicons { color: #fff; } .easydocs-dropdown { top: 130%; right: -20px; position: absolute; box-shadow: 0 30px 40px 0 rgba(4, 73, 89, 0.1) 0 0 0 rgba(var(--clr-black), 1); background-color: var(--clr-white); border-radius: 0.5rem; z-index: 999; transition: 0.3s ease-out; display: none; } .easydocs-dropdown.is-active { opacity: 1; visibility: visible; top: 130%; } .notification-dropdown { width: 400px; max-width: 95vw; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 8px 25px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04); overflow: hidden; animation: notificationSlideIn 0.25s ease-out; } @keyframes notificationSlideIn { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .notification-dropdown::before { content: ""; position: absolute; top: -8px; right: 24px; width: 16px; height: 16px; background: var(--frmx_brand_color); transform: rotate(45deg); border-radius: 2px; box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.05); } .notification-head { padding: 16px 20px; background: var(--frmx_brand_color); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; } .notification-head::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%); pointer-events: none; } .notification-head.no-notification-text { padding: 40px 20px; background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #6b7280; font-size: 14px; font-weight: 500; } .notification-head.no-notification-text::before { content: "🔔"; font-size: 32px; margin-bottom: 10px; opacity: 0.6; } .notification-head .header-text { color: #fff; font-size: 16px; font-weight: 700; letter-spacing: 0.3px; position: relative; z-index: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .notification-head .notification-action-btn { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 20px; padding: 6px 14px; font-size: 12px; font-weight: 500; color: #fff; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(4px); display: flex; align-items: center; gap: 6px; position: relative; z-index: 1; } .notification-head .notification-action-btn:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .notification-head .notification-action-btn:active { transform: translateY(0); } .notification-head .notification-action-btn .dashicons { font-size: 14px; width: 14px; height: 14px; } .notification-tabs { display: flex; padding: 0 16px; background: #fff; border-bottom: 1px solid #f1f5f9; gap: 16px; } .notification-tabs .notification-tab { padding: 14px 4px; background: transparent; border: none; border-bottom: 2px solid transparent; font-size: 13px; font-weight: 500; color: #64748b; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 6px; position: relative; } .notification-tabs .notification-tab:hover { color: #334155; } .notification-tabs .notification-tab:hover .tab-count { background: #e2e8f0; } .notification-tabs .notification-tab.is-active { color: var(--frmx_brand_color); border-bottom-color: var(--frmx_brand_color); } .notification-tabs .notification-tab.is-active .tab-count { background: var(--frmx_brand_color); color: #fff; } .notification-tabs .notification-tab .tab-count { background: #f1f5f9; color: #64748b; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; min-width: 20px; text-align: center; transition: all 0.2s ease; } .notification-body { background: #fff; position: relative; } .notify-column { max-height: 400px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; } .notify-column::-webkit-scrollbar { width: 5px; } .notify-column::-webkit-scrollbar-track { background: transparent; } .notify-column::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 20px; border: 2px solid transparent; background-clip: content-box; } .notify-column::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; } .notify-column ul { list-style: none; margin: 0; padding: 0; } .notify-column .notify-item { border-bottom: 1px solid #f1f5f9; margin: 0; position: relative; transition: background 0.2s ease; } .notify-column .notify-item:last-child { border-bottom: none; } .notify-column .notify-item:hover { background: #f8fafc; } .notify-column .notify-item:hover .notify-content-summary p { color: #1e293b; } .notify-column .notify-item.is-unread { background: #fdfeff; } .notify-column .notify-item.is-unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--frmx_brand_color); box-shadow: 2px 0 8px rgba(102, 126, 234, 0.4); } .notify-column .notify-item > a { display: flex; padding: 16px 20px; gap: 16px; text-decoration: none; align-items: flex-start; } .notify-column .notify-icon { flex-shrink: 0; } .notify-column .notify-icon-wrapper { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #f1f5f9; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); } .notify-column .notify-icon-wrapper.type-reply { background: linear-gradient(135deg, #34d399 0%, #10b981 100%); box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2); } .notify-column .notify-icon-wrapper.type-closed { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2); } .notify-column .notify-icon-wrapper.type-solved { background: var(--frmx_brand_color); box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2); } .notify-column .notify-icon-wrapper .dashicons, .notify-column .notify-icon-wrapper .icon_check_alt { color: #fff; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); } .notify-column .notify-icon-wrapper .dashicons { font-size: 20px; width: 20px; height: 20px; } .notify-column .notify-icon-wrapper .icon_check_alt { font-size: 18px; } .notify-column .notify-content-wrap { flex: 1; min-width: 0; } .notify-column .notify-content-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 8px; } .notify-column .noti-type { font-size: 11px; font-weight: 700; color: #475569; background: #e2e8f0; padding: 2px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.5px; display: inline-block; } .notify-column .noti-type.resolved { background: #e0e7ff; color: var(--frmx_brand_color); } .notify-column .notify-creation { font-size: 11px; color: #94a3b8; white-space: nowrap; } .notify-column .notify-content-summary p { font-size: 13px; line-height: 1.5; color: #64748b; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 400; } .notification-loading { padding: 16px; text-align: center; background: #f9fafb; border-top: 1px solid #f3f4f6; } .notification-loading .loading-spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid #e5e7eb; border-top-color: var(--frmx_brand_color); border-radius: 50%; animation: notificationSpin 0.8s linear infinite; } @keyframes notificationSpin { to { transform: rotate(360deg); } } .notification-loading .loading-text { font-size: 12px; color: #9ca3af; margin-top: 6px; } .notification-end { padding: 14px; text-align: center; font-size: 12px; color: #9ca3af; background: #f9fafb; border-top: 1px solid #f3f4f6; } .notification-end::before { content: "✓"; display: inline-block; margin-right: 6px; color: #10b981; } .notification-footer { padding: 12px 16px; background: #f8f9fb; border-top: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: center; } .notification-footer .view-all-link { font-size: 13px; font-weight: 500; color: var(--frmx_brand_color); text-decoration: none; display: flex; align-items: center; gap: 6px; transition: all 0.2s ease; } .notification-footer .view-all-link:hover { color: #764ba2; gap: 10px; } .notification-footer .view-all-link .dashicons { font-size: 14px; width: 14px; height: 14px; transition: transform 0.2s ease; } .notification-footer .view-all-link:hover .dashicons { transform: translateX(3px); } .notification-empty { padding: 40px 20px; text-align: center; } .notification-empty .empty-icon { width: 64px; height: 64px; margin: 0 auto 16px; background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .notification-empty .empty-icon .dashicons { font-size: 28px; width: 28px; height: 28px; color: #9ca3af; } .notification-empty .empty-title { font-size: 15px; font-weight: 600; color: #374151; margin-bottom: 6px; } .notification-empty .empty-text { font-size: 13px; color: #9ca3af; line-height: 1.5; } .notification-skeleton { padding: 14px 16px; display: flex; gap: 12px; animation: skeletonPulse 1.5s ease-in-out infinite; } @keyframes skeletonPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .notification-skeleton .skeleton-icon { width: 40px; height: 40px; border-radius: 10px; background: #e5e7eb; } .notification-skeleton .skeleton-content { flex: 1; } .notification-skeleton .skeleton-content .skeleton-line { height: 12px; background: #e5e7eb; border-radius: 4px; margin-bottom: 8px; } .notification-skeleton .skeleton-content .skeleton-line:first-child { width: 40%; } .notification-skeleton .skeleton-content .skeleton-line:last-child { width: 80%; margin-bottom: 0; } .form-control { font-family: var(--ff-roboto); font-size: var(--fs-14); color: #9199a1; background: transparent; text-transform: capitalize; padding: 0.75rem 1.25rem; margin: 0 auto; width: 100%; height: auto; max-width: 37.5rem; border: 1px solid #EDEAE9; border-radius: 0.625rem; transition: 0.3s ease-out; } .form-control:focus { outline: none; } .form-control:focus { background: white; box-shadow: none !important; border: 1px solid #4c4cf1 !important; border-radius: 0.625rem; box-sizing: border-box !important; line-height: unset !important; } .form-control:focus ~ .search-icon { background: var(--frmx_brand_color); --search-icon: var(--clr-white); } .form-control:focus ~ .search-icon .dashicons { color: #fff; } .easydocs-search-form { position: relative; max-width: 37.5rem; flex: 1; margin-left: auto; margin-right: auto; } .easydocs-search-form .search-icon { position: absolute; transition: 0.3s ease-out; left: 20px; transform: translateY(50%); } .easydocs-search-form input#bbpc-search { color: #9199a1; padding: 10px 15px 10px 48px; border: 1px solid #EDEAE9; box-sizing: border-box; line-height: unset; box-shadow: 0 1px 1px rgba(11, 80, 115, 0.3), 0 1px 5px rgba(60, 64, 67, 0.1); background: rgba(255, 255, 255, 0.35); border-radius: 25px; } .easydocs-search-form input#bbpc-search:hover { box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15); } .easydocs-search-form input#bbpc-search:focus { background: #fff; color: #242729; outline: none; } @media screen and (max-width: 1440px) { .easydocs-search-form { margin: 0 10px; } } .easydocs-accordion-item progress { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 6px; border-radius: 32px; width: 100px; } .easydocs-accordion-item progress::-webkit-progress-bar { background-color: #e74c3c; } .easydocs-accordion-item progress::-webkit-progress-value { background-color: #27ae60; } .badge { display: inline-block; padding: 0.35em 0.65em 0.3em; font-size: 0.75em; font-weight: 400; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: 0.25rem; } /*----------------------------------------*/ /* 02. Header Area /*----------------------------------------*/ .easydocs-header-area { padding-top: 40px; padding-bottom: 50px; padding-right: 40px; } .easydocs-header-area .easydocs-row { margin-left: 0; margin-right: 0; } .navbar-left { gap: var(--gutter-20); } .navbar-left .easydocs-btn { --btn-icon: var(--frmx_brand_color); --btn-py: 0.5rem; --btn-px: 1rem; --btn-fs: var(--fs-12); font-weight: 500; gap: 6px; display: flex; border: 1px solid var(--frmx_brand_color); align-items: center; text-decoration: none; padding: 8px 15px; border-radius: 6px; color: var(--frmx_brand_color); } .navbar-left .easydocs-btn span.dashicons { font-size: 14px; margin-bottom: -4px; } .navbar-left .easydocs-btn:hover { --btn-icon: var(--clr-white); background: var(--frmx_brand_color); } .navbar-left .easydocs-btn:focus { box-shadow: 0 0 0 0.4rem rgba(65, 65, 230, 0.5); } .easydocs-logo-area a { text-decoration: none; color: var(--clr-dark); font-size: var(--fs-24); font-weight: var(--fw-700); } :is(.easydocs-notification, .easydocs-settings) .header-notify-icon { width: 2.5rem; height: 2.5rem; line-height: 2.5rem; border-radius: 50%; background: rgba(37, 39, 51, 0.05); text-align: center; cursor: pointer; } :is(.easydocs-notification, .easydocs-settings) .header-notify-icon:hover { background: rgba(37, 39, 51, 0.09); } :is(.easydocs-notification, .easydocs-settings) .header-notify-icon svg { position: relative; top: 0.3rem; } .easydocs-notification { margin-right: 1.6875rem; position: relative; } .easydocs-notification .easydocs-badge { top: -0.4375rem; right: -0.5rem; position: absolute; background: #FA3E3E; color: var(--clr-white); top: -0.4375rem; right: -0.2rem; position: absolute; padding: 0 4px; min-width: 18px; max-width: 18px; border-radius: 50%; text-align: center; font-size: 10px; font-weight: 700; line-height: 18px; height: 16px; display: inline-table; font-family: "Roboto"; } .easydocs-settings .header-notify-icons a { text-decoration: none; padding-top: 5px; display: inline-block; } :is(.knobs, .layer) { inset: 0; position: absolute; } .navbar-right .js-darkmode-btn .day svg { color: #fff; } .navbar-right .js-darkmode-btn .night svg { color: var(--clr-dark); } .body_dark .navbar-right .js-darkmode-btn .day svg { --toggle-icon: #575766; } .body_dark .navbar-right .js-darkmode-btn .night svg { --toggle-icon: #fff; } .navbar-right { display: flex; align-items: center; justify-content: flex-end; } .navbar-right > ul { align-items: center; gap: 8px; } .navbar-right .js-darkmode-btn { display: flex; align-items: center; justify-content: space-between; width: 5rem; height: 2.5rem; position: relative; background: rgba(37, 39, 51, 0.05); padding: 0 10px; color: #fff; border-radius: 24px; transition: 0.3s ease-out; } .navbar-right .js-darkmode-btn .day svg { --toggle-icon: #fff; transition: 0.3s ease-out; margin-top: 7px; } .navbar-right .js-darkmode-btn .night svg { --toggle-icon: #575766; transition: 0.3s ease-out; margin-top: 7px; } .navbar-right .js-darkmode-btn label { margin: 0; cursor: pointer; position: relative; z-index: 2; } .navbar-right .js-darkmode-btn .ball { height: 30px; width: 30px; position: absolute; background-color: var(--frmx_brand_color); border-radius: 50%; left: 4px; top: 50%; transform: translateY(-50%); cursor: default; transition: all 0.3s linear 0s; z-index: 1; } .navbar-right .js-darkmode-btn svg { font-size: 16px; transition: all 0.3s linear 0s; } .navbar-right .js-darkmode-btn input { display: none; } .settings-pro-icon { position: absolute; right: 0px; top: -5px; } .swal2-styled.swal2-confirm.upgrade-premium-button > a { color: black; font-weight: normal; text-decoration: none; } .swal2-footer.notification-pro-footer-wrap > a { text-decoration: none; } .notification-body .filter-button-group { display: flex; gap: 8px; padding-left: var(--gutter-25); padding-right: var(--gutter-25); } .notification-body .filter-button-group svg { top: 0; } .notification-body .filter-button-group .easydocs-btn { --notification-icon: var(--clr-dark); --btn-px: 1rem; --btn-fs: var(--fs-14); --btn-py: 0.4rem; display: flex; align-items: center; gap: 1px; --btn-bg: #e4e6eb; --btn-clr: var(--clr-dark); --btn-bc: transparent; } .notification-body .filter-button-group .easydocs-btn.mixitup-control-active { background-color: #e7f3ff; color: #1877f2; --notification-icon: #1877f2; } .notification-body .filter-button-group .easydocs-btn.mixitup-control-active .dashicons-screenoptions:before { color: #1877f2; } .notification-body .filter-button-group .easydocs-btn.mixitup-control-active:hover { background-color: #d2e6f9; } .notification-body .filter-button-group .easydocs-btn:hover { --notification-icon: var(--clr-white); background: #cdcdcd; } .notify-column { max-height: 25rem; overflow-y: auto; scrollbar-width: thin; } .notify-column::-webkit-scrollbar-track { background-color: var(--clr-text-light); } .notify-column::-webkit-scrollbar { width: 8px; background-color: #F5F5F5; } .notify-column::-webkit-scrollbar-thumb { background-color: var(--clr-text); } .notify-column { /* Notification updated css */ } .notify-column ul li { border-bottom: 1px solid #f1f2f3; margin-bottom: 0; } .notify-column ul li a { text-decoration: none; gap: 9px; align-content: space-around; padding: 10px; box-sizing: border-box; } .notify-column ul li a .notify-icon { padding-top: 5px; } .notify-column ul li a .notify-content-wrap { width: -webkit-fill-available; } .notify-column ul li a .notify-content-wrap .notify-content-header { color: hsl(210, 8%, 35%); font-size: 12px; } .notify-column ul li a .notify-content-wrap .notify-content-header .noti-type { color: var(--black_800); font-weight: 500; } .notify-column ul li a .notify-content-wrap .notify-content-summary p { color: hsl(206, 100%, 40%); font-size: 13px; } .notify-column ul li a:focus { box-shadow: none; } .notify-column ul li:hover { background: hsl(210, 8%, 90%); } .notify-column ul li:last-child { border-bottom: none; } .notification-item { display: flex; align-items: flex-start; cursor: pointer; gap: var(--gutter-10); padding: var(--gutter-10) 15px; margin-left: var(--gutter-10); margin-right: var(--gutter-10); transition: 0.3s ease-out; border-radius: 0.3125rem; } .notification-item .notification-image { width: 2.5rem; height: 2.5rem; border-radius: 50%; position: relative; } .notification-item .notification-image .notify-badge { right: 0; bottom: 0; position: absolute; width: 1.125rem; height: 1.125rem; line-height: 1.125rem; border-radius: 50%; text-align: center; } .notification-item .notification-image .notify-badge .dashicons { top: 0; } .notification-item .notification-image .notify-badge-blue { background-color: #22AAF1; background-image: linear-gradient(180deg, #22AAF1 0%, #066BDA 100%); } .notification-item .notification-image .notify-badge-blue .dashicons { font-size: 12px; color: white; padding-top: 2.5px; } .notification-item .notification-image .notify-badge-green { background-color: #62D77E; background-image: linear-gradient(180deg, #62D77E 0%, #2BB64E 100%); } .notification-item .notification-image .notify-badge-green .dashicons { font-size: 12px; color: white; padding-top: 4px; } .notification-item:hover { background: rgba(76, 76, 241, 0.05); } .notification-content .notify-name { font-size: var(--fs-14); font-weight: var(--fw-500); color: var(--clr-dark); padding-right: 0.5rem; margin: 0; line-height: 1; } .notification-content .notify-name a { text-decoration: none; } .notification-content .reply-text { font-size: 14px; color: var(--clr-text-light); line-height: 1; margin-top: 5px; } .notify-short-description { font-size: var(--fs-14); color: var(--clr-text); line-height: 1; margin-top: 0.325rem; } .notify-date { text-align: left; color: var(--clr-text-light); line-height: 1; margin-top: 0.375rem; } .eazydocs-no-content { display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 80px auto; max-width: 600px; background: #fff; padding: 60px 40px; border-radius: 16px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01); border: 1px solid #f3f4f6; text-align: center; } .eazydocs-no-content img { width: 140px; max-width: 100%; height: auto; margin: 0 auto 24px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05)); transition: transform 0.3s ease; } .eazydocs-no-content img:hover { transform: scale(1.05); } .eazydocs-no-content .big-p { font-size: 1.25rem; color: #374151; font-weight: 600; margin-bottom: 32px; line-height: 1.5; } .eazydocs-no-content .forumax-empty-actions { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 0; width: 100%; } .eazydocs-no-content .forumax-empty-actions .ezd-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 28px; font-weight: 500; border-radius: 10px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0.95rem; gap: 8px; } .eazydocs-no-content .forumax-empty-actions .ezd-btn.button-primary { background: var(--frmx_brand_color); color: white; border: 1px solid transparent; box-shadow: 0 4px 6px -1px rgba(76, 76, 241, 0.3), 0 2px 4px -1px rgba(76, 76, 241, 0.1); } .eazydocs-no-content .forumax-empty-actions .ezd-btn.button-primary:hover { background-color: rgb(52.3497409326, 52.3497409326, 239.1502590674); transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(76, 76, 241, 0.4), 0 4px 6px -2px rgba(76, 76, 241, 0.2); } .eazydocs-no-content .forumax-empty-actions .ezd-btn.button-primary:active { transform: translateY(0); } .eazydocs-no-content .forumax-empty-actions .ezd-btn.forumax-import-demo-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.3), 0 4px 6px -2px rgba(124, 58, 237, 0.2); } .eazydocs-no-content .forumax-empty-actions .ezd-btn .dashicons { font-size: 18px; width: 18px; height: 18px; line-height: 1; margin: 0; } .eazydocs-no-content .forumax-empty-actions .forumax-actions-separator { color: #9ca3af; font-weight: 500; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; } .bbpc-trash-filter { border-radius: 1.875rem; margin-bottom: 0; background-color: rgba(212, 23, 23, 0.1); transition: all 0.3s; } .bbpc-trash-filter:hover { background-color: rgba(212, 23, 23, 0.3); } .bbpc-trash-filter:hover a { color: #c10000; } .bbpc-trash-filter svg { fill: rgb(212, 23, 23); } .bbpc-trash-filter a { justify-content: center; gap: 0.3125rem; padding: 5px 15px; font-size: 14px; display: flex; align-items: center; color: rgb(212, 23, 23); text-decoration: none; } @media screen and (max-width: 1440px) { .bbpc-trash-filter .filter-label-trash { display: none; } } .bbpc-settings-icon { background: rgba(0, 0, 255, 0.058); padding: 10px; border-radius: 50%; } /*----------------------------------------*/ /* Grid Layout /*----------------------------------------*/ .container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container { max-width: 540px; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1170px; } } @media (min-width: 1441px) { .container { max-width: 1170px; } } .container-fluid { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .no-gutters { margin-right: 0; margin-left: 0; } .no-gutters > .col, .no-gutters > [class*=col-] { padding-right: 0; padding-left: 0; } html, body { height: auto !important; } body.bbpc-forum-ui { 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%); background-blend-mode: screen, screen, lighten, overlay, lighten, difference, normal; } /*----------------------------------------*/ /* 03. Sidebar Area /*----------------------------------------*/ .tab-container { display: flex; } .tab-menu { position: relative; background: #101010; flex: 0 0 auto; width: 380px; border-right: 1px solid rgba(255, 255, 255, 0.05); } .tab-menu.short { height: auto; } @media (max-width: 1680px) { .tab-menu { width: 25%; } } .tab-menu .tab-menu-left-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; display: none; } .easydocs-tab { display: none; } .easydocs-tab.tab-active { display: block; } .easydocs-navbar { padding: 20px 0; margin: 0; } .easydocs-navitem { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 12px 22px; margin: 0 0 5px; cursor: pointer; transition: 0.3s ease-out; position: relative; border-radius: 0 8px 8px 0; border-left: 3px solid transparent; transition: all 0.2s ease; } .easydocs-navitem .link-wrapper { display: none; align-items: center; justify-content: end; width: auto; opacity: 0; transform: translateX(10px); transition: all 0.2s ease; } .easydocs-navitem.is-active { background: rgba(54, 153, 255, 0.1); color: #fff; border-left-color: var(--frmx_brand_color); } .easydocs-navitem.is-active .title { color: #fff; opacity: 1; } .easydocs-navitem.is-active .title .featured-image span.dashicons { color: #fff; } .easydocs-navitem.is-active .title .featured-image img { opacity: 0.9; } .easydocs-navitem.is-active .total-page { background: var(--frmx_brand_color); color: #fff; opacity: 1; } .easydocs-navitem .title { display: flex; align-items: center; gap: 15px; transition: 0.3s ease-out; text-decoration: none; font-size: 15px; font-weight: 500; color: #a2a3b7; flex: 1; overflow: hidden; } .easydocs-navitem .title .featured-image { width: 36px; height: 36px; flex-shrink: 0; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.05); transition: all 0.2s ease; } .easydocs-navitem .title .featured-image img { width: 100%; height: auto; border-radius: 6px; } .easydocs-navitem .title .featured-image span.dashicons { font-size: 20px; width: 20px; height: 20px; color: #82859a; transition: all 0.2s ease; } .easydocs-navitem .title span.easydocs-forums-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .easydocs-navitem .total-page { font-size: 11px; font-weight: 600; color: #8c8fa8; background: rgba(255, 255, 255, 0.05); padding: 2px 8px; border-radius: 4px; margin-left: 10px; transition: all 0.2s ease; } .easydocs-navitem:hover:not(.is-active) { background: rgba(255, 255, 255, 0.03); } .easydocs-navitem:hover:not(.is-active) .title { color: #dcdde8; } .easydocs-navitem:hover:not(.is-active) .title .featured-image { background: rgba(255, 255, 255, 0.1); } .easydocs-navitem:hover:not(.is-active) .title .featured-image span.dashicons { color: #dcdde8; } .easydocs-navitem:hover .link-wrapper { opacity: 1; transform: translateX(0); display: flex; } .easydocs-navitem:hover .total-page { opacity: 0; display: none; } .easydocs-navitem .subforum-toggle { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; padding: 0; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; opacity: 0.5; } .easydocs-navitem .subforum-toggle .dashicons { font-size: 14px; width: 14px; height: 14px; color: #ccccd3; } .easydocs-navitem .subforum-toggle:hover { opacity: 1; } .easydocs-navitem .subforum-toggle[aria-expanded=false] { transform: translateY(-50%) rotate(-90deg); } .easydocs-navitem.is-subforum { padding-left: 35px; margin-left: 0; border-left: 3px solid transparent; } .easydocs-navitem.is-subforum .featured-image { width: 28px; height: 28px; } .easydocs-navitem.is-subforum .featured-image span.dashicons { font-size: 16px; width: 16px; height: 16px; } .easydocs-navitem.is-subforum .title { font-size: 14px; } .easydocs-navitem.is-subforum.depth-1 { padding-left: 35px; } .easydocs-navitem.is-subforum.depth-2 { padding-left: 55px; } .easydocs-navitem.is-subforum.depth-3 { padding-left: 75px; } .easydocs-subforum-container { list-style: none; margin: 0; padding: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.2s ease; } .easydocs-subforum-container.is-collapsed { max-height: 0 !important; opacity: 0; } .easydocs-subforums { list-style: none; margin: 0; padding: 0; position: relative; } .link-wrapper .link { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 4px; margin-left: 2px; transition: all 0.2s; text-decoration: none; } .link-wrapper .link a { text-decoration: none; display: flex; align-items: center; justify-content: center; } .link-wrapper .link .dashicons { color: #7e8299; font-size: 16px; width: 16px; height: 16px; } .link-wrapper .link:hover { background: rgba(255, 255, 255, 0.1); } .link-wrapper .link:hover .dashicons { color: #fff; } .link-wrapper .link.add-subforum:hover .dashicons { color: #4ade80; } .link-wrapper .link.forum-delete:hover .dashicons { color: #f1416c; } .easydocs-tab-content { flex: 1; width: auto; padding: 0 40px 40px 40px; } @media (max-width: 1680px) { .easydocs-tab-content { width: 70%; } } @media (max-width: 1440px) { .easydocs-tab-content { width: 70%; padding: 20px; } } .easydocs-tab-content .button { padding: 6px 25px; } .easydocs-filter-container { background: var(--clr-white); padding: var(--gutter-15) var(--gutter-30); border-radius: 0.375rem; display: flex; align-items: center; justify-content: space-between; 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%); background-blend-mode: screen, color-dodge, color-dodge, normal; padding-left: 16px; } @media (max-width: 1440px) { .easydocs-filter-container { padding: 10px 20px; } } .single-item-filter { display: flex; align-items: center; gap: 5px; } .single-item-filter.all-available li { padding: 5px 15px; } .single-item-filter .easydocs-btn { display: flex; align-items: center; justify-content: center; font-size: 12px; gap: 0.3125rem; --btn-fs: var(--fs-14); transition: all 0.3s; border-radius: 15px; padding: 5px 25px; cursor: pointer; margin: 0; } .single-item-filter .easydocs-btn:hover { background-color: rgba(0, 0, 0, 0.1); } .single-item-filter .easydocs-btn.is-active { background-color: rgba(0, 0, 0, 0.8); color: #f1f1f1; } .single-item-filter .easydocs-btn.is-active img { filter: brightness(0) invert(1); } .single-item-filter .easydocs-btn.easydocs-btn-black-light { --btn-icon: #0D0E2B; } .single-item-filter .easydocs-btn.easydocs-btn-black-light svg { fill: #0D0E2B; } .single-item-filter .easydocs-btn.easydocs-btn-black-light.mixitup-control-active { --btn-bg: #0D0E2B; --btn-clr: var(--clr-white); --btn-icon: var(--clr-white); } .single-item-filter .easydocs-btn.easydocs-btn-black-light.mixitup-control-active svg { fill: #ffffff; } .single-item-filter .easydocs-btn.easydocs-btn-green-light { --btn-icon: #2DB22D; } .single-item-filter .easydocs-btn.easydocs-btn-green-light svg { fill: #2DB22D; } .single-item-filter .easydocs-btn.easydocs-btn-green-light.mixitup-control-active { --btn-bg: #2DB22D; --btn-clr: var(--clr-white); --btn-icon: var(--clr-white); } .single-item-filter .easydocs-btn.easydocs-btn-green-light.mixitup-control-active svg { fill: #ffffff; } .single-item-filter .easydocs-btn.easydocs-btn-blue-light { --btn-icon: #0275D8; } .single-item-filter .easydocs-btn.easydocs-btn-blue-light svg { fill: #0275D8; } .single-item-filter .easydocs-btn.easydocs-btn-blue-light.mixitup-control-active { --btn-bg: #0275D8; --btn-clr: var(--clr-white); --btn-icon: var(--clr-white); } .single-item-filter .easydocs-btn.easydocs-btn-blue-light.mixitup-control-active svg { fill: #fff; } .single-item-filter .easydocs-btn.easydocs-btn-orange-light { --btn-icon: #CC8033; } .single-item-filter .easydocs-btn.easydocs-btn-orange-light svg { fill: #CC8033; } .single-item-filter .easydocs-btn.easydocs-btn-orange-light.mixitup-control-active { --btn-bg: #CC8033; --btn-clr: var(--clr-white); --btn-icon: var(--clr-white); } .single-item-filter .easydocs-btn.easydocs-btn-orange-light.mixitup-control-active svg { fill: #fff; } .single-item-filter .easydocs-btn.easydocs-btn-gray-light { --btn-icon: #424242; } .single-item-filter .easydocs-btn.easydocs-btn-gray-light.mixitup-control-active { --btn-bg: #424242; --btn-clr: var(--clr-white); --btn-icon: var(--clr-white); } @media screen and (max-width: 1440px) { .single-item-filter .easydocs-btn { padding: 5px 15px; } } .single-grid-container { display: flex; align-items: center; border: 1px solid #EDEAE9; border-radius: 0.375rem; --grid-icon: #9199A1; } .single-grid-container a { text-decoration: none; padding: 0.3rem 0.5rem 0.5rem; height: 1.875rem; } .single-grid-container a:first-child { border-right: 1px solid #EDEAE9; } .single-grid-container .is-active { background: rgba(37, 39, 51, 0.05); --grid-icon: var(--clr-blue); } @media screen and (min-width: 1200px) { .container { max-width: 1170px; } } #wpcontent { height: 100vh; }