.metrics-count {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  border: 1px solid #676767;
  width: 100%;
}

.metric {
  display: flex;
}

.metric div{
  padding: 10px;
  border: 1px solid #676767;
}

.metric-status{
  min-width: 150px;
  width: 100%;
}

.metric-value {
  width: 100%;
  text-align: right;
}

@media (min-width: 700px) {
  .metric-status {
    width: 30%;
  }
}

@media (max-width: 700px) {
  .metric{
    flex-wrap: wrap;
  }

  .metric-status{
    text-align: center;
  }
}

.metric-status-ok{
  background: #9effa7;
}

.metric-status-ng {
  background: #fff79b;
}

.metric-status-dead{
  background: #ff9680;
}

.metric-status-unknown{
  background: aquamarine;
}