.fuel-settings-card {
  padding: 12px;
  border: 1px solid #dfe9e6;
  border-radius: 13px;
  background: #fbfdfc;
}

.fuel-settings-icon {
  color: var(--teal);
  background: var(--mint);
}

.fuel-settings-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 11px;
}

.fuel-settings-fields label > span {
  display: block;
  margin-bottom: 5px;
  color: #536b74;
  font-size: 10px;
  font-weight: 600;
}

.fuel-amount-input {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid #dce5e6;
  border-radius: 8px;
  background: #fff;
}

.fuel-amount-input:focus-within {
  outline: 2px solid #0d766c55;
  outline-offset: 1px;
  border-color: #6cad9e;
}

.fuel-amount-input input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 23px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.fuel-amount-input input::placeholder {
  color: #98a4a8;
  font-size: 10px;
}

.fuel-amount-input > span {
  display: block;
  margin-top: 2px;
  color: #76858c;
  font-size: 9px;
}

.fuel-settings-help {
  margin: 8px 0 0;
  color: #76858c;
  font-size: 9px;
  line-height: 1.5;
}

.fuel-average-rate {
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #dce8e5;
  border-radius: 9px;
  background: #eff7f5;
}

.fuel-average-rate > span,
.fuel-average-rate > output,
.fuel-average-rate > small {
  display: block;
}

.fuel-average-rate > span {
  color: #536b74;
  font-size: 10px;
}

.fuel-average-rate > output {
  margin-top: 5px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.fuel-average-rate > small {
  margin-top: 4px;
  color: #657c85;
  font-size: 9px;
  line-height: 1.5;
}

.map-route-summary .metric #metric-fuel {
  font-size: 14px;
  white-space: normal;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
  .map-route-summary .metric #metric-fuel {
    font-size: 12px;
  }
}