cyber-narrator-cn-ui/src/assets/css/components/views/detections/detection-overview.scss

.detection-detail-overview {
  display: flex;
  position: relative;
  padding: 0 30px;

  &>div {
    flex: 0 0 50%;
    width: 1px;
    display: flex;
    flex-direction: column;

     .overview__metric {
       display:flex;
       flex-direction: row;
       padding-top: 10px;

       .metric__column {
         display:flex;
         flex-direction: column;
         margin-right: 15px;
       }
     }

    .overview__title {
      padding: 10px 0;
      color: #333;
      font-weight: bold;
      font-size: 14px;

      &:first-of-type {
        padding-top: 0;
      }
    }

    .overview__row {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      flex-wrap: nowrap;
      padding: 2px 10px 2px 0;
      font-size: 14px;
      word-break: break-all;

      .row__label {
        padding-right: 20px;
        min-width: 100px;
        color: #6B717B;
      }

      .row__charts {
        height: 20px;
        width: 80px;
      }

      .row__content--metric {
        display: flex;
        flex-wrap: nowrap;
        color: #666666;
        font-size:14px;
        font-weight: 400;
      }

      .row__content, .row__content1 {
        display: flex;
        //color: #3976CB;
        color: #046ECA;
        font-weight: 500;
        font-size: 14px;
        align-items: center;
        flex-wrap: wrap;

        &.row__content--link {
          font-style: italic;
          text-decoration: underline;
          color: #1890FF;
          cursor: pointer;
        }
        .row__content--link{
          font-style: italic;
          text-decoration: underline;
          color: #1890FF;
          cursor: pointer;
        }
        span{
          font-style: italic;
          color: #046ECA;
        }
        .row__content--span {
          font-style: italic;
          color: #1890FF;
        }

        .row__content__icon {
          font-size: 14px;
          margin-right: 5px;
          color: #1890FF;
        }

        .row__content__svg {
          font-size: 14px;
          margin-right: 7px;
        }
      }
      .row__content1 {
        display: block;
        padding-right: 50px;
      }
    }
  }
}
.overview__row-timeline {
  display: flex;
  flex-wrap: wrap;
  padding: 17px;
  background-color: #F9F9F9;

  .row-timeline {
    flex: 0 0 110px;
    display: flex;
    flex-direction: column;

    .row-timeline__time-info {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-basis: 16px;
      font-size: 12px;
      color: #666666;
    }
    .row-timeline__line {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 1px;
      margin: 5px 0;
      background-color: #CBD0D5;
      overflow: visible;

      .line-point-larger {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 12px;
        width: 12px;
        border-radius: 50%;
        background-color: #F9F9F9;
        border: 1px solid #666;

        .line-point {
          background-color: #666;
        }
      }
      .line-point {
        height: 6px;
        width: 6px;
        border-radius: 50%;
        background-color: #A0B5CA;
      }
    }
    .row-timeline__card {
      padding: 8px 4px 0;

      &>div {
        display: flex;
        flex-direction: column;
        padding: 10px;
        background-color: #EFF2F5;
        border-radius: 2px;

        .timeline__severity {
          display: flex;
          align-items: center;
          margin-bottom: 10px;

          &.timeline__severity--critical i {
            color: #D84C4C;
          }
          &.timeline__severity--high i {
            color: #FE845D;
          }
          &.timeline__severity--medium i {
            color: #FEB65A;
          }
          &.timeline__severity--low i {
            color: #F6C738;
          }
          &.timeline__severity--info i {
            color: #D1BD50;
          }
          i {
            font-size: 16px;
          }
          span {
            padding-left: 5px;
            font-size: 14px;
            //color: #3976CB;
            color: #046ECA;
            font-weight: 600 !important;
          }
        }
        .timeline__security-type {
          font-size: 12px;
          color: #046ECA;
          margin-bottom: 10px;
          font-weight: 500;
          height: 36px;
        }
        .timeline__start-time {
          font-size: 12px;
          color: #666666;
        }
      }
    }
    .row-timeline__foot {
      display: flex;
      flex-direction: column;
      padding: 2px 0 10px;

      .detection-ip {
        display: flex;
        align-items: center;
        padding-left: 5px;
        color: #666;
        font-size: 12px;

        &.detection-ip__current {
          color: #D84C4C;
        }
        i {
          font-size: 12px;
        }
      }
    }
  }
}
.row__tag, .row__tag__level {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 4px;
  //color: white;
}
.row__tag__level {
  height: 16px;
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  border-radius: 2px;
}

.performance-event-remark {
  font-family: NotoSansSChineseRegular;
  font-size: 12px;
  color: #353636;
  font-weight: 400;
}