.ht-base-divider {
  & > span {
    position: relative;
    top: -0.8em;
    left: 30px;
    background: #fff;
    padding: 0 10px;
  }
}
.ht-base-divider-horizontal{
  width: 100%;
  height: 1px;
  &.ht-base-divider-style1 {
    background-color: @border-color-split;
  }
  &.ht-base-divider-style2 {
    height: 0;
    border-bottom: 1px dashed @border-color-split;
  }
  &.ht-base-divider-style3 {
    background-image: url("images/divider-3.png");
  }
  &.ht-base-divider-style4 {
    background-image: url("images/divider-4.png");
  }
  &.ht-base-divider-style5 {
    background-image: url("images/divider-5.png");
  }
  &.ht-base-divider-style6 {
    height: 0;
    border-bottom: 1px dotted @border-color-split;
  }
  &.ht-base-divider-style7 {
    background-image: url("images/divider-7.png");
  }
  &.ht-base-divider-style8 {
    background-image: url("images/divider-8.png");
  }
  &.ht-base-divider-style11 {
    height: 5px;
    border-top: 1px solid @border-color-split;
    border-bottom: 1px solid @border-color-split;
  }
  &.ht-base-divider-style22 {
    height: 9px;
    padding: 3px 0;
    border-top: 1px solid @border-color-split;
    border-bottom: 1px solid @border-color-split;
    &:before {
      display: block;
      content: '';
      width: 100%;
      height: 1px;
      background: @border-color-split;
    }
  }
  &.ht-base-divider-style33 {
    height: 6px;
    border-top: 3px solid @border-color-split;
    border-bottom: 1px solid @border-color-split;
  }
  &.ht-base-divider-style44 {
    height: 6px;
    border-top: 1px solid @border-color-split;
    border-bottom: 3px solid @border-color-split;
  }
  &.ht-base-divider-style55 {
    height: 9px;
    padding: 2px 0;
    border-top: 1px solid @border-color-split;
    border-bottom: 1px solid @border-color-split;
    &:before {
      display: block;
      content: '';
      width: 100%;
      height: 3px;
      background: @border-color-split;
    }
  }
  &.ht-base-divider-style66 {
    height: 7px;
    border-top: 3px solid @border-color-split;
    border-bottom: 2px solid @border-color-split;
  }
  &.ht-base-divider-style77 {
    height: 11px;
    padding: 2px 0;
    border-top: 2px solid @border-color-split;
    border-bottom: 2px solid @border-color-split;
    &:before {
      display: block;
      content: '';
      width: 100%;
      height: 3px;
      background: @border-color-split;
    }
  }
  &.ht-base-divider-style88 {
    height: 10px;
    padding: 3px 0;
    border-top: 1px solid @border-color-split;
    border-bottom: 1px solid @border-color-split;
    &:before {
      display: block;
      content: '';
      width: 100%;
      height: 2px;
      background: @border-color-split;
    }
  }
  &.ht-base-divider-style99 {
    height: 7px;
    border-top: 2px solid @border-color-split;
    border-bottom: 3px solid @border-color-split;
  }
}

.ht-base-divider-vertical {
  display: inline-block;
  width: 1px;
  height: 100%;
  &.ht-base-divider-style1 {
    background-color: @border-color-split;
  }
  &.ht-base-divider-style2 {
    width: 0;
    border-left: 1px dashed @border-color-split;
  }
  &.ht-base-divider-style3 {
    background-image: url("images/divider-30.png");
  }
  &.ht-base-divider-style4 {
    background-image: url("images/divider-40.png");
  }
  &.ht-base-divider-style5 {
    background-image: url("images/divider-50.png");
  }
  &.ht-base-divider-style6 {
    width: 0;
    border-left: 1px dotted @border-color-split;
  }
  &.ht-base-divider-style7 {
    background-image: url("images/divider-70.png");
  }
  &.ht-base-divider-style8 {
    background-image: url("images/divider-80.png");
  }
  &.ht-base-divider-style11 {
    width: 5px;
    border-left: 1px solid @border-color-split;
    border-right: 1px solid @border-color-split;
  }
  &.ht-base-divider-style22 {
    width: 9px;
    padding: 0 3px;
    border-left: 1px solid @border-color-split;
    border-right: 1px solid @border-color-split;
    &:before {
      display: block;
      content: '';
      height: 100%;
      width: 1px;
      background: @border-color-split;
    }
  }
  &.ht-base-divider-style33 {
    width: 6px;
    border-left: 3px solid @border-color-split;
    border-right: 1px solid @border-color-split;
  }
  &.ht-base-divider-style44 {
    width: 6px;
    border-left: 1px solid @border-color-split;
    border-right: 3px solid @border-color-split;
  }
  &.ht-base-divider-style55 {
    width: 9px;
    padding: 0 2px;
    border-left: 1px solid @border-color-split;
    border-right: 1px solid @border-color-split;
    &:before {
      display: block;
      content: '';
      height: 100%;
      width: 3px;
      background: @border-color-split;
    }
  }
  &.ht-base-divider-style66 {
    width: 7px;
    border-left: 3px solid @border-color-split;
    border-right: 2px solid @border-color-split;
  }
  &.ht-base-divider-style77 {
    width: 11px;
    padding: 0 2px;
    border-left: 2px solid @border-color-split;
    border-right: 2px solid @border-color-split;
    &:before {
      display: block;
      content: '';
      height: 100%;
      width: 3px;
      background: @border-color-split;
    }
  }
  &.ht-base-divider-style88 {
    width: 10px;
    padding: 0 3px;
    border-left: 1px solid @border-color-split;
    border-right: 1px solid @border-color-split;
    &:before {
      display: block;
      content: '';
      height: 100%;
      width: 2px;
      background: @border-color-split;
    }
  }
  &.ht-base-divider-style99 {
    width: 7px;
    border-left: 2px solid @border-color-split;
    border-right: 3px solid @border-color-split;
  }
}
