.cardTitle {
  font-size: 16px;
  font-weight: 600;
  color: rgba(230, 237, 243, 0.85);
}

.rateCenter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.rateCircle {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: 10px solid rgba(85, 167, 34, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(85, 167, 34, 0.1);
}

.rateValue {
  font-size: 30px;
  font-weight: 600;
  color: #55a722;
  line-height: 1;
}

.rateLabel {
  font-size: 13px;
  color: rgba(230, 237, 243, 0.65);
  margin-top: 8px;
}

.rateInfo {
  font-size: 12px;
  color: rgba(230, 237, 243, 0.45);
  margin-top: 12px;
  text-align: center;
  line-height: 1.8;
}

.threatList {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
}

.threatRow {
  // row container
}

.threatRowHeader {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.threatLabel {
  &.color-critical { color: #ff4d4f; }
  &.color-high { color: #ff7a45; }
  &.color-medium { color: #faad14; }
  &.color-low { color: #52c41a; }
  &.color-info { color: #1890ff; }
}

.threatValue {
  font-weight: 500;
  &.color-critical { color: #ff4d4f; }
  &.color-high { color: #ff7a45; }
  &.color-medium { color: #faad14; }
  &.color-low { color: #52c41a; }
  &.color-info { color: #1890ff; }
}

.progressBarBg {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.progressBarFill {
  height: 100%;
  border-radius: 4px;

  &.bg-critical { background: #ff4d4f; }
  &.bg-high { background: #ff7a45; }
  &.bg-medium { background: #faad14; }
  &.bg-low { background: #52c41a; }
  &.bg-info { background: #1890ff; }
}

.tagMargin {
  margin: 0 8px 0 0;
}