.ivu-color-picker-picker{
  width: 240px;
  .ivu-color-picker-picker-wrapper, .ivu-color-picker-confirm{
    display: inline-block;
    vertical-align: top;
  }
  .ivu-color-picker-picker-wrapper{
    width: 130px;
    padding: 0;
  }
  .ivu-color-picker-picker-panel{
    width: 130px;
    height: 125px;
  }
  .ivu-color-picker-saturation-wrapper{
    height: 100%;
  }
  .ivu-color-picker-confirm{
    width: calc(~'100% - 145px');
    border: none;
    padding: 0;
    margin-left: 15px;
    margin-top: 0;
  }
  .color-input{
    margin-bottom: 8px;
  }
  .ivu-color-picker-picker-color-active{
    width: 100%;
    height: 15px;
    border-radius: 4px;
    margin-top: 6px;
  }
  .ivu-color-picker-hue, .ivu-color-picker-alpha, .ivu-color-picker-alpha-checkboard-wrap, .ivu-color-picker-alpha-gradient{
    border-radius: 4px;
  }
  .ivu-color-picker-hue-picker, .ivu-color-picker-alpha-picker{
    height: 13px;
  }
}
.ivu-color-picker-picker-hue-slider, .ivu-color-picker-picker-alpha-slider{
  height: 15px;
  margin-top: 6px;
}
.th-tabs{
  width: 100%;
  text-align: center;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 15px;
  .th-tab{
    width: 50%;
    background-color: #F7F8FA;
    cursor: pointer;
    &.active{
      background-color: #3366FF;
      color: #ffffff;
    }
  }
}

.ivu-color-picker-down{
  padding: 5px;
}
.ivu-color-picker-color{
  width: 20px;
  height: 20px;
  border-radius: 4px;
  overflow: hidden;
  top: 0;
}