/*————————————

Border Colors

————————————*/ /* Basic Colors ————————————*/ /* Primary Colors */ .g-brd-primary {

border-color: $g-color-primary !important;

&--before {
  &::before {
    border-color: $g-color-primary !important;
  }

  &--active.active {
    &::before {
      border-color: $g-color-primary !important;
    }
  }
}

&--hover:hover,
&--active.active {
  border-color: $g-color-primary !important;
}

// Active
&--active {
  &.active,
  .active & {
    border-color: $g-color-primary !important;
  }
}

&--hover-parent {
  *:hover > & {
    border-color: $g-color-primary !important;
  }
}

// Opacity
&-opacity {
  &-0_3 {
    border-color: rgba($g-color-primary, .3) !important;

    &--hover:hover,
    &--active.active {
      border-color: rgba($g-color-primary, .3) !important;
    }

    &--hover-parent {
      *:hover > & {
        border-color: rgba($g-color-primary, .3) !important;
      }
    }
  }
}

// Primary dark
&-dark {
  &-dark-v1 {
    border-color: $g-color-primary-dark-v1 !important;

    &--hover:hover,
    &--active.active {
      border-color: $g-color-primary-dark-v1 !important;
    }

    &--hover-parent {
      *:hover > & {
        border-color: $g-color-primary-dark-v1 !important;
      }
    }
  }

  &-dark-v2 {
    border-color: $g-color-primary-dark-v2 !important;

    &--hover:hover,
    &--active.active {
      border-color: $g-color-primary-dark-v2 !important;
    }

    &--hover-parent {
      *:hover > & {
        border-color: $g-color-primary-dark-v2 !important;
      }
    }
  }

  &-dark-v3 {
    border-color: $g-color-primary-dark-v3 !important;

    &--hover:hover,
    &--active.active {
      border-color: $g-color-primary-dark-v3 !important;
    }

    &--hover-parent {
      *:hover > & {
        border-color: $g-color-primary-dark-v3 !important;
      }
    }
  }
}

}

.g-brd-bottom-primary {

&--hover:hover {
  border-bottom-color: $g-color-primary !important;
}

}

/* Main Colors */ .g-brd-main {

border-color: $g-color-main !important;

&--hover:hover {
  border-color: $g-color-main !important;
}

}

/* Black Colors */ .g-brd-black {

border-color: $g-color-black !important;

&--hover:hover,
&--active.active {
  border-color: $g-color-black !important;
}

&--hover-parent {
  *:hover > & {
    border-color: $g-color-black !important;
  }
}

&-opacity {
  &-0_4 {
    border-color: rgba($g-color-black, .4) !important;
  }
}

}

/* White Colors */ .g-brd-white {

border-color: $g-color-white !important;

&--hover:hover,
&--active.active {
  border-color: $g-color-white !important;
}

&--hover-parent {
  *:hover > & {
    border-color: $g-color-white !important;
  }
}

// White opacity
&-opacity {
  &-0_1 {
    border-color: rgba($g-color-white, .1) !important;

    &--hover:hover,
    &--active.active {
      border-color: rgba($g-color-white, .1) !important;
    }

    &--hover-parent {
      *:hover > & {
        border-color: rgba($g-color-white, .1) !important;
      }
    }
  }

  &-0_2 {
    border-color: rgba($g-color-white, .2) !important;

    &--hover:hover,
    &--active.active {
      border-color: rgba($g-color-white, .2) !important;
    }

    &--hover-parent {
      *:hover > & {
        border-color: rgba($g-color-white, .2) !important;
      }
    }
  }

  &-0_3 {
    border-color: rgba($g-color-white, .3) !important;

    &--hover:hover,
    &--active.active {
      border-color: rgba($g-color-white, .3) !important;
    }

    &--hover-parent {
      *:hover > & {
        border-color: rgba($g-color-white, .3) !important;
      }
    }
  }

  &-0_4 {
    border-color: rgba($g-color-white, .4) !important;

    &--hover:hover,
    &--active.active {
      border-color: rgba($g-color-white, .4) !important;
    }

    &--hover-parent {
      *:hover > & {
        border-color: rgba($g-color-white, .4) !important;
      }
    }
  }

  &-0_5 {
    border-color: rgba($g-color-white, .5) !important;

    &--hover:hover,
    &--active.active {
      border-color: rgba($g-color-white, .5) !important;
    }

    &--hover-parent {
      *:hover > & {
        border-color: rgba($g-color-white, .5) !important;
      }
    }
  }

  &-0_6 {
    border-color: rgba($g-color-white, .6) !important;

    &--hover:hover,
    &--active.active {
      border-color: rgba($g-color-white, .6) !important;
    }

    &--hover-parent {
      *:hover > & {
        border-color: rgba($g-color-white, .6) !important;
      }
    }
  }

  &-0_8 {
    border-color: rgba($g-color-white, .8) !important;

    &--hover:hover,
    &--active.active {
      border-color: rgba($g-color-white, .8) !important;
    }

    &--hover-parent {
      *:hover > & {
        border-color: rgba($g-color-white, .8) !important;
      }
    }
  }
}

}

