.ops-game.dormant::before {
  background: #758095;
}

.health-chip.dormant {
  color: #aeb8c9;
  border-color: #566174;
}

.ops-application {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding: 15px;
  overflow: hidden;
}

.ops-application-list {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 8px;
  min-width: 0;
}

.ops-application > div:first-child,
.ops-application strong,
.ops-application small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.replica-state {
  color: #a9a0a6 !important;
}

.application-states {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 16px;
  align-items: flex-start;
}

.state-group {
  min-width: 0;
}

.argo-state {
  flex-wrap: wrap;
}

.state-group > b {
  display: block;
  color: #68616a;
  font-size: 7px;
  letter-spacing: .12em;
  margin-bottom: 4px;
}

.runtime-state {
  display: block;
  padding: 4px 6px;
  border: 1px solid #4b4248;
  white-space: nowrap;
  font-size: 8px;
  font-weight: 900;
}

.runtime-state.available { color: var(--good); border-color: #285343; }
.runtime-state.degraded { color: #ff778b; border-color: #763044; }
.runtime-state.scaling { color: var(--warn); border-color: #705a2c; }
.runtime-state.dormant { color: #aeb8c9; border-color: #566174; }
.runtime-state.infrastructure,
.runtime-state.no-workload { color: #9d92a1; border-color: #4b424f; }

@media (min-width: 1500px) {
  .ops-application-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  .ops-application-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .ops-application-list { grid-template-columns: 1fr; }
}