@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/custom";

$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;

// classes custom setting
$spaceamounts: (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 65, 70, 75, 80, 85, 90, 95, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358,359,360,361,362,363,364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404,405,406,407,408,409,410,411,412,413,414,415,416,417,418,419,420,421,422,423,424,425,426,427,428,429,430,431,432,433,434,435,436,437,438,439,440,441,442,443,444,445,446,447,448,449,450,451,452,453,454,455,456,457,458,459,460,461,462,463,464,465,466,467,468,469,470,471,472,473,474,475,476,477,478,479,480,481,482,483,484,485,486,487,488,489,490,491,492,493,494,495,496,497,498,499,500);

@mixin generate-height() {
  @each $space in $spaceamounts {
    .pb_height-#{$space} {
      height: #{$space}px!important;
    }
  }
}
@include generate-height();

@mixin generate-margin() {
  @each $space in $spaceamounts {
    .pb_m-#{$space} {
      margin: #{$space}px!important;
    }
  }
}
@include generate-margin();

@media screen and (max-width: $xl) {
  @mixin generate-margin() {
    @each $space in $spaceamounts {
      .pb_xl_m-#{$space} {
        margin: #{$space}px!important;
      }
    }
  }
  @include generate-margin();
}
@media screen and (max-width: $lg) {
  @mixin generate-margin() {
    @each $space in $spaceamounts {
      .pb_lg_m-#{$space} {
        margin: #{$space}px!important;
      }
    }
  }
  @include generate-margin();
}
@media screen and (max-width: $md) {
  @mixin generate-margin() {
    @each $space in $spaceamounts {
      .pb_md_m-#{$space} {
        margin: #{$space}px!important;
      }
    }
  }
  @include generate-margin();
}
@media screen and (max-width: $sm) {
  @mixin generate-margin() {
    @each $space in $spaceamounts {
      .pb_sm_m-#{$space} {
        margin: #{$space}px!important;
      }
    }
  }
  @include generate-margin();
}


@mixin generate-margin-x() {
  @each $space in $spaceamounts {
    .pb_mx-#{$space} {
      margin-left: #{$space}px!important;
      margin-right: #{$space}px!important;
    }
  }
}
@include generate-margin-x();

@media screen and (max-width: $xl) {
  @mixin generate-margin-x() {
    @each $space in $spaceamounts {
      .pb_xl_mx-#{$space} {
        margin-left: #{$space}px!important;
        margin-right: #{$space}px!important;
      }
    }
  }
  @include generate-margin-x();
}
@media screen and (max-width: $lg) {
  @mixin generate-margin-x() {
    @each $space in $spaceamounts {
      .pb_lg_mx-#{$space} {
        margin-left: #{$space}px!important;
        margin-right: #{$space}px!important;
      }
    }
  }
  @include generate-margin-x();
}
@media screen and (max-width: $md) {
  @mixin generate-margin-x() {
    @each $space in $spaceamounts {
      .pb_md_mx-#{$space} {
        margin-left: #{$space}px!important;
        margin-right: #{$space}px!important;
      }
    }
  }
  @include generate-margin-x();
}
@media screen and (max-width: $sm) {
  @mixin generate-margin-x() {
    @each $space in $spaceamounts {
      .pb_sm_mx-#{$space} {
        margin-left: #{$space}px!important;
        margin-right: #{$space}px!important;
      }
    }
  }
  @include generate-margin-x();
}



@mixin generate-margin-y() {
  @each $space in $spaceamounts {
    .pb_my-#{$space} {
      margin-top: #{$space}px!important;
      margin-bottom: #{$space}px!important;
    }
  }
}
@include generate-margin-y()
@media screen and (max-width: $xl) {
  @mixin generate-margin-y() {
    @each $space in $spaceamounts {
      .pb_xl_my-#{$space} {
        margin-top: #{$space}px!important;
        margin-bottom: #{$space}px!important;
      }
    }
  }
  @include generate-margin-y()
}
@media screen and (max-width: $lg) {
  @mixin generate-margin-y() {
    @each $space in $spaceamounts {
      .pb_lg_my-#{$space} {
        margin-top: #{$space}px!important;
        margin-bottom: #{$space}px!important;
      }
    }
  }
  @include generate-margin-y()
}
@media screen and (max-width: $md) {
  @mixin generate-margin-y() {
    @each $space in $spaceamounts {
      .pb_md_my-#{$space} {
        margin-top: #{$space}px!important;
        margin-bottom: #{$space}px!important;
      }
    }
  }
  @include generate-margin-y()
}
@media screen and (max-width: $sm) {
  @mixin generate-margin-y() {
    @each $space in $spaceamounts {
      .pb_sm_my-#{$space} {
        margin-top: #{$space}px!important;
        margin-bottom: #{$space}px!important;
      }
    }
  }
  @include generate-margin-y()
}