/* Gray Colors */ .g-brd-gray {

// Dark Gray
&-dark {
  &-v1 {
    border-color: $g-color-gray-dark-v1 !important;

    &--hover:hover,
    &--active.active {
      border-color: $g-color-gray-dark-v1 !important;
    }

    &--hover-parent {
      *:hover > & {
        border-color: $g-color-gray-dark-v1 !important;
      }
    }
  }

  &-v2 {
    border-color: $g-color-gray-dark-v2 !important;

    &--hover:hover,
    &--active.active {
      border-color: $g-color-gray-dark-v2 !important;
    }

    &--hover-parent {
      *:hover > & {
        border-color: $g-color-gray-dark-v2 !important;
      }
    }
  }

  &-v3 {
    border-color: $g-color-gray-dark-v3 !important;

    &--hover:hover,
    &--active.active {
      border-color: $g-color-gray-dark-v3 !important;
    }

    &--hover-parent {
      *:hover > & {
        border-color: $g-color-gray-dark-v3 !important;
      }
    }
  }

  &-v4 {
    border-color: $g-color-gray-dark-v4 !important;

    &--hover:hover,
    &--active.active {
      border-color: $g-color-gray-dark-v4 !important;
    }

    &--hover-parent {
      *:hover > & {
        border-color: $g-color-gray-dark-v4 !important;
      }
    }
  }

  &-v5 {
    border-color: $g-color-gray-dark-v5 !important;

    &--hover:hover,
    &--active.active {
      border-color: $g-color-gray-dark-v5 !important;
    }

    &--hover-parent {
      *:hover > & {
        border-color: $g-color-gray-dark-v5 !important;
      }
    }
  }
}

// Light Gray
&-light {
  &-v1 {
    border-color: $g-color-gray-light-v1 !important;

    &--hover:hover,
    &--focus:focus,
    &--active.active {
      border-color: $g-color-gray-light-v1 !important;
    }

    &--hover-parent {
      *:hover > & {
        border-color: $g-color-gray-light-v1 !important;
      }
    }
  }

  &-v2 {
    border-color: $g-color-gray-light-v2 !important;

    &--before {
      &::before {
        border-color: $g-color-gray-light-v2 !important;
      }
    }

    &--after {
      &::after {
        border-color: $g-color-gray-light-v2 !important;
      }
    }

    &--hover:hover,
    &--active.active {
      border-color: $g-color-gray-light-v2 !important;
    }

    &--hover-parent {
      *:hover > & {
        border-color: $g-color-gray-light-v2 !important;
      }
    }
  }

  &-v3 {
    border-color: $g-color-gray-light-v3 !important;

    &--hover:hover,
    &--active.active,
    &--focus:focus{
      border-color: $g-color-gray-light-v3 !important;
    }

    &--hover-parent {
      *:hover > & {
        border-color: $g-color-gray-light-v3 !important;
      }
    }
  }

  &-v4 {
    border-color: $g-color-gray-light-v4 !important;

    &--hover:hover,
    &--active.active {
      border-color: $g-color-gray-light-v4 !important;
    }

    &--hover-parent {
      *:hover > & {
        border-color: $g-color-gray-light-v4 !important;
      }
    }
  }

  &-v5 {
    border-color: $g-color-gray-light-v5 !important;

    &--hover:hover,
    &--active.active {
      border-color: $g-color-gray-light-v5 !important;
    }

    &--hover-parent {
      *:hover > & {
        border-color: $g-color-gray-light-v5 !important;
      }
    }
  }
}

}

