.invoice-history-strip {
  margin: 0 0 14px;
  padding: 13px;
  border: 1px solid #dfe5ee;
  border-radius: 14px;
  background: #fff;
}

.invoice-history-strip > small {
  color: #77839a;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
}

.invoice-history-strip > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
}

.invoice-history-strip article {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid #e8ebf1;
  border-radius: 10px;
  background: #f9fafc;
}

.invoice-history-strip article.current {
  border-color: #f1b2c8;
  background: #fff6f9;
}

.invoice-history-strip article span,
.invoice-history-strip article b,
.invoice-history-strip article em,
.invoice-history-strip article strong,
.invoice-history-strip article i {
  display: block;
}

.invoice-history-strip article b,
.invoice-history-strip article strong {
  color: #172858;
  font-size: 10px;
}

.invoice-history-strip article em {
  max-width: 105px;
  margin-top: 3px;
  overflow: hidden;
  color: #7b879c;
  font-size: 8px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.invoice-history-strip article > span:last-child {
  text-align: right;
}

.invoice-history-strip article i {
  width: max-content;
  margin: 4px 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #fff0e9;
  color: #c24b2b;
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.invoice-history-strip article i.paid {
  background: #e8f7ee;
  color: #188451;
}

.receipt-actions .invoice-paid-off {
  grid-column: 1 / -1;
  padding: 12px;
  border: 1px solid #b8dfca;
  border-radius: 9px;
  background: #f0faf4;
  color: #188451;
  text-align: center;
  font-size: 11px;
  font-weight: 900;
}

@media (max-width: 760px) {
  .invoice-history-strip > div {
    grid-template-columns: 1fr;
  }
}