@mixin generate-margin-bottom() {
  @each $space in $spaceamounts {
    .pb_mb-#{$space} {
      margin-bottom: #{$space}px!important;
    }
  }
}
@include generate-margin-bottom();
@media screen and (max-width: $xl) {
  @mixin generate-margin-bottom() {
    @each $space in $spaceamounts {
      .pb_xl_mb-#{$space} {
        margin-bottom: #{$space}px!important;
      }
    }
  }
  @include generate-margin-bottom();
}
@media screen and (max-width: $lg) {
  @mixin generate-margin-bottom() {
    @each $space in $spaceamounts {
      .pb_lg_mb-#{$space} {
        margin-bottom: #{$space}px!important;
      }
    }
  }
  @include generate-margin-bottom();
}
@media screen and (max-width: $md) {
  @mixin generate-margin-bottom() {
    @each $space in $spaceamounts {
      .pb_md_mb-#{$space} {
        margin-bottom: #{$space}px!important;
      }
    }
  }
  @include generate-margin-bottom();
}
@media screen and (max-width: $sm) {
  @mixin generate-margin-bottom() {
    @each $space in $spaceamounts {
      .pb_sm_mb-#{$space} {
        margin-bottom: #{$space}px!important;
      }
    }
  }
  @include generate-margin-bottom();
}

@mixin generate-margin-right() {
  @each $space in $spaceamounts {
    .pb_mr-#{$space} {
      margin-right: #{$space}px!important;
    }
  }
}
@include generate-margin-right();
@media screen and (max-width: $xl) {
  @mixin generate-margin-right() {
    @each $space in $spaceamounts {
      .pb_xl_mr-#{$space} {
        margin-right: #{$space}px!important;
      }
    }
  }
  @include generate-margin-right();
}
@media screen and (max-width: $lg) {
  @mixin generate-margin-right() {
    @each $space in $spaceamounts {
      .pb_lg_mr-#{$space} {
        margin-right: #{$space}px!important;
      }
    }
  }
  @include generate-margin-right();
}
@media screen and (max-width: $md) {
  @mixin generate-margin-right() {
    @each $space in $spaceamounts {
      .pb_md_mr-#{$space} {
        margin-right: #{$space}px!important;
      }
    }
  }
  @include generate-margin-right();
}
@media screen and (max-width: $sm) {
  @mixin generate-margin-right() {
    @each $space in $spaceamounts {
      .pb_sm_mr-#{$space} {
        margin-right: #{$space}px!important;
      }
    }
  }
  @include generate-margin-right();
}



@mixin generate-margin-top() {
  @each $space in $spaceamounts {
    .pb_mt-#{$space} {
      margin-top: #{$space}px!important;
    }
  }
}
@include generate-margin-top();
@media screen and (max-width: $xl) {
  @mixin generate-margin-top() {
    @each $space in $spaceamounts {
      .pb_xl_mt-#{$space} {
        margin-top: #{$space}px!important;
      }
    }
  }
  @include generate-margin-top();
}
@media screen and (max-width: $lg) {
  @mixin generate-margin-top() {
    @each $space in $spaceamounts {
      .pb_lg_mt-#{$space} {
        margin-top: #{$space}px!important;
      }
    }
  }
  @include generate-margin-top();
}
@media screen and (max-width: $md) {
  @mixin generate-margin-top() {
    @each $space in $spaceamounts {
      .pb_md_mt-#{$space} {
        margin-top: #{$space}px!important;
      }
    }
  }
  @include generate-margin-top();
}
@media screen and (max-width: $sm) {
  @mixin generate-margin-top() {
    @each $space in $spaceamounts {
      .pb_sm_mt-#{$space} {
        margin-top: #{$space}px!important;
      }
    }
  }
  @include generate-margin-top();
}