/* Transparent */ .g-brd-transparent {

border-color: transparent !important;

&--before {
  &::before {
    border-color: transparent !important;
  }
}

&--after {
  &::after {
    border-color: transparent !important;
  }
}

&--hover:hover,
&--active.active {
  border-color: transparent !important;
}

&--hover-parent {
  *:hover > & {
    border-color: transparent !important;
  }
}

}

/* Complementary Colors ————————————*/ /* Color Green */ .g-brd-green {

border-color: $g-color-green !important;

&--hover:hover,
&--active.active {
  border-color: $g-color-green !important;
}

&--hover-parent {
  *:hover > & {
    border-color: $g-color-green !important;
  }
}

}

/* Color Blue */ .g-brd-blue {

border-color: $g-color-blue !important;

&--hover:hover,
&--active.active {
  border-color: $g-color-blue !important;
}

&--hover-parent {
  *:hover > & {
    border-color: $g-color-blue !important;
  }
}

}

/* Color Light Blue */ .g-brd-lightblue {

border-color: $g-color-lightblue !important;

&--hover:hover,
&--active.active {
  border-color: $g-color-lightblue !important;
}

&--hover-parent {
  *:hover > & {
    border-color: $g-color-lightblue !important;
  }
}

&-v1 {
  border-color: $g-color-lightblue-v1 !important;

  &--hover:hover,
  &--active.active {
    border-color: $g-color-lightblue-v1 !important;
  }

  &--hover-parent {
    *:hover > & {
      border-color: $g-color-lightblue-v1 !important;
    }
  }
}

}

/* Color Dark Blue */ .g-brd-darkblue {

border-color: $g-color-darkblue !important;

&--hover:hover,
&--active.active {
  border-color: $g-color-darkblue !important;
}

&--hover-parent {
  *:hover > & {
    border-color: $g-color-darkblue !important;
  }
}

}

/* Color Indigo */ .g-brd-indigo {

border-color: $g-color-indigo !important;

&--hover:hover,
&--active.active {
  border-color: $g-color-indigo !important;
}

&--hover-parent {
  *:hover > & {
    border-color: $g-color-indigo !important;
  }
}

}

/* Color Red */ .g-brd-red {

border-color: $g-color-red !important;

&--hover:hover,
&--active.active {
  border-color: $g-color-red !important;
}

&--hover-parent {
  *:hover > & {
    border-color: $g-color-red !important;
  }
}

}

/* Color Light Red */ .g-brd-lightred {

border-color: $g-color-lightred !important;

&--hover:hover,
&--active.active {
  border-color: $g-color-lightred !important;
}

&--hover-parent {
  *:hover > & {
    border-color: $g-color-lightred !important;
  }
}

}

/* Color Dark Red */ .g-brd-darkred {

border-color: $g-color-darkred !important;

&--hover:hover,
&--active.active {
  border-color: $g-color-darkred !important;
}

&--hover-parent {
  *:hover > & {
    border-color: $g-color-darkred !important;
  }
}

}

/* Color Purple */ .g-brd-purple {

border-color: $g-color-purple !important;

&--hover:hover,
&--active.active {
  border-color: $g-color-purple !important;
}

&--hover-parent {
  *:hover > & {
    border-color: $g-color-purple !important;
  }
}

}

/* Color Dark Purple */ .g-brd-darkpurple {

border-color: $g-color-darkpurple !important;

&--hover:hover,
&--active.active {
  border-color: $g-color-darkpurple !important;
}

&--hover-parent {
  *:hover > & {
    border-color: $g-color-darkpurple !important;
  }
}

}

