.cluster-detail-container-border {
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.01), 0 3px 6px 3px rgba(0, 0, 0, 0.01), 0 2px 6px 0 rgba(0, 0, 0, 0.03);
  border-radius: 12px;
}

.cluster-detail-container {
  &-main {
    .header-chart-container {
      height: 244px;
      margin-bottom: 12px;
      .cluster-detail-container-border();
      .dcloud-spin.dcloud-spin-spinning {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
      }
    }

    .content {
      display: flex;
      width: 100%;
      height: calc(100vh - 404px);
      min-height: 526px;

      .multiple-chart-container {
        flex: 1;
        height: 100%;
        overflow: hidden;
        .cluster-detail-container-border();
        > div {
          width: 100%;
          height: 100%;
          padding: 16px;
          overflow: hidden auto;
        }
        &-loading {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }

      .config-change-records-container {
        width: 240px;
        height: 100%;
        margin-left: 12px;
        .cluster-detail-container-border();
      }
    }
  }
}

.cluster-detail-chart-box {
  position: relative;
  width: 100%;
  height: 244px;
  background: #f8f9fa;
  border-radius: 8px;

  .expand-icon-box {
    position: absolute;
    z-index: 1000;
    top: 14px;
    right: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    border-radius: 50%;
    transition: background-color 0.3s ease;

    .expand-icon {
      color: #adb5bc;
      line-height: 24px;
    }

    &:hover {
      background: rgba(33, 37, 41, 0.06);
      .expand-icon {
        color: #74788d;
      }
    }
  }
}
.cluster-detail-chart-box-title {
  padding: 18px 0 0 20px;
  font-family: @font-family-bold;
  line-height: 16px;
  .name {
    font-size: 14px;
    color: #212529;
  }
  .unit {
    font-size: 12px;
    color: #495057;
  }
  > span {
    cursor: pointer;
  }
}