@mixin generate-margin-left() {
  @each $space in $spaceamounts {
    .pb_ml-#{$space} {
      margin-left: #{$space}px!important;
    }
  }
}
@include generate-margin-left();
@media screen and (max-width: $xl) {
  @mixin generate-margin-left() {
    @each $space in $spaceamounts {
      .pb_xl_ml-#{$space} {
        margin-left: #{$space}px!important;
      }
    }
  }
  @include generate-margin-left();
}
@media screen and (max-width: $lg) {
  @mixin generate-margin-left() {
    @each $space in $spaceamounts {
      .pb_lg_ml-#{$space} {
        margin-left: #{$space}px!important;
      }
    }
  }
  @include generate-margin-left();
}
@media screen and (max-width: $md) {
  @mixin generate-margin-left() {
    @each $space in $spaceamounts {
      .pb_md_ml-#{$space} {
        margin-left: #{$space}px!important;
      }
    }
  }
  @include generate-margin-left();
}
@media screen and (max-width: $sm) {
  @mixin generate-margin-left() {
    @each $space in $spaceamounts {
      .pb_sm_ml-#{$space} {
        margin-left: #{$space}px!important;
      }
    }
  }
  @include generate-margin-left();
}


@mixin generate-padding() {
  @each $space in $spaceamounts {
    .pb_p-#{$space} {
      padding: #{$space}px!important;
    }
  }
}
@include generate-padding();
@media screen and (max-width: $xl) {
  @mixin generate-padding() {
    @each $space in $spaceamounts {
      .pb_xl_p-#{$space} {
        padding: #{$space}px!important;
      }
    }
  }
  @include generate-padding();
}
@media screen and (max-width: $lg) {
  @mixin generate-padding() {
    @each $space in $spaceamounts {
      .pb_lg_p-#{$space} {
        padding: #{$space}px!important;
      }
    }
  }
  @include generate-padding();
}
@media screen and (max-width: $md) {
  @mixin generate-padding() {
    @each $space in $spaceamounts {
      .pb_md_p-#{$space} {
        padding: #{$space}px!important;
      }
    }
  }
  @include generate-padding();
}
@media screen and (max-width: $sm) {
  @mixin generate-padding() {
    @each $space in $spaceamounts {
      .pb_sm_p-#{$space} {
        padding: #{$space}px!important;
      }
    }
  }
  @include generate-padding();
}


@mixin generate-padding-x() {
  @each $space in $spaceamounts {
    .pb_px-#{$space} {
      padding-left: #{$space}px!important;
      padding-right: #{$space}px!important;
    }
  }
}
@include generate-padding-x();
@media screen and (max-width: $xl) {
  @mixin generate-padding-x() {
    @each $space in $spaceamounts {
      .pb_xl_px-#{$space} {
        padding-left: #{$space}px!important;
        padding-right: #{$space}px!important;
      }
    }
  }
  @include generate-padding-x();
}
@media screen and (max-width: $lg) {
  @mixin generate-padding-x() {
    @each $space in $spaceamounts {
      .pb_lg_px-#{$space} {
        padding-left: #{$space}px!important;
        padding-right: #{$space}px!important;
      }
    }
  }
  @include generate-padding-x();
}
@media screen and (max-width: $md) {
  @mixin generate-padding-x() {
    @each $space in $spaceamounts {
      .pb_md_px-#{$space} {
        padding-left: #{$space}px!important;
        padding-right: #{$space}px!important;
      }
    }
  }
  @include generate-padding-x();
}
@media screen and (max-width: $sm) {
  @mixin generate-padding-x() {
    @each $space in $spaceamounts {
      .pb_sm_px-#{$space} {
        padding-left: #{$space}px!important;
        padding-right: #{$space}px!important;
      }
    }
  }
  @include generate-padding-x();
}


@mixin generate-padding-y() {
  @each $space in $spaceamounts {
    .pb_py-#{$space} {
      padding-top: #{$space}px!important;
      padding-bottom: #{$space}px!important;
    }
  }
}
@include generate-padding-y();
@media screen and (max-width: $xl) {
  @mixin generate-padding-y() {
    @each $space in $spaceamounts {
      .pb_xl_py-#{$space} {
        padding-top: #{$space}px!important;
        padding-bottom: #{$space}px!important;
      }
    }
  }
  @include generate-padding-y();
}
@media screen and (max-width: $lg) {
  @mixin generate-padding-y() {
    @each $space in $spaceamounts {
      .pb_lg_py-#{$space} {
        padding-top: #{$space}px!important;
        padding-bottom: #{$space}px!important;
      }
    }
  }
  @include generate-padding-y();
}
@media screen and (max-width: $md) {
  @mixin generate-padding-y() {
    @each $space in $spaceamounts {
      .pb_md_py-#{$space} {
        padding-top: #{$space}px!important;
        padding-bottom: #{$space}px!important;
      }
    }
  }
  @include generate-padding-y();
}
@media screen and (max-width: $sm) {
  @mixin generate-padding-y() {
    @each $space in $spaceamounts {
      .pb_sm_py-#{$space} {
        padding-top: #{$space}px!important;
        padding-bottom: #{$space}px!important;
      }
    }
  }
  @include generate-padding-y();
}

