@import '../../../assets/variable.less';
.module-user-tag-overview {
  &-create-modal {
    .ant-modal-content {
      width: 720px;
      background: #fff;
      .ant-modal-header {
        position: relative;
        z-index: 1;
        padding: 0 24px;
        background: #fff;
        background: transparent;
      }
      .ant-modal-close-x {
        .ant-modal-close-icon {
          margin-top: 28px;
          margin-right: 12px;
          font-size: 20px;
        }
      }
    }
    .modal-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
    }
    ol {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      column-gap: 12px;
      row-gap: 16px;
      p {
        margin: 0;
      }
      li {
        display: flex;
        flex-direction: row;
        align-items: center;
        // position: relative;
        width: calc(50% - 6px);
        height: 110px;
        padding: 0 16px;
        // margin: 0;
        background: #fafafb;
        border-radius: 8px;
        // box-shadow: 0px 2px 32px 0px rgba(238, 241, 247, 0.8);
        transform: translate(0, 0);
        cursor: pointer;
        transition: all 0.3s;
        img {
          // position: absolute;
          // top: 23px;
          // left: 9px;
          width: 40px;
          height: 40px;
          margin-right: 12px;
        }
        > div {
          // position: absolute;
          // top: 29px;
          // left: 80px;
          :nth-child(1) {
            display: flex;
            flex-direction: row;
            margin-bottom: 4px;
            color: #021429;
            font-weight: 500;
            font-size: 14px;
            span {
              display: flex;
              align-items: center;
              height: 24px;
              margin-left: 8px;
              padding: 0 8px;
              color: var(--io-i-, #165dff);
              font-weight: 400;
              font-size: 14px;
              background: var(--io-i1-, #e8efff);
              border-radius: 4px;
            }
          }
          :nth-child(2) {
            // width: 120%;
            color: #67727f;
            font-size: 12px;
            // transform: scale(0.8);
            // transform-origin: 0 0;
          }
        }
      }
      li:hover {
        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
        // box-shadow: 0 16px 32px 0 rgba(144, 152, 163, 0.15);
        // transform: translate(-5px, -5px);
        // transition: all 0.3s;
      }
    }
  }
  &-header {
    padding: @padding-lg @padding-lg 0;
    border-bottom: 1px solid @border-color-split;
  }
  &-content {
    padding: @padding-md @padding-lg @padding-lg;
    .module-user-tag-overview-table-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: @margin-md;
      color: @text-color-secondary;
    }
  }
  &-table-bar-btns {
    .ant-btn:not(:last-child) {
      margin-right: 16px;
    }
  }
  &-table-bar-btns {
    > .ant-btn:first-child {
      span {
        margin-right: 8px;
      }
    }
  }
  &-table-bar-btns {
    .ant-btn:first-child {
      margin-right: 16px;
    }
  }
}