$font-size: 12px;
.graph-detail-basic-info {
  position: relative;
  padding-bottom: 12px;
  display: flex;
  justify-content: space-between;
  //height: 100%;

  .graph-detail-header {
    display: flex;
    flex-direction: column;

    .entity-graph-type {
      font-family: NotoSansSChineseRegular;
      font-size: 12px;
      color: #717171;
      font-weight: 400;
    }
  }

  .entity-type {
    color: #717171;
  }

  .graph-basic-info {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .graph-basic-info-name__block {
      display: flex;
      align-items: center;

      .graph-basic-info-name {
        padding-right: 10px;
        font-family: Helvetica-Bold;
        font-size: 20px;
        color: #353636;
        font-weight: 700;
      }

      .graph-basic-info-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 18px;
        width: 18px;
        border-radius: 50%;
        background-color: #EFF1F4;
        cursor: pointer;
        flex-shrink: 0;

        i {
          color: #717171;
          font-size: 10px;
          -webkit-transform: scale(0.8); // 强制给文字进行缩放，达到12px以下小字体的效果
        }
      }
    }
  }

  .graph-detail__icon {
    width: 50px;
    height: 50px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    margin-right: 10px;
    border-radius: 50%;
    background-color: #F3F7FA;

    i {
      font-size: 26px;
      color: #4E84B4;
    }
  }
}

.graph-close {
  color: #575757;
  font-size: 8px;
  cursor: pointer;
}

.graph-basic-info__block {
  margin-top: 12px;
  margin-bottom: 18px;

  .graph-header__icon {
    width: 3px !important;
    height: 14px !important;
  }

  .graph-basic-info__block-content {

    .graph-content-item, .graph-content-relationship-item {
      display: flex;
      line-height: 24px;
    }

    .graph-content-item {

      .graph-content-item-label, .graph-content-item-value {
        width: 100px;
        font-family: NotoSansSChineseRegular;
        font-size: $font-size;
        color: #717171;
        font-weight: 400;
        padding-right: 10px;
        flex-shrink: 0;
      }

      .graph-content-item-value {
        width: 230px;
        color: #353636;
        font-weight: 400;
        overflow-wrap: break-word;
        line-height: normal;
      }
    }

    .graph-content-relationship-item {
      justify-content: space-between;
      line-height: 24px;
      cursor: pointer;

      &:hover {
        background: rgba(135, 135, 135, 0.1);
      }

      .graph-relationship-item-label, .graph-relationship-item-value {
        font-family: NotoSansSChineseRegular;
        font-size: $font-size;
        color: #353636;
        font-weight: 400;
        //height: 40px;
        display: flex;
        align-items: center !important;
        padding-top: 1px;

        .graph-relationship-item-label-icon {
          font-size: 14px;
        }
      }

      .graph-relationship-item-value {
        color: #717171;
      }
    }
  }

  .graph-tag-list {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 6px 0;

    .graph-tag-item {
      margin-bottom: 10px;
      margin-right: 9px;
      padding: 0 8px;
      height: 24px;
      line-height: 24px;
      font-size: 12px;

      span {
        margin-top: -2px;
      }
    }
  }
}

.padding-b-10 {
  padding-bottom: 10px;
}

.padding-b-4 {
  padding-bottom: 4px;
}

//修改popover样式
.graph-popover {
  width: auto !important;
  background: #303133 !important;
  color: #fff !important;
  font-size: 12px !important;
  padding: 10px !important;
}

.graph-popover .el-popper__arrow::before {
  background: #303133 !important;
}

.graph-expand-relationship__icon {
  font-size: 13px;
  &:hover {
    color: #D80000 !important;
  }
}

.graph-basic-info__block-title {
  font-family: NotoSansHans-Medium;
  font-size: 13px;
  color: #353636;
  font-weight: 600;
}