/* Color Pink */ .g-brd-pink {

border-color: $g-color-pink !important;

&--hover:hover,
&--active.active {
  border-color: $g-color-pink !important;
}

&--hover-parent {
  *:hover > & {
    border-color: $g-color-pink !important;
  }
}

}

/* Color Orange */ .g-brd-orange {

border-color: $g-color-orange !important;

&--hover:hover,
&--active.active {
  border-color: $g-color-orange !important;
}

&--hover-parent {
  *:hover > & {
    border-color: $g-color-orange !important;
  }
}

}

/* Color Deep Orange */ .g-brd-deeporange {

border-color: $g-color-deeporange !important;

&--hover:hover,
&--active.active {
  border-color: $g-color-deeporange !important;
}

&--hover-parent {
  *:hover > & {
    border-color: $g-color-deeporange !important;
  }
}

}

/* Color Yellow */ .g-brd-yellow {

border-color: $g-color-yellow !important;

&--hover:hover,
&--active.active {
  border-color: $g-color-yellow !important;
}

&--hover-parent {
  *:hover > & {
    border-color: $g-color-yellow !important;
  }
}

}

/* Color Aqua */ .g-brd-aqua {

border-color: $g-color-aqua !important;

&--hover:hover,
&--active.active {
  border-color: $g-color-aqua !important;
}

&--hover-parent {
  *:hover > & {
    border-color: $g-color-aqua !important;
  }
}

}

/* Color Cyan */ .g-brd-cyan {

border-color: $g-color-cyan !important;

&--hover:hover,
&--active.active {
  border-color: $g-color-cyan !important;
}

&--hover-parent {
  *:hover > & {
    border-color: $g-color-cyan !important;
  }
}

}

/* Color Teal */ .g-brd-teal {

border-color: $g-color-teal !important;

&--hover:hover,
&--active.active {
  border-color: $g-color-teal !important;
}

&--hover-parent {
  *:hover > & {
    border-color: $g-color-teal !important;
  }
}

}

/* Color Brown */ .g-brd-brown {

border-color: $g-color-brown !important;

&--hover:hover,
&--active.active {
  border-color: $g-color-brown !important;
}

&--hover-parent {
  *:hover > & {
    border-color: $g-color-brown !important;
  }
}

}

/* Color Blue Gray */ .g-brd-bluegray {

border-color: $g-color-bluegray !important;

&--hover:hover,
&--active.active {
  border-color: $g-color-bluegray !important;
}

&--hover-parent {
  *:hover > & {
    border-color: $g-color-bluegray !important;
  }
}

}

//Top, Bottom, Left, Right /* Primary Colors */ .g-brd-primary {

&-top {
  border-top-color: $g-color-primary !important;

  &--before {
    &::before {
      border-top-color: $g-color-primary !important;
    }
  }
}

&-bottom {
  border-bottom-color: $g-color-primary !important;

  &--before {
    &:before {
      border-bottom-color: $g-color-primary !important;
    }
  }
}

&-left {
  border-left-color: $g-color-primary !important;

  &--before {
    &:before {
      border-left-color: $g-color-primary !important;
    }
  }
}

&-right {
  border-right-color: $g-color-primary !important;

  &--before {
    &:before {
      border-right-color: $g-color-primary !important;
    }
  }
}

// Opacity
&-opacity {
  &-0_3 {
    &-top {
      border-top-color: rgba($g-color-primary, .3) !important;
    }

    &-bottom {
      border-bottom-color: rgba($g-color-primary, .3) !important;
    }

    &-left {
      border-left-color: rgba($g-color-primary, .3) !important;
    }

    &-right {
      border-right-color: rgba($g-color-primary, .3) !important;
    }
  }
}