@mixin generate-padding-top() {
  @each $space in $spaceamounts {
    .pb_pt-#{$space} {
      padding-top: #{$space}px!important;
    }
  }
}
@include generate-padding-top();

@media screen and (max-width: $xl) {
  @mixin generate-padding-top() {
    @each $space in $spaceamounts {
      .pb_xl_pt-#{$space} {
        padding-top: #{$space}px!important;
      }
    }
  }
  @include generate-padding-top();
}
@media screen and (max-width: $lg) {
  @mixin generate-padding-top() {
    @each $space in $spaceamounts {
      .pb_lg_pt-#{$space} {
        padding-top: #{$space}px!important;
      }
    }
  }
  @include generate-padding-top();
}
@media screen and (max-width: $md) {
  @mixin generate-padding-top() {
    @each $space in $spaceamounts {
      .pb_md_pt-#{$space} {
        padding-top: #{$space}px!important;
      }
    }
  }
  @include generate-padding-top();
}
@media screen and (max-width: $sm) {
  @mixin generate-padding-top() {
    @each $space in $spaceamounts {
      .pb_sm_pt-#{$space} {
        padding-top: #{$space}px!important;
      }
    }
  }
  @include generate-padding-top();
}


@mixin generate-padding-bottom() {
  @each $space in $spaceamounts {
    .pb_pb-#{$space} {
      padding-bottom: #{$space}px!important;
    }
  }
}
@include generate-padding-bottom();
@media screen and (max-width: $xl) {
  @mixin generate-padding-bottom() {
    @each $space in $spaceamounts {
      .pb_xl_pb-#{$space} {
        padding-bottom: #{$space}px!important;
      }
    }
  }
  @include generate-padding-bottom();
}
@media screen and (max-width: $lg) {
  @mixin generate-padding-bottom() {
    @each $space in $spaceamounts {
      .pb_lg_pb-#{$space} {
        padding-bottom: #{$space}px!important;
      }
    }
  }
  @include generate-padding-bottom();
}
@media screen and (max-width: $md) {
  @mixin generate-padding-bottom() {
    @each $space in $spaceamounts {
      .pb_md_pb-#{$space} {
        padding-bottom: #{$space}px!important;
      }
    }
  }
  @include generate-padding-bottom();
}
@media screen and (max-width: $sm) {
  @mixin generate-padding-bottom() {
    @each $space in $spaceamounts {
      .pb_sm_pb-#{$space} {
        padding-bottom: #{$space}px!important;
      }
    }
  }
  @include generate-padding-bottom();
}

@mixin generate-padding-left() {
  @each $space in $spaceamounts {
    .pb_pl-#{$space} {
      padding-left: #{$space}px!important;
    }
  }
}
@include generate-padding-left();
@media screen and (max-width: $xl) {
  @mixin generate-padding-left() {
    @each $space in $spaceamounts {
      .pb_xl_pl-#{$space} {
        padding-left: #{$space}px!important;
      }
    }
  }
  @include generate-padding-left();
}
@media screen and (max-width: $lg) {
  @mixin generate-padding-left() {
    @each $space in $spaceamounts {
      .pb_lg_pl-#{$space} {
        padding-left: #{$space}px!important;
      }
    }
  }
  @include generate-padding-left();
}
@media screen and (max-width: $md) {
  @mixin generate-padding-left() {
    @each $space in $spaceamounts {
      .pb_md_pl-#{$space} {
        padding-left: #{$space}px!important;
      }
    }
  }
  @include generate-padding-left();
}
@media screen and (max-width: $sm) {
  @mixin generate-padding-left() {
    @each $space in $spaceamounts {
      .pb_sm_pl-#{$space} {
        padding-left: #{$space}px!important;
      }
    }
  }
  @include generate-padding-left();
}

