.hub-metric-step-person {
  display: inline-block;
  width: 100%;
  max-width: 200px;
  vertical-align: top;
  margin: 10px;
}
.person-kpi {
  padding: 10px;
}
.hub-metric-title-stage {
  border-bottom: solid #1111;
  margin: auto;
  margin-top: 80px;
}
.hub-metric-person-name {
  margin-bottom: 0px;
  font-size: 1rem;
}
.hub-metrics-kpi {
  text-align: center;
  padding: 10px;
  display: inline-block;
  width: 350px;
  height: 100px;
}
.hub_metrics_kpi_content {
  text-align: center;
} 
.hub_metrics_kpi_content .kpi-value {
  font-size: 3rem;
  margin-top: 80px;
  margin-bottom: 80px;
}
.hub-metric-step-person .kpi-value {
  font-size: 1rem;
  font-weight: bold;
}
#hub-metrics-dashboard .kpi-value.bols {
  display: block;
  margin: 0px;
  padding: 0px;
  color: #666;
  font-weight: 400;
}
#hub_metrics_kpi_table_content {
}
#hub-metrics-dashboard {
  margin-top: 100px;
}
#hub-metrics-dashboard h1, 
#hub-metrics-dashboard h2, 
#hub-metrics-dashboard h3, 
#hub-metrics-dashboard h4, 
#hub-metrics-dashboard h3, 
#hub-metrics-dashboard h5{
  text-transform: uppercase;
  text-align: center;
  color: #666;
}
.hub-metrics-kpi h4 {
  margin: 0px;
  text-transform: uppercase;
  color: #666;
}
.hub-metrics-kpi h4 span {
  display: block;
  font-weight: 200;
  font-size: 12px;
  text-transform: initial;
}
/* With stages */
.step-link {
  text-decoration: none;
  color: #666;
  cursor: default;
  opacity: .4;
}
body.mode-select-dark .step-link {
  opacity: .7;
}
body.mode-select-dark #hub-metrics-dashboard h1, 
body.mode-select-dark #hub-metrics-dashboard h2, 
body.mode-select-dark #hub-metrics-dashboard h3, 
body.mode-select-dark #hub-metrics-dashboard h4, 
body.mode-select-dark #hub-metrics-dashboard h3, 
body.mode-select-dark #hub-metrics-dashboard h5,
body.mode-select-dark #hub-metrics-dashboard .kpi-value.bols{
  color: #dedede;
}
.step .kpi-value {
  font-size: 13px;
}
.step .circle.low {
  background: #34a853;
  color: white;
}
.step .circle.high {
  background: #ea4335;
  color: white;
}
.step .circle.medium {
  background: #f9a825;
  color: white;
}
#schedule-metrics {
  max-width: 350px;
}
.kpis-steps {
  display: inline-flex;
  gap: 40px;
  position: relative;
}
#breadcrumb-kpis-steps {
    margin-top: 35px;
    margin-top: 80px;
    margin-bottom: 40px;
}
.kpis-steps::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  height: 2px;
  background: #ddd;
  z-index: 0;
}

.step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: help;
}

.step .circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #999;
  margin-bottom: 6px;
  transition: background 0.3s, color 0.3s;
}
.step span.label {
  font-size: 12px;
  transition: color 0.3s;
  font-weight: 400;
}
.step:hover:not(.disabled-link) span.label {
}
.step.completed i, 
.step.completed span.label {
    color: #4caf50;
}
.step.completed span.label {
}
.step.active i,
.step.active span.label  {
  color: #2196f3;
}
.step.active span.label {
  font-weight: bold;
}

.step.completed:hover .circle {
  background: #43a047;
}