{"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,OjBozDM,kBASc,yCiBxzDlB,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,CjBi7DA,uBAeF,CiBl8DE,UjBk8DF,yCiBz7DE,kBACE,CjBw7DJ,ciBt7DI,CjBu6DF,uBiBv6DE,2CAGF,qBACE,CjBk7DJ,ciBh7DI,CjBi6DF,uBiBj6DE,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,8BjBg+BE,+BACA,6CiB99BF,KACE,uDAGF,mCACE,cACA,sBACA,gBACA,CACA,kBACA,CAFA,YACA,CACA,OACA,iBACA,0BACA,qBACA,8EAEA,wBACE,cACA,4BACA,8GAEA,aACE,oFjB0FR,wBiBtFQ,6DjBsFR,oCiBjFM,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,CjBowDA,sBiB9vDA,CANA,cACA,CAHF,YACE,CAEA,oBACA,CACA,4BjBgbI,8BACA,CiBlbJ,6BACA,CjBkvDE,uBiB/uDF,wCAGgB,iBACd,CADc,cACd,iBACA,CAHF,YAGE,sDAKE,iBACA,CjB8jDA,SiBhkDc,oCACd,CjB+jDA,iBASc,CiB3kDhB,OjBkkDE,CiB9jDA,iBACA,CjBskDc,ciBtkDd,iEAEA,KACE,2DAIJ,wBAC4B,yDjB4G9B,sEiBzGM,UACA,CAFF,cACE,CACA,iBACA,4DAIJ,wBAC4B,yDjBkG9B,uEiB/FM,UACA,CAFF,cACE,CACA,eACA,0BjBxCN,8BiB8CE,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,YjB7YE,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}","/*----------------------------------------*/\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: darken(#4C4CF1, 5%);\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":""}