@mixin generate-padding-right() {
  @each $space in $spaceamounts {
    .pb_pr-#{$space} {
      padding-right: #{$space}px!important;
    }
  }
}
@include generate-padding-right();
@media screen and (max-width: $xl) {
  @mixin generate-padding-right() {
    @each $space in $spaceamounts {
      .pb_xl_pr-#{$space} {
        padding-right: #{$space}px!important;
      }
    }
  }
  @include generate-padding-right();
}
@media screen and (max-width: $lg) {
  @mixin generate-padding-right() {
    @each $space in $spaceamounts {
      .pb_lg_pr-#{$space} {
        padding-right: #{$space}px!important;
      }
    }
  }
  @include generate-padding-right();
}
@media screen and (max-width: $md) {
  @mixin generate-padding-right() {
    @each $space in $spaceamounts {
      .pb_md_pr-#{$space} {
        padding-right: #{$space}px!important;
      }
    }
  }
  @include generate-padding-right();
}
@media screen and (max-width: $sm) {
  @mixin generate-padding-right() {
    @each $space in $spaceamounts {
      .pb_sm_pr-#{$space} {
        padding-right: #{$space}px!important;
      }
    }
  }
  @include generate-padding-right();
}

@mixin generate-font-sizes() {
  @each $font in $spaceamounts {
    .pb_font-#{$font} {
      font-size: #{$font}px!important;
    }
  }
}
@include generate-font-sizes();
@media screen and (max-width: $xl) {
  @mixin generate-font-sizes() {
    @each $font in $spaceamounts {
      .pb_xl_font-#{$font} {
        font-size: #{$font}px!important;
      }
    }
  }
  @include generate-font-sizes();
}
@media screen and (max-width: $lg) {
  @mixin generate-font-sizes() {
    @each $font in $spaceamounts {
      .pb_lg_font-#{$font} {
        font-size: #{$font}px!important;
      }
    }
  }
  @include generate-font-sizes();
}
@media screen and (max-width: $md) {
  @mixin generate-font-sizes() {
    @each $font in $spaceamounts {
      .pb_md_font-#{$font} {
        font-size: #{$font}px!important;
      }
    }
  }
  @include generate-font-sizes();
}
@media screen and (max-width: $sm) {
  @mixin generate-font-sizes() {
    @each $font in $spaceamounts {
      .pb_sm_font-#{$font} {
        font-size: #{$font}px!important;
      }
    }
  }
  @include generate-font-sizes();
}


// @include generate-margin();
// @include generate-margin-x();
// @include generate-margin-y();
// @include generate-margin-bottom();
// @include generate-margin-right();
// @include generate-margin-top();
// @include generate-margin-left();

// @include generate-padding();
// @include generate-padding-x();
// @include generate-padding-y();
// @include generate-padding-bottom();
// @include generate-padding-top();
// @include generate-padding-right();
// @include generate-padding-left();

// @include generate-font-sizes();

/* font weight */
.pb_font-light {
  font-weight: 300!important;
}
.pb_font-light-italic {
  font-weight: 300!important;
  font-style: italic!important;
} 
.pb_font-regular {
  font-weight: 400!important;
}
.pb_font-regular-italic {
  font-weight: 400!important;
  font-style: italic!important;
} 
.pb_font-semibold {
  font-weight: 600!important;
}
.pb_font-semibold-italic {
  font-weight: 600!important;
  font-style: italic!important;
} 
.pb_font-bold {
  font-weight: 700!important;
}
.pb_font-bold-italic {
  font-weight: 700!important;
  font-style: italic!important;
}
.pb_font-extrabold {
  font-weight: 800!important;
  font-weight: 900!important;
}
.pb_font-extrabold-italic {
  font-weight: 800!important;
  font-weight: 900!important;
  font-style: italic!important;
} 

$colors_labels: ("primary", "secondary", "success", "info", "warning", "danger", "light", "dark");
// theme colors
@mixin generate-colors() {
  @each $color in $colors_labels {
    .pb_color-#{$color} {
      color: theme-color($color)!important;
    }
  }
}
// theme bg color
@mixin generate-bgcolors() {
  @each $color in $colors_labels {
    .pb_bgcolor-#{$color} {
      background-color: theme-color($color)!important;
    }
  }
}
@include generate-colors();
@include generate-bgcolors();


$border_w: (0, 1, 2, 3, 4, 5, 6, 7);
// border width
@mixin generate-border-width() {
  @each $border in $border_w {
    .pb_border-#{$border} {
      border-width: #{$border}px!important;
      border-style: solid;
    }
  }
}
@include generate-border-width();


