@border: #e7e8e9;
@tabsBg: #f3f4f4;

:global{
  .HEADTABS>.ant-tabs-bar{
    height: 40px;
    border-bottom: 1px solid @border;
    margin-bottom: 0px;
    background:#f0f2f5;
    .ant-tabs-ink-bar{
      opacity: 0;
    }
    .ant-tabs-nav-container{
      padding: 0 85px 0 20px;
      .ant-tabs-tab{
        height: 30px;
        width: 115px;
        line-height: 28px;
        border:none;
        background: none;
        padding:0 13px;
        margin-left:-14px;
        span{
          font-size:12px;
          color:#686d71;
          display: block;
          overflow: hidden;
          width: 63px;
          text-overflow: ellipsis;
          float: left;
        }
        .anticon{
          float: right;
          margin-top: 8px;
          line-height: 14px;
          width: 14px;
          height: 14px;
        }
        .anticon-close:hover{
          background: #e52946;
          color:#fff;
          border-radius: 100px;
        }
      } 
      .ant-tabs-tab:nth-child(2){
        width:65px;
        border-left: 1px solid #e7e8e9;
        padding-left: 13px;
        span{
          width: 33px;
        }
      }
      .ant-tabs-tab:nth-child(2) > div{
        border-left: 1px solid @border;
        border-radius: 4px 0 0 0;
        padding-left: 10px;
      }
      .ant-tabs-tab:nth-child(2)::before{
        display: none;
      }
      .ant-tabs-tab::before{
        content:'';
        width: 12px;
        height: 29px;
        position: absolute;
        left: 2px;
        top: 0px;
        background: url('../../assets/tabs1.png');
        background-size: cover;
        background-position-x: -9px;
        z-index: 1;
      }
      .ant-tabs-tab::after{
        content:'';
        width: 12px;
        height: 28px;
        position: absolute;
        right: 1px;
        top: 0px;
        background: url('../../assets/tabs2.png');
        background-size: cover;
        background-position-x: -9px;
        z-index: 1;
        //transform: rotateY(180deg);
      }
      .ant-tabs-tab-active::before{
        background-image: url('../../assets/tabs3.png');
        height: 30px;
      }
      .ant-tabs-tab-active::after{
        background-image: url('../../assets/tabs4.png');
        height: 30px;
      }
      .ant-tabs-tab-active{
        z-index:11;
        span{
          font-size:12px;
          color:#2b82d8;
          font-weight: normal;
        }
      }
      .ant-tabs-tab > div{
        background: @tabsBg;
        border-top:1px solid @border;
        padding: 0 6px 0 8px;
        height: 29px;
        z-index: 3;
        position: relative;
      }
      .ant-tabs-tab-active > div{
        background: #fff;
        height: 30px;
      }
      .ant-tabs-tab-btn-disabled{
        opacity: 1;
        position: absolute;
        right: 65px;
        top: 5px;
        z-index: 101;
      }
      .ant-tabs-tab-arrow-show{
        position: absolute;
        right: 65px;
        top: 5px;
        z-index: 101;
        width: 0px;
      }
      .ant-tabs-tab-prev{
        left: 100%;
        margin-left: -75px;
        .ant-tabs-tab-prev-icon::before{
          content: "\e7c8";
          font-family: "iconfont" !important;
          font-size: 16px;
        }
      }
      .ant-tabs-tab-next{
        .ant-tabs-tab-next-icon::before{
          content: "\e7a1";
          font-family: "iconfont" !important;
          font-size: 16px;
        }
      }
    }
    .ant-tabs-nav-wrap{
      margin-top: 10px;
      line-height: 30px;
    }
  }
}

.dropdown{
  position: absolute;
  right: 20px;
  top:64px;
  line-height: 22px;
  font-weight: bold;
  color:#9b9b9b;
  z-index: 100;
}


.tabBg{
  position: absolute;
  right: 45px;
  top: 60px;
  width: 50px;
  height: 30px;
  z-index: 30;
  border-bottom:1px solid #e7e8e9;
  div{
    background:@tabsBg;
    border-top:1px solid @border;
    margin: 0 13px;
  }
}
.tabBg::before{
  content:'';
  width: 13px;
  height: 29px;
  position: absolute;
  left: 1px;
  top: 0px;
  background: url('../../assets/tabs1.png');
  background-size: cover;
  background-position-x: -9px;
}
.tabBg::after{
  content:'';
  width: 13px;
  height: 29px;
  position: absolute;
  right: 0;
  top: 0px;
  background: url('../../assets/tabs2.png');
  background-size: cover;
  background-position-x: -9px;
}