cyber-narrator-cn-ui/src/assets/css/components/views/charts2/npmNetworkQuantity.scss

.npm-network-quantity {
  display: flex;
  border: 1px solid #E2E5EC;
  height: 100%;
  width: 100%;
  border-radius: 4px;
  .single-value:nth-of-type(1) {
    border-left: none;
  }
  .single-value {
    flex: 1;
    padding-left: 20px;
    height: calc(100% - 48px);
    margin: auto;
    border-left: 1px solid #E2E5EC;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .single-value__title {
      font-size: 14px;
      color: #575757;
      font-weight: 400;
    }
    .single-value__content {
      margin: 10px 0 12px 0;
      display: flex;
      .single-value__content-number {
        font-family: Helvetica-Bold;
        font-size: 24px;
        color: #353636;
        font-weight: 700;
        margin-right: 12px;
      }
      .single-value__content-trend {
        display: flex;
        margin-left: 6px;
        align-items: center;
        justify-content: center;
        margin-top: 2px;
        border-radius: 10px;
        font-weight:500;
        font-size: 12px;
        height: 20px;
        padding: 0 5px;
      }
      .single-value__content-trend-black {
        background-color: rgba(113,113,113,0.12);
        color: #717171;
        width: 36px;
      }
      .single-value__content-trend-green {
        background-color: rgba(126,159,84,0.12);
        color:#7E9F54;
      }
      .single-value__content-trend-red {
        background-color: rgba(226,97,84,0.12);
        color:#E26154;
        .cn-icon-rise1 {
          color: #E44D3E;
        }
      }
    }
    .single-value__circle {
      display: flex;
      font-size: 12px;
      color: #717171;
      font-weight: 400;
      .single-value__circle-p95 {
        margin-right: 10px;
      }
    }
  }
}