.violation-summary {
  grid-template-columns: max-content max-content 1fr;
  align-items: center;
  gap: 10px;
}

.violation-summary > .violation-summary-card {
  width: auto;
  min-width: 142px;
  min-height: 46px;
  box-sizing: border-box;
  padding: 7px 11px;
  border-radius: 10px;
  gap: 7px;
  align-items: center;
}

.violation-summary-card b {
  font: 700 21px/1 system-ui, sans-serif;
}

.violation-summary-card span {
  font-size: 9px;
  line-height: 1.15;
}

.violation-summary-card.state-alert,
.violation-summary-card.state-danger {
  background: #fff1ef;
  border-color: #efb4ad;
  color: #9d251f;
}

.violation-summary-card.state-clear {
  background: #edf8f1;
  border-color: #afd8bd;
  color: #17663d;
}

.violation-summary-card.state-alert span,
.violation-summary-card.state-danger span,
.violation-summary-card.state-clear span {
  color: inherit;
}

.bulk-report-row header > em {
  flex: 0 0 auto;
  width: auto;
  min-width: 112px;
  max-width: 132px;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid;
  border-radius: 9px;
  text-align: center;
  font-size: 12px;
  line-height: 1.15;
  overflow-wrap: normal;
}

.bulk-report-row.violation header > em {
  background: #fff1ef;
  border-color: #efb4ad;
  color: #9d251f;
}

.bulk-report-row.compliant header > em {
  background: #edf8f1;
  border-color: #afd8bd;
  color: #17663d;
}

@media (max-width: 720px) {
  .violation-summary {
    grid-template-columns: repeat(2, max-content);
  }

  .violation-summary > button {
    grid-column: 1 / -1;
  }
}

@media print {
  .bulk-report-row header > em {
    min-width: 29mm;
    max-width: 34mm;
    padding: 1.5mm 2mm;
    font-size: 9pt !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}