// Primary dark
&-dark {
  &-dark-v1 {
    &-top {
      border-top-color: $g-color-primary-dark-v1 !important;
    }

    &-bottom {
      border-bottom-color: $g-color-primary-dark-v1 !important;
    }

    &-left {
      border-left-color: $g-color-primary-dark-v1 !important;
    }

    &-right {
      border-right-color: $g-color-primary-dark-v1 !important;
    }
  }

  &-dark-v2 {
    &-top {
      border-top-color: $g-color-primary-dark-v2 !important;
    }

    &-bottom {
      border-bottom-color: $g-color-primary-dark-v2 !important;
    }

    &-left {
      border-left-color: $g-color-primary-dark-v2 !important;
    }

    &-right {
      border-right-color: $g-color-primary-dark-v2 !important;
    }
  }

  &-dark-v3 {
    &-top {
      border-top-color: $g-color-primary-dark-v3 !important;
    }

    &-bottom {
      border-bottom-color: $g-color-primary-dark-v3 !important;
    }

    &-left {
      border-left-color: $g-color-primary-dark-v3 !important;
    }

    &-right {
      border-right-color: $g-color-primary-dark-v3 !important;
    }
  }
}

}

/* Black Colors */ .g-brd-black {

&-top {
  border-top-color: $g-color-black !important;
}

&-bottom {
  border-bottom-color: $g-color-black !important;
}

&-left {
  border-left-color: $g-color-black !important;
}

&-right {
  border-right-color: $g-color-black !important;
}

}

/* White */ .g-brd-white {

&-top {
  border-top-color: $g-color-white !important;
}

&-bottom {
  border-bottom-color: $g-color-white !important;
}

&-left {
  border-left-color: $g-color-white !important;
}

&-right {
  border-right-color: $g-color-white !important;
}

// White opacity
&-opacity {
  &-0_1 {
    &-top {
      border-top-color: rgba($g-color-white, .1) !important;
    }

    &-bottom {
      border-bottom-color: rgba($g-color-white, .1) !important;
    }

    &-left {
      border-left-color: rgba($g-color-white, .1) !important;
    }

    &-right {
      border-right-color: rgba($g-color-white, .1) !important;
    }
  }

  &-0_2 {
    &-top {
      border-top-color: rgba($g-color-white, .2) !important;
    }

    &-bottom {
      border-bottom-color: rgba($g-color-white, .2) !important;
    }

    &-left {
      border-left-color: rgba($g-color-white, .2) !important;
    }

    &-right {
      border-right-color: rgba($g-color-white, .2) !important;
    }
  }

  &-0_3 {
    &-top {
      border-top-color: rgba($g-color-white, .3) !important;
    }

    &-bottom {
      border-bottom-color: rgba($g-color-white, .3) !important;
    }

    &-left {
      border-left-color: rgba($g-color-white, .3) !important;
    }

    &-right {
      border-right-color: rgba($g-color-white, .3) !important;
    }
  }

  &-0_4 {
    &-top {
      border-top-color: rgba($g-color-white, .4) !important;
    }

    &-bottom {
      border-bottom-color: rgba($g-color-white, .4) !important;
    }

    &-left {
      border-left-color: rgba($g-color-white, .4) !important;
    }

    &-right {
      border-right-color: rgba($g-color-white, .4) !important;
    }
  }

  &-0_5 {
    &-top {
      border-top-color: rgba($g-color-white, .5) !important;
    }

    &-bottom {
      border-bottom-color: rgba($g-color-white, .5) !important;
    }

    &-left {
      border-left-color: rgba($g-color-white, .5) !important;
    }

    &-right {
      border-right-color: rgba($g-color-white, .5) !important;
    }
  }

  &-0_6 {
    &-top {
      border-top-color: rgba($g-color-white, .6) !important;
    }

    &-bottom {
      border-bottom-color: rgba($g-color-white, .6) !important;
    }

    &-left {
      border-left-color: rgba($g-color-white, .6) !important;
    }

    &-right {
      border-right-color: rgba($g-color-white, .6) !important;
    }
  }
}

}

