@import '~antd/es/style/themes/default.less';

.reportsDataSourceSetting {
  height: 100%;
  overflow: hidden;

  .contentWrapper {
    display: flex;
    flex-direction: column;
    height: calc(100% - 16px);
    margin: 8px;
    @media screen and (min-width: 1680px) {
      .content {
        grid-template-columns: repeat(5, 1fr);
      }
    }
    @media screen and (max-width: 1680px) {
      .content {
        grid-template-columns: repeat(4, 1fr);
      }
    }
    @media screen and (max-width: 1320px) {
      .content {
        grid-template-columns: repeat(3, 1fr);
      }
    }
    @media screen and (max-width: 960px) {
      .content {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    .controlRow {
      display: flex;
      flex-direction: column;
      margin-bottom: 8px;
      padding: 8px;
      background: #ffffff;

      :global {
        .@{ant-prefix}-form-item {
          margin-bottom: 0;
        }
      }
    }

    .content {
      display: grid;
      grid-gap: 10px;
      padding-bottom: 8px;
      overflow: scroll;

      .card {
        height: 198px;

        .cardInfo {
          padding-left: 48px;

          .cardInfoItem {
            margin-bottom: 4px;
            color: rgb(100, 100, 100, 0.65);

            .item {
              color: rgba(58, 58, 58, 0.55);
              font-weight: bold;
            }

            .blue {
              color: rgba(23, 130, 252, 0.65);
            }

            .ellipsis {
              display: inline-block;
              max-width: 120px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              vertical-align: top;
            }
          }
        }
      }
    }
  }
}