{"version":3,"file":"styles/admin/admin.css","mappings":"AA2NA,KAIE,kBADA,mBAFA,kBACA,UAEA,CC/NF,MAEE,uBACA,wBACA,qBACA,qBACA,wBACA,sBACA,uBAGA,oBACA,oBACA,oBACA,qBACA,sBACA,oBACA,sBACA,qBACA,iBACA,sBACA,mBACA,sBACA,qBAGA,gCAIA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aACA,aAGA,gBACA,kBACA,iBACA,kBACA,aACA,kBACA,iBACA,gBACA,kBACA,eACA,kBACA,gBACA,iBACA,aACA,kBACA,eACA,kBAGA,yBACA,gBACA,sBACA,uBACA,gBACA,eACA,cAGA,MACA,OACA,OACA,OACA,OACA,OACA,OACA,cACA,eACA,eAGA,MACA,OACA,OACA,OACA,OACA,OACA,OACA,cACA,eACA,eAGA,yBACA,qBACA,yBACA,mEACA,qEACA,qEACA,qEACA,qEACA,qEACA,qEAGA,WACA,aACA,aACA,aACA,aACA,kBAGA,qBACA,kBACA,0BACA,sBACA,kBACA,kBACA,mBACA,mBAGA,iBACA,wBACA,mBACA,mBACA,yBACA,iBACA,mBACA,mBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBACA,oBC5IF,kBACE,4BACA,oBAEE,sBADA,QACA,CAGF,oBACE,qBAIF,sCACE,oCACE,qBAEF,uEAGE,mCACA,sCAEA,+BADA,mCACA,EAIJ,gCACE,kBAIF,iCACE,+DAIF,gDAGE,cADA,cACA,CAIF,qGAIE,aAGF,sBFwCA,+BEvCc,CF4Cd,YACA,eAP2F,CAG3F,UEzC0C,CF0C1C,cAIA,UAHA,SAL+E,CAE/E,UAMA,CE1CA,sCACE,oCACE,sBAMN,qBAIE,iBADA,kBADA,kBADA,kBAGA,CFqnBE,kBACE,kBG3rBiC,CH8nBnC,yBACE,6BI/nB4C,CJ8nB9C,qBACE,mBI9nBwC,CCE9C,OACE,sBC8CM,CN8ZN,YACE,iCAGF,UACE,2BMnaI,CN8ZN,YACE,iCAGF,UACE,2BMlaI,CNmuDN,SACE,aOvxDa,CPsxDf,gBACE,oBOtxDa,CPqxDf,QACE,YOr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","sources":["webpack:///./assets/scss/abstracts/_mixins.scss","webpack:///./assets/scss/abstracts/_root.scss","webpack:///./assets/scss/admin/base/_reset.scss","webpack:///./assets/scss/admin/utilities/_alignment.scss","webpack:///./assets/scss/admin/utilities/_justify.scss","webpack:///./assets/scss/admin/utilities/_colors.scss","webpack:///./assets/scss/abstracts/_variables.scss","webpack:///./assets/scss/admin/utilities/_display.scss","webpack:///./assets/scss/admin/utilities/_flex.scss","webpack:///./assets/scss/admin/utilities/_fonts.scss","webpack:///./assets/scss/admin/utilities/_margin.scss","webpack:///./assets/scss/admin/components/_ai-popup.scss","webpack:///./assets/scss/admin/components/_badge.scss","webpack:///./assets/scss/admin/components/_btn.scss","webpack:///./assets/scss/admin/components/_progress.scss","webpack:///./assets/scss/admin/layout/_grid.scss","webpack:///./assets/scss/admin/admin.scss"],"sourcesContent":["@use \"sass:math\";\n\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: math.div($gutter, 2);\n    padding-left: math.div($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: math.div($gutter, 2);\n    padding-left: math.div($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: math.div(-$gutter, 2);\n      margin-left: math.div(-$gutter, 2);\n    }\n  }\n}\n\n@mixin column($size, $column: $columns) {\n  flex: 0 0 percentage(math.div($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(math.div($size, $column));\n}\n\n@mixin col-offset($size, $columns: $columns) {\n  $num: math.div($size, $columns);\n  margin-left: if($num==0, 0, percentage($num));\n}\n\n.col {\n  position: relative;\n  width: 100%;\n  padding-right: math.div($gutter-width, 2);\n  padding-left: math.div($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  $name-str: \"#{$name}\";\n\n  // Add your Prefix classes name\n  .text-#{$name-str} {\n    color: $primary !important;\n  }\n\n  .bg-#{$name-str} {\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: math.div($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  --clr-blue: #4C4CF1;\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}","@import \"../../abstracts/index\";\n\n.ezd_docs_builder {\n  padding: 40px 40px 40px 20px;\n  * {\n    margin: 0;\n    box-sizing: border-box;\n  }\n\n  a {\n    text-decoration: none;\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    *::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  /* A elements that don't have a class get default styles */\n  a:not([class]) {\n    text-decoration-skip-ink: auto;\n  }\n\n  /* Make images easier to work with */\n  img,\n  picture {\n    max-width: 100%;\n    display: block;\n  }\n\n  /* Inherit fonts for inputs and buttons */\n  input,\n  button,\n  textarea,\n  select {\n    font: inherit;\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}\n\n.ezd-container-fluid {\n  padding-right: 15px;\n  padding-left: 15px;\n  margin-right: auto;\n  margin-left: auto;\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);","$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(--clr-blue);\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$fb: #3b64d4;\n$tw: #58d7ff;\n$yt: #fd253b;\n$in: #fd6533;\n\n$fb: #3b5998;\n$twitter: #1da1f2;\n$linkedin: #0077b5;\n$pin: #bd081c;\n$youtube: #ff0000;\n$insta: #bb00f2;\n$snapchat: #fdac33;\n$snapchat: #fdac33;\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)\";","@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\n// Margin Top\n@include margin-class(mt-0, mt, 0);\n@include margin-class(mt-8, mt, 2);\n@include margin-class(mt-73, mt, 4.5625);\n\n// Margin Bottom\n@include margin-class(mb-8, mb, 2);\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\n.mt-40{\n    margin-top: 40px;\n}",".ezd-ai-popup-wrapper {\n  border-radius: 16px !important;\n  overflow: hidden;\n  font-family: 'Roboto', sans-serif;\n  \n  .swal2-html-container {\n    margin: 0 !important;\n    padding: 0 !important;\n    overflow: hidden;\n  }\n\n  .ezd-ai-popup-close {\n    z-index: 10;\n    color: #666;\n    transition: color 0.3s ease;\n    margin-top: 15px;\n    \n    &:hover {\n      color: #000;\n    }\n  }\n}\n\n.ezd-ai-popup-content {\n  text-align: center;\n  color: #333;\n}\n\n.ezd-ai-header {\n  padding: 40px 40px 20px;\n  background: linear-gradient(to bottom, #fff, #f9f9f9);\n  \n  h2 {\n    font-size: 28px;\n    font-weight: 700;\n    margin: 10px 0;\n    color: #1a1a1a;\n  }\n  \n  .ezd-ai-desc {\n    font-size: 16px;\n    color: #666;\n    margin: 0 0 25px;\n    line-height: 1.5;\n  }\n}\n\n.ezd-ai-video-wrapper {\n  margin: 0 40px 30px;\n  border-radius: 12px;\n  overflow: hidden;\n  box-shadow: 0 10px 30px rgba(0,0,0,0.1);\n  background: #000;\n  line-height: 0;\n  \n  video {\n    width: 100%;\n    height: auto;\n    display: block;\n  }\n}\n\n.ezd-ai-feature-grid {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: 20px;\n  padding: 0 40px 30px;\n  text-align: left;\n  \n  .ezd-ai-feature-item {\n    padding: 20px;\n    background: #fff;\n    border: 1px solid #eee;\n    border-radius: 10px;\n    transition: transform 0.3s ease, box-shadow 0.3s ease;\n    \n    &:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 5px 15px rgba(0,0,0,0.05);\n      border-color: #e0e0e0;\n    }\n    \n    .ezd-ai-feature-icon {\n      font-size: 24px;\n      margin-bottom: 10px;\n      display: block;\n    }\n    \n    h3 {\n      font-size: 16px;\n      font-weight: 600;\n      margin: 0 0 8px;\n      color: #333;\n    }\n    \n    p {\n      font-size: 14px;\n      color: #666;\n      margin: 0;\n      line-height: 1.5;\n    }\n  }\n}\n\n.ezd-ai-popup-footer {\n  padding: 20px 40px 40px;\n  display: flex;\n  justify-content: center;\n  gap: 15px;\n  background: #fff;\n  border-top: 1px solid #f0f0f0;\n  \n  .ezd-ai-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 24px;\n    border-radius: 50px;\n    font-size: 15px;\n    font-weight: 500;\n    text-decoration: none;\n    transition: all 0.3s ease;\n    \n    .dashicons {\n      font-size: 18px;\n      width: 18px;\n      height: 18px;\n      line-height: 1.2;\n    }\n    \n    &-primary {\n      background: linear-gradient(to right, #FFC800, #FF964B);\n      color: #7D4100;\n      border: none;\n      \n      &:hover {\n        background: linear-gradient(to right, #FF964B, #FFC800);\n        transform: translateY(-1px);\n        box-shadow: 0 4px 12px rgba(255, 200, 0, 0.3);\n      }\n    }\n    \n    &-secondary {\n      background: #f5f5f5;\n      color: #333;\n      \n      &:hover {\n        background: #e0e0e0;\n        color: #000;\n      }\n    }\n  }\n}\n",".ezd-badge {\n  background: rgba(175, 184, 193, 0.2);\n  height: 22px;\n  color: #5f626e;\n  font-size: 12px;\n  display: flex;\n  padding: 1px 7px;\n  transition: all 0.3s;\n  min-width: fit-content;\n  border-radius: 2em;\n  font-weight: 500;\n}\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}",".easydocs-btn {\n  --btn-fs: var(--fs-16);\n  --btn-ff: #{$font};\n  --btn-py: 0.5rem;\n  --btn-px: 1.875rem;\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(--clr-blue), $f-color: #4141E6);\n  }\n\n  &-outline-blue {\n    @include btn-outline(#4141E6);\n  }\n\n  &-ai-gold {\n    @include btn-color(linear-gradient(to right, #FFC800, #FF964B), $color: #7D4100, $border-color: transparent, $h-bg: linear-gradient(to right, #FF964B, #FFC800), $h-color: #7D4100, $h-border-color: transparent, $f-color: #FFC800);\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(--clr-blue), $border-color: transparent, $h-color: var(--clr-white), $h-border-color: transparent, $f-width: 0);\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}","/*----------------------------------------*/\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}","@import '../abstracts/index';\n@import 'base/index';\n@import 'utilities/index';\n@import 'components/ai-popup';\n@import 'components/badge';\n@import 'components/btn';\n@import 'components/progress';\n@import 'layout/grid';\n\n@include xl {\n  .container {\n    max-width: 1170px;\n  }\n}\n\n#fs_connect .fs-content {\n  h2 {\n    margin-bottom: 15px;\n  }\n\n  p {\n    font-size: 16px;\n  }\n}\n\n#fs_connect .fs-header .fs-plugin-icon, #fs_connect .fs-header .fs-plugin-icon img {\n  height: auto;\n}\n\n.ezd-no-feedback-found {\n  font-size: 15px;\n  margin-left: 0;\n  text-transform: capitalize;\n  font-weight: 400;\n  display: initial;\n}\n\n/** === EazyDocs Pro Upgrade Offer Notice === **/\n\n// Variables - Premium Dark Theme with Vibrant Accents\n$ezd-offer-primary: #1e1b4b;      // Deep indigo\n$ezd-offer-secondary: #312e81;    // Rich purple\n$ezd-offer-tertiary: #4338ca;     // Bright indigo\n$ezd-offer-accent: #fbbf24;       // Golden yellow\n$ezd-offer-accent-hover: #f59e0b;\n$ezd-offer-success: #34d399;      // Emerald\n$ezd-offer-text: #ffffff;\n$ezd-offer-text-muted: rgba(255, 255, 255, 0.75);\n\n// Keyframe Animations\n@keyframes ezd-shimmer {\n  0% { background-position: -200% 0; }\n  100% { background-position: 200% 0; }\n}\n\n@keyframes ezd-pulse {\n  0%, 100% { transform: scale(1); }\n  50% { transform: scale(1.05); }\n}\n\n@keyframes ezd-float {\n  0%, 100% { transform: translateY(0); }\n  50% { transform: translateY(-5px); }\n}\n\n@keyframes ezd-glow {\n  0%, 100% { opacity: 0.4; transform: scale(1); }\n  50% { opacity: 0.7; transform: scale(1.1); }\n}\n\n@keyframes ezd-rotate {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}\n\n@keyframes ezd-morph {\n  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }\n  50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }\n}\n\n// Main Notice Container\n.ezd-offer-notice {\n  position: relative;\n  background: linear-gradient(135deg, $ezd-offer-primary 0%, $ezd-offer-secondary 40%, $ezd-offer-tertiary 100%);\n  border-radius: 16px;\n  padding: 28px 36px;\n  margin: 20px 20px 20px 0;\n  color: $ezd-offer-text;\n  box-shadow: \n    0 4px 6px -1px rgba(30, 27, 75, 0.4),\n    0 10px 15px -3px rgba(30, 27, 75, 0.3),\n    0 20px 25px -5px rgba(67, 56, 202, 0.2),\n    inset 0 1px 0 rgba(255, 255, 255, 0.1);\n  overflow: hidden;\n  opacity: 0;\n  transform: translateY(-10px);\n  transition: opacity 0.4s ease, transform 0.4s ease;\n  border: 1px solid rgba(255, 255, 255, 0.08);\n\n  &.ezd-offer-visible {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n  // Geometric Background Pattern\n  .ezd-offer-bg-pattern {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-image: \n      // Subtle grid pattern\n      linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),\n      linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),\n      // Radial glows\n      radial-gradient(ellipse at 10% 90%, rgba(251, 191, 36, 0.15) 0%, transparent 50%),\n      radial-gradient(ellipse at 90% 10%, rgba(99, 102, 241, 0.2) 0%, transparent 40%),\n      radial-gradient(ellipse at 50% 50%, rgba(67, 56, 202, 0.1) 0%, transparent 60%);\n    background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%, 100% 100%;\n    pointer-events: none;\n  }\n\n  // Animated Glow Orbs\n  .ezd-offer-glow {\n    position: absolute;\n    pointer-events: none;\n    \n    // Main golden glow (top right)\n    &::before {\n      content: '';\n      position: absolute;\n      top: -80px;\n      right: -40px;\n      width: 250px;\n      height: 250px;\n      background: radial-gradient(circle, rgba(251, 191, 36, 0.35) 0%, rgba(251, 191, 36, 0.1) 40%, transparent 70%);\n      animation: ezd-glow 4s ease-in-out infinite;\n      border-radius: 50%;\n    }\n    \n    // Secondary purple orb (bottom left)\n    &::after {\n      content: '';\n      position: absolute;\n      bottom: -100px;\n      left: -60px;\n      width: 200px;\n      height: 200px;\n      background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, rgba(99, 102, 241, 0.1) 50%, transparent 70%);\n      animation: ezd-glow 5s ease-in-out infinite reverse;\n      animation-delay: 1s;\n      border-radius: 50%;\n    }\n  }\n\n  // Action Buttons (Dismiss & Snooze)\n  .ezd-offer-actions {\n    position: absolute;\n    top: 16px;\n    right: 16px;\n    display: flex;\n    gap: 8px;\n    z-index: 10;\n  }\n\n  .ezd-offer-snooze,\n  .ezd-offer-dismiss {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    background: rgba(255, 255, 255, 0.15);\n    border: 1px solid rgba(255, 255, 255, 0.2);\n    border-radius: 6px;\n    padding: 6px 10px;\n    color: $ezd-offer-text;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    font-size: 12px;\n\n    .dashicons {\n      font-size: 16px;\n      width: 16px;\n      height: 16px;\n    }\n\n    &:hover {\n      background: rgba(255, 255, 255, 0.25);\n      border-color: rgba(255, 255, 255, 0.4);\n    }\n  }\n\n  .ezd-offer-dismiss {\n    padding: 6px 8px;\n  }\n\n  // Container Layout\n  .ezd-offer-container {\n    position: relative;\n    display: grid;\n    grid-template-columns: 1fr 1.5fr auto;\n    gap: 32px;\n    align-items: center;\n    z-index: 5;\n  }\n\n  // Header Section\n  .ezd-offer-header {\n    .ezd-offer-badge {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      background: rgba(245, 158, 11, 0.2);\n      border: 1px solid rgba(245, 158, 11, 0.4);\n      border-radius: 20px;\n      padding: 4px 12px;\n      font-size: 12px;\n      font-weight: 600;\n      margin-bottom: 12px;\n      animation: ezd-pulse 2s ease-in-out infinite;\n\n      .ezd-offer-badge-icon {\n        font-size: 14px;\n      }\n    }\n\n    .ezd-offer-headline {\n      font-size: 20px;\n      font-weight: 700;\n      margin: 0 0 8px 0;\n      line-height: 1.3;\n      color: $ezd-offer-text;\n    }\n\n    .ezd-offer-subheadline {\n      font-size: 14px;\n      color: $ezd-offer-text-muted;\n      margin: 0;\n      line-height: 1.5;\n    }\n  }\n\n  // Features Grid\n  .ezd-offer-features {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n  }\n\n  .ezd-offer-feature {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    background: rgba(255, 255, 255, 0.1);\n    border-radius: 10px;\n    padding: 12px 14px;\n    transition: all 0.2s ease;\n\n    &:hover {\n      background: rgba(255, 255, 255, 0.15);\n      transform: translateY(-2px);\n    }\n\n    .dashicons {\n      font-size: 20px;\n      width: 20px;\n      height: 20px;\n      color: $ezd-offer-accent;\n      flex-shrink: 0;\n      margin-top: 2px;\n    }\n\n    .ezd-offer-feature-text {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n\n      strong {\n        font-size: 13px;\n        font-weight: 600;\n        color: $ezd-offer-text;\n      }\n\n      span {\n        font-size: 11px;\n        color: $ezd-offer-text-muted;\n      }\n    }\n  }\n\n  // CTA Section\n  .ezd-offer-cta-section {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 12px;\n    padding-left: 24px;\n    border-left: 1px solid rgba(255, 255, 255, 0.15);\n  }\n\n  // Discount Badge\n  .ezd-offer-discount {\n    display: flex;\n    align-items: baseline;\n    gap: 4px;\n    animation: ezd-float 3s ease-in-out infinite;\n\n    .ezd-offer-discount-value {\n      font-size: 42px;\n      font-weight: 800;\n      color: $ezd-offer-accent;\n      text-shadow: 0 2px 10px rgba(245, 158, 11, 0.4);\n      line-height: 1;\n    }\n\n    .ezd-offer-discount-label {\n      font-size: 18px;\n      font-weight: 700;\n      color: $ezd-offer-accent;\n    }\n  }\n\n  // Coupon Box\n  .ezd-offer-coupon {\n    text-align: center;\n\n    .ezd-offer-coupon-label {\n      display: block;\n      font-size: 11px;\n      color: $ezd-offer-text-muted;\n      margin-bottom: 6px;\n    }\n\n    .ezd-offer-coupon-box {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      background: rgba(255, 255, 255, 0.15);\n      border: 1px dashed rgba(255, 255, 255, 0.4);\n      border-radius: 8px;\n      padding: 6px 10px;\n      position: relative;\n    }\n\n    .ezd-offer-coupon-code {\n      font-family: 'SF Mono', 'Consolas', monospace;\n      font-size: 14px;\n      font-weight: 700;\n      color: $ezd-offer-text;\n      letter-spacing: 1px;\n      background: transparent;\n      padding: 0;\n    }\n\n    .ezd-offer-copy-btn {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: rgba(255, 255, 255, 0.2);\n      border: none;\n      border-radius: 4px;\n      padding: 4px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n\n      .dashicons {\n        font-size: 14px;\n        width: 14px;\n        height: 14px;\n        color: $ezd-offer-text;\n      }\n\n      &:hover {\n        background: rgba(255, 255, 255, 0.3);\n      }\n\n      &.copied {\n        background: $ezd-offer-success;\n      }\n    }\n\n    .ezd-offer-copy-success {\n      position: absolute;\n      top: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      background: $ezd-offer-success;\n      color: #fff;\n      font-size: 11px;\n      font-weight: 600;\n      padding: 4px 10px;\n      border-radius: 4px;\n      margin-top: 6px;\n      opacity: 0;\n      visibility: hidden;\n      transition: all 0.2s ease;\n      white-space: nowrap;\n\n      .dashicons {\n        font-size: 12px;\n        width: 12px;\n        height: 12px;\n      }\n\n      &.show {\n        opacity: 1;\n        visibility: visible;\n      }\n    }\n  }\n\n  // CTA Button\n  .ezd-offer-cta-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    background: linear-gradient(135deg, $ezd-offer-accent 0%, darken($ezd-offer-accent, 10%) 100%);\n    color: #1f2937;\n    font-size: 14px;\n    font-weight: 700;\n    text-decoration: none;\n    padding: 12px 24px;\n    border-radius: 8px;\n    box-shadow: \n      0 4px 6px -1px rgba(245, 158, 11, 0.3),\n      0 2px 4px -1px rgba(245, 158, 11, 0.2);\n    transition: all 0.3s ease;\n    background-size: 200% 200%;\n    animation: ezd-shimmer 3s ease-in-out infinite;\n\n    .dashicons {\n      font-size: 16px;\n      width: 16px;\n      height: 16px;\n      transition: transform 0.2s ease;\n    }\n\n    &:hover {\n      transform: translateY(-2px);\n      box-shadow: \n        0 6px 10px -1px rgba(245, 158, 11, 0.4),\n        0 4px 6px -1px rgba(245, 158, 11, 0.3);\n      color: #1f2937;\n\n      .dashicons {\n        transform: translateX(3px);\n      }\n    }\n\n    &:active {\n      transform: translateY(0);\n    }\n  }\n\n  // Guarantee Text\n  .ezd-offer-guarantee {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 11px;\n    color: $ezd-offer-text-muted;\n    margin: 0;\n\n    .dashicons {\n      font-size: 14px;\n      width: 14px;\n      height: 14px;\n      color: $ezd-offer-success;\n    }\n  }\n}\n\n// Responsive Design\n@media (max-width: 1200px) {\n  .ezd-offer-notice {\n    .ezd-offer-container {\n      grid-template-columns: 1fr 1fr;\n      gap: 24px;\n    }\n\n    .ezd-offer-cta-section {\n      grid-column: 1 / -1;\n      flex-direction: row;\n      justify-content: center;\n      border-left: none;\n      border-top: 1px solid rgba(255, 255, 255, 0.15);\n      padding-left: 0;\n      padding-top: 20px;\n    }\n  }\n}\n\n@media (max-width: 782px) {\n  .ezd-offer-notice {\n    padding: 20px;\n    margin: 15px 10px 15px 0;\n\n    .ezd-offer-container {\n      grid-template-columns: 1fr;\n      text-align: center;\n    }\n\n    .ezd-offer-header {\n      .ezd-offer-badge {\n        justify-content: center;\n      }\n    }\n\n    .ezd-offer-features {\n      grid-template-columns: 1fr;\n    }\n\n    .ezd-offer-cta-section {\n      flex-direction: column;\n      padding-top: 16px;\n    }\n\n    .ezd-offer-snooze-text {\n      display: none;\n    }\n  }\n}\n\n.assistant-embed-code-box{\n  textarea{\n    white-space: pre;\n    overflow: auto;\n    word-wrap: normal;\n    resize: horizontal; /* Optional: allow user to resize horizontally */\n    padding:20px 15px;\n    font-family: Consolas, monospace;\n    width:100%;\n    height:250px;\n    font-size:14px;\n    background:#272822;\n    color:#f8f8f2;\n    border:none;\n    border-radius:8px;\n    line-height:1.5;\n    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);\n  }\n  .admin-copy-embed-code{\n    position:absolute;\n    top:10px;\n    right:10px;\n    border-radius: 0.5em;\n    padding: 0px 7px;\n  }\n}"],"names":[],"sourceRoot":""}