.card-wrap{
  display: flex;
  justify-content: space-between;
  cursor: move;
  height: 64px;
  line-height: 64px;
  padding: 0 20px;
  color: #232F46;
  .left {
    width: 100%;
    display: flex;
    align-items: center;
    .comp-icon {
      display: block;
    }
    .drag-icon {
      display: none;
    }
    .card-title {
      font-size: 16px;
      line-height: 24px;
      font-family: 'Open Sans';
      font-weight: 400;
      font-size: 16px;
      font-style: normal;
    }
  }
  .more-btn {
    display: none;
    cursor: pointer;
  }
  &:hover {
    background: #E9F0FF;
    color: #2F54EB;
    .left {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 700;
      font-size: 16px;
      line-height: 24px;
      .comp-icon {
        display: none;
      }
      .drag-icon {
        display: block;
      }
      .card-title {
        font-weight: 600;
      }
    }
    .more-btn {
      display: block;
    }
  }
}

.active{
  background: #E9F0FF;
  color: #2F54EB;
  .left {
    .card-title {
      font-weight: 600;
    }
  }
  .more-btn {
    display: block;
  }
}
