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

.npm-app-event {
  $blue:#046ECA;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .metric-select {
    color:#575757;
    display: flex;
    margin-bottom: 10px;
    flex-direction: row-reverse;
    align-items: center;
    .el-scrollbar {
      width:100%;
    }
    span {
      font-size: 12px;
      font-weight: 400;
    }
    .option__select.select-column {
      border-radius: 2px;
      .el-input__inner {
        width: 100px;
        height:24px;
        padding-left: 4px;
        font-size: 12px;
        color: #2C72C6;
        font-weight:400;
      }
    }
    .option-popper {
      margin-bottom:0px;
      .el-select-dropdown__item.selected {
        span{
          color: #2C72C6 !important;
        }
      }
    }
  }
  .npm-app-event-table {
    height: calc(100% - 30px) !important;
    border: 1px solid #E2E5EC;
    border-radius: 4px;
    padding: 1px;
    .el-table__header-wrapper {
      tr th {
        padding: 4px 0;
        .data-column__span {
          font-family: NotoSansHans-Medium;
          font-size: 12px;
          color: #353636;
          font-weight: 500;
        }
      }
    }
    .el-table__body-wrapper.is-scrolling-none {
      tr td {
        padding: 8px 0 0 0;
      }
    }
  }
  .data-app-event-table{
    display: flex !important;
    height: auto;
    line-height: 20px;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    .data-severity {
      font-size: 12px;
      color: #353636;
      font-weight: 400;
      margin-left:6px;
    }
    .red-dot {
      width:6px;
      height:6px;
      background: #E26154;
      border-radius: 3px;
      margin-right:4px;
    }
    .grey-dot {
      opacity: 0.35;
      background: #717171;
      border-radius: 3px;
      width:6px;
      height:6px;
      margin-right:4px;
    }
    .data-applications {
      font-size: 12px;
      color: $blue;
      font-weight: 400;
    }
    .data-eventType {
      font-family: NotoSansHans-Medium;
      font-size: 12px;
      color: $blue;
      font-weight: 500;
      background: #EBF1F4;
      border-radius: 4px;
      padding: 0 6px;
      margin-right:10px;
      min-width: fit-content;
      margin-bottom: 8px;
    }
    .data-eventCount {
      font-family: NotoSansHans-Medium;
      font-size: 12px;
      color: #046ECA;
      font-weight: 500;
      width:200px;
    }
  }
  .el-table--group::after,.el-table--border::after, .el-table::before {
    height: 0px;
  }
}