.c7ncd-deployment-re {
  &-grid {
    &-left {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(1rem, 1.3rem));
      grid-template-rows: .28rem;
      grid-auto-rows: .28rem;
      grid-column-gap: .16rem;
      grid-row-gap: .24rem;
      margin-left: .16rem;
      justify-content: space-between;

      &-item {
        display: grid;
        grid-template-columns: .25rem .55rem 1fr;
        grid-template-rows: .28rem;
        grid-gap: .03rem;
        justify-content: space-between;
      }

      &-number {
        margin-left: .17rem;
        text-align: right;
        line-height: .26rem;
        font-size: .2rem;
        font-weight: 500;
      }

      &-icon {
        position: relative !important;
        font-size: .24rem !important;
        z-index: 0 !important;

        &::before {
          position: absolute;
          bottom: 0;
        }

        &::after {
          content: '';
          position: absolute;
          top: 0;
          right: -0.03rem;
          width: .2rem;
          height: .2rem;
          border-radius: 0.04rem;
          background-color: #b6c2cd;
          z-index: -1;
        }
      }

      &-name {
        line-height: .26rem;
        font-size: .12rem;
        white-space: nowrap;
        color: var(--text-color3);
      }
    }

    &-right {
      display: grid;
      grid-template-columns: repeat(auto-fit, .4rem);
      justify-content: space-around;
      grid-gap: .18rem;
      align-items: center;

      &-item {
        display: grid;
        grid-template-columns: .4rem;
        grid-row-gap: .16rem;
        justify-content: space-between;
      }

      &-text {
        text-align: center;
        line-height: .18rem;
        white-space: nowrap;
      }
    }
  }

  &-status {
    width: .4rem;
    height: .4rem;
    border: 2px solid;
    border-radius: .09rem;
    text-align: center;
    line-height: .36rem;
    font-size: .16rem;
    font-weight: 600;

    &_runningInstanceCount {
      color: rgba(0, 191, 165, 1);
      background: rgba(0, 191, 165, .2);
    }

    &_operatingInstanceCount {
      color: rgba(77, 144, 254, 1);
      background: rgba(77, 144, 254, .2);
    }

    &_stoppedInstanceCount {
      color: rgba(0, 0, 0, .36);
      background: rgba(0, 0, 0, .04);
    }

    &_failedInstanceCount {
      color: rgba(244, 67, 54, 1);
      background: rgba(244, 67, 54, .2);
    }
  }

  &-card-wrap {
    display: flex;
    margin-bottom: .16rem;
  }

  &-card {
    background: #fff;
    box-shadow: 0 0.01rem 0.05rem 0 rgba(0, 0, 0, 0.12), 0 0.02rem 0.02rem 0 rgba(0, 0, 0, 0.14), 0 0.04rem 0.08rem 0 rgba(36, 66, 48, 0.06);
    border-radius: 0.02rem;
    padding: 0.16rem 0.2rem 0.2rem;

    &_left {
      flex: 3;
      margin-right: .18rem;

      .c7ncd-deployment-re-items {
        padding-left: .2rem;
      }
    }

    &_right {
      flex: 2;
    }

    &-title {
      margin-bottom: .16rem;
      font-size: .16rem;
      font-weight: 500;
      line-height: .22rem;
    }

    &-table-title {
      display: flex;
    }
  }

  &-select {
    margin-bottom: .12rem;
    margin-left: auto;
  }

  &-table {
    &-pod {
      display: flex;
      align-items: center;
    }

    &-name {
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      display: inline-block;
      width: 80%;
    }
  }
}