:root {
  --ng-in: #00a000;
  --ng-out: #0000ff;
  --ng-mrtg-in-fill: rgba(0, 204, 0, .72);
  --ng-mrtg-in-line: #00a000;
  --ng-mrtg-out-line: #0000ff;
  --ng-mrtg-bg: #d8d8d8;
  --ng-mrtg-grid: #7f7f7f;
  --ng-mrtg-axis: #666666;
}

.ng-mrtg-stats {
  display: grid;
  gap: 1px;
  margin-top: 8px;
  padding: 3px;
  border: 1px solid #777;
  border-radius: 0;
  background: #d0d0d0;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  font-variant-numeric: tabular-nums;
}

.ng-mrtg-stats[hidden] { display: none; }

.ng-mrtg-stats-head,
.ng-mrtg-stats-row {
  display: grid;
  grid-template-columns: minmax(130px, 1.35fr) repeat(3, minmax(82px, 1fr));
  gap: 1px;
  align-items: center;
}

.ng-mrtg-stats-head {
  color: #222;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.ng-mrtg-stats-head span,
.ng-mrtg-stats-row strong,
.ng-mrtg-stats-row span {
  min-height: 23px;
  padding: 4px 7px;
  border: 1px solid #888;
  background: #e3e3e3;
}

.ng-mrtg-stats-head span:not(:first-child),
.ng-mrtg-stats-row span { text-align: right; }

.ng-mrtg-stats-row strong {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
}

.ng-mrtg-stats-row i {
  display: inline-block;
  width: 14px;
  height: 9px;
  border: 1px solid currentColor;
}

.ng-mrtg-in { color: var(--ng-mrtg-in-line); }
.ng-mrtg-in i { background: var(--ng-mrtg-in-fill); }
.ng-mrtg-out { color: var(--ng-mrtg-out-line); }
.ng-mrtg-out i {
  height: 3px;
  border: 0;
  background: var(--ng-mrtg-out-line);
}

@media (max-width: 560px) {
  .ng-mrtg-stats { overflow-x: auto; }
  .ng-mrtg-stats-head,
  .ng-mrtg-stats-row { min-width: 440px; }
}