#network_connection_visualization {
    margin: 1em;
}

#network_connection_visualization text {
    font-family: Roboto, sans-serif;
    fill: #383e42;
    stroke:none;
}

#settings_network_quality .network-quality-scrollable {
  overflow-y: auto;
  max-height: 50vh;
}

#settings_network_quality .network-quality-card {
  background: #f8f9fa;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: .8em;
  margin-bottom: .5em;
}

#settings_network_quality .network-quality-row {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding: 4px 0;
}

#settings_network_quality .network-quality-label {
  font-weight: 600;
}

#settings_network_quality .network-quality-ip-list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

#settings_network_quality .network-quality-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
}

#settings_network_quality .network-quality-quality-pill {
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 600;
  font-size: 12px;
    margin-right: .5em;
}

#settings_network_quality .network-quality-updated-at {
    font-size: 12px;
    color: #666;
    font-weight: normal;
    font-size: x-small;
}

#settings_network_quality .network-quality-bar {
  margin-top: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ececec;
  overflow: hidden;
}

#settings_network_quality .network-quality-bar-fill {
  height: 100%;
  transition: width 200ms linear;
}

#settings_network_quality .network-quality-details {
  margin-top: 1em;
}

#settings_network_quality .network-quality-details summary {
  cursor: pointer;
  font-weight: 600;
}

#settings_network_quality .network-quality-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.8em;
  margin-top: 1em;
  padding-right: 1em;
}

#settings_network_quality .network-quality-metric-card {
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

#settings_network_quality .network-quality-metric-header {
  display: flex;
  justify-content: space-between;
  gap: 0.75em;
  font-size: 12px;
  margin-bottom: 6px;
}

#settings_network_quality .network-quality-metric-latest {
  color: #666;
}

#settings_network_quality .network-quality-metric-latest-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

#settings_network_quality .network-quality-metric-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9d9d9d;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

#settings_network_quality .network-quality-metric-indicator-good {
  background: #2fb049;
}

#settings_network_quality .network-quality-metric-indicator-degraded {
  background: #d9bc00;
}

#settings_network_quality .network-quality-metric-indicator-critical {
  background: #bd0f0f;
}

#settings_network_quality .network-quality-metric-indicator-unknown {
  background: #9d9d9d;
}

#settings_network_quality .network-quality-sparkline {
  width: 100%;
  height: 72px;
  display: block;
}

#settings_network_quality .network-quality-sparkline polyline {
  fill: none;
  stroke: #2489ce;
  stroke-width: 1px;
    stroke-linejoin: round;
}

#settings_network_quality .network-quality-good {
  color: #2e8540;
  background: #eaf7ee;
}

#settings_network_quality .network-quality-degraded {
  color: #b28700;
  background: #fff7dd;
}

#settings_network_quality .network-quality-critical {
  color: #b23a2f;
  background: #fdebea;
}

#settings_network_quality .network-quality-unknown {
  color: #666;
  background: #eee;
}

#network-quality-refresh-params label {
    font-size: x-small;
    color: #777;
  padding-top: 0;
    padding-left: 1em;
}


#network-quality-refresh-params input[type="checkbox"] {
    margin: 0.2em 0.3em 0 0;
    height: 1em;
    width: 1em;
}

#network-quality-refresh-rate {
    font-size: x-small;
    padding: 0 0em;
    margin: 0;
    height: 1.3em;
    box-sizing: content-box;
    width: fit-content;
    border: 1px solid #ccc;
    text-align: right;
    outline-offset: 0;
}
#network-quality-refresh-rate:active,
#network-quality-refresh-rate:focus,
#network-quality-refresh-rate:hover {
    border-color: #999;
    outline: none;
}