$radius: (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50);
// border radius
@mixin generate-border-radius() {
  @each $r in $radius {
    .pb_rounded-#{$r} {
      border-radius: #{$r}px!important;
    }
  }
}
@include generate-border-radius();

$opacity: (.0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1);
$i: 0;
// color light opacity
@mixin generate-color-light-opacity() {
  @each $o in $opacity {
    
    @if $o == 1 {
      .pb_color-light-opacity {
        color: rgba(255,255,255, $o)!important;
      }
    } @else {
      .pb_color-light-opacity-#{$i} {
        color: rgba(255,255,255, $o)!important;
      }
    }
    $i: $i + 1;
  }
}
@include generate-color-light-opacity();

$opacity: (.0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1);
$i: 0;
// color dark opacity
@mixin generate-color-dark-opacity() {
  @each $o in $opacity {
    
    @if $o == 1 {
      .pb_color-dark-opacity {
        color: rgba(0,0,0, $o)!important;
      }  
    } @else {
      .pb_color-dark-opacity-#{$i} {
        color: rgba(0,0,0, $o)!important;
      }
    }
    
    $i: $i + 1;
  }
}
@include generate-color-dark-opacity();

$spacing: (.0, .1, .2, .3, .4, .5, .6, .7, .8, .9, 1);
$i: 0;
// color dark opacity
@mixin generate-letter-spacing() {
  @each $s in $spacing {
    
    @if $s == 1 {
      .pb_letter-spacing {
        letter-spacing: #{$s}em!important;
      }  
    } @else {
      .pb_letter-spacing-#{$i} {
        letter-spacing: #{$s}em!important;
      }
    }
    
    $i: $i + 1;
  }
}
@include generate-letter-spacing();

.pb_shadow-none {
  box-shadow: none!important;
}
.text-serif {
  font-family: $font-family-serif;
}
.text-sans-serif {
  font-family: $font-family-sans-serif;
}

.relative {
  position: relative;
}
.absolute {
  position: absolute;
}

.zindex-1 {
  z-index: 1;
}
.zindex-2 {
  z-index: 2;
}
.zindex-3 {
  z-index: 3;
}
.zindex-4 {
  z-index: 4;
}

// gray
.pb_text-gray-200 {
  color: $gray-200!important;
}
.pb_text-gray-300 {
  color: $gray-300!important;
}
.pb_text-gray-400 {
  color: $gray-400!important;
}
.pb_text-gray-500 {
  color: $gray-500!important;
}
.pb_text-gray-600 {
  color: $gray-600!important;
}
.pb_text-gray-700 {
  color: $gray-700!important;
}
.pb_text-gray-800 {
  color: $gray-800!important;
}
.pb_text-gray-900 {
  color: $gray-900!important;
}
// colored
.pb_text-black {
  color: $black!important;
}
.pb_text-blue {
  color: $blue!important;
}
.pb_text-indigo {
  color: $indigo!important;
}
.pb_text-purple {
  color: $purple!important;
}
.pb_text-pink {
  color: $pink!important;
}
.pb_text-red {
  color: $red!important;
}
.pb_text-orange {
  color: $orange!important;
}
.pb_text-yellow {
  color: $yellow!important;
}
.pb_text-green {
  color: $green!important;
}
.pb_text-teal {
  color: $teal!important;
}
.pb_text-cyan {
  color: $cyan!important;
}

// background
.pb_bg-blue {
  background-color: $blue!important;
}
.pb_bg-indigo {
  background-color: $indigo!important;
}
.pb_bg-purple {
  background-color: $purple!important;
}
.pb_bg-pink {
  background-color: $pink!important;
}
.pb_bg-red {
  background-color: $red!important;
}
.pb_bg-orange {
  background-color: $orange!important;
}
.pb_bg-yellow {
  background-color: $yellow!important;
}
.pb_bg-green {
  background-color: $green!important;
}
.pb_bg-teal {
  background-color: $teal!important;
}
.pb_bg-cyan {
  background-color: $cyan!important;
}

.pb_w-10 {
  width: 10%;
}
.pb_w-15 {
  width: 15%;
}
.pb_w-20 {
  width: 20%;
}
.pb_w-30 {
  width: 30%;
}
.pb_w-35 {
  width: 35%;
}
.pb_w-40 {
  width: 40%;
}
.pb_w-45 {
  width: 45%;
}