$color_highlight: #834c40;

.dzs-tabs.skin-box-alternate {
  padding: 0;

  color: #222222;;

  .tabs-content {

    .tab-content {
      padding: 15px 20px;
    }
  }

  .tabs-menu .tab-menu-con:first-child {
    border-left: 1px solid $border_color;
  }

  .tabs-menu .tab-menu-con:last-child {
    border-right: 1px solid $border_color;

    &:after {
      display: none;
    }
  }

  .tabs-menu .tab-menu-con {
    border-top: 1px solid $border_color;
    border-right: 0px solid $border_color;
    border-bottom: 1px solid $border_color;
    border-left: 0px solid $border_color;

    position: relative;

    &:after {
      content: "";
      position: absolute;
      top: 30%;
      height: 40%;
      width: 1px;

      background-color: $border_color;
      right: 0;
    }
  }

  .tabs-content .tab-content {
    border-color: $border_color;
  }

  .tab-menu {
    .the-label {
      > i {
        display: block;
        color: $color_highlight;

        font-size: 19px;
        margin-bottom: 5px;
      }
    }
  }

  .tabs-menu {
    .tab-menu-con {
      vertical-align: bottom;

      > .tab-menu {

        padding: 17px 23px;

        text-transform: uppercase;


        $transition-property: padding;
        $transition-duration: 0.3s;
        $transition-timing: ease-out;
        @include apply_transition($transition-property, $transition-duration, $transition-timing);
      }

      &.active {

        background-color: $color_highlight;

        color: #ffffff;

        i {
          color: inherit;
        }

        > .tab-menu {

          color: #ffffff;
          padding: 21px 28px;
        }
      }
    }
  }

  &.is-toggle {

    .tab-menu-con {
      vertical-align: bottom;

      > .tab-menu {

        background-color: #333;
        z-index: 5;
        color: #ffffff;
      }


    }
  }

  .tabs-menu .tab-menu-con.active {
    border-bottom: 0;
  }


}