/* Gray Colors */ .g-brd-gray {

// Dark Gray
&-dark {
  &-v1 {
    &-top {
      border-top-color: $g-color-gray-dark-v1 !important;
    }

    &-bottom {
      border-bottom-color: $g-color-gray-dark-v1 !important;
    }

    &-left {
      border-left-color: $g-color-gray-dark-v1 !important;
    }

    &-right {
      border-right-color: $g-color-gray-dark-v1 !important;
    }
  }

  &-v2 {
    &-top {
      border-top-color: $g-color-gray-dark-v2 !important;
    }

    &-bottom {
      border-bottom-color: $g-color-gray-dark-v2 !important;
    }

    &-left {
      border-left-color: $g-color-gray-dark-v2 !important;
    }

    &-right {
      border-right-color: $g-color-gray-dark-v2 !important;
    }
  }

  &-v3 {
    &-top {
      border-top-color: $g-color-gray-dark-v3 !important;
    }

    &-bottom {
      border-bottom-color: $g-color-gray-dark-v3 !important;
    }

    &-left {
      border-left-color: $g-color-gray-dark-v3 !important;
    }

    &-right {
      border-right-color: $g-color-gray-dark-v3 !important;
    }
  }

  &-v4 {
    &-top {
      border-top-color: $g-color-gray-dark-v4 !important;
    }

    &-bottom {
      border-bottom-color: $g-color-gray-dark-v4 !important;
    }

    &-left {
      border-left-color: $g-color-gray-dark-v4 !important;
    }

    &-right {
      border-right-color: $g-color-gray-dark-v4 !important;
    }
  }

  &-v5 {
    &-top {
      border-top-color: $g-color-gray-dark-v5 !important;
    }

    &-bottom {
      border-bottom-color: $g-color-gray-dark-v5 !important;
    }

    &-left {
      border-left-color: $g-color-gray-dark-v5 !important;
    }

    &-right {
      border-right-color: $g-color-gray-dark-v5 !important;
    }
  }
}

// Light Gray
&-light {
  &-v1 {
    &-top {
      border-top-color: $g-color-gray-light-v1 !important;
    }

    &-bottom {
      border-bottom-color: $g-color-gray-light-v1 !important;
    }

    &-left {
      border-left-color: $g-color-gray-light-v1 !important;
    }

    &-right {
      border-right-color: $g-color-gray-light-v1 !important;
    }
  }

  &-v2 {
    &-top {
      border-top-color: $g-color-gray-light-v2 !important;
    }

    &-bottom {
      border-bottom-color: $g-color-gray-light-v2 !important;
    }

    &-left {
      border-left-color: $g-color-gray-light-v2 !important;
    }

    &-right {
      border-right-color: $g-color-gray-light-v2 !important;
    }
  }

  &-v3 {
    &-top {
      border-top-color: $g-color-gray-light-v3 !important;
    }

    &-bottom {
      border-bottom-color: $g-color-gray-light-v3 !important;
    }

    &-left {
      border-left-color: $g-color-gray-light-v3 !important;
    }

    &-right {
      border-right-color: $g-color-gray-light-v3 !important;
    }
  }

  &-v4 {
    &-top {
      border-top-color: $g-color-gray-light-v4 !important;
    }

    &-bottom {
      border-bottom-color: $g-color-gray-light-v4 !important;
    }

    &-left {
      border-left-color: $g-color-gray-light-v4 !important;
    }

    &-right {
      border-right-color: $g-color-gray-light-v4 !important;
    }
  }

  &-v5 {
    &-top {
      border-top-color: $g-color-gray-light-v5 !important;
    }

    &-bottom {
      border-bottom-color: $g-color-gray-light-v5 !important;
    }

    &-left {
      border-left-color: $g-color-gray-light-v5 !important;
    }

    &-right {
      border-right-color: $g-color-gray-light-v5 !important;
    }
  }
}

}

/* Transparent */ .g-brd-transparent {

&-top {
  border-top-color: transparent !important;
}

&-bottom {
  border-bottom-color: transparent !important;
}

&-left {
  border-left-color: transparent !important;
}

&-right {
  border-right-color: transparent !important;
}

}

