.endpoint:has([title="Production"]) [title="kanban"]::after,
.endpoint:has([title="Production"]) [title="kanban-api"]::after,
.endpoint:has([title="Staging"]) [title="mudawama-api"]::after,
.endpoint:has([title="Staging"]) [title="registry-api"]::after,
.endpoint:has([title="Staging"]) [title="registry-ui"]::after,
.endpoint:has([title="Shared"]) [title="signoz"]::after,
.endpoint:has([title="Shared"]) [title="windmill"]::after,
.endpoint:has([title="Shared"]) [title="pgadmin"]::after,
.endpoint:has([title="Shared"]) [title="logs"]::after {
  content: "VPN";
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  vertical-align: middle;
  background: rgba(234, 179, 8, 0.18);
  color: rgb(161, 98, 7);
}
.dark .endpoint:has([title="Production"]) [title="kanban"]::after,
.dark .endpoint:has([title="Production"]) [title="kanban-api"]::after,
.dark .endpoint:has([title="Staging"]) [title="mudawama-api"]::after,
.dark .endpoint:has([title="Staging"]) [title="registry-api"]::after,
.dark .endpoint:has([title="Staging"]) [title="registry-ui"]::after,
.dark .endpoint:has([title="Shared"]) [title="signoz"]::after,
.dark .endpoint:has([title="Shared"]) [title="windmill"]::after,
.dark .endpoint:has([title="Shared"]) [title="pgadmin"]::after,
.dark .endpoint:has([title="Shared"]) [title="logs"]::after {
  color: rgb(250, 204, 21);
}