.w-fit {
  width: fit-content !important;
}

.datagrid table,
.table-sm {
  font-size: small;
}

.icon svg {
  fill: currentColor;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

span.icon {
  display: inline-block;
  width: 20px;
}

.legend-status .legend {
  display: inline-block;
  padding: 2px 12px 2px 8px;
  margin-right: 4px;
  border-left: 5px solid #999;
  font-size: 0.85em;
  min-width: 70px;
  text-align: left;
}

table tbody tr.status-wrong-payment td,
.legend-status .status-wrong-payment {
  background: #a6e2a9 !important;
}
table tbody tr.status-signed td,
.legend-status .status-signed {
  background: #f9f9f9 !important;
}

tbody tr.status-sub td,
.legend-status .status-sub {
  background: #cce7f0 !important;
}
table tbody tr.status-signed-out td,
.legend-status .status-signed-out {
  background: #fff9b2 !important;
}
tbody tr.status-young td,
.legend-status .status-young {
  background: repeating-linear-gradient(
    #f9f9f9,
    #f9f9f9 2px,
    #d3d3d3 2px,
    #d3d3d3 3px
  ) !important;
}
:root {
  --color-young: #f9f9f9;
  --color-sub: #cce7f0 ;
  --color-signed: #f9f9f9;
  --color-signed-out: #fff9b2;
  --color-wrong-payment: #a6e2a9;
}
table tbody tr.status-young.status-sub td {
  background: repeating-linear-gradient(
    var(--color-sub),
    var(--color-sub) 2px,
    #c5c5c5 2px,
    #c5c5c5 3px
  ) !important;
}
table tbody tr.status-young.status-signed-out td {
  background: repeating-linear-gradient(
    var(--color-signed-out),
    var(--color-signed-out) 2px,
    #d3d3d3 2px,
    #d3d3d3 3px
  ) !important;
}
table tbody tr.text-danger td {
  color: rgba(var(--bs-danger-rgb),var(--bs-text-opacity)) !important;
}