/* Complementary Colors ————————————*/ /* Color Green */ .g-brd-green {

&-top {
  border-top-color: $g-color-green !important;
}

&-bottom {
  border-bottom-color: $g-color-green !important;
}

&-left {
  border-left-color: $g-color-green !important;
}

&-right {
  border-right-color: $g-color-green !important;
}

}

/* Color Blue */ .g-brd-blue {

&-top {
  border-top-color: $g-color-blue !important;
}

&-bottom {
  border-bottom-color: $g-color-blue !important;
}

&-left {
  border-left-color: $g-color-blue !important;
}

&-right {
  border-right-color: $g-color-blue !important;
}

}

/* Color Light Blue */ .g-brd-lightblue {

&-top {
  border-top-color: $g-color-lightblue !important;
}

&-bottom {
  border-bottom-color: $g-color-lightblue !important;
}

&-left {
  border-left-color: $g-color-lightblue !important;
}

&-right {
  border-right-color: $g-color-lightblue !important;
}

&-v1 {
  &-top {
    border-top-color: $g-color-lightblue-v1 !important;
  }

  &-bottom {
    border-bottom-color: $g-color-lightblue-v1 !important;
  }

  &-left {
    border-left-color: $g-color-lightblue-v1 !important;
  }

  &-right {
    border-right-color: $g-color-lightblue-v1 !important;
  }
}

}

/* Color Dark Blue */ .g-brd-darkblue {

&-top {
  border-top-color: $g-color-darkblue !important;
}

&-bottom {
  border-bottom-color: $g-color-darkblue !important;
}

&-left {
  border-left-color: $g-color-darkblue !important;
}

&-right {
  border-right-color: $g-color-darkblue !important;
}

}

/* Color Indigo */ .g-brd-indigo {

&-top {
  border-top-color: $g-color-indigo !important;
}

&-bottom {
  border-bottom-color: $g-color-indigo !important;
}

&-left {
  border-left-color: $g-color-indigo !important;
}

&-right {
  border-right-color: $g-color-indigo !important;
}

}

/* Color Red */ .g-brd-red {

&-top {
  border-top-color: $g-color-red !important;
}

&-bottom {
  border-bottom-color: $g-color-red !important;
}

&-left {
  border-left-color: $g-color-red !important;
}

&-right {
  border-right-color: $g-color-red !important;
}

}

/* Color Light Red */ .g-brd-lightred {

&-top {
  border-top-color: $g-color-lightred !important;
}

&-bottom {
  border-bottom-color: $g-color-lightred !important;
}

&-left {
  border-left-color: $g-color-lightred !important;
}

&-right {
  border-right-color: $g-color-lightred !important;
}

}

/* Color Dark Red */ .g-brd-darkred {

&-top {
  border-top-color: $g-color-darkred !important;
}

&-bottom {
  border-bottom-color: $g-color-darkred !important;
}

&-left {
  border-left-color: $g-color-darkred !important;
}

&-right {
  border-right-color: $g-color-darkred !important;
}

}

/* Color Purple */ .g-brd-purple {

&-top {
  border-top-color: $g-color-purple !important;
}

&-bottom {
  border-bottom-color: $g-color-purple !important;
}

&-left {
  border-left-color: $g-color-purple !important;
}

&-right {
  border-right-color: $g-color-purple !important;
}

}

/* Color Dark Purple */ .g-brd-darkpurple {

&-top {
  border-top-color: $g-color-darkpurple !important;
}

&-bottom {
  border-bottom-color: $g-color-darkpurple !important;
}

&-left {
  border-left-color: $g-color-darkpurple !important;
}

&-right {
  border-right-color: $g-color-darkpurple !important;
}

}

/* Color Pink */ .g-brd-pink {

&-top {
  border-top-color: $g-color-pink !important;
}

&-bottom {
  border-bottom-color: $g-color-pink !important;
}

&-left {
  border-left-color: $g-color-pink !important;
}

&-right {
  border-right-color: $g-color-pink !important;
}

}

/* Color Orange */ .g-brd-orange {

&-top {
  border-top-color: $g-color-orange !important;
}

&-bottom {
  border-bottom-color: $g-color-orange !important;
}

&-left {
  border-left-color: $g-color-orange !important;
}

&-right {
  border-right-color: $g-color-orange !important;
}

}

/* Color Deep Orange */ .g-brd-deeporange {

&-top {
  border-top-color: $g-color-deeporange !important;
}

&-bottom {
  border-bottom-color: $g-color-deeporange !important;
}

&-left {
  border-left-color: $g-color-deeporange !important;
}

&-right {
  border-right-color: $g-color-deeporange !important;
}

}

/* Color Yellow */ .g-brd-yellow {

&-top {
  border-top-color: $g-color-yellow !important;
}

&-bottom {
  border-bottom-color: $g-color-yellow !important;
}

&-left {
  border-left-color: $g-color-yellow !important;
}

&-right {
  border-right-color: $g-color-yellow !important;
}

}

/* Color Aqua */ .g-brd-aqua {

&-top {
  border-top-color: $g-color-aqua !important;
}

&-bottom {
  border-bottom-color: $g-color-aqua !important;
}

&-left {
  border-left-color: $g-color-aqua !important;
}

&-right {
  border-right-color: $g-color-aqua !important;
}

}

/* Color Cyan */ .g-brd-cyan {

&-top {
  border-top-color: $g-color-cyan !important;
}

&-bottom {
  border-bottom-color: $g-color-cyan !important;
}

&-left {
  border-left-color: $g-color-cyan !important;
}

&-right {
  border-right-color: $g-color-cyan !important;
}

}

/* Color Teal */ .g-brd-teal {

&-top {
  border-top-color: $g-color-teal !important;
}

&-bottom {
  border-bottom-color: $g-color-teal !important;
}

&-left {
  border-left-color: $g-color-teal !important;
}

&-right {
  border-right-color: $g-color-teal !important;
}

}

/* Color Brown */ .g-brd-brown {

&-top {
  border-top-color: $g-color-brown !important;
}

&-bottom {
  border-bottom-color: $g-color-brown !important;
}

&-left {
  border-left-color: $g-color-brown !important;
}

&-right {
  border-right-color: $g-color-brown !important;
}

}

/* Color Blue Gray */ .g-brd-bluegray {

&-top {
  border-top-color: $g-color-bluegray !important;
}

&-bottom {
  border-bottom-color: $g-color-bluegray !important;
}

&-left {
  border-left-color: $g-color-bluegray !important;
}

&-right {
  border-right-color: $g-color-bluegray !important;
}

}

/* O */ .g-brd {

&-primary {
  &-top {
    &--hover:hover {
      border-top-color: $g-color-primary !important;

      &::after {
        border-top-color: $g-color-primary;
      }
    }

    &--active.active {
      border-top-color: $g-color-primary !important;

      &::after {
        border-top-color: $g-color-primary;
      }
    }
  }

  &-bottom {
    &--hover:hover {
      border-bottom-color: $g-color-primary !important;

      &::after {
        border-bottom-color: $g-color-primary;
      }
    }

    &--active.active {
      border-bottom-color: $g-color-primary !important;

      &::after {
        border-bottom-color: $g-color-primary;
      }
    }
  }
}

}

.g-brd {

&-pinterest {
  border-color: $g-color-pinterest !important;

  &::after {
    border-color: $g-color-pinterest !important;
  }

  &-top {
    &--hover:hover {
      border-top-color: $g-color-pinterest !important;

      &::after {
        border-top-color: $g-color-pinterest;
      }
    }

    &--active.active {
      border-top-color: $g-color-pinterest !important;

      &::after {
        border-top-color: $g-color-pinterest;
      }
    }
  }

  &-bottom {
    &--hover:hover {
      border-bottom-color: $g-color-pinterest !important;

      &::after {
        border-bottom-color: $g-color-pinterest;
      }
    }

    &--active.active {
      border-bottom-color: $g-color-pinterest !important;

      &::after {
        border-bottom-color: $g-color-pinterest;
      }
    }
  }
}

}