| 1 |
{"version":3,"file":"styles/admin/admin-ui-style.css","mappings":";AAAQ,KC4NN,iBACA,CAFA,kBACA,CAHF,iBACE,WAGA,OC7NF,sBAEE,wBACA,qBACA,qBACA,wBACA,sBACA,uBACA,oBAGA,oBACA,oBACA,qBACA,sBACA,oBACA,sBACA,qBACA,iBACA,sBACA,mBACA,sBACA,qBACA,gCAGA,aAIA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,gBAGA,kBACA,iBACA,kBACA,aACA,kBACA,iBACA,gBACA,kBACA,eACA,kBACA,gBACA,iBACA,aACA,kBACA,eACA,kBACA,yBAGA,gBACA,sBACA,uBACA,gBACA,eACA,cACA,MAGA,OACA,OACA,OACA,OACA,OACA,OACA,cACA,eACA,eACA,MAGA,OACA,OACA,OACA,OACA,OACA,OACA,cACA,eACA,eACA,yBAGA,qBACA,yBACA,mEACA,qEACA,qEACA,qEACA,qEACA,qEACA,qEACA,WAGA,aACA,aACA,aACA,aACA,kBACA,qBAGA,kBACA,0BACA,sBACA,kBACA,kBACA,mBACA,mBACA,iBAGA,wBACA,mBACA,mBACA,yBACA,iBACA,2BACA,qBACA,qBACA,mBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,kBF7IF,qBAGE,4CAIF,QAUE,6BAIF,eAEE,mBAIF,sBACE,MCrBA,sBEwCM,CHfR,4BGZO,CFlBwC,sBEwC5B,CAtBZ,eFlBwC,CEwC5B,qBHTyB,6BGcpC,gBHVR,gCACE,CADF,6BACE,aAMA,aACA,CAHF,cAGE,8BAIF,YAIE,QAIA,sBACA,CACA,cACA,CAFA,YAEA,YAJF,WCsCE,CDlCA,IAGF,+BACc,CC4BZ,eAN2F,CDtBzD,UAAM,cC0BxC,CAJ2F,SAQ3F,CAJA,SAJ+E,CDtBnE,UC8BZ,uCD1BF,kBACE,oBACE,kBAGF,kCAGE,sCACA,CACA,8BACA,CAFA,mCAEA,gBAIJ,iBACE,cASA,sBACA,CAKA,iBACA,CAJA,WACA,CANA,6BG1CK,CHgDL,YACA,CGjDK,cH4CL,CALA,WACA,iBACA,CAIA,cACA,WACA,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ACA,CAIA,cACA,gBACA,CALA,sBACA,CANJ,iBACI,CAKA,iBAIA,gDAEA,YACI,eACA,mBACA,WACA,iCAIR,UACI,eACA,gBACA,oBACA,kBACA,CACA,oCACA,CAFA,SAEA,6CAcA,kBACA,CAHA,yBACA,CAVJ,8BACI,oCACA,mBACA,CAGA,UACA,eACA,CAEA,YACA,CAPA,cACA,gBACA,CAMA,OACA,CAVA,gBACA,CASA,iBACA,CANA,0CACA,CAKA,SACA,mDAEA,8BACI,CACA,oCACA,CAFA,0BAEA,oDAGJ,uBACI,wDAGJ,cACI,CACA,WACA,CAFA,UAEA,oBAQR,eACA,gCACA,CAJJ,YACI,CAGA,QACA,CAJA,cAIA,sCAYI,kBACA,CAVA,sBACA,CACA,WACA,CADA,mCACA,CAEA,aACA,eACA,CACA,YACA,CANA,cACA,gBACA,CAKA,OACA,CAZJ,gBACI,CAWA,iBACA,CALA,uBAKA,4CAEA,aACI,uDAEA,kBACI,gDAKJ,2CACA,CAFJ,6BAEI,2DAEA,kCACI,WACA,iDAIR,kBACI,CAEA,kBACA,CAHA,aACA,CAEA,cACA,gBACA,eACA,CALA,eACA,CAIA,iBACA,wBACA,oBAMZ,eACI,kBACA,gBAGJ,gBACI,CAGA,mCACA,mCAEA,SACI,yCAGJ,sBACI,yCAMA,2BACA,CAJJ,wBACI,CACA,4BACA,CAFA,kBAGA,+CAEA,wBACI,mBAIR,eACI,SACA,UACA,6BAIJ,+BACI,SACA,kBACA,+BACA,wCAEA,kBACI,mCAGJ,kBACI,6DAEA,aACI,uCAIR,kBACI,8CAQI,kCACA,CAHA,QACA,CAEA,yCACA,CARJ,UACI,CACA,MACA,CAFA,iBACA,CACA,KACA,CACA,SAGA,+BAQJ,sBACA,CALJ,YACI,CACA,QACA,CAFA,iBACA,CACA,oBAEA,6BAKR,aACI,qCAOA,kBACA,CACA,kBACA,CALA,kBACA,CAKA,oCACA,CANA,YACA,CAHA,WACA,CAGA,sBACA,CACA,qDACA,CARJ,UASI,gDAGA,kDACI,0CACA,iDAIJ,kDACI,0CACA,iDAIJ,kCACI,0CACC,oGAGL,UAEI,6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CAKA,iBACA,CARA,aAcA,2CAQE,oBACA,CAFA,eACA,CAFF,oBAGE,oBAKN,OjBkzDM,kBASc,yCiBtzDlB,UACE,2CAGF,qBACE,oDAMA,qBACE,sDAGF,kBACE,eAMJ,kBACA,CAFF,YACE,CACA,wBACA,kBAEA,kBACE,QACA,gCAIA,kBACA,CAGA,6BACA,CAEA,kBACA,CAFA,UACA,CARF,YACE,CAGc,aAAW,CAFzB,6BACA,CAGA,cACA,CAHyB,iBACzB,CjB+6DA,uBAeF,CiBh8DE,UjBg8DF,yCiBv7DE,kBACE,CjBs7DJ,ciBp7DI,CjBq6DF,uBiBr6DE,2CAGF,qBACE,CjBg7DJ,ciB96DI,CjB+5DF,uBiB/5DE,sCAKF,cACA,CAFF,QACE,CACA,iBACA,UACA,sCAMA,wCACA,kBACA,CAGA,cACA,CATF,WACE,CAIA,QACA,CAJA,iBACA,CAGA,OACA,2BACA,CACA,4BACA,CATA,UACA,CAQA,SACA,oCAGF,cACE,6BACA,sCAGF,YACE,oBAIJ,iBACE,QACA,SACA,sDAIA,UACE,gBACA,qBACA,8CAKF,oBACE,yCAKF,YACE,QACA,8BjB89BE,+BACA,6CiB59BF,KACE,uDAGF,mCACE,cACA,sBACA,gBACA,CACA,kBACA,CAFA,YACA,CACA,OACA,iBACA,0BACA,qBACA,8EAEA,wBACE,cACA,4BACA,8GAEA,aACE,oFjBwFR,wBiBpFQ,6DjBoFR,oCiB/EM,mBACA,gBAMR,gBACE,gBACA,qBACA,yCAEA,sCACE,mCAIA,wBACA,CAFF,SAEE,yCAGF,gCACE,sBAKA,+BACE,gBACA,wBAIE,0BACA,CACA,qBACA,CAJA,OACA,CACA,YACA,CAJF,oBAKE,qCAEA,eACE,6CAGF,4BACE,oEAEA,aACE,eACA,+EACA,sBACE,gBACA,uEAKF,aACE,eACA,8BAKN,eACE,4BAIJ,kBACE,iCAGF,kBACE,oBAON,sBACA,CjBkwDA,sBiB5vDA,CANA,cACA,CAHF,YACE,CAEA,oBACA,CACA,4BjB8aI,8BACA,CiBhbJ,6BACA,CjBgvDE,uBiB7uDF,wCAGgB,iBACd,CADc,cACd,iBACA,CAHF,YAGE,sDAKE,iBACA,CjB4jDA,SiB9jDc,oCACd,CjB6jDA,iBASc,CiBzkDhB,OjBgkDE,CiB5jDA,iBACA,CjBokDc,ciBpkDd,iEAEA,KACE,2DAIJ,wBAC4B,yDjB0G9B,sEiBvGM,UACA,CAFF,cACE,CACA,iBACA,4DAIJ,wBAC4B,yDjBgG9B,uEiB7FM,UACA,CAFF,cACE,CACA,eACA,0BjB1CN,8BiBgDE,oCAOA,qBACA,CAHF,sBACE,0BACA,CAGA,aACA,CAFA,QACA,CAFA,mBAGA,sCAEA,oBACE,mCAKF,2BACA,CAFF,cACE,CACA,aACA,eACA,2BAKF,qBACA,CAFF,sBACE,CACA,aACA,mBACA,cAIA,2BACA,cACA,mBACA,CAJF,eAIE,sBAKA,kBACA,CAGA,eACA,CAGA,wBACA,CAHA,kBACA,4EACA,CAVF,YACE,sBACA,CACA,sBACA,iBACA,gBACA,CACA,iBACA,CAGA,iBACA,0BAME,6CACA,CAHA,WACA,mBACA,CAHA,cACA,CAGA,6BACA,CANF,WAME,gCAEA,qBACE,6BAKF,aACA,CAFF,iBACE,CACA,eACA,CACA,eACA,CAFA,kBAEA,6CAIA,kBACA,CAFF,YACE,CAEA,QACA,CAFA,sBACA,CACA,YACA,WACA,sDAGE,kBACA,CAGA,kBACA,CANF,mBACE,CAMA,gBACA,CAJA,eACA,CAGA,OACA,CAPA,sBACA,kBACA,CAEA,0CAGA,qEAEA,kCACE,CACA,4BACA,+EACA,CAHA,UAGA,2EAEA,wBACE,CACA,gFACA,CAFA,0BAEA,4EAGF,uBACE,oFAMA,kFACA,CAFF,0BAEE,iEAIJ,cACE,CACA,WACA,cACA,SACA,CAJA,UAIA,wEAIJ,aACE,CACA,eACA,CAFA,eACA,CAEA,oBACA,CAFA,wBAEA,oBAOJ,mCACA,CAHF,sBACE,gBACA,CACA,kBACA,0BAEA,mCACE,4BAEA,aACE,wBAIJ,YACE,sBAQA,kBACA,cACA,CAHA,YACA,CAFA,cACA,CAHA,YACA,CAFF,sBACE,CACA,gBACA,CAIA,oBACA,sCAGF,uCACE,YACE,sBAKN,6BACE,CACA,iBACA,CAFA,YAEA,YjB/YE,gBACA,CAFA,iBACA,CAFA,iBACA,CAFA,kBACA,CAFF,UAKE,yBA/DA,WA0DF,eElKiB,0BFwGf,WA0DF,eElKiB,0BFwGf,WA0DF,eElKiB,2BFwGf,WA0DF,gBElKiB,2BFwGf,WA0DF,gBElKiB,mBFiLf,gBACA,CAFA,iBACA,CAFA,iBACA,CAFA,kBACA,CAFF,UAKE,MAiBA,YACE,eACA,CACA,iBACA,CAFA,kBAEA,akB/LJ,aACA,CAFF,cAEE,4CAIE,cACA,CAHF,eAGE,WAIJ,qBACE,oBAIA,2XACE,8EACA,gBCtBJ,YACE,WAIA,kBACA,CAEA,0CACA,CAHA,aACA,CAHF,iBACE,CAEA,WAEA,iBAEA,WACE,0BAGF,UAXF,SAYI,iCASA,YACA,CAHA,WACA,CAHA,MACA,CAEA,mBACA,CANF,iBACE,MACA,CACA,UAIA,eAIJ,YACE,0BAEA,aACE,kBAKA,QACA,CAFJ,cAEI,mBAIF,kBACA,CAOA,iCACA,CAFA,yBACA,CAJA,cACA,CANF,YACE,CACA,6BACA,CACA,cACA,CAFA,2BACA,CnBsiEA,iBmBliEA,CnBmhEE,uBAeF,CmBhiEA,uBACA,iCAGE,kBACA,CAFF,YACE,CACA,mBACA,CACA,SACA,2BACA,wBACA,CAJA,UAIA,6BAGF,8BACE,CACA,yCACA,CAFA,UAEA,oCAEA,UACE,UACA,mEAKG,UACI,wDAGJ,UACI,yCAKT,kCACE,WACA,UACA,0BAKF,kBACA,CAKA,aACA,CARF,YACE,CAOA,MACA,CAJA,cACA,gBACA,CALA,QACA,CAMA,eACA,CnB4+DF,oBmBj/DE,CnBk+DA,uBmB79DA,0CAOE,kBACA,CACA,8BACA,CALA,iBACA,aACA,CAHA,aACA,CAFA,WACA,CAIA,sBACA,CACA,uBACA,CATF,UASE,8CAIE,iBACA,CAFA,WACA,CAFF,UAGE,yDAMA,aACA,CAJF,cACE,CACA,WACA,CACA,uBACA,CAJA,UAIA,qDAKF,eACA,uBACA,CAHF,kBAGE,+BAOF,8BACA,CACA,iBACA,CAJA,aACA,CAHF,cACE,gBACA,CAIA,gBACA,CAHA,eACA,CAEA,uBACA,yCAIA,8BACE,gDAEA,aACI,gEAEA,6BACI,+EACA,aACI,uCAQZ,YACA,CAHF,SACE,wBAEA,qCAIE,YACA,CAFJ,SAEI,oCAgBJ,kBACA,CAJA,sBACA,CAFA,WACA,CACA,cACA,aACA,CANA,WACA,CAMA,sBACA,CAZA,QACA,CAYA,UACA,CATA,SACA,CAPF,iBACE,CACA,OACA,2BACA,WACA,CAQA,SAEA,+CAKE,aACA,CAJF,cACE,CACA,WACA,CAFA,UAGA,0CAGF,SACI,yDAGJ,yCACE,+BAOF,iCACA,CAFA,aACA,CAFF,iBAGE,+CAGE,WACA,CAFF,UAEE,8DAEA,cACE,CACA,WACA,CAFA,UAEA,sCAIJ,cACE,uCAGF,wDACA,wDACA,+CAKJ,eACE,SACA,CACA,eACA,CAFA,SACA,CACA,+CACA,2CAEA,sBACE,UACA,qBAIJ,eACE,SACA,UACA,kBACA,qBASE,iBACA,CANF,mBACE,CAGA,WACA,CACA,eACA,mBACA,CALA,UAMA,2CARA,kBACA,uBACA,CAKA,oBAOE,CANF,sBAGE,YAGA,gCAGF,aACE,eACA,CACA,WACA,CAFA,UAEA,2BAGF,6BACE,sCACA,UACE,mDAIJ,aACI,mDAEJ,aACI,uBAKR,MACE,CACA,mBACA,CAFA,UAEA,0BACA,sBAJF,SAKI,2BAEF,sBACE,YACA,CATJ,SASI,gCAGF,gBACE,4BAQF,kBACA,CALF,2BACE,CAKA,8NACA,4DACA,CANA,qBACA,aACA,CACA,6BACA,CALA,yCACA,CAMA,iBACA,0BACA,2BAVF,iBAWI,sBAKF,kBACA,CAFF,YACE,CACA,OACA,sCAGE,gBACE,mCAKF,kBACA,CAFF,YACE,CAEA,cACA,aACA,CAHA,sBACA,CAEA,qBACA,CACA,kBACA,CACA,cACA,SACA,CAHA,gBACA,CAHA,kBAKA,yCACA,+BACE,6CAEF,+BACE,cACA,iDAEA,8BACE,4DAIJ,kBACE,gEAEA,YACE,mFAGF,gBACE,2BACA,4BACA,uFAEA,SACE,4DAKN,kBACE,gEAEA,YACE,mFAGF,gBACE,2BACA,4BACA,uFAEA,SACE,2DAKN,kBACE,+DAEA,YACE,kFAGF,gBACE,2BACA,4BACA,sFAEA,SACE,6DAKN,kBACE,iEAEA,YACE,oFAGF,gBACE,2BACA,4BACA,wFAEA,SACE,2DAKN,kBACE,kFAEA,gBACE,2BACA,4BACA,sCAGJ,kCAzGF,gBA0GI,yBAMJ,kBACA,yBACA,sBACA,CAJF,YACE,CAGA,mBACA,0BAIE,eACA,CAFA,yBACA,CAFF,oBAGE,sCAEA,8BACE,mCAIJ,6BACE,4BACA,sCnB+yEF,WoBvwFA,gBACE,aAIJ,YACE,C","sources":["webpack:///./assets/admin/scss/admin/base/_reset.scss","webpack:///./assets/admin/scss/abstracts/_mixins.scss","webpack:///./assets/admin/scss/abstracts/_root.scss","webpack:///./assets/admin/scss/abstracts/_variables.scss","webpack:///./assets/admin/scss/admin/base/_typography.scss","webpack:///./assets/admin/scss/admin/utilities/_alignment.scss","webpack:///./assets/admin/scss/admin/utilities/_justify.scss","webpack:///./assets/admin/scss/admin/utilities/_colors.scss","webpack:///./assets/admin/scss/admin/utilities/_display.scss","webpack:///./assets/admin/scss/admin/utilities/_flex.scss","webpack:///./assets/admin/scss/admin/utilities/_fonts.scss","webpack:///./assets/admin/scss/admin/utilities/_margin.scss","webpack:///./assets/admin/scss/admin/components/_accordion.scss","webpack:///./assets/admin/scss/admin/components/_btn.scss","webpack:///./assets/admin/scss/admin/components/_dropdown.scss","webpack:///./assets/admin/scss/admin/components/_form.scss","webpack:///./assets/admin/scss/admin/components/_progress.scss","webpack:///./assets/admin/scss/admin/components/_badge.scss","webpack:///./assets/admin/scss/admin/layout/_header.scss","webpack:///./assets/admin/scss/admin/layout/_grid.scss","webpack:///./assets/admin/scss/admin/layout/_sidebar.scss","webpack:///./assets/admin/scss/admin-ui-style.scss"],"sourcesContent":["@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');\n\n/* Box sizing rules */\n*,\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\n/* Remove default margin */\nbody,\nh1,\nh2,\nh3,\nh4,\np,\nfigure,\nblockquote,\ndl,\ndd {\n margin: 0;\n}\n\n/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */\nul[role='list'],\nol[role='list'] {\n list-style: none;\n}\n\n/* Set core root defaults */\nhtml:focus-within {\n scroll-behavior: smooth;\n}\n\n/* Set core body defaults */\nbody {\n @include body($global-font, $line-height: rem(25px));\n}\n\n/* A elements that don't have a class get default styles */\na:not([class]) {\n text-decoration-skip-ink: auto;\n}\n\n/* Make images easier to work with */\nimg,\npicture {\n max-width: 100%;\n display: block;\n}\n\n/* Inherit fonts for inputs and buttons */\ninput,\nbutton,\ntextarea,\nselect {\n font: inherit;\n}\n\nbutton {\n border: none;\n background: transparent;\n outline: none;\n cursor: pointer;\n}\n\n.hr {\n @include hr(var(--clr-black-200), 100%, 1px);\n}\n\n/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */\n@media (prefers-reduced-motion: reduce) {\n html:focus-within {\n scroll-behavior: auto;\n }\n\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n scroll-behavior: auto !important;\n }\n}\n\n.fill-current {\n fill: currentColor;\n}\n\n.scrollToTop {\n width: 30px;\n height: 30px;\n line-height: 30px;\n text-align: center;\n color: $blue;\n font-size: 25px;\n background: transparent;\n position: fixed;\n right: 20px;\n bottom: 50px;\n display: none;\n z-index: 99999;\n border-radius: 50%;\n\n @include sm {\n width: 50px;\n height: 50px;\n line-height: 50px;\n }\n\n &:hover {\n color: $blue;\n }\n}\n\n.no-scroll-y {\n overflow-y: hidden;\n}\n\n.text-blue {\n color: var(--frmx_brand_color);\n}\n\n.green {\n color: #27ae60;\n}\n\n.red {\n color: #e74c3c;\n}","/*--------------------------------------\n\t- Base\n----------------------------------------*/\n\n// Body Mixin\n@mixin body($font-family: $font, $font-weight: 400, $color: $global-color, $font-size: $global-font-size, $line-height: 1.5) {\n font-family: $font-family;\n font-weight: $font-weight;\n font-size: $font-size;\n line-height: $line-height;\n text-rendering: optimizeSpeed;\n color: $color;\n}\n\n@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {\n $u1: unit($min-vw);\n $u2: unit($max-vw);\n $u3: unit($min-font-size);\n $u4: unit($max-font-size);\n\n @if $u1==$u2 and $u1==$u3 and $u1==$u4 {\n & {\n font-size: $min-font-size;\n\n @media screen and (min-width: $min-vw) {\n font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));\n }\n\n @media screen and (min-width: $max-vw) {\n font-size: $max-font-size;\n }\n }\n }\n}\n\n//Before Icon mixin\n@mixin before-icon($content, $color) {\n content: $content;\n font-family: IcoFont;\n color: $color;\n vertical-align: middle;\n}\n\n/**\n * Convert font-size from px to rem with px fallback\n *\n * @param $size - the value in pixel you want to convert\n *\n * e.g. p {@include fontSize(12px);}\n *\n */\n\n// Mixin that will include the fall back px declaration as well as the calculated rem value.\n@mixin fs-rem($size) {\n font-size: rem($size);\n}\n\n// Font Size Class\n@mixin font($size, $breakpoint: null, $pre: px) {\n\n @if $breakpoint {\n @include media-up(#{$breakpoint}) {\n .font-#{$breakpoint}-#{$size} {\n font-size: #{$size}#{$pre};\n }\n }\n } @else {\n .font-#{$size} {\n font-size: #{$size}#{$pre};\n }\n }\n}\n\n//Line Height\n@mixin line-height($size, $breakpoint: null, $pre: px) {\n @if $breakpoint {\n @include media-up(#{$breakpoint}) {\n .line-height-#{$breakpoint}-#{$size} {\n line-height: #{$size}#{$pre};\n }\n }\n } @else {\n .line-height-#{$size} {\n line-height: #{$size}#{$pre};\n }\n }\n}\n\n// hr mixin\n@mixin hr($bg: $global-color, $width: 50px, $height: 5px, $my: 50px, $mx: 0, $p: 0, $radius: 0) {\n background: $bg;\n width: $width;\n height: $height;\n margin: $my $mx;\n padding: $p;\n border: none;\n border-radius: $radius;\n opacity: 1;\n}\n\n@mixin media-up($name, $breakpoints: $breakpoints) {\n $min: breakpoint-min($name, $breakpoints);\n\n @if $min {\n @media (min-width: $min) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n// Makes the @content apply to the given breakpoint and narrower.\n@mixin media-down($name, $breakpoints: $breakpoints) {\n $max: breakpoint-max($name, $breakpoints);\n\n @if $max {\n @media (max-width: $max) {\n @content;\n }\n } @else {\n @content;\n }\n}\n\n// Media that spans multiple breakpoint widths.\n// Makes the @content apply between the min and max breakpoints\n@mixin media-between($lower, $upper, $breakpoints: $breakpoints) {\n $min: breakpoint-min($lower, $breakpoints);\n $max: breakpoint-max($upper, $breakpoints);\n\n @if $min !=null and $max !=null {\n @media (min-width: $min) and (max-width: $max) {\n @content;\n }\n } @else if $max==null {\n @include media-up($lower, $breakpoints) {\n @content;\n }\n } @else if $min==null {\n @include media-down($upper, $breakpoints) {\n @content;\n }\n }\n}\n\n// For each breakpoint, define the maximum width of the container in a media query\n@mixin container-max-widths($max-widths: $container-widths, $breakpoints: $breakpoints) {\n\n @each $breakpoint,\n $container-width in $max-widths {\n @include media-up($breakpoint) {\n max-width: $container-width;\n }\n }\n}\n\n/// Grid system\n//\n// Generate semantic grid columns with these mixins.\n@mixin container($name: container, $gutter: $gutter-width) {\n .#{$name} {\n width: 100%;\n padding-right: $gutter / 2;\n padding-left: $gutter / 2;\n margin-right: auto;\n margin-left: auto;\n @include container-max-widths();\n }\n}\n\n@mixin container-fluid($name: container-fluid, $gutter: $gutter-width) {\n .#{$name} {\n width: 100%;\n padding-right: $gutter / 2;\n padding-left: $gutter / 2;\n margin-right: auto;\n margin-left: auto;\n }\n}\n\n// Row\n//\n// Rows contain your columns.\n@mixin row($name: row, $gutter: $gutter-width, $max-width: false) {\n @if $max-width==true {\n .#{$name} {\n margin-right: auto;\n margin-left: auto;\n display: flex;\n flex-flow: row wrap;\n @include container-max-widths();\n }\n } @else {\n .#{$name} {\n display: flex;\n flex-wrap: wrap;\n margin-right: -$gutter / 2;\n margin-left: -$gutter / 2;\n }\n }\n}\n\n@mixin column($size, $column: $columns) {\n flex: 0 0 percentage($size / $column);\n // Add a `max-width` to ensure content within each column does not blow out\n // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari\n // do not appear to require this.\n max-width: percentage($size / $column);\n}\n\n@mixin col-offset($size, $columns: $columns) {\n $num: $size / $columns;\n margin-left: if($num==0, 0, percentage($num));\n}\n\n.col {\n position: relative;\n width: 100%;\n padding-right: $gutter-width / 2;\n padding-left: $gutter-width / 2;\n}\n\n@mixin col-ready($gutter: $gutter-width) {\n @extend .col;\n}\n\n//Gird Columns Width Responsive\n@mixin col($name: null, $columns: null, $breakpoint: null) {\n @if $name==col {\n @if ($breakpoint==sm, md, lg, xl, xxl) {\n .#{$name}-#{$breakpoint}-#{$columns} {\n @include col-ready();\n\n @include media-up(#{$breakpoint}) {\n @include column($columns);\n }\n }\n } @else {\n .#{$name}#{$columns} {\n @include col-ready();\n }\n }\n } @else {\n .#{$name} {\n @include col-ready();\n }\n\n .#{$breakpoint}-#{$columns} {\n @include media-up(#{$breakpoint}) {\n @include column($columns);\n }\n }\n }\n}\n\n//Gird Columns Offset Width Responsive\n@mixin offset($name, $columns, $breakpoint: null) {\n @if ($breakpoint==sm, md, lg, xl, xxl) {\n .#{$name}-#{$breakpoint}-#{$columns} {\n @include media-up($breakpoint) {\n @include col-offset($columns);\n }\n }\n } @else {\n .#{$name}-#{$columns} {\n @include col-offset($columns);\n }\n }\n}\n\n// Mixins for controlling flex.\n@mixin flex($name, $value, $breakpoint: null) {\n @if $value==1 {\n @if $breakpoint {\n @include media-up($breakpoint) {\n .#{$name} {\n flex: 1 1 0%;\n }\n }\n } @else {\n .#{$name} {\n flex: 1 1 0%;\n }\n }\n } @else if $value==auto {\n @if $breakpoint {\n @include media-up($breakpoint) {\n .#{$name} {\n flex: 1 1 auto;\n }\n }\n } @else {\n .#{$name} {\n flex: 1 1 auto;\n }\n }\n\n } @else if $value==initial {\n @if $breakpoint {\n @include media-up($breakpoint) {\n .#{$name} {\n flex: 0 1 auto;\n }\n }\n } @else {\n .#{$name} {\n flex: 0 1 auto;\n }\n }\n } @else {\n @if $breakpoint {\n @include media-up($breakpoint) {\n .#{$name} {\n flex: none;\n }\n }\n } @else {\n .#{$name} {\n flex: none;\n }\n }\n }\n}\n\n// Controlling gutters between rows and columns.\n@mixin gap($size, $position: x) {\n @if $position==y {\n row-gap: $size;\n grid-row-gap: $size;\n } @else {\n gap: $size;\n grid-gap: $size;\n }\n}\n\n/*--------------------------------------\n\t- Utilities\n----------------------------------------*/\n@mixin hover() {\n &:hover {\n @content;\n }\n}\n\n@mixin focus() {\n &:focus {\n @content;\n }\n}\n\n@mixin hover-focus() {\n\n &:hover,\n &:focus {\n @content;\n }\n}\n\n@mixin plain-hover-focus() {\n\n &,\n &:hover,\n &:focus {\n @content;\n }\n}\n\n@mixin hover-focus-active() {\n &:hover,\n &:focus,\n &:active {\n @content;\n }\n}\n\n@mixin before($content: null) {\n @if $content {\n &::before {\n content: $content;\n @content;\n }\n } @else {\n &::before {\n @content;\n }\n }\n}\n\n@mixin after($content: null) {\n @if $content {\n &::after {\n content: $content;\n @content;\n }\n } @else {\n &::after {\n @content;\n }\n }\n}\n\n@mixin before-after($content: null) {\n @if $content {\n\n &::before,\n &::after {\n content: $content;\n @content;\n }\n } @else {\n\n &::before,\n &::after {\n @content;\n }\n }\n}\n\n@mixin pseudo($args: top 0 left 0, $loca: before, $position: absolute, $content: \"\") {\n @if ($loca==after) {\n @include after($content) {\n @if ($position==relative) {\n @include relative($args);\n @content;\n } @else {\n @include absolute($args);\n @content;\n }\n }\n } @else if ($loca==before-after) {\n @include before-after($content) {\n @if ($position==relative) {\n @include relative($args);\n @content;\n } @else {\n @include absolute($args);\n @content;\n }\n }\n } @else {\n @include before($content) {\n @if ($position==relative) {\n @include relative($args);\n @content;\n } @else {\n @include absolute($args);\n @content;\n }\n }\n }\n}\n\n//Create the mixin for theme colors\n@mixin color($name, $color) {\n // Define colors in your theme\n $primary: $color;\n $bg-color: $color;\n\n // Add your Prefix classes name\n .text-#{$name} {\n color: $primary !important;\n }\n\n .bg-#{$name} {\n background: $primary;\n }\n\n}\n\n// Gradient Color Mixin\n@mixin gradient($direction, $first, $last) {\n background-color: $first;\n background-image: linear-gradient($direction, $first 0%, $last 100%);\n}\n\n// Gradient Color Class Name with Mixin\n@mixin gradient-color($class, $direction, $first, $last) {\n .#{$class} {\n @include gradient($direction, $first, $last);\n }\n}\n\n// Mixins for controlling the direction of flex items.\n@mixin flex-direction($name, $value, $breakpoint: null) {\n @if $breakpoint {\n @include media-up($breakpoint) {\n .#{$name} {\n flex-direction: $value;\n }\n }\n } @else {\n .#{$name} {\n flex-direction: $value;\n }\n }\n}\n\n// Mixins for controlling how flex items wrap.\n@mixin flex-wrap($name, $value, $breakpoint: null) {\n @if $breakpoint {\n @include media-up($breakpoint) {\n .#{$name} {\n flex-wrap: $value;\n }\n }\n } @else {\n .#{$name} {\n flex-wrap: $value;\n }\n }\n}\n\n// Mixins for controlling flex.\n@mixin flex($name, $value, $breakpoint: null) {\n @if $value==1 {\n @if $breakpoint {\n @include media-up($breakpoint) {\n .#{$name} {\n flex: 1 1 0%;\n }\n }\n } @else {\n .#{$name} {\n flex: 1 1 0%;\n }\n }\n } @else if $value==auto {\n @if $breakpoint {\n @include media-up($breakpoint) {\n .#{$name} {\n flex: 1 1 auto;\n }\n }\n } @else {\n .#{$name} {\n flex: 1 1 auto;\n }\n }\n\n } @else if $value==initial {\n @if $breakpoint {\n @include media-up($breakpoint) {\n .#{$name} {\n flex: 0 1 auto;\n }\n }\n } @else {\n .#{$name} {\n flex: 0 1 auto;\n }\n }\n } @else {\n @if $breakpoint {\n @include media-up($breakpoint) {\n .#{$name} {\n flex: none;\n }\n }\n } @else {\n .#{$name} {\n flex: none;\n }\n }\n }\n}\n\n// Mixins for controlling how flex item grow.\n@mixin flex-grow($name, $value, $breakpoint: null) {\n @if $value==0 {\n @if $breakpoint {\n @include media-up($breakpoint) {\n .#{$name} {\n flex-grow: 0;\n }\n }\n } @else {\n .#{$name} {\n flex-grow: 0;\n }\n }\n } @else {\n @if $breakpoint {\n @include media-up($breakpoint) {\n .#{$name} {\n flex-grow: 1;\n }\n }\n } @else {\n .#{$name} {\n flex-grow: 1;\n }\n }\n }\n}\n\n// Mixins for controlling how flex item shrink.\n@mixin flex-shrink($name, $value, $breakpoint: null) {\n @if $value==0 {\n @if $breakpoint {\n @include media-up($breakpoint) {\n .#{$name} {\n flex-shrink: 0;\n }\n }\n } @else {\n .#{$name} {\n flex-shrink: 0;\n }\n }\n } @else {\n @if $breakpoint {\n @include media-up($breakpoint) {\n .#{$name} {\n flex-shrink: 1;\n }\n }\n } @else {\n .#{$name} {\n flex-shrink: 1;\n }\n }\n }\n}\n\n// The justify-content property.\n@mixin justify-content($name, $value, $breakpoint: null) {\n @if $breakpoint {\n @include media-up($breakpoint) {\n .#{$name} {\n justify-content: $value;\n }\n }\n } @else {\n .#{$name} {\n justify-content: $value;\n }\n }\n}\n\n// The justify-items property.\n@mixin justify-items($name, $value, $breakpoint: null) {\n @if $breakpoint {\n @include media-up($breakpoint) {\n .#{$name} {\n justify-items: $value;\n }\n }\n } @else {\n .#{$name} {\n justify-items: $value;\n }\n }\n}\n\n// The justify-self property.\n@mixin justify-self($name, $value, $breakpoint: null) {\n @if $breakpoint {\n @include media-up($breakpoint) {\n .#{$name} {\n justify-self: $value;\n }\n }\n } @else {\n .#{$name} {\n justify-self: $value;\n }\n }\n}\n\n// The align-content property.\n@mixin align-content($name, $value, $breakpoint: null) {\n @if $breakpoint {\n @include media-up($breakpoint) {\n .#{$name} {\n align-content: $value;\n }\n }\n } @else {\n .#{$name} {\n align-content: $value;\n }\n }\n}\n\n// The align-items property.\n@mixin align-items($name, $value, $breakpoint: null) {\n @if $breakpoint {\n @include media-up($breakpoint) {\n .#{$name} {\n align-items: $value;\n }\n }\n } @else {\n .#{$name} {\n align-items: $value;\n }\n }\n}\n\n// The align-self property.\n@mixin align-self($name, $value, $breakpoint: null) {\n @if $breakpoint {\n @include media-up($breakpoint) {\n .#{$name} {\n align-self: $value;\n }\n }\n } @else {\n .#{$name} {\n align-self: $value;\n }\n }\n}\n\n// The align-content property.\n@mixin align-content($name, $value, $breakpoint: null) {\n @if $breakpoint {\n @include media-up($breakpoint) {\n .#{$name} {\n align-content: $value;\n }\n }\n } @else {\n .#{$name} {\n align-content: $value;\n }\n }\n}\n\n// margin Name with Mixin\n@mixin margin($name, $value) {\n\n // Add your Prefix name\n @if $name==mt {\n @if $value==auto {\n margin-top: #{$value};\n } @else if $value==0 {\n margin-top: #{$value};\n } @else {\n margin-top: #{$value};\n }\n } @else if $name==mb {\n @if $value==auto {\n margin-bottom: #{$value};\n } @else if $value==0 {\n margin-bottom: #{$value};\n } @else {\n margin-bottom: #{$value};\n }\n } @else if $name==ml {\n @if $value==auto {\n margin-left: #{$value};\n } @else if $value==0 {\n margin-left: #{$value};\n } @else {\n margin-left: #{$value};\n }\n } @else if $name==mr {\n @if $value==auto {\n margin-right: #{$value};\n } @else if $value==0 {\n margin-right: #{$value};\n } @else {\n margin-right: #{$value};\n }\n } @else if $name==mx {\n @if $value==auto {\n margin-left: #{$value};\n margin-right: #{$value};\n } @else if $value==0 {\n margin-left: #{$value};\n margin-right: #{$value};\n } @else {\n margin-left: #{$value};\n margin-right: #{$value};\n }\n } @else if $name==my {\n @if $value==auto {\n margin-top: #{$value};\n margin-bottom: #{$value};\n } @else if $value==0 {\n margin-top: #{$value};\n margin-bottom: #{$value};\n } @else {\n margin-top: #{$value};\n margin-bottom: #{$value};\n }\n } @else {\n @if $value==auto {\n margin: #{$value};\n } @else if $value==0 {\n margin: #{$value};\n } @else {\n margin: #{$value};\n }\n }\n}\n\n@mixin margin-rs($name, $breakpoint, $value) {\n\n // Add your Prefix name\n @if $name==mt {\n @if $value==auto {\n @include media-up(#{$breakpoint}) {\n margin-top: #{$value};\n }\n } @else if $value==0 {\n @include media-up(#{$breakpoint}) {\n margin-top: #{$value};\n }\n } @else {\n @include media-up(#{$breakpoint}) {\n margin-top: #{$value};\n }\n }\n } @else if $name==mb {\n @if $value==auto {\n @include media-up(#{$breakpoint}) {\n margin-bottom: #{$value};\n }\n } @else if $value==0 {\n @include media-up(#{$breakpoint}) {\n margin-bottom: #{$value};\n }\n } @else {\n @include media-up(#{$breakpoint}) {\n margin-bottom: #{$value};\n }\n }\n } @else if $name==ml {\n @if $value==auto {\n @include media-up(#{$breakpoint}) {\n margin-left: #{$value};\n }\n } @else if $value==0 {\n @include media-up(#{$breakpoint}) {\n margin-left: #{$value};\n }\n } @else {\n @include media-up(#{$breakpoint}) {\n margin-left: #{$value};\n }\n }\n } @else if $name==mr {\n @if $value==auto {\n @include media-up(#{$breakpoint}) {\n margin-right: #{$value};\n }\n } @else if $value==0 {\n @include media-up(#{$breakpoint}) {\n margin-right: #{$value};\n }\n } @else {\n @include media-up(#{$breakpoint}) {\n margin-right: #{$value};\n }\n }\n } @else if $name==mx {\n @if $value==auto {\n @include media-up(#{$breakpoint}) {\n margin-left: #{$value};\n margin-right: #{$value};\n }\n } @else if $value==0 {\n @include media-up(#{$breakpoint}) {\n margin-left: #{$value};\n margin-right: #{$value};\n }\n } @else {\n @include media-up(#{$breakpoint}) {\n margin-left: #{$value};\n margin-right: #{$value};\n }\n }\n } @else if $name==my {\n @if $value==auto {\n @include media-up(#{$breakpoint}) {\n margin-top: #{$value};\n margin-bottom: #{$value};\n }\n } @else if $value==0 {\n @include media-up(#{$breakpoint}) {\n margin-top: #{$value};\n margin-bottom: #{$value};\n }\n } @else {\n @include media-up(#{$breakpoint}) {\n margin-top: #{$value};\n margin-bottom: #{$value};\n }\n }\n } @else {\n @if $value==auto {\n @include media-up(#{$breakpoint}) {\n margin: #{$value};\n }\n } @else if $value==0 {\n @include media-up(#{$breakpoint}) {\n margin: #{$value};\n }\n } @else {\n @include media-up(#{$breakpoint}) {\n margin: #{$value};\n }\n }\n }\n}\n\n// margin Class Name with Mixin\n@mixin margin-class($name, $property, $value, $pre: $active-prefix) {\n\n // Add your Prefix classes name\n @if $property==mt {\n @if $value==auto {\n .#{$name} {\n margin-top: #{$value};\n }\n } @else if $value==0 {\n .#{$name} {\n margin-top: #{$value};\n }\n } @else {\n .#{$name} {\n margin-top: #{$value}#{$pre};\n }\n }\n } @else if $property==mb {\n @if $value==auto {\n .#{$name} {\n margin-bottom: #{$value};\n }\n } @else if $value==0 {\n .#{$name} {\n margin-bottom: #{$value};\n }\n } @else {\n .#{$name} {\n margin-bottom: #{$value}#{$pre};\n }\n }\n } @else if $property==ml {\n @if $value==auto {\n .#{$name} {\n margin-left: #{$value};\n }\n } @else if $value==0 {\n .#{$name} {\n margin-left: #{$value};\n }\n } @else {\n .#{$name} {\n margin-left: #{$value}#{$pre};\n }\n }\n } @else if $property==mr {\n @if $value==auto {\n .#{$name} {\n margin-right: #{$value};\n }\n } @else if $value==0 {\n .#{$name} {\n margin-right: #{$value};\n }\n } @else {\n .#{$name} {\n margin-right: #{$value}#{$pre};\n }\n }\n } @else if $property==mx {\n @if $value==auto {\n .#{$name} {\n margin-left: #{$value};\n margin-right: #{$value};\n }\n } @else if $value==0 {\n .#{$name} {\n margin-left: #{$value};\n margin-right: #{$value};\n }\n } @else {\n .#{$name} {\n margin-left: #{$value}#{$pre};\n margin-right: #{$value}#{$pre};\n }\n }\n } @else if $property==my {\n @if $value==auto {\n .#{$name} {\n margin-top: #{$value};\n margin-bottom: #{$value};\n }\n } @else if $value==0 {\n .#{$name} {\n margin-top: #{$value};\n margin-bottom: #{$value};\n }\n } @else {\n .#{$name} {\n margin-top: #{$value}#{$pre};\n margin-bottom: #{$value}#{$pre};\n }\n }\n } @else {\n @if $value==auto {\n .#{$name} {\n margin: #{$value};\n }\n } @else if $value==0 {\n .#{$name} {\n margin: #{$value};\n }\n } @else {\n .#{$name} {\n margin: #{$value}#{$pre};\n }\n }\n }\n}\n\n// Responsive margin Class Name with Mixin\n@mixin margin-class-rs($name, $property, $breakpoint, $value, $pre: $active-prefix) {\n\n // Add your Prefix classe name\n @if $property==mt {\n @if $value==auto {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n margin-top: #{$value};\n }\n }\n } @else if $value==0 {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n margin-top: #{$value};\n }\n }\n } @else {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n margin-top: #{$value}#{$pre};\n }\n }\n }\n } @else if $property==mb {\n @if $value==auto {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n margin-bottom: #{$value};\n }\n }\n } @else if $value==0 {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n margin-bottom: #{$value};\n }\n }\n } @else {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n margin-bottom: #{$value}#{$pre};\n }\n }\n }\n } @else if $property==ml {\n @if $value==auto {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n margin-left: #{$value};\n }\n }\n } @else if $value==0 {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n margin-left: #{$value};\n }\n }\n } @else {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n margin-left: #{$value}#{$pre};\n }\n }\n }\n } @else if $property==pr {\n @if $value==auto {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n margin-right: #{$value};\n }\n }\n } @else if $value==0 {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n margin-right: #{$value};\n }\n }\n } @else {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n margin-right: #{$value}#{$pre};\n }\n }\n }\n } @else if $property==mx {\n @if $value==auto {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n margin-left: #{$value};\n margin-right: #{$value};\n }\n }\n } @else if $value==0 {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n margin-left: #{$value};\n margin-right: #{$value};\n }\n }\n } @else {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n margin-left: #{$value}#{$pre};\n margin-right: #{$value}#{$pre};\n }\n }\n }\n } @else if $property==my {\n @if $value==auto {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n margin-top: #{$value};\n margin-bottom: #{$value};\n }\n }\n } @else if $value==0 {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n margin-top: #{$value};\n margin-bottom: #{$value};\n }\n }\n } @else {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n margin-top: #{$value}#{$pre};\n margin-bottom: #{$value}#{$pre};\n }\n }\n }\n } @else {\n @if $value==auto {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n margin: #{$value};\n }\n }\n } @else if $value==0 {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n margin: #{$value};\n }\n }\n } @else {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n margin: #{$value}#{$pre};\n }\n }\n }\n }\n}\n\n// padding Name with Mixin\n@mixin padding($name, $value) {\n\n // Add your Prefix name\n @if $name==pt {\n @if $value==auto {\n padding-top: #{$value};\n } @else if $value==0 {\n padding-top: #{$value};\n } @else {\n padding-top: #{$value};\n }\n } @else if $name==pb {\n @if $value==auto {\n padding-bottom: #{$value};\n } @else if $value==0 {\n padding-bottom: #{$value};\n } @else {\n padding-bottom: #{$value};\n }\n } @else if $name==pl {\n @if $value==auto {\n padding-left: #{$value};\n } @else if $value==0 {\n padding-left: #{$value};\n } @else {\n padding-left: #{$value};\n }\n } @else if $name==pr {\n @if $value==auto {\n padding-right: #{$value};\n } @else if $value==0 {\n padding-right: #{$value};\n } @else {\n padding-right: #{$value};\n }\n } @else if $name==px {\n @if $value==auto {\n padding-left: #{$value};\n padding-right: #{$value};\n } @else if $value==0 {\n padding-left: #{$value};\n padding-right: #{$value};\n } @else {\n padding-left: #{$value};\n padding-right: #{$value};\n }\n } @else if $name==py {\n @if $value==auto {\n padding-top: #{$value};\n padding-bottom: #{$value};\n } @else if $value==0 {\n padding-top: #{$value};\n padding-bottom: #{$value};\n } @else {\n padding-top: #{$value};\n padding-bottom: #{$value};\n }\n } @else {\n @if $value==auto {\n padding: #{$value};\n } @else if $value==0 {\n padding: #{$value};\n } @else {\n padding: #{$value};\n }\n }\n}\n\n@mixin padding-rs($name, $breakpoint, $value) {\n\n // Add your Prefix name\n @if $name==pt {\n @if $value==auto {\n @include media-up(#{$breakpoint}) {\n padding-top: #{$value};\n }\n } @else if $value==0 {\n @include media-up(#{$breakpoint}) {\n padding-top: #{$value};\n }\n } @else {\n @include media-up(#{$breakpoint}) {\n padding-top: #{$value};\n }\n }\n } @else if $name==pb {\n @if $value==auto {\n @include media-up(#{$breakpoint}) {\n padding-bottom: #{$value};\n }\n } @else if $value==0 {\n @include media-up(#{$breakpoint}) {\n padding-bottom: #{$value};\n }\n } @else {\n @include media-up(#{$breakpoint}) {\n padding-bottom: #{$value};\n }\n }\n } @else if $name==pl {\n @if $value==auto {\n @include media-up(#{$breakpoint}) {\n padding-left: #{$value};\n }\n } @else if $value==0 {\n @include media-up(#{$breakpoint}) {\n padding-left: #{$value};\n }\n } @else {\n @include media-up(#{$breakpoint}) {\n padding-left: #{$value};\n }\n }\n } @else if $name==pr {\n @if $value==auto {\n @include media-up(#{$breakpoint}) {\n padding-right: #{$value};\n }\n } @else if $value==0 {\n @include media-up(#{$breakpoint}) {\n padding-right: #{$value};\n }\n } @else {\n @include media-up(#{$breakpoint}) {\n padding-right: #{$value};\n }\n }\n } @else if $name==px {\n @if $value==auto {\n @include media-up(#{$breakpoint}) {\n padding-left: #{$value};\n padding-right: #{$value};\n }\n } @else if $value==0 {\n @include media-up(#{$breakpoint}) {\n padding-left: #{$value};\n padding-right: #{$value};\n }\n } @else {\n @include media-up(#{$breakpoint}) {\n padding-left: #{$value};\n padding-right: #{$value};\n }\n }\n } @else if $name==py {\n @if $value==auto {\n @include media-up(#{$breakpoint}) {\n padding-top: #{$value};\n padding-bottom: #{$value};\n }\n } @else if $value==0 {\n @include media-up(#{$breakpoint}) {\n padding-top: #{$value};\n padding-bottom: #{$value};\n }\n } @else {\n @include media-up(#{$breakpoint}) {\n padding-top: #{$value};\n padding-bottom: #{$value};\n }\n }\n } @else {\n @if $value==auto {\n @include media-up(#{$breakpoint}) {\n padding: #{$value};\n }\n } @else if $value==0 {\n @include media-up(#{$breakpoint}) {\n padding: #{$value};\n }\n } @else {\n @include media-up(#{$breakpoint}) {\n padding: #{$value};\n }\n }\n }\n}\n\n// padding Class Name with Mixin\n@mixin padding-class($name, $property, $value, $pre: $active-prefix) {\n\n // Add your Prefix classes name\n @if $property==pt {\n @if $value==auto {\n .#{$name} {\n padding-top: #{$value};\n }\n } @else if $value==0 {\n .#{$name} {\n padding-top: #{$value};\n }\n } @else {\n .#{$name} {\n padding-top: #{$value}#{$pre};\n }\n }\n } @else if $property==pb {\n @if $value==auto {\n .#{$name} {\n padding-bottom: #{$value};\n }\n } @else if $value==0 {\n .#{$name} {\n padding-bottom: #{$value};\n }\n } @else {\n .#{$name} {\n padding-bottom: #{$value}#{$pre};\n }\n }\n } @else if $property==pl {\n @if $value==auto {\n .#{$name} {\n padding-left: #{$value};\n }\n } @else if $value==0 {\n .#{$name} {\n padding-left: #{$value};\n }\n } @else {\n .#{$name} {\n padding-left: #{$value}#{$pre};\n }\n }\n } @else if $property==pr {\n @if $value==auto {\n .#{$name} {\n padding-right: #{$value};\n }\n } @else if $value==0 {\n .#{$name} {\n padding-right: #{$value};\n }\n } @else {\n .#{$name} {\n padding-right: #{$value}#{$pre};\n }\n }\n } @else if $property==px {\n @if $value==auto {\n .#{$name} {\n padding-left: #{$value};\n padding-right: #{$value};\n }\n } @else if $value==0 {\n .#{$name} {\n padding-left: #{$value};\n padding-right: #{$value};\n }\n } @else {\n .#{$name} {\n padding-left: #{$value}#{$pre};\n padding-right: #{$value}#{$pre};\n }\n }\n } @else if $property==py {\n @if $value==auto {\n .#{$name} {\n padding-top: #{$value};\n padding-bottom: #{$value};\n }\n } @else if $value==0 {\n .#{$name} {\n padding-top: #{$value};\n padding-bottom: #{$value};\n }\n } @else {\n .#{$name} {\n padding-top: #{$value}#{$pre};\n padding-bottom: #{$value}#{$pre};\n }\n }\n } @else {\n @if $value==auto {\n .#{$name} {\n padding: #{$value};\n }\n } @else if $value==0 {\n .#{$name} {\n padding: #{$value};\n }\n } @else {\n .#{$name} {\n padding: #{$value}#{$pre};\n }\n }\n }\n}\n\n// Responsive padding Class Name with Mixin\n@mixin padding-class-rs($name, $property, $breakpoint, $value, $pre: $active-prefix) {\n\n // Add your Prefix classe name\n @if $property==pt {\n @if $value==auto {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n padding-top: #{$value};\n }\n }\n } @else if $value==0 {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n padding-top: #{$value};\n }\n }\n } @else {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n padding-top: #{$value}#{$pre};\n }\n }\n }\n } @else if $property==pb {\n @if $value==auto {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n padding-bottom: #{$value};\n }\n }\n } @else if $value==0 {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n padding-bottom: #{$value};\n }\n }\n } @else {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n padding-bottom: #{$value}#{$pre};\n }\n }\n }\n } @else if $property==pl {\n @if $value==auto {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n padding-left: #{$value};\n }\n }\n } @else if $value==0 {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n padding-left: #{$value};\n }\n }\n } @else {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n padding-left: #{$value}#{$pre};\n }\n }\n }\n } @else if $property==pr {\n @if $value==auto {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n padding-right: #{$value};\n }\n }\n } @else if $value==0 {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n padding-right: #{$value};\n }\n }\n } @else {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n padding-right: #{$value}#{$pre};\n }\n }\n }\n } @else if $property==px {\n @if $value==auto {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n padding-left: #{$value};\n padding-right: #{$value};\n }\n }\n } @else if $value==0 {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n padding-left: #{$value};\n padding-right: #{$value};\n }\n }\n } @else {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n padding-left: #{$value}#{$pre};\n padding-right: #{$value}#{$pre};\n }\n }\n }\n } @else if $property==py {\n @if $value==auto {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n padding-top: #{$value};\n padding-bottom: #{$value};\n }\n }\n } @else if $value==0 {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n padding-top: #{$value};\n padding-bottom: #{$value};\n }\n }\n } @else {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n padding-top: #{$value}#{$pre};\n padding-bottom: #{$value}#{$pre};\n }\n }\n }\n } @else {\n @if $value==auto {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n padding: #{$value};\n }\n }\n } @else if $value==0 {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n padding: #{$value};\n }\n }\n } @else {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n padding: #{$value}#{$pre};\n }\n }\n }\n }\n}\n\n// Border \n@mixin border($type: null, $size: 1px, $style: solid, $color: $global-color) {\n @if $type==top {\n border#{-$type}: #{$size} #{$style} #{$color};\n } @else if $type==bottom {\n border#{-$type}: #{$size} #{$style} #{$color};\n } @else if $type==left {\n border#{-$type}: #{$size} #{$style} #{$color};\n } @else if $type==right {\n border#{-$type}: #{$size} #{$style} #{$color};\n } @else if $type==by {\n border-top: #{$size} #{$style} #{$color};\n border-bottom: #{$size} #{$style} #{$color};\n } @else if $type==bx {\n border-left: #{$size} #{$style} #{$color};\n border-right: #{$size} #{$style} #{$color};\n } @else {\n border: #{$size} #{$style} #{$color};\n }\n}\n\n// Border \n@mixin border-class($type: null, $size: 1px, $style: solid, $color: $global-color) {\n\n // Add your Prefix classes name\n @if $type==top {\n .border-#{$type} {\n border#{-$type}: #{$size} #{$style} #{$color};\n }\n } @else if $type==bottom {\n .border-#{$type} {\n border#{-$type}: #{$size} #{$style} #{$color};\n }\n } @else if $type==left {\n .border-#{$type} {\n border#{-$type}: #{$size} #{$style} #{$color};\n }\n } @else if $type==right {\n .border-#{$type} {\n border#{-$type}: #{$size} #{$style} #{$color};\n }\n } @else {\n .border {\n border: #{$size} #{$style} #{$color};\n }\n }\n}\n\n// Border \n@mixin border-rs($breakpoint, $type: null, $size: 1px, $style: solid, $color: $global-color) {\n\n // Add your Prefix classes name\n @if $type==top {\n .border-#{$breakpoint}-#{$type} {\n @include media-up(#{$breakpoint}) {\n border#{-$type}: #{$size} #{$style} #{$color};\n }\n }\n } @else if $type==bottom {\n .border-#{$breakpoint}-#{$type} {\n @include media-up(#{$breakpoint}) {\n border#{-$type}: #{$size} #{$style} #{$color};\n }\n }\n } @else if $type==left {\n .border-#{$breakpoint}-#{$type} {\n @include media-up(#{$breakpoint}) {\n border#{-$type}: #{$size} #{$style} #{$color};\n }\n }\n } @else if $type==right {\n .border-#{$breakpoint}-#{$type} {\n @include media-up(#{$breakpoint}) {\n border#{-$type}: #{$size} #{$style} #{$color};\n }\n }\n } @else {\n .border-#{$breakpoint} {\n @include media-up(#{$breakpoint}) {\n border: #{$size} #{$style} #{$color};\n }\n }\n }\n}\n\n// Border Width\n@mixin border-width($type: null, $size: 1px) {\n @if $type==top {\n border#{-$type}-width: #{$size};\n } @else if $type==right {\n border#{-$type}-width: #{$size};\n } @else if $type==bottom {\n border#{-$type}-width: #{$size};\n } @else if $type==left {\n border#{-$type}-width: #{$size};\n } @else {\n border: #{$size};\n }\n}\n\n// Border Color\n@mixin border-color($color: $global-color) {\n border-color: #{$color};\n}\n\n// Border Style\n@mixin border-style($style: solid) {\n border-style: #{$style};\n}\n\n// Border Radius Mixin\n@mixin radius($type: null, $size: 0) {\n @if $type==top {\n border#{-$type}-left-radius: #{$size};\n border#{-$type}-right-radius: #{$size};\n } @else if $type==right {\n border-top-right-radius: #{$size};\n border-bottom-right-radius: #{$size};\n } @else if $type==bottom {\n border#{-$type}-left-radius: #{$size};\n border#{-$type}-right-radius: #{$size};\n } @else if $type==left {\n border-top-left-radius: #{$size};\n border-bottom-left-radius: #{$size};\n } @else {\n border-radius: #{$size};\n }\n}\n\n// Border Radius Class Mixin\n@mixin radius-class($type: null, $size: 0, $num: null) {\n @if $type==top {\n @if $num {\n .radius-#{$type}-#{$num} {\n border#{-$type}-left-radius: #{$size};\n border#{-$type}-right-radius: #{$size};\n }\n } @else {\n .radius-#{$type} {\n border#{-$type}-left-radius: #{$size};\n border#{-$type}-right-radius: #{$size};\n }\n }\n } @else if $type==right {\n @if $num {\n .radius-#{$type}-#{$num} {\n border-top-right-radius: #{$size};\n border-bottom-right-radius: #{$size};\n }\n } @else {\n .radius-#{$type} {\n border-top-right-radius: #{$size};\n border-bottom-right-radius: #{$size};\n }\n }\n } @else if $type==bottom {\n @if $num {\n .radius-#{$type}-#{$num} {\n border#{-$type}-left-radius: #{$size};\n border#{-$type}-right-radius: #{$size};\n }\n } @else {\n .radius-#{$type} {\n border#{-$type}-left-radius: #{$size};\n border#{-$type}-right-radius: #{$size};\n }\n }\n } @else if $type==left {\n @if $num {\n .radius-#{$type}-#{$num} {\n border-top-left-radius: #{$size};\n border-bottom-left-radius: #{$size};\n }\n } @else {\n .radius-#{$type} {\n border-top-left-radius: #{$size};\n border-bottom-left-radius: #{$size};\n }\n }\n } @else {\n @if $num {\n .radius-#{$num} {\n border-radius: #{$size};\n }\n } @else {\n .radius {\n border-radius: #{$size};\n }\n }\n }\n}\n\n//Display mixin\n@mixin display($value) {\n .d-#{$value} {\n display: $value;\n }\n}\n\n//Responsive Display Mixin\n@mixin display-rs($breakpoint, $value) {\n .d-#{$breakpoint}-#{$value} {\n @include media-up(#{$breakpoint}) {\n display: #{$value};\n }\n }\n}\n\n@mixin padding-divide($name, $value: 0, $device: x, $div: false) {\n @if $device==y {\n .#{$name} {\n @if $div==true {\n div + div {\n @include padding(py, $value);\n }\n } @else {\n li + li {\n @include padding(py, $value);\n }\n }\n }\n } @else {\n .#{$name} {\n @if $div==true {\n div + div {\n @include padding(pl, $value);\n }\n } @else {\n li + li {\n @include padding(pl, $value);\n }\n }\n }\n }\n}\n\n@mixin padding-divide-rs($name, $value: 0, $breakpoint: null, $divide: x, $div: false) {\n @if $divide==y {\n .#{$name} {\n @include media-up($breakpoint) {\n @if $div==true {\n div + div {\n @include padding(py, $value);\n }\n } @else {\n li + li {\n @include padding(py, $value);\n }\n }\n }\n }\n } @else {\n .#{$name} {\n @include media-up($breakpoint) {\n @if $div==true {\n div + div {\n @include padding(pl, $value);\n }\n } @else {\n li + li {\n @include padding(pl, $value);\n }\n }\n }\n }\n }\n}\n\n//Overlay Mixin\n@mixin overlay($name, $width: 100%, $height: $width, $color: null, $direction: null, $gradient: null, $mode: null, $index: 999) {\n .overlay {\n overflow: hidden;\n position: relative;\n @include property;\n }\n\n @if $gradient {\n .overlay-#{$name} {\n &::before {\n content: '';\n @include absolute();\n @include size($width, $height: $width);\n @include property;\n @include gradient($direction, $gradient);\n @include overlay-mode($mode: $mode);\n z-index: $index;\n }\n }\n } @else {\n .overlay-#{$name} {\n &::before {\n content: '';\n @include absolute();\n @include size($width, $height: $width);\n @include property;\n background: $color;\n @include overlay-mode($mode: $mode);\n z-index: $index;\n }\n }\n }\n}\n\n//Overlay Opacity Mixin\n@mixin overlay-opacity($name, $opacity: 1) {\n .overlay-#{$name} {\n &::before {\n opacity: $opacity;\n }\n }\n}\n\n//Overlay Mode Mixin\n@mixin overlay-mode($name: null, $mode: null) {\n @if $name {\n .overlay-#{$name} {\n &::before {\n mix-blend-mode: $mode;\n }\n }\n } @else {\n mix-blend-mode: $mode;\n }\n\n}\n\n// Size \n@mixin size($width, $height: $width) {\n width: $width;\n height: $height;\n}\n\n//Position mixin\n@mixin position($position, $args) {\n @each $o in top right bottom left inset {\n $i: index($args, $o);\n\n @if $i and $i+1 <=length($args) and type-of(nth($args, $i + 1))==number {\n #{$o}: nth($args, $i + 1);\n }\n }\n\n position: $position;\n}\n\n// Positioning helpers\n@mixin absolute($args: '') {\n @include position(absolute, $args);\n}\n\n@mixin fixed($args: '') {\n @include position(fixed, $args);\n}\n\n@mixin relative($args: '') {\n @include position(relative, $args);\n}\n\n// Position Top/Right/Bottom/Left Alignment\n@mixin trbl($type, $value, $pre: null) {\n\n @if $type==top {\n .#{$type}-#{$value} {\n top: #{$value}#{$pre};\n }\n } @else if $type==right {\n .#{$type}-#{$value} {\n right: #{$value}#{$pre};\n }\n } @else if $type==bottom {\n .#{$type}-#{$value} {\n bottom: #{$value}#{$pre};\n }\n } @else if $type==left {\n .#{$type}-#{$value} {\n left: #{$value}#{$pre};\n }\n }\n}\n\n// Position Top/Bottom/Left/Right Alignment\n@mixin position-align($name, $position: absolute) {\n\n @if $name==center {\n @if $position==relative {\n .inset-#{$name} {\n @include relative(top 50% left 50%);\n transform: translate(-50%, -50%);\n }\n } @else {\n .inset-#{$name} {\n @include absolute(top 50% left 50%);\n transform: translate(-50%, -50%);\n }\n }\n } @else if $name==tl-center {\n @if $position==relative {\n .#{$name} {\n @include relative(top 50% left 0);\n transform: translateY(-50%);\n }\n } @else {\n .#{$name} {\n @include absolute(top 50% left 0);\n transform: translateY(-50%);\n }\n }\n } @else if $name==tr-center {\n @if $position==relative {\n .#{$name} {\n @include relative(top 50% right 0);\n transform: translateY(-50%);\n }\n } @else {\n .#{$name} {\n @include absolute(top 50% right 0);\n transform: translateY(-50%);\n }\n }\n } @else if $name==top-right {\n @if $position==relative {\n .#{$name} {\n @include relative(top 0 right 0);\n }\n } @else {\n .#{$name} {\n @include absolute(top 0 right 0);\n }\n }\n } @else if $name==bl-center {\n @if $position==relative {\n .#{$name} {\n @include relative(bottom 0 left 50%);\n transform: translateY(-50%);\n }\n } @else {\n .#{$name} {\n @include absolute(bottom 0 left 50%);\n transform: translateX(-50%);\n }\n }\n } @else if $name==bottom-left {\n @if $position==relative {\n .#{$name} {\n @include relative(bottom 0 left 0);\n }\n } @else {\n .#{$name} {\n @include relative(bottom 0 left 0);\n }\n }\n } @else if $name==bottom-right {\n @if $position==relative {\n .#{$name} {\n @include relative(bottom 0 right 0);\n }\n } @else {\n .#{$name} {\n @include relative(bottom 0 right 0);\n }\n }\n }\n\n}\n\n// Box Shadow Mixin\n@mixin shadow($x: 0, $y: 0, $b: 0, $color: $black, $opacity: 1) {\n -webkit-box-shadow: $x $y $b 0 rgba($color: $color, $alpha: $opacity);\n -moz-box-shadow: $x $y $b 0 rgba($color: $color, $alpha: $opacity);\n box-shadow: $x $y $b 0 rgba($color: $color, $alpha: $opacity);\n}\n\n//Text mixin\n@mixin text-align($value: left, $breakpoint: null, $name: null) {\n @if $name {\n @if $breakpoint {\n .#{$name} {\n @include media-up(#{$breakpoint}) {\n text-align: $value;\n }\n }\n } @else {\n .#{$name} {\n text-align: $value;\n }\n }\n } @else {\n @if $breakpoint {\n .text-#{$breakpoint}-#{$value} {\n @include media-up(#{$breakpoint}) {\n text-align: $value;\n }\n }\n } @else {\n .text-#{$value} {\n text-align: $value;\n }\n }\n }\n}\n\n// prefix declarations\n@mixin prefixed($property, $value) {\n @if $webkit==true {\n -webkit-#{$property}: #{$value};\n }\n\n @if $moz==true {\n -moz-#{$property}: #{$value};\n }\n\n @if $ms==true {\n -ms-#{$property}: #{$value};\n }\n\n @if $o==true {\n -o-#{$property}: #{$value};\n }\n\n #{$property}: #{$value};\n}\n\n// prefix keyframes\n@mixin keyframes($name) {\n @if $webkit==true {\n @-webkit-keyframes #{$name} {\n @content;\n }\n }\n\n @if $moz==true {\n @-moz-keyframes #{$name} {\n @content;\n }\n }\n\n @if $ms==true {\n @-ms-keyframes #{$name} {\n @content;\n }\n }\n\n @if $o==true {\n @-o-keyframes #{$name} {\n @content;\n }\n }\n\n @keyframes #{$name} {\n @content;\n }\n}\n\n@mixin property($value: 0.3s) {\n // Improve performance on mobile/tablet devices\n // Perspective reduces blurriness of text in Chrome\n @include prefixed(transition, #{$value} ease-out);\n}\n\n@mixin transform($name: translate, $value: 0) {\n // Improve performance on mobile/tablet devices\n // Perspective reduces blurriness of text in Chrome\n @include prefixed(transform, #{$name}(#{$value}));\n}\n\n// --------------------------------------\n//\t- Component\n// ----------------------------------------\n// CSS Triangle\n@mixin triangle($direction: top, $width: 50px, $height: $width, $color: $global-color) {\n $half: $width / 2;\n\n @if ($direction == top) {\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 0 $half $height $half;\n border-color: transparent transparent $color transparent;\n display: block;\n }\n\n @if ($direction == right) {\n width: 0;\n height: 0;\n border-style: solid;\n border-width: $half 0 $half $height;\n border-color: transparent transparent transparent $color;\n display: block;\n }\n\n @if ($direction==bottom) {\n width: 0;\n height: 0;\n border-style: solid;\n border-width: $height $half 0 $half;\n border-color: $color transparent transparent transparent;\n display: block;\n }\n\n @if ($direction==left) {\n width: 0;\n height: 0;\n border-style: solid;\n border-width: $half $height $half 0;\n border-color: transparent $color transparent transparent;\n display: block;\n }\n\n @if ($direction==top-left) {\n width: 0;\n height: 0;\n border-style: solid;\n border-width: $width $width 0 0;\n border-color: $color transparent transparent transparent;\n display: block;\n }\n\n @if ($direction==top-right) {\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 0 $width $width 0;\n border-color: transparent $color transparent transparent;\n display: block;\n }\n\n @if ($direction==bottom-left) {\n width: 0;\n height: 0;\n border-style: solid;\n border-width: $width 0 0 $width;\n border-color: transparent transparent transparent $color;\n display: block;\n }\n\n @if ($direction==bottom-right) {\n width: 0;\n height: 0;\n border-style: solid;\n border-width: 0 0 $width $width;\n border-color: transparent transparent $color transparent;\n display: block;\n }\n}\n\n// Nav Menu Mixin\n@mixin nav($li: inline-block, $position: relative, $ff: $font, $fs: 1rem, $fw: 400, $color: $global-color, $bg: transparent, $tt: capitalize, $td: none, $py: 0.625rem, $px: .5rem, $pt: null, $pr: null, $pb: null, $pl: null, $my: null, $mx: null, $mt: null, $mr: null, $mb: null, $ml: null, $display: block, $index: 99, $h-color: $color, $h-bg: $bg, $h-fw: null, $h-py: $py, $h-px: $px, $h-pt: $pt, $h-pr: $pr, $h-pb: $pb, $h-pl: $pl, $h-my: null, $h-mx: null, $h-mt: $mt, $h-mr: $mr, $h-mb: $mb, $h-ml: $ml, $h-td: none) {\n\n ul {\n margin: 0;\n }\n\n li {\n display: $li;\n\n a {\n position: $position;\n font-family: $ff;\n font-size: $fs;\n font-weight: $fw;\n color: $color;\n background: $bg;\n text-transform: $tt;\n text-decoration: $td;\n padding: $py $px;\n\n @if ($pt $pr $pb $pl) {\n padding-top: $pt;\n padding-right: $pr;\n padding-bottom: $pb;\n padding-left: $pl;\n }\n\n margin: $my $mx;\n\n @if ($mt $mr $mb $ml) {\n margin-top: $mt;\n margin-right: $mr;\n margin-bottom: $mb;\n margin-left: $ml;\n }\n\n display: $display;\n z-index: $index;\n\n @if $h-color {\n @include hover {\n color: $h-color;\n background: $h-bg;\n font-weight: $h-fw;\n padding: $h-py $h-px;\n\n @if ($h-pt $h-pr $h-pb $h-pl) {\n padding-top: $h-pt;\n padding-right: $h-pr;\n padding-bottom: $h-pb;\n padding-left: $h-pl;\n }\n\n margin: $h-my $h-mx;\n\n @if ($h-mt $h-mr $h-mb $h-ml) {\n margin-top: $h-mt;\n margin-right: $h-mr;\n margin-bottom: $h-mb;\n margin-left: $h-ml;\n }\n\n text-decoration: $h-td;\n }\n }\n }\n }\n}\n\n// Nav Tabs Mixin\n@mixin nav-tabs($name, $ff: $font, $fw: 400, $fs: 16px, $lh: null, $color: $global-color, $bg: null, $tt: capitalize, $p-name: null, $p-value:null, $m-name: null, $m-value:null, $h-color: null, $h-bg: null, $breakpoint: null, $b-fs: null, $b-p-name: null, $b-p-value:null, $b-m-name: null, $b-m-value:null) {\n .#{$name} {\n display: block;\n font-family: $ff;\n font-weight: $fw;\n font-size: $fs;\n line-height: $lh;\n color: $color;\n text-transform: $tt;\n @include padding($p-name, $p-value);\n @include margin($m-name, $m-value);\n\n @if $breakpoint {\n @include media-up($breakpoint) {\n font-size: $b-fs;\n @include padding($b-p-name, $b-p-value);\n @include margin($b-m-name, $b-m-value);\n }\n }\n\n &:hover {\n color: $h-color;\n background: $h-bg;\n }\n\n // Disabled state lightens text\n &.disabled {\n color: $nav-link-disabled-color;\n pointer-events: none;\n cursor: default;\n }\n }\n}\n\n// Button mixin\n@mixin btn($fs: var(--btn-fs), $ff: var(--btn-ff), $fw: var(--fw-400), $lh: 1.5, $tt: capitalize, $td: none, $py: var(--btn-py), $px: var(--btn-px), $my: var(--btn-mx), $mx: var(--btn-mx), $bg: var(--btn-bg), $border-width: var(--border-width), $border-style: var(--border-style), $border-color: $bg, $radius: var(--btn-radius, var(--radius)), $display: inline-block, $position: relative) {\n position: $position;\n font-family: $ff;\n font-size: $fs;\n font-weight: $fw;\n line-height: $lh;\n background: var(--btn-bg);\n color: var(--btn-clr);\n border: var(--btn-bw, #{$border-width}) var(--btn-bs, #{$border-style}) var(--btn-bc, #{$border-color});\n text-transform: $tt;\n text-decoration: $td;\n border-radius: $radius;\n padding: $py $px;\n margin: $my $mx;\n display: $display;\n overflow: hidden;\n text-align: center;\n cursor: pointer;\n @include property;\n}\n\n// Button Color\n@mixin btn-color($bg: var(--clr-black), $color: var(--clr-white), $border-color: $bg, $h-color: $bg, $h-bg: transparent, $h-border-color: $h-color, $f-width: 0.4rem, $f-color: #000000, $f-opacity: 0.25) {\n --btn-bg: #{$bg};\n --btn-clr: #{$color};\n --btn-bc: #{$border-color};\n\n @if $h-bg {\n @include hover {\n --btn-clr: #{$h-color};\n --btn-bg: #{$h-bg};\n --btn-bc: #{$h-border-color};\n }\n }\n\n @include focus {\n outline: 0;\n box-shadow: 0 0 0 $f-width rgba($f-color, 0.5);\n }\n}\n\n//Button hover color\n@mixin btn-hover($h-color: var(--clr-black), $h-bg: transparent, $h-border-color: $h-color, $f-width: 0.4rem, $f-color: #000000, $f-opacity: 0.25) {\n @if $h-bg {\n @include hover {\n --btn-clr: #{$h-color};\n --btn-bg: #{$h-bg};\n --btn-bc: #{$h-border-color};\n }\n }\n\n @include focus {\n outline: 0;\n box-shadow: 0 0 0 $f-width rgba($f-color, 0.5);\n }\n}\n\n@mixin btn-outline($color: var(--btn-clr), $h-color: var(--clr-white), $h-bg: $color, $border-color: $color, $h-border-color: $h-bg, $f-width: 0.4rem, $f-color: $color, $f-opacity: 0.5) {\n --btn-clr: #{$color};\n --btn-bc: #{$border-color};\n\n @include hover {\n --btn-clr: #{$h-color};\n --btn-bg: #{$h-bg};\n --btn-bc: #{$h-border-color};\n }\n\n @include focus {\n outline: 0;\n box-shadow: 0 0 0 $f-width rgba($f-color, 0.5);\n }\n}\n\n\n// Form Input mixin \n@mixin form-input($ff: $font, $fs: inherit, $fw: null, $lh: null, $color: $global-color, $bg: transparent, $opacity: 1, $tt: capitalize, $py: 1rem, $px: 1.25rem, $my: 0, $mx: 0, $width: 100%, $max-width: null, $height: auto, $border-type: null, $border-size: 1px, $border-style: solid, $border-color: $global-color, $radius-type: null, $radius-size: 0, $shadow: null, $focus: false, $f-fw: null, $f-color: $color, $f-bg: null, $f-opacity: 1, $f-border-type: null, $f-border-size: $border-size, $f-border-style: $border-style, $f-border-color: $black, $f-radius-type: null, $f-radius-size: null, $f-shadow: null) {\n\n font-family: $ff;\n font-size: $fs;\n font-weight: $fw;\n line-height: $lh;\n color: rgba($color, $opacity);\n background: $bg;\n text-transform: $tt;\n padding: $py $px;\n margin: $my $mx;\n @include size($width, $height);\n max-width: $max-width;\n @include border($border-type, $border-size, $border-style, $border-color);\n @include radius($radius-type, $radius-size);\n box-shadow: $shadow;\n @include property;\n\n @if $focus==true {\n &:focus {\n outline: none;\n font-weight: $f-fw;\n color: rgba($f-color, $f-opacity);\n background: $f-bg;\n @include border($f-border-type, $f-border-size, $f-border-style, $f-border-color);\n @include radius($f-radius-type, $f-radius-size);\n box-shadow: $f-shadow;\n }\n } @else {\n @include focus {\n outline: none;\n }\n }\n\n}\n\n// Form Textarea mixin \n@mixin textarea($fs: null, $fw: null, $lh: null, $color: $global-color, $bg: transparent, $opacity: 1, $tt: capitalize, $py: 15px, $px: 20px, $my: 0.9375rem, $mx: 0, $width: 100%, $max-width: null, $height: auto, $border-type: null, $border-size: 1px, $border-style: solid, $border-color: transparent, $radius-type: null, $radius-size: 0, $shadow: null, $focus: false, $f-fw: null, $f-color: $color, $f-opacity: 1, $f-border-type: null, $f-border-size: $border-size, $f-border-style: $border-style, $f-border-color: $border-color, $f-radius-type: null, $f-radius-size: null, $f-shadow: null) {\n\n font-size: $fs;\n font-weight: $fw;\n line-height: $lh;\n padding: $py $px;\n margin: $my $mx;\n color: rgba($color, $opacity);\n background: $bg;\n text-transform: $tt;\n @include size($width, $height);\n max-width: $max-width;\n @include border($border-type, $border-size, $border-style, $border-color);\n @include radius($radius-type, $radius-size);\n box-shadow: $shadow;\n @include property;\n\n @if $focus==true {\n &:focus {\n font-weight: $f-fw;\n color: rgba($f-color, $f-opacity);\n @include border($f-border-type, $f-border-size, $f-border-style, $f-border-color);\n @include radius($f-radius-type, $f-radius-size);\n box-shadow: $f-shadow;\n }\n }\n}\n\n// Dropdown Menu Mixin\n@mixin dropdown-menu($position:top 100% left 0, $width: 100%, $max-width: null, $padding: 15px, $m-name: mx, $m-value: auto, $fs: 16px, $a-color: $global-color, $a-padding: 0.625rem, $a-margin: 5px, $align: left, $index: 99, $radius: null, $shadow: null, $hover-bg: $black, $hover-color: $white) {\n @include absolute($position);\n width: $width;\n\n @if $max-width {\n max-width: $max-width;\n @include margin($m-name, $m-value);\n }\n\n padding: $padding;\n text-align: $align;\n z-index: $index;\n border-radius: $radius;\n box-shadow: $shadow;\n opacity: 0;\n visibility: hidden;\n\n li {\n display: block;\n\n a {\n color: $a-color;\n font-size: $fs;\n border-radius: $radius;\n padding: $a-padding;\n margin-bottom: $a-margin;\n display: block;\n\n &:hover {\n background: $hover-bg;\n color: $hover-color;\n }\n }\n }\n}\n\n// Social Link\n@mixin social($name, $display: inline-block, $m-type: ml, $m-size: .75rem, $before: false, $divide-li: false, $before-content: '', $position: null, $before-width: 1px, $before-height: 20px, $before-bg: $global-color, $fs: 20px, $bg: transparent, $color: $global-color, $width: null, $height: $width, $lh: $width, $b-type: null, $b-size: 1px, $b-style: solid, $b-color: transparent, $radius: null, $p-name: null, $p-value: null, $shadow-x: null, $shadow-y: null, $shadow-b: null, $shadow-color: $color, $shadow-opacity: 1, $h-bg: null, $h-color: $color, $hb-type: $b-type, $hb-size: $b-size, $hb-style: $b-style, $hb-color: $b-color, $hs-x: null, $hs-y: null, $hs-b: null, $hs-color: $color, $hs-opacity: 1) {\n .#{$name} {\n li {\n + li {\n @include margin($m-type, $m-size);\n }\n\n position: relative;\n\n @if $display==inline-flex {\n display: inline-flex;\n flex-wrap: wrap;\n } @else {\n display: $display;\n }\n\n @if $before==true {\n @if $divide-li==true {\n & + li {\n &::before {\n content: $before-content;\n @include absolute($position);\n @include size($before-width, $before-height);\n background: $before-bg;\n }\n }\n } @else {\n &::before {\n content: $before-content;\n @include absolute($position);\n @include size($before-width, $before-height);\n background: $before-bg;\n }\n }\n }\n\n a {\n font-size: $fs;\n line-height: $lh;\n background: $bg;\n color: $color;\n display: block;\n text-align: center;\n @include size($width, $height);\n @include border($b-type, $b-size, $b-style, $b-color);\n @include radius($size: $radius);\n @include property;\n\n @if $p-name {\n @include padding($p-name, $p-value);\n }\n\n @if $shadow-color==true {\n @include shadow($shadow-x, $shadow-y, $shadow-b, $shadow-color, $shadow-opacity);\n }\n\n @if $h-bg {\n @include hover {\n background: $h-bg;\n color: $h-color;\n\n @if $hb-color {\n @include border($hb-type, $hb-size, $hb-style, $hb-color);\n }\n\n @if $hs-color {\n @include shadow($hs-x, $hs-y, $hs-b, $hs-color, $hs-opacity);\n }\n }\n } @else {\n @include hover {\n color: $h-color;\n }\n }\n }\n }\n }\n}\n\n//Owl Carousel Nav\n@mixin owl-nav($name: null, $fs: 20px, $bg: transparent, $color: $global-color, $position: null, $width: 50px, $height: $width, $lh: null, $radius: 0, $border: 2px solid $global-color, $transform: null, $p: 0, $owl-prev-left: null, $owl-prev-right: null, $owl-next-left: null, $owl-next-right: null, $h-bg: null, $h-color: null, $h-border: null) {\n @if $name {\n .#{$name} {\n button {\n @include absolute($position);\n @include size($width, $height);\n font: inherit;\n font-size: $fs;\n background: $bg;\n color: $color;\n line-height: $lh;\n border-radius: $radius;\n border: $border;\n transform: $transform;\n padding: $p;\n cursor: pointer;\n @include property;\n\n &.owl-prev {\n left: $owl-prev-left;\n right: $owl-prev-right;\n }\n\n &.owl-next {\n left: $owl-next-left;\n right: $owl-next-right;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n background: $h-bg;\n color: $h-color;\n border: $h-border;\n }\n }\n }\n } @else {\n .owl-nav {\n button {\n @include absolute($position);\n @include size($width, $height);\n font: inherit;\n font-size: $fs;\n background: $bg;\n color: $color;\n line-height: $lh;\n border-radius: $radius;\n border: $border;\n transform: $transform;\n padding: $p;\n cursor: pointer;\n @include property;\n\n &.owl-prev {\n left: $owl-prev-left;\n right: $owl-prev-right;\n }\n\n &.owl-next {\n left: $owl-next-left;\n right: $owl-next-right;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n background: $h-bg;\n color: $h-color;\n border: $h-border;\n }\n }\n }\n }\n}\n\n// OWl Carousel Dots \n@mixin owl-dots($dots-position: left 50% bottom 0, $translateX: -50%, $translateY: -50%, $width: 8px, $height: $width, $display: inline-block, $text-center: center, $bg: $global-color, $border-size: 1px, $border-style: solid, $border-color: transparent, $radius-type: null, $radius-size: 50%, $p-name: null, $p-value: .25rem, $m-name: ml, $m-value: .5rem, $before: false, $b-content: '', $b-position: left -9px top -9px, $b-width: 25px, $b-height: $b-width, $b-radius-type: null, $b-radius-size: 50%, $b-border: 1px solid $global-color, $active: true, $a-width: $width, $a-height: $height, $a-bg: $bg, $a-border-size: 1px, $a-border-style: solid, $a-border-color: transparent, $active-before: false, $ab-content: '', $ab-position: left -9px top -9px, $ab-width: 25px, $ab-height: $ab-width, $ab-border: 2px solid $global-color, $ab-radius-type: null, $ab-radius-size: 50%) {\n\n @include absolute($dots-position);\n text-align: $text-center;\n\n @if $translateY==true {\n transform: translateY($translateY);\n } @else {\n transform: translateX($translateX);\n }\n\n button {\n position: relative;\n @include size($width, $height);\n display: $display;\n background: $bg;\n @include border(null, $border-size, $border-style, $border-color);\n @include radius($radius-type, $radius-size);\n @include padding($p-name, $p-value);\n @include margin($m-name, $m-value);\n\n @if $before==true {\n &::before {\n content: $b-content;\n @include absolute($b-position);\n @include size($b-width, $b-height);\n @include radius($b-radius-type, $b-radius-size);\n border: $b-border;\n }\n }\n\n @if $active==true {\n &.active {\n @include size($a-width, $a-height);\n background: $a-bg;\n @include border(null, $a-border-size, $a-border-style, $a-border-color);\n\n @if $active-before==true {\n &::before {\n content: $ab-content;\n @include absolute($ab-position);\n @include size($ab-width, $ab-height);\n @include radius($ab-radius-type, $ab-radius-size);\n border: $ab-border;\n }\n }\n }\n }\n\n @include focus {\n outline: none;\n }\n }\n}\n\n// Footer Menu \n@mixin footer-menu($size: 18px, $color: $black, $padding: 10px, $opacity: 1, $display: block, $tt: capitalize, $td: none, $h-color: $black, $h-td: none) {\n li {\n a {\n font-size: $size;\n color: $color;\n opacity: $opacity;\n padding-bottom: $padding;\n display: $display;\n text-transform: $tt;\n text-decoration: $td;\n\n @include hover {\n color: $h-color;\n text-decoration: $h-td;\n }\n }\n }\n}\n\n// Footer Widget \n@mixin footer-widget($value, $weight: 600, $prefix: top, $padding: 0) {\n h3 {\n font-size: $value;\n padding-#{$prefix}: $padding;\n font-weight: $weight;\n }\n\n @include footer-menu;\n}\n\n//Extra Small Screen Only\n@mixin xs {\n @media screen and (max-width: 767px) {\n @content;\n }\n}\n\n//Small Screen\n@mixin xsm {\n @media screen and (min-width: 425px) {\n @content;\n }\n}\n\n//Small Screen\n@mixin sm {\n @media screen and (min-width: 576px) {\n @content;\n }\n}\n\n//Medium Screen\n@mixin md {\n @media screen and (min-width: 768px) {\n @content;\n }\n}\n\n//Large Screen\n@mixin lg {\n @media screen and (min-width: 992px) {\n @content;\n }\n}\n\n//Extra Large Screen\n@mixin xl {\n @media screen and (min-width: 1200px) {\n @content;\n }\n}\n\n//Desktop Screen\n@mixin xxl {\n @media screen and (min-width: 1441px) {\n @content;\n }\n}",":root {\n // Responsive Container Width\n --container-width: 100%;\n --container-sm: 33.75rem;\n --container-md: 45rem;\n --container-lg: 60rem;\n --container-xl: 71.25rem;\n --container-xxl: 90rem;\n --container-fluid: 100%;\n\n // Gutters\n --gutter-x: 1.875rem;\n --gutter-3: 0.125rem;\n --gutter-5: 0.225rem;\n --gutter-10: 0.625rem;\n --gutter-15: 0.9375rem;\n --gutter-20: 1.25rem;\n --gutter-25: 1.5625rem;\n --gutter-30: 1.875rem;\n --gutter-32: 2rem;\n --gutter-35: 2.1875rem;\n --gutter-40: 2.5rem;\n --gutter-45: 2.8125rem;\n --gutter-50: 3.125rem;\n\n //Font Family\n --ff-roboto: \"Roboto\", sans-serif;\n ;\n\n // Font Weight\n --fw-100: 100;\n --fw-200: 200;\n --fw-300: 300;\n --fw-400: 400;\n --fw-500: 500;\n --fw-600: 600;\n --fw-700: 700;\n --fw-800: 800;\n --fw-900: 900;\n\n // Font Size\n --fs-12: 0.75rem;\n --fs-13: 0.8125rem;\n --fs-14: 0.875rem;\n --fs-15: 0.9375rem;\n --fs-16: 1rem;\n --fs-17: 1.0625rem;\n --fs-18: 1.125rem;\n --fs-20: 1.25rem;\n --fs-21: 1.3125rem;\n --fs-24: 1.5rem;\n --fs-25: 1.5625rem;\n --fs-28: 1.75rem;\n --fs-30: 1.875rem;\n --fs-32: 2rem;\n --fs-35: 2.1875rem;\n --fs-40: 2.5rem;\n --fs-45: 2.8125rem;\n\n // hr\n --hr-bg: var(--clr-black);\n --hr-width: 100%;\n --hr-height: 0.3125rem;\n --hr-gutter-y: 1.875rem;\n --hr-gutter-x: 0;\n --hr-padding: 0;\n --hr-radius: 0;\n\n // Margin\n --m: 0;\n --mt: 0;\n --mr: 0;\n --mb: 0;\n --ml: 0;\n --mx: 0;\n --my: 0;\n --m-auto: auto;\n --my-auto: auto;\n --mx-auto: auto;\n\n // Padding\n --p: 0;\n --pt: 0;\n --pr: 0;\n --pb: 0;\n --pl: 0;\n --px: 0;\n --py: 0;\n --p-auto: auto;\n --py-auto: auto;\n --px-auto: auto;\n\n // Border\n --border-width: 0.0625rem;\n --border-style: solid;\n --border-clr: transparent;\n --border: var(--border-width) var(--border-style) var(--border-clr);\n --border-t: var(--border-width) var(--border-style) var(--border-clr);\n --border-r: var(--border-width) var(--border-style) var(--border-clr);\n --border-b: var(--border-width) var(--border-style) var(--border-clr);\n --border-l: var(--border-width) var(--border-style) var(--border-clr);\n --border-x: var(--border-width) var(--border-style) var(--border-clr);\n --border-y: var(--border-width) var(--border-style) var(--border-clr);\n\n // Border Radius\n --radius: 0;\n --radius-t: 0;\n --radius-r: 0;\n --radius-b: 0;\n --radius-l: 0;\n --radius-full: 50%;\n\n // Button Component\n --btn-bg: transparent;\n --btn-clr: inherit;\n --btn-ff: var(--ff-roboto);\n --btn-fs: var(--fs-15);\n --btn-py: 0.625rem;\n --btn-px: 1.125rem;\n --btn-my: var(--my);\n --btn-mx: var(--mx);\n\n // Color\n --clr-black: #000;\n --clr-black-100: #0D0E2B;\n --clr-dark: #252733;\n --clr-text: #575766;\n --clr-text-light: #9199A1;\n --clr-white: #fff;\n --frmx_brand_color: #6a28ea;\n --clr-orange: #ff5a46;\n --clr-yellow: #FFE132;\n --black_50: #ebebeb;\n --black_100: #d6d9dc;\n --black_150: #c8ccd0;\n --black_200: #bbc0c4;\n --black_300: #9fa6ad;\n --black_350: #9199a1;\n --black_400: #848d95;\n --black_500: #6a737c;\n --black_600: #535a60;\n --black_700: #3c4146;\n --black_750: #2f3337;\n --black_800: #242729;\n --black_900: #0c0d0e;\n}","$container-widths: (\n sm: 540px,\n md: 720px,\n lg: 960px,\n xl: 1170px,\n xxl: 1170px,\n) !default;\n\n// Responsive Variables\n$breakpoints: (\n xs: 0,\n sm: 576px,\n md: 768px,\n lg: 992px,\n xl: 1200px,\n xxl: 1441px,\n) !default;\n\n$columns: 12 !default;\n$gutter-width: 30px;\n\n// Font Family\n\n$font: var(--ff-roboto);\n$global-font: $font;\n\n//Heading H1 Responsive Font Size\n$min_width: 20rem;\n$max_width: 75rem;\n$h1_min_font: 2rem;\n$h1_max_font: 3.75rem;\n\n//Heading H2 Responsive Font Size\n$h2_min_font: 2rem;\n$h2_max_font: 3rem;\n\n//Heading H3 Responsive Font Size\n$h3_min_font: 1.375rem;\n$h3_max_font: 1.5rem;\n\n//Heading H4 Responsive Font Size\n$h4_min_font: 1rem;\n$h4_max_font: 1.125rem;\n\n// Global Font Size\n$global-font-size: var(--fs-15);\n\n// Global Color\n\n// Colors ---------------\n$black: var(--clr-black) !default;\n$white: var(--clr-white) !default;\n$blue: var(--frmx_brand_color);\n$light-gree: var(--clr-light-green);\n$sunshade: var(--clr-sunshade);\n\n$global-color: $black !default;\n\n$active-prefix: rem;\n\n// Brand Color\n$acc: #B97654;\n$text-color: #14183E;\n$st-color: #757575;\n// Browser Prefixes - Which CSS prefixes should be used?\n$webkit: true !default;\n$moz: false !default;\n$ms: false !default;\n$o: false !default;\n\n$nameSpace: true;\n\n// Responsive Variables\n$desktop: \"(min-width: 1367px)\";\n$xl: \"(min-width: 1200px)\";\n$lg: \"(min-width: 992px)\";\n$md: \"(min-width: 768px)\";\n$sm: \"(min-width: 576px)\";\n$xsm: \"(min-width: 425px)\";\n$mobile: \"(max-width: 576)\";\n$xs: \"(max-width: 767px)\";","h1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-family: $font;\n color: $text-color;\n line-height: 1.4;\n}\n\nh1 a,\nh2 a,\nh3 a,\nh4 a,\nh5 a,\nh6 a {\n color: inherit;\n}\n\nh1 {\n @include fluid-type($min_width, $max_width, $h1_min_font, $h1_max_font);\n}\n\nh2 {\n @include fluid-type($min_width, $max_width, $h2_min_font, $h2_max_font);\n}\n\nh3 {\n @include fluid-type($min_width, $max_width, $h3_min_font, $h3_max_font);\n}\n\nh4 {\n @include fluid-type($min_width, $max_width, $h4_min_font, $h4_max_font);\n}\n\nul {\n margin: 0;\n padding: 0;\n}\n\nli {\n list-style: none\n}\n\nhr {\n background: #c2cfff;\n width: 50px;\n height: 3px;\n margin: 35px 0;\n padding: 0;\n border: none;\n\n @include md {\n margin: {\n top: 25px;\n bottom: 25px;\n }\n }\n}\n\np{\n margin: 0;\n}\n\nlabel {\n color: $black;\n cursor: pointer;\n font-size: 14px;\n font-weight: 400;\n}\n\n/*Home 3 Default Font Family*/\n.home-3{\n font-size: var(--fs-15);\n font-weight: var(--fw-400);\n color: var(--clr-black);\n font-family: var(--font-quicksand); \n} \n\n/*Home 3 Default Font Family*/\n.home-4{\n font-size: var(--fs-15);\n font-weight: var(--fw-400);\n font-family: var(--font-arimo); \n} ","@include align-items(alignment-center, center);","@include justify-content(justify-content-between, space-between);\n@include justify-content(justify-content-end, end);","/*--------------------------------------\n\t- Color\n----------------------------------------*/\n.color {\n color: $global-color;\n}\n\n@include color(\"black\", $black);\n@include color(\"white\", $white);","@include display(block);\n@include display(inline-block);\n@include display(grid);\n@include display(flex);","// Flex Direction\n@include flex-direction(flex-row, row);\n@include flex-direction(flex-reverse, row-reverse);\n@include flex-direction(flex-column, column);\n@include flex-direction(flex-column-reverse, column-reverse);\n\n// Responsive Flex Direction\n// @include flex-direction(flex-lg-row, row, lg);\n// @include flex-direction(row-reverse-lg, row-reverse);\n\n// Flex Wrap\n//@include flex-wrap(flex-wrap, wrap);\n//@include flex-wrap(flex-nowrap, nowrap);\n//@include flex-wrap(flex-wrap-reverse, wrap-reverse);\n\n// Responsive Flex Wrap\n//@include flex-wrap(flex-md-wrap, wrap, sm);\n\n//Flex\n//@include flex(flex-1, 1);\n//@include flex(flex-auto, auto);\n//@include flex(flex-initial, initial);\n//@include flex(flex-none, none);\n\n// Responsive Flex\n//@include flex(flex-md-1, 1, md);\n\n// Flex Grow\n//@include flex-grow(flex-grow-0, 0);\n//@include flex-grow(flex-grow-sm-0, 0, sm);\n//\n//@include flex-grow(flex-grow-1, 1);\n//@include flex-grow(flex-grow-md-1, 1, md);\n\n// Flex Shrink\n//@include flex-shrink(flex-shrink-0, 0);\n//@include flex-shrink(flex-shrink-md-0, 0, md);\n//\n//@include flex-shrink(flex-shrink-1, 1);\n//@include flex-shrink(flex-shrink-md, 1, md);","/*--\n - Font Famaly \n-----------------------------------------*/\n// .font-mulish {\n// font-family: $font;\n// }\n\n/*--\n - Font weight\n-----------------------------------------*/\n.font-regular{\n font-weight: var(--fw-400);\n}\n\n.font-medium {\n font-weight: var(--fw-500);\n}\n\n.font-semi-bold{\n font-weight: var(--fw-600);\n}\n\n.font-bold{\n font-weight: var(--fw-700);\n}\n\n.font-black{\n font-weight: var(--fw-900);\n}\n\n/*--\n - Font Size\n-----------------------------------------*/\n// .font-small {\n// font-size: rem(15px);\n// }\n //@include font(15);\n// @include font(20);\n// @include font(22);\n// @include font(24); \n// @include font(26);\n// @include font(28);\n// @include font(32);\n// @include font(36);\n// @include font(50);\n\n//Responsive Font Size\n//@include font(40, xl);\n// @include font(38, md);\n// @include font(60, lg);\n","/*--\n - Margin\n-------------------------------------------*/\n// Nagative Margin\n@include margin-class(mt-n3, mt, -0.4375);\n@include margin-class(mt-n4, mt, -0.75);\n\n// Margin auto\n@include margin-class(m-auto, m, auto);\n@include margin-class(mx-auto, mx, auto);\n// @include margin-class(ml-auto, ml, auto);\n// @include margin-class(mr-auto, mr, auto);\n\n// Margin Top\n@include margin-class(mt-0, mt, 0);\n//@include margin-class(mt-4, mt, 1);\n//@include margin-class(mt-5, mt, 1.25);\n// @include margin-class(mt-8, mt, 2);\n// @include margin-class(mt-16, mt, 4);\n// @include margin-class(mt-9, mt, 2.5);\n@include margin-class(mt-73, mt, 4.5625);\n\n// Margin Bottom\n//@include margin-class(mb-0, mb, 0);\n//@include margin-class(mb-3, mb, .75);\n// @include margin-class(mb-4, mb, 1);\n//@include margin-class(mb-5, mb, 1.25);\n//@include margin-class(mb-6, mb, 1.5);\n@include margin-class(mb-8, mb, 2);\n//@include margin-class(mb-13, mb, 3.125);\n//@include margin-class(mb-16, mb, 4);\n\n// Margin Right\n@include margin-class(mr-1, mr, 0.25);\n\n// Margin Top Responsive\n@include margin-class-rs(mt-md-n4, mt, md, -0.75);\n// @include margin-class-rs(ml-md-auto, ml, md, auto);\n//@include margin-class-rs(mt-lg-0, mt, lg, 0);\n//@include margin-class-rs(mt-lg-8, mt, lg, 2);\n//@include margin-class-rs(mt-md-8, mt, md, 2);\n\n// Margin Bottom Responsive\n//@include margin-class-rs(mb-md-0, mb, md, 0);\n//@include margin-class-rs(mb-md-16, mb, md, 4);\n//@include margin-class-rs(mb-xl-18, mb, xl, 4.5);\n\n// .ml-md-auto {\n// @include md {\n// margin-left: auto !important;\n// }\n// }\n\n.mt-40{\n margin-top: 40px;\n}",".easydocs-accordion {\n position: relative;\n padding: 0;\n list-style: none;\n margin: 10px 0 20px;\n background: var(--clr-white);\n border-radius: 5px;\n overflow: hidden;\n border: 1px solid #edeae9;\n\n .acc_active {\n .accordion-title {\n border-bottom: 1px solid #edeae9;\n @include before {\n transform: translateY(-50%) rotate(90deg);\n }\n }\n }\n\n .ui-state-highlight {\n height: 50px;\n background: #f9f9f9;\n @include border(by, $color: #afabac);\n }\n}\n\n.easydocs-accordion-item {\n width: 100%;\n margin: 0;\n\n + .easydocs-accordion-item {\n border-top: 1px solid #edeae9;\n }\n\n &.is-accordion-open {\n &:last-child {\n .accordion-title {\n @include radius(bottom, 0);\n }\n }\n }\n\n &.child-one {\n .child-right-content {\n align-items: center;\n\n .progress-text a {\n font-size: 14px;\n color: var(--clr-text-light);\n margin-right: var(--gutter-30);\n text-decoration: none;\n }\n }\n\n .accordion-title {\n @include before {\n transform: translateY(-50%);\n }\n }\n\n &.acc_active {\n .accordion-title {\n @include before {\n transform: translateY(-50%) rotate(90deg);\n }\n }\n }\n\n a {\n padding: 0;\n }\n\n .accordion-title.has-child a {\n &.section-last-label {\n margin-left: 19px;\n }\n }\n\n .accordion-title.has-child::before {\n left: 52px;\n }\n\n .nesting-accordion a {\n &.child-last-label {\n margin: 10px 50px 10px 70px;\n }\n }\n }\n}\n\n.accordion-title {\n position: relative;\n background: #fff;\n padding: 15px 30px 15px 30px;\n cursor: pointer;\n @media (max-width: 1440px) {\n padding: 12px 20px 12px 34px;\n }\n\n &.ez-section-title {\n h4 {\n font-weight: var(--fw-500);\n }\n\n @media (max-width: 1440px) {\n &::before {\n left: 20px;\n }\n }\n }\n\n &.has-child {\n @include pseudo(top 50% left 32px) {\n @include triangle(right, 10px, 6px, var(--clr-text));\n transform: translateY(-50%);\n @include property;\n }\n @media (max-width: 1440px) {\n &::before {\n left: 20px;\n }\n }\n }\n\n .count {\n margin-left: 5px;\n color: #fff;\n background: var(--black_200);\n }\n\n ul.actions {\n display: flex;\n\n li {\n margin: 0;\n }\n }\n\n @include hover {\n background: #f9f9f9;\n\n h4 {\n color: var(--clr-dark);\n }\n\n ul.actions {\n display: flex;\n\n li {\n margin: 0;\n line-height: normal;\n }\n }\n }\n\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n h4 {\n font-size: var(--fs-14);\n color: var(--clr-text);\n display: flex;\n align-items: center;\n font-weight: normal;\n\n a {\n text-decoration: none;\n }\n }\n\n .accordion-category-icon {\n @include size(rem(20px));\n line-height: rem(20px);\n border-radius: 50%;\n text-align: center;\n margin-left: 5px;\n }\n\n .light-green {\n background: rgba(#2db22d, 0.1);\n --category-icon: #2db22d;\n }\n\n .light-orange {\n background: rgba(#cc8033, 0.1);\n --category-icon: #cc8033;\n }\n\n .light-blue {\n background: rgba(#0275d8, 0.1);\n --category-icon: var(--frmx_brand_color);\n }\n\n .light-gray {\n background: rgba(#424242, 0.1);\n --category-icon: #424242;\n }\n\n ul.actions {\n display: none;\n align-items: center;\n gap: var(--gutter-10);\n --section-icon: #9199a1;\n margin-left: 15px;\n\n .duplicate {\n order: 1;\n }\n\n .delete {\n order: 2;\n }\n\n li {\n @include hover {\n --section-icon: var(--clr-dark);\n }\n\n a {\n text-decoration: none;\n\n .dashicons {\n color: var(--black_150);\n font-size: 18px;\n padding-top: 3px;\n\n &:hover {\n color: var(--black_400);\n }\n }\n\n img {\n opacity: 0.5;\n @include hover {\n opacity: 1;\n }\n }\n\n &.st-pro-notice .dashicons {\n color: #f1bd6c;\n }\n }\n }\n }\n\n .left-content {\n display: flex;\n align-items: center;\n\n .topic-status {\n width: 30px;\n height: 20px;\n text-align: left;\n margin-right: 5px;\n }\n\n .bbpc-author-name {\n font-size: 14px;\n color: var(--clr-text-light);\n a {\n text-decoration: none;\n }\n }\n }\n\n .right-content {\n display: flex;\n align-items: center;\n\n .progress-text a {\n font-size: 14px;\n color: var(--clr-text-light);\n margin-left: var(--gutter-30);\n text-decoration: none;\n }\n }\n}\n\n.easydocs-accordion-body {\n background: var(--clr-white);\n color: var(--clr-text);\n font-size: var(--fs-14);\n padding: 10px 50px 10px 50px;\n}\n\n.nesting-accordion {\n padding: 0;\n\n a {\n text-decoration: none;\n }\n}\n\n.child-docs-wrap {\n border-bottom: 1px solid #edeae9;\n\n &:hover {\n background-color: #f9f9f9;\n }\n\n .child-right-content {\n visibility: hidden;\n }\n\n @include hover {\n .child-right-content {\n visibility: visible;\n }\n }\n}\n\na.child-delete,\na.child-view-link {\n padding-left: 5px !important;\n padding-right: 5px !important;\n\n img {\n opacity: 0.5;\n @include hover {\n opacity: 1;\n }\n }\n}\n\na.child-delete {\n padding-right: 28px !important;\n}\n\n/* replies count */\n.count-replies span {\n position: absolute;\n top: 1px;\n left: 8px;\n color: #fff;\n font-size: 0.55em;\n}\n\n.bbpc-reply-count {\n box-sizing: border-box;\n display: block;\n padding: 0;\n min-width: 22px;\n height: 2em;\n border-radius: 5px;\n background-color: var(--black_200);\n color: #fff;\n font-size: 10px;\n line-height: 1.9090909;\n text-align: center;\n margin-left: 10px;\n\n &:after {\n content: '';\n display: block;\n margin-left: 11px;\n width: 0;\n height: 0;\n border-top: 5px solid var(--black_200);\n border-right: 5px solid transparent;\n }\n\n &.bbpc-published-replies {\n background-color: #cc8033;\n\n &:after {\n border-top: 5px solid #cc8033;\n }\n }\n}\n\n.bbpc-pending-replies {\n &:hover,\n &:active {\n background: #0275d8;\n\n &:after {\n border-top-color: #0275d8;\n }\n }\n}\n\n.bbpc-nested-replies {\n margin-left: 30px;\n display: none;\n}\n\n.ez-section-title div:has(.active) {\n .bbpc-pending-replies {\n background: #0275d8;\n\n &:after {\n border-top-color: #0275d8;\n }\n }\n}\n\n.bbpc-reply-wrap {\n background-color: #fff;\n padding: 8px 0;\n margin-left: 20px;\n\n a {\n width: 22px;\n height: 22px;\n display: inline-block;\n }\n\n &:hover {\n background: #f9f9f9;\n }\n\n &:not(:last-child) {\n border-bottom: 1px solid #edeae9;\n }\n}\n.bbpc-admin-pagination{\n margin-bottom: 15px;\n button {\n border: 1px solid;\n min-width: 35px;\n border-radius: 4px;\n background: rgb(0 0 0 / 80%);\n color: white;\n &:hover, &.mixitup-control-active{\n background: var(--frmx_brand_color);\n }\n }\n}",".ezd-btn {\n --btn-fs: var(--fs-16);\n --btn-ff: #{$font};\n --btn-py: 0.5rem;\n --btn-px: 1.6rem;\n\n @include btn();\n\n &-sm {\n --btn-py: 0.3125rem;\n }\n\n &-lg {\n --btn-py: 0.625rem;\n }\n\n &-xl {\n --btn-py: 0.75rem;\n }\n\n &-none {\n --btn-radius: 0;\n }\n\n &-round {\n --btn-radius: 0.375rem;\n }\n\n &-rounded {\n --btn-radius: 1.875rem;\n }\n\n &-round-full {\n --btn-radius: 50%;\n }\n\n &-disabled {\n pointer-events: none;\n opacity: 0.65;\n }\n\n &-black-light {\n @include btn-color(rgba(#0D0E2B, 0.1), #0D0E2B, $border-color: transparent, $h-bg: rgba(#0D0E2B, 0.1), $h-color: #0D0E2B, $h-border-color: #0D0E2B, $f-width: 0);\n }\n\n &-green-light {\n @include btn-color(rgba(#2DB22D, 0.1), #2DB22D, $border-color: transparent, $h-bg: rgba(#2DB22D, 0.1), $h-color: #2DB22D, $h-border-color: #2DB22D, $f-width: 0);\n }\n\n &-blue-light {\n @include btn-color(rgba(#0275D8, 0.1), #0275D8, $border-color: transparent, $h-bg: rgba(#0275D8, 0.1), $h-color: #0275D8, $h-border-color: #0275D8, $f-width: 0);\n }\n\n &-orange-light {\n @include btn-color(rgba(#CC8033, 0.1), #CC8033, $border-color: transparent, $h-bg: rgba(#CC8033, 0.1), $h-color: #CC8033, $h-border-color: #CC8033, $f-width: 0);\n }\n\n &-gray-light {\n @include btn-color(rgba(#424242, 0.1), #424242, $border-color: transparent, $h-bg: rgba(#424242, 0.1), $h-color: #424242, $h-border-color: #424242, $f-width: 0);\n }\n\n // &-outline-black {\n // @include btn-outline(var(--clr-black));\n // }\n\n &-blue {\n @include btn-color(var(--frmx_brand_color), $f-color: #4141E6);\n }\n\n &-outline-blue {\n @include btn-outline(#4141E6);\n }\n\n &-white {\n @include btn-color(var(--clr-white), $f-color: #fff);\n }\n\n &-outline-white {\n @include btn-outline(var(--clr-white), var(--clr-black));\n }\n\n &-gray {\n @include btn-color(rgba(#252733, 0.1), $color: var(--clr-dark), $h-bg: var(--frmx_brand_color), $border-color: transparent, $h-color: var(--clr-white), $h-border-color: transparent, $f-width: 0);\n }\n}\n\n// Empty state actions styling\n.forumax-empty-actions {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n margin-top: 20px;\n\n .ezd-btn {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n\n .dashicons {\n font-size: 18px;\n width: 18px;\n height: 18px;\n line-height: 1;\n }\n }\n}\n\n.forumax-actions-separator {\n color: #6b7280;\n font-size: 14px;\n font-weight: 500;\n}\n\n// Import Demo Data button styling\n.forumax-import-demo-btn {\n background: linear-gradient(135deg, #7c3aed, #a855f7) !important;\n border-color: transparent !important;\n color: #fff !important;\n transition: all 0.3s ease;\n\n &:hover {\n background: linear-gradient(135deg, #6d28d9, #9333ea) !important;\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);\n }\n\n &:focus {\n outline: none;\n box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3);\n }\n\n .dashicons {\n color: #fff;\n }\n}","// Dropdown Menu\n.easydocs-dropdown {\n @include absolute(top 130% right -20px);\n @include shadow(0 30px 40px 0 rgba(4, 73, 89, 0.1));\n background-color: var(--clr-white);\n border-radius: 0.5rem;\n z-index: 999;\n @include property;\n display: none;\n\n &.is-active {\n opacity: 1;\n visibility: visible;\n top: 130%;\n }\n}\n\n// ============================================\n// Modern Notification Dropdown - Redesigned\n// ============================================\n.notification-dropdown {\n width: 400px;\n max-width: 95vw;\n border-radius: 12px;\n box-shadow: \n 0 20px 60px rgba(0, 0, 0, 0.12),\n 0 8px 25px rgba(0, 0, 0, 0.08),\n 0 0 0 1px rgba(0, 0, 0, 0.04);\n overflow: hidden;\n animation: notificationSlideIn 0.25s ease-out;\n\n @keyframes notificationSlideIn {\n from {\n opacity: 0;\n transform: translateY(-10px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n\n &::before {\n content: \"\";\n position: absolute;\n top: -8px;\n right: 24px;\n width: 16px;\n height: 16px;\n background: var(--frmx_brand_color);\n transform: rotate(45deg);\n border-radius: 2px;\n box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.05);\n }\n}\n\n// Notification Header\n.notification-head {\n padding: 16px 20px;\n background: var(--frmx_brand_color);\n position: relative;\n overflow: hidden;\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n &::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.1) 0%, transparent 50%);\n pointer-events: none;\n }\n\n &.no-notification-text {\n padding: 40px 20px;\n background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n color: #6b7280;\n font-size: 14px;\n font-weight: 500;\n\n &::before {\n content: \"🔔\";\n font-size: 32px;\n margin-bottom: 10px;\n opacity: 0.6;\n }\n }\n\n .header-text {\n color: #fff;\n font-size: 16px;\n font-weight: 700;\n letter-spacing: 0.3px;\n position: relative;\n z-index: 1;\n text-shadow: 0 1px 2px rgba(0,0,0,0.1);\n }\n\n .notification-action-btn {\n background: rgba(255, 255, 255, 0.15);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 20px; \n padding: 6px 14px;\n font-size: 12px;\n font-weight: 500;\n color: #fff;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n gap: 6px;\n position: relative;\n z-index: 1;\n\n &:hover {\n background: rgba(255, 255, 255, 0.25);\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n }\n \n &:active {\n transform: translateY(0);\n }\n\n .dashicons {\n font-size: 14px;\n width: 14px;\n height: 14px;\n }\n }\n}\n\n// Notification Filter Tabs\n.notification-tabs {\n display: flex;\n padding: 0 16px;\n background: #fff;\n border-bottom: 1px solid #f1f5f9;\n gap: 16px;\n\n .notification-tab {\n padding: 14px 4px;\n background: transparent;\n border: none;\n border-bottom: 2px solid transparent;\n font-size: 13px;\n font-weight: 500;\n color: #64748b;\n cursor: pointer;\n transition: all 0.2s ease;\n display: flex;\n align-items: center;\n gap: 6px;\n position: relative;\n\n &:hover {\n color: #334155;\n \n .tab-count {\n background: #e2e8f0;\n }\n }\n\n &.is-active {\n color: var(--frmx_brand_color);\n border-bottom-color: var(--frmx_brand_color);\n \n .tab-count {\n background: var(--frmx_brand_color);\n color: #fff;\n }\n }\n\n .tab-count {\n background: #f1f5f9;\n color: #64748b;\n padding: 2px 8px;\n border-radius: 12px;\n font-size: 11px;\n font-weight: 600;\n min-width: 20px;\n text-align: center;\n transition: all 0.2s ease;\n }\n }\n}\n\n// Notification Body\n.notification-body {\n background: #fff;\n position: relative;\n}\n\n.notify-column {\n max-height: 400px;\n overflow-y: auto;\n // Elegant Scrollbar\n scrollbar-width: thin;\n scrollbar-color: #cbd5e1 transparent;\n\n &::-webkit-scrollbar {\n width: 5px;\n }\n \n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: #cbd5e1;\n border-radius: 20px;\n border: 2px solid transparent; // Creates padding feeling\n background-clip: content-box;\n\n &:hover {\n background-color: #94a3b8;\n }\n }\n\n ul {\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n // Individual Notification Item\n .notify-item {\n border-bottom: 1px solid #f1f5f9;\n margin: 0;\n position: relative;\n transition: background 0.2s ease;\n\n &:last-child {\n border-bottom: none;\n }\n\n &:hover {\n background: #f8fafc;\n \n .notify-content-summary p {\n color: #1e293b;\n }\n }\n\n &.is-unread {\n background: #fdfeff; \n\n &::before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 3px;\n background: var(--frmx_brand_color);\n box-shadow: 2px 0 8px rgba(102, 126, 234, 0.4);\n }\n }\n\n > a {\n display: flex;\n padding: 16px 20px;\n gap: 16px;\n text-decoration: none;\n align-items: flex-start;\n }\n }\n\n // Notification Icon\n .notify-icon {\n flex-shrink: 0;\n }\n\n .notify-icon-wrapper {\n width: 44px;\n height: 44px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #f1f5f9; // Default fallback\n transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);\n box-shadow: 0 2px 6px rgba(0,0,0,0.04);\n\n // Reply type\n &.type-reply {\n background: linear-gradient(135deg, #34d399 0%, #10b981 100%);\n box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);\n }\n\n // Closed topic type\n &.type-closed {\n background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2);\n }\n\n // Solved topic type\n &.type-solved {\n background: var(--frmx_brand_color);\n box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2);\n }\n\n .dashicons, \n .icon_check_alt {\n color: #fff;\n filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));\n }\n\n .dashicons {\n font-size: 20px;\n width: 20px;\n height: 20px;\n }\n \n .icon_check_alt {\n font-size: 18px;\n }\n }\n\n // Content area\n .notify-content-wrap {\n flex: 1;\n min-width: 0;\n }\n\n .notify-content-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 6px;\n gap: 8px;\n }\n\n .noti-type {\n font-size: 11px;\n font-weight: 700;\n color: #475569;\n background: #e2e8f0;\n padding: 2px 8px;\n border-radius: 6px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n display: inline-block;\n\n &.resolved {\n background: #e0e7ff;\n color: var(--frmx_brand_color);\n }\n }\n\n .notify-creation {\n font-size: 11px;\n color: #94a3b8;\n white-space: nowrap;\n }\n\n .notify-content-summary {\n p {\n font-size: 13px;\n line-height: 1.5;\n color: #64748b;\n margin: 0;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n font-weight: 400;\n }\n }\n}\n\n// Loading State for Infinite Scroll\n.notification-loading {\n padding: 16px;\n text-align: center;\n background: #f9fafb;\n border-top: 1px solid #f3f4f6;\n\n .loading-spinner {\n display: inline-block;\n width: 20px;\n height: 20px;\n border: 2px solid #e5e7eb;\n border-top-color: var(--frmx_brand_color);\n border-radius: 50%;\n animation: notificationSpin 0.8s linear infinite;\n }\n\n @keyframes notificationSpin {\n to {\n transform: rotate(360deg);\n }\n }\n\n .loading-text {\n font-size: 12px;\n color: #9ca3af;\n margin-top: 6px;\n }\n}\n\n// No More Notifications\n.notification-end {\n padding: 14px;\n text-align: center;\n font-size: 12px;\n color: #9ca3af;\n background: #f9fafb;\n border-top: 1px solid #f3f4f6;\n\n &::before {\n content: \"✓\";\n display: inline-block;\n margin-right: 6px;\n color: #10b981;\n }\n}\n\n// Notification Footer\n.notification-footer {\n padding: 12px 16px;\n background: #f8f9fb;\n border-top: 1px solid #e5e7eb;\n display: flex;\n align-items: center;\n justify-content: center;\n\n .view-all-link {\n font-size: 13px;\n font-weight: 500;\n color: var(--frmx_brand_color);\n text-decoration: none;\n display: flex;\n align-items: center;\n gap: 6px;\n transition: all 0.2s ease;\n\n &:hover {\n color: #764ba2;\n gap: 10px;\n }\n\n .dashicons {\n font-size: 14px;\n width: 14px;\n height: 14px;\n transition: transform 0.2s ease;\n }\n\n &:hover .dashicons {\n transform: translateX(3px);\n }\n }\n}\n\n// Empty State\n.notification-empty {\n padding: 40px 20px;\n text-align: center;\n\n .empty-icon {\n width: 64px;\n height: 64px;\n margin: 0 auto 16px;\n background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n\n .dashicons {\n font-size: 28px;\n width: 28px;\n height: 28px;\n color: #9ca3af;\n }\n }\n\n .empty-title {\n font-size: 15px;\n font-weight: 600;\n color: #374151;\n margin-bottom: 6px;\n }\n\n .empty-text {\n font-size: 13px;\n color: #9ca3af;\n line-height: 1.5;\n }\n}\n\n// Notification Skeleton Loading\n.notification-skeleton {\n padding: 14px 16px;\n display: flex;\n gap: 12px;\n animation: skeletonPulse 1.5s ease-in-out infinite;\n\n @keyframes skeletonPulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n }\n\n .skeleton-icon {\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: #e5e7eb;\n }\n\n .skeleton-content {\n flex: 1;\n\n .skeleton-line {\n height: 12px;\n background: #e5e7eb;\n border-radius: 4px;\n margin-bottom: 8px;\n\n &:first-child {\n width: 40%;\n }\n &:last-child {\n width: 80%;\n margin-bottom: 0;\n }\n }\n }\n}",".form-control {\n @include form-input($fs: var(--fs-14), $color: #9199A1, $py: 0.75rem, $max_width: rem(600px), $mx: auto, $border-color: #EDEAE9, $radius-size: 0.625rem);\n\n @include focus {\n background: white;\n box-shadow: none !important;\n border: 1px solid #4c4cf1 !important;\n border-radius: 0.625rem;\n box-sizing: border-box !important;\n line-height: unset !important;\n\n ~.search-icon {\n background: var(--frmx_brand_color);\n --search-icon: var(--clr-white);\n .dashicons {\n color: #fff;\n }\n }\n }\n}\n\n.easydocs-search-form {\n position: relative;\n max-width: rem(600px);\n flex: 1;\n @include margin(mx, auto);\n\n .search-icon {\n position: absolute;\n -webkit-transition: 0.3s ease-out;\n transition: 0.3s ease-out;\n left: 20px;\n transform: translateY(50%);\n }\n\n input#bbpc-search {\n color: #9199a1;\n padding: 10px 15px 10px 48px;\n border: 1px solid #EDEAE9;\n box-sizing: border-box;\n line-height: unset;\n box-shadow: 0 1px 1px rgba(11, 80, 115, 0.3), 0 1px 5px rgba(60, 64, 67, 0.1);\n background: rgb(255 255 255 / 35%);\n border-radius: 25px;\n &:hover {\n box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);\n }\n &:focus {\n background: #fff;\n color: #242729;\n outline: none;\n }\n }\n @media screen and (max-width: 1440px) {\n margin: 0 10px;\n }\n}",".easydocs-accordion-item {\n progress {\n -webkit-appearance: none;\n appearance: none;\n height: 6px;\n border-radius: 32px;\n width: 100px;\n &::-webkit-progress-bar {\n background-color: #e74c3c;\n }\n &::-webkit-progress-value {\n background-color: #27ae60;\n }\n }\n}",".badge {\n display: inline-block;\n padding: 0.35em 0.65em 0.3em;\n font-size: .75em;\n font-weight: 400;\n line-height: 1;\n color: #fff;\n text-align: center;\n white-space: nowrap;\n vertical-align: baseline;\n border-radius: .25rem;\n}","@use \"sass:color\";\n\n/*----------------------------------------*/\n/* 02. Header Area\n/*----------------------------------------*/\n.easydocs-header-area {\n padding-top: 40px;\n padding-bottom: 50px;\n padding-right: 40px;\n\n .easydocs-row {\n @include margin(mx, 0);\n }\n}\n\n.navbar-left {\n gap: var(--gutter-20);\n\n .easydocs-btn {\n --btn-icon: var(--frmx_brand_color);\n --btn-py: 0.5rem;\n --btn-px: 1rem;\n --btn-fs: var(--fs-12);\n font-weight: 500;\n gap: 6px;\n display: flex;\n border: 1px solid var(--frmx_brand_color);\n align-items: center;\n text-decoration: none;\n padding: 8px 15px;\n border-radius: 6px;\n color: var(--frmx_brand_color);\n\n span.dashicons {\n font-size: 14px;\n margin-bottom: -4px;\n }\n\n @include hover {\n --btn-icon: var(--clr-white);\n background: var(--frmx_brand_color);\n }\n &:focus{\n box-shadow: 0 0 0 0.4rem rgba(65, 65, 230, 0.5);\n }\n }\n}\n\n.easydocs-logo-area {\n a {\n text-decoration: none;\n color: var(--clr-dark);\n font-size: var(--fs-24);\n font-weight: var(--fw-700);\n }\n}\n\n:is(.easydocs-notification, .easydocs-settings) {\n\n .header-notify-icon {\n @include size(2.5rem);\n line-height: 2.5rem;\n border-radius: 50%;\n background: rgba(#252733, 0.05);\n text-align: center;\n cursor: pointer;\n\n &:hover {\n background: rgb(37 39 51 / 9%);\n }\n\n svg {\n position: relative;\n top: 0.300rem;\n }\n }\n}\n\n.easydocs-notification {\n margin-right: rem(27px);\n position: relative;\n\n .easydocs-badge {\n @include absolute(top rem(-7px) right rem(-8px));\n background: #FA3E3E;\n color: var(--clr-white);\n top: -0.4375rem;\n right: -0.2rem;\n position: absolute;\n padding: 0 4px;\n min-width: 18px;\n max-width: 18px;\n border-radius: 50%;\n text-align: center;\n font-size: 10px;\n font-weight: 700;\n line-height: 18px;\n height: 16px;\n display: inline-table;\n font-family: 'Roboto';\n }\n}\n\n.easydocs-settings {\n .header-notify-icons {\n a {\n text-decoration: none;\n padding-top: 5px;\n display: inline-block;\n }\n }\n}\n\n:is(.knobs, .layer) {\n @include absolute(inset 0);\n}\n\n.navbar-right .js-darkmode-btn {\n .day svg {\n color: #fff;\n }\n\n .night svg {\n color: var(--clr-dark);\n }\n}\n\n.body_dark {\n .navbar-right .js-darkmode-btn {\n .day svg {\n --toggle-icon: #575766;\n }\n\n .night svg {\n --toggle-icon: #fff;\n }\n }\n}\n\n.navbar-right {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n\n > ul {\n align-items: center;\n gap: 8px;\n }\n\n .js-darkmode-btn {\n display: flex;\n align-items: center;\n justify-content: space-between;\n @include size(rem(80px), rem(40px));\n position: relative;\n background: rgba(#252733, 0.05);\n padding: 0 10px;\n color: #fff;\n border-radius: 24px;\n @include property;\n\n .day svg {\n --toggle-icon: #fff;\n @include property;\n margin-top: 7px;\n }\n\n .night svg {\n --toggle-icon: #575766;\n @include property;\n margin-top: 7px;\n }\n }\n\n .js-darkmode-btn label {\n margin: 0;\n cursor: pointer;\n position: relative;\n z-index: 2;\n }\n\n .js-darkmode-btn .ball {\n height: 30px;\n width: 30px;\n position: absolute;\n background-color: var(--frmx_brand_color);\n border-radius: 50%;\n left: 4px;\n top: 50%;\n transform: translateY(-50%);\n cursor: default;\n transition: all 0.3s linear 0s;\n z-index: 1;\n }\n\n .js-darkmode-btn svg {\n font-size: 16px;\n transition: all 0.3s linear 0s;\n }\n\n .js-darkmode-btn input {\n display: none;\n }\n}\n\n.settings-pro-icon {\n position: absolute;\n right: 0px;\n top: -5px;\n}\n\n.swal2-styled.swal2-confirm.upgrade-premium-button {\n > a {\n color: black;\n font-weight: normal;\n text-decoration: none;\n }\n}\n\n.swal2-footer.notification-pro-footer-wrap {\n > a {\n text-decoration: none;\n }\n}\n\n.notification-body {\n .filter-button-group {\n display: flex;\n gap: 8px;\n @include padding(px, var(--gutter-25));\n\n svg {\n top: 0;\n }\n\n .easydocs-btn {\n --notification-icon: var(--clr-dark);\n --btn-px: 1rem;\n --btn-fs: var(--fs-14);\n --btn-py: 0.4rem;\n display: flex;\n align-items: center;\n gap: 1px;\n --btn-bg: #e4e6eb;\n --btn-clr: var(--clr-dark);\n --btn-bc: transparent;\n\n &.mixitup-control-active {\n background-color: #e7f3ff;\n color: #1877f2;\n --notification-icon: #1877f2;\n\n .dashicons-screenoptions:before {\n color: #1877f2;\n }\n\n @include hover {\n background-color: #d2e6f9;\n }\n }\n\n @include hover {\n --notification-icon: var(--clr-white);\n background: #cdcdcd;\n }\n }\n }\n}\n\n.notify-column {\n max-height: rem(400px);\n overflow-y: auto;\n scrollbar-width: thin;\n\n &::-webkit-scrollbar-track {\n background-color: var(--clr-text-light);\n }\n\n &::-webkit-scrollbar {\n width: 8px;\n background-color: #F5F5F5;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: var(--clr-text);\n }\n\n /* Notification updated css */\n ul {\n li {\n border-bottom: 1px solid #f1f2f3;\n margin-bottom: 0;\n\n a {\n text-decoration: none;\n gap: 9px;\n align-content: space-around;\n padding: 10px;\n box-sizing: border-box;\n\n .notify-icon {\n padding-top: 5px;\n }\n\n .notify-content-wrap {\n width: -webkit-fill-available;\n\n .notify-content-header {\n color: hsl(210deg 8% 35%);\n font-size: 12px;\n .noti-type {\n color: var(--black_800);\n font-weight: 500;\n }\n }\n\n .notify-content-summary {\n p {\n color: hsl(206deg 100% 40%);\n font-size: 13px;\n }\n }\n }\n\n &:focus {\n box-shadow: none;\n }\n }\n\n &:hover {\n background: hsl(210deg 8% 90%);\n }\n\n &:last-child {\n border-bottom: none;\n }\n }\n }\n}\n\n.notification-item {\n display: flex;\n align-items: flex-start;\n cursor: pointer;\n gap: var(--gutter-10);\n padding: var(--gutter-10) 15px;\n @include margin(mx, var(--gutter-10));\n @include property;\n border-radius: rem(5px);\n\n .notification-image {\n @include size(2.5rem);\n border-radius: 50%;\n position: relative;\n\n .notify-badge {\n @include absolute(bottom 0 right 0);\n @include size(1.125rem);\n line-height: 1.125rem;\n border-radius: 50%;\n text-align: center;\n\n .dashicons {\n top: 0;\n }\n }\n\n .notify-badge-blue {\n @include gradient(180deg, #22AAF1, #066BDA);\n\n .dashicons {\n font-size: 12px;\n color: white;\n padding-top: 2.5px;\n }\n }\n\n .notify-badge-green {\n @include gradient(180deg, #62D77E, #2BB64E);\n\n .dashicons {\n font-size: 12px;\n color: white;\n padding-top: 4px;\n }\n }\n }\n\n @include hover {\n background: rgba(#4C4CF1, 0.05);\n }\n}\n\n.notification-content {\n .notify-name {\n font-size: var(--fs-14);\n font-weight: var(--fw-500);\n color: var(--clr-dark);\n padding-right: 0.5rem;\n margin: 0;\n line-height: 1;\n\n a {\n text-decoration: none;\n }\n }\n\n .reply-text {\n font-size: 14px;\n color: var(--clr-text-light);\n line-height: 1;\n margin-top: 5px;\n }\n}\n\n.notify-short-description {\n font-size: var(--fs-14);\n color: var(--clr-text);\n line-height: 1;\n margin-top: 0.325rem;\n}\n\n.notify-date {\n text-align: left;\n color: var(--clr-text-light);\n line-height: 1;\n margin-top: 0.375rem;\n}\n\n.eazydocs-no-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n margin: 80px auto;\n max-width: 600px;\n background: #fff;\n padding: 60px 40px;\n border-radius: 16px;\n box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);\n border: 1px solid #f3f4f6;\n text-align: center;\n\n img {\n width: 140px;\n max-width: 100%;\n height: auto;\n margin: 0 auto 24px;\n filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.05));\n transition: transform 0.3s ease;\n\n &:hover {\n transform: scale(1.05);\n }\n }\n\n .big-p {\n font-size: 1.25rem;\n color: #374151;\n font-weight: 600;\n margin-bottom: 32px;\n line-height: 1.5;\n }\n\n .forumax-empty-actions {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 16px;\n margin-top: 0;\n width: 100%;\n\n .ezd-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 12px 28px;\n font-weight: 500;\n border-radius: 10px;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n font-size: 0.95rem;\n gap: 8px;\n\n &.button-primary {\n background: var(--frmx_brand_color);\n color: white;\n border: 1px solid transparent;\n box-shadow: 0 4px 6px -1px rgba(76, 76, 241, 0.3), 0 2px 4px -1px rgba(76, 76, 241, 0.1);\n\n &:hover {\n background-color: color.adjust(#4C4CF1, $lightness: -5%, $space: hsl);\n transform: translateY(-2px);\n box-shadow: 0 10px 15px -3px rgba(76, 76, 241, 0.4), 0 4px 6px -2px rgba(76, 76, 241, 0.2);\n }\n\n &:active {\n transform: translateY(0);\n }\n }\n\n &.forumax-import-demo-btn {\n &:hover {\n transform: translateY(-2px);\n box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.3), 0 4px 6px -2px rgba(124, 58, 237, 0.2);\n }\n }\n\n .dashicons {\n font-size: 18px;\n width: 18px;\n height: 18px;\n line-height: 1;\n margin: 0;\n }\n }\n\n .forumax-actions-separator {\n color: #9ca3af;\n font-weight: 500;\n font-size: 0.9rem;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n }\n}\n\n.bbpc-trash-filter {\n border-radius: 1.875rem;\n margin-bottom: 0;\n background-color: rgba(212, 23, 23, 0.1);\n transition: all .3s;\n\n &:hover {\n background-color: rgba(212, 23, 23, 0.3);\n\n a {\n color: #c10000;\n }\n }\n\n svg {\n fill: rgba(212, 23, 23, 1);\n }\n\n a {\n justify-content: center;\n gap: 0.3125rem;\n padding: 5px 15px;\n font-size: 14px;\n display: flex;\n align-items: center;\n color: rgba(212, 23, 23, 1);\n text-decoration: none;\n }\n\n @media screen and ( max-width: 1440px ) {\n .filter-label-trash{\n display: none;\n }\n }\n}\n\n.bbpc-settings-icon {\n background: rgba(0, 0, 255, 0.058);\n padding: 10px;\n border-radius: 50%;\n}","/*----------------------------------------*/\n/* Grid Layout\n/*----------------------------------------*/\n@include container();\n@include container-fluid(container-fluid);\n@include row(row);\n\n.no-gutters {\n margin-right: 0;\n margin-left: 0;\n\n > .col,\n > [class*=\"col-\"] {\n padding-right: 0;\n padding-left: 0;\n }\n}\n\nhtml, body {\n height: auto !important;\n}\n\nbody {\n &.bbpc-forum-ui {\n 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%);\n background-blend-mode: screen, screen, lighten, overlay, lighten, difference, normal;\n }\n}","/*----------------------------------------*/\n/* 03. Sidebar Area\n/*----------------------------------------*/\n.tab-container {\n display: flex;\n}\n\n.tab-menu {\n position: relative;\n background: #101010;\n flex: 0 0 auto;\n width: 380px;\n border-right: 1px solid rgba(255, 255, 255, 0.05);\n\n &.short {\n height: auto;\n }\n\n @media (max-width: 1680px) {\n width: 25%;\n }\n\n .tab-menu-left-layer {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n display: none; // Removed overlay for cleaner look\n }\n}\n\n.easydocs-tab {\n display: none;\n\n &.tab-active {\n display: block;\n }\n}\n\n.easydocs-navbar {\n padding: 20px 0;\n margin: 0;\n}\n\n.easydocs-navitem {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 20px 12px 22px;\n margin: 0 0 5px;\n cursor: pointer;\n @include property;\n position: relative;\n border-radius: 0 8px 8px 0;\n border-left: 3px solid transparent; \n transition: all 0.2s ease;\n\n .link-wrapper {\n display: none;\n align-items: center;\n justify-content: end;\n width: auto;\n opacity: 0;\n transform: translateX(10px);\n transition: all 0.2s ease;\n }\n\n &.is-active {\n background: rgba(54, 153, 255, 0.1);\n color: #fff;\n border-left-color: var(--frmx_brand_color);\n \n .title {\n color: #fff;\n opacity: 1;\n \n .featured-image {\n // background: var(--frmx_brand_color);\n \n span.dashicons {\n color: #fff;\n }\n \n img {\n opacity: 0.9;\n }\n }\n }\n\n .total-page {\n background: var(--frmx_brand_color);\n color: #fff;\n opacity: 1;\n }\n }\n\n .title {\n display: flex;\n align-items: center;\n gap: 15px;\n @include property;\n text-decoration: none;\n font-size: 15px;\n font-weight: 500;\n color: #a2a3b7;\n flex: 1;\n overflow: hidden;\n\n .featured-image {\n width: 36px;\n height: 36px;\n flex-shrink: 0;\n border-radius: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(255, 255, 255, 0.05);\n transition: all 0.2s ease;\n\n img {\n width: 100%;\n height: auto;\n border-radius: 6px;\n }\n\n span.dashicons {\n font-size: 20px;\n width: 20px;\n height: 20px;\n color: #82859a;\n transition: all 0.2s ease;\n }\n }\n\n span.easydocs-forums-title {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n\n .total-page {\n font-size: 11px;\n font-weight: 600;\n color: #8c8fa8;\n background: rgba(255, 255, 255, 0.05);\n padding: 2px 8px;\n border-radius: 4px;\n margin-left: 10px;\n transition: all 0.2s ease;\n }\n\n &:hover {\n &:not(.is-active) {\n background: rgba(255, 255, 255, 0.03);\n \n .title {\n color: #dcdde8;\n \n .featured-image {\n background: rgba(255, 255, 255, 0.1);\n span.dashicons {\n color: #dcdde8;\n }\n }\n }\n }\n\n .link-wrapper {\n opacity: 1;\n transform: translateX(0);\n display: flex;\n }\n \n .total-page {\n opacity: 0; \n display: none;\n }\n }\n\n // Sub-forum toggle button\n .subforum-toggle {\n position: absolute;\n left: 2px;\n top: 50%;\n transform: translateY(-50%);\n width: 20px;\n height: 20px;\n padding: 0;\n border: none;\n background: transparent;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2;\n opacity: 0.5;\n\n .dashicons {\n font-size: 14px;\n width: 14px;\n height: 14px;\n color: #ccccd3;\n }\n\n &:hover {\n opacity: 1;\n }\n\n &[aria-expanded=\"false\"] {\n transform: translateY(-50%) rotate(-90deg);\n }\n }\n\n // Sub-forum styling\n &.is-subforum {\n padding-left: 35px;\n margin-left: 0;\n border-left: 3px solid transparent; // Consistent with parent\n\n .featured-image {\n width: 28px;\n height: 28px;\n \n span.dashicons {\n font-size: 16px;\n width: 16px;\n height: 16px;\n }\n }\n\n .title {\n font-size: 14px;\n }\n \n &.depth-1 { padding-left: 35px; }\n &.depth-2 { padding-left: 55px; }\n &.depth-3 { padding-left: 75px; }\n }\n}\n\n// Sub-forum container\n.easydocs-subforum-container {\n list-style: none;\n margin: 0;\n padding: 0;\n overflow: hidden;\n transition: max-height 0.3s ease, opacity 0.2s ease;\n\n &.is-collapsed {\n max-height: 0 !important;\n opacity: 0;\n }\n}\n\n.easydocs-subforums {\n list-style: none;\n margin: 0;\n padding: 0;\n position: relative;\n}\n\n.link-wrapper {\n .link {\n display: inline-flex; // Ensure flex\n align-items: center;\n justify-content: center;\n width: 24px;\n height: 24px;\n border-radius: 4px;\n margin-left: 2px;\n transition: all 0.2s;\n text-decoration: none;\n \n a {\n text-decoration: none;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n \n .dashicons {\n color: #7e8299;\n font-size: 16px;\n width: 16px;\n height: 16px;\n }\n \n &:hover {\n background: rgba(255, 255, 255, 0.1);\n .dashicons {\n color: #fff;\n }\n }\n \n &.add-subforum:hover .dashicons {\n color: #4ade80;\n }\n &.forum-delete:hover .dashicons {\n color: #f1416c;\n }\n }\n}\n\n.easydocs-tab-content {\n flex: 1;\n width: auto;\n padding: 0 40px 40px 40px;\n @media (max-width: 1680px) {\n width: 70%;\n }\n @media (max-width: 1440px) {\n width: 70%;\n padding: 20px;\n }\n\n .button {\n padding: 6px 25px;\n }\n}\n\n.easydocs-filter-container {\n background: var(--clr-white);\n padding: var(--gutter-15) var(--gutter-30);\n border-radius: rem(6px);\n display: flex;\n align-items: center;\n justify-content: space-between;\n 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%);\n background-blend-mode: screen, color-dodge, color-dodge, normal;\n padding-left: 16px;\n @media (max-width: 1440px) {\n padding: 10px 20px;\n }\n}\n\n.single-item-filter {\n display: flex;\n align-items: center;\n gap: 5px;\n\n &.all-available {\n li {\n padding: 5px 15px;\n }\n }\n\n .easydocs-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 12px;\n gap: rem(5px);\n --btn-fs: var(--fs-14);\n transition: all .3s;\n border-radius: 15px;\n padding: 5px 25px;\n cursor: pointer;\n margin: 0;\n &:hover {\n background-color: rgba(#000, 0.1);\n }\n &.is-active {\n background-color: rgba(#000, 0.8);\n color: #f1f1f1;\n\n img {\n filter: brightness(0) invert(1);\n }\n }\n\n &.easydocs-btn-black-light {\n --btn-icon: #0D0E2B;\n\n svg {\n fill: #0D0E2B;\n }\n\n &.mixitup-control-active {\n --btn-bg: #0D0E2B;\n --btn-clr: var(--clr-white);\n --btn-icon: var(--clr-white);\n\n svg {\n fill: #ffffff;\n }\n }\n }\n\n &.easydocs-btn-green-light {\n --btn-icon: #2DB22D;\n\n svg {\n fill: #2DB22D;\n }\n\n &.mixitup-control-active {\n --btn-bg: #2DB22D;\n --btn-clr: var(--clr-white);\n --btn-icon: var(--clr-white);\n\n svg {\n fill: #ffffff;\n }\n }\n }\n\n &.easydocs-btn-blue-light {\n --btn-icon: #0275D8;\n\n svg {\n fill: #0275D8;\n }\n\n &.mixitup-control-active {\n --btn-bg: #0275D8;\n --btn-clr: var(--clr-white);\n --btn-icon: var(--clr-white);\n\n svg {\n fill: #fff;\n }\n }\n }\n\n &.easydocs-btn-orange-light {\n --btn-icon: #CC8033;\n\n svg {\n fill: #CC8033;\n }\n\n &.mixitup-control-active {\n --btn-bg: #CC8033;\n --btn-clr: var(--clr-white);\n --btn-icon: var(--clr-white);\n\n svg {\n fill: #fff;\n }\n }\n }\n\n &.easydocs-btn-gray-light {\n --btn-icon: #424242;\n\n &.mixitup-control-active {\n --btn-bg: #424242;\n --btn-clr: var(--clr-white);\n --btn-icon: var(--clr-white);\n }\n }\n @media screen and (max-width: 1440px) {\n padding: 5px 15px;\n }\n }\n}\n\n.single-grid-container {\n display: flex;\n align-items: center;\n border: 1px solid #EDEAE9;\n border-radius: rem(6px);\n --grid-icon: #9199A1;\n\n a {\n text-decoration: none;\n padding: 0.3rem 0.5rem 0.5rem;\n height: rem(30px);\n\n &:first-child {\n border-right: 1px solid #EDEAE9;\n }\n }\n\n .is-active {\n background: rgba(37, 39, 51, 0.05);\n --grid-icon: var(--clr-blue);\n }\n}\n","@import 'abstracts/index';\n@import 'admin/base/index';\n@import 'admin/utilities/index';\n@import 'admin/components/index';\n@import 'admin/layout/index';\n\n@include xl {\n .container {\n max-width: 1170px;\n }\n}\n\n#wpcontent {\n height: 100vh;\n}"],"names":[],"ignoreList":[],"sourceRoot":""} |
