@import "../../../styles/base.less";

.base-index-box {
  &-tag {
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;

    &-item {
      display: flex;
      padding-right: 30px;
      align-items: center;

      &-title {
        .min-title();
        padding-right: 4px;
        cursor: pointer;
      }

      &-title:hover {
        color: #2a8fff;
      }
    }
  }
}

.base-info-title {
  .middle-title();
  border-bottom: 1px solid #dbe0e4;
  padding-bottom: 8px;
}

.clear-info {
  background: white;
  padding: 20px;
  display: flex;
  justify-content: space-around;

  .option-panel {
    flex: 1;
    max-width: 600px;
    padding-left: 30px;

    .op-btn {
      margin-bottom: 10px;
    }

    .tip {
      color: red;
      padding: 10px 0px;

      &.more-padding {
        padding-bottom: 20px;
        padding-top: 20px;
      }
    }

    .sql-content {
      margin: 15px 0px;
      padding: 10px 0px;
      height: 250px;
      border: 1px solid #e8e8e8;
    }
  }

  .table-wrapper {
    flex: 1;
  }
}

.tpl-dcdr {
  position: relative;

  &-btnbox {
    position: absolute;
    top: -78px;
    right: 0;
  }
}

.detail-wrapper.index-tpl-detail {
  height: calc(100vh - 244px);
  margin: 0;
  border-radius: 0 0 8px 8px;

  &.service {
    height: calc(100vh - 265px);
    padding-top: 20px;

    .tpl-detail-mapping {
      height: calc(100vh - 335px);
    }
  }

  .base-info-box,
  .json-editor-wrapper {
    margin-top: 0;
  }
}
