/* Scoped to the usage table's latency values on desktop and mobile. */
:is(
  .table-wrapper tbody tr[data-row-id] > td,
  [data-field="latency"] > div
) > div.flex.items-stretch.gap-2
  > div.grid[class~="grid-cols-[max-content_max-content]"].items-baseline
  > span.font-medium.tabular-nums {
  color: #059669 !important;
}

.dark :is(
  .table-wrapper tbody tr[data-row-id] > td,
  [data-field="latency"] > div
) > div.flex.items-stretch.gap-2
  > div.grid[class~="grid-cols-[max-content_max-content]"].items-baseline
  > span.font-medium.tabular-nums {
  color: #34d399 !important;
}

:is(
  .table-wrapper tbody tr[data-row-id] > td,
  [data-field="latency"] > div
) > div.flex.items-stretch.gap-2:has(
  > div.grid[class~="grid-cols-[max-content_max-content]"].items-baseline
) > span.w-1.shrink-0.rounded-full[aria-hidden="true"] {
  background-image: none !important;
  background-color: #10b981 !important;
}