/* Scope: only the controls card */
.inputs-centered .card-body,
.inputs-centered {
  text-align: center;
}

/* Make all form controls center themselves horizontally */
.inputs-centered .form-control,
.inputs-centered .dash-dropdown,
.inputs-centered .rc-slider,
.inputs-centered .Select,              /* dcc.Dropdown root */
.inputs-centered .Select-control,
.inputs-centered .dbc-select {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Inputs: center the text inside */
.inputs-centered input.form-control,
.inputs-centered .form-control,
.inputs-centered input[type="number"],
.inputs-centered input[type="text"] {
  text-align: center;
}

/* Dropdown: center selected value & placeholder (react-select v1 used by dcc.Dropdown) */
.inputs-centered .Select-placeholder,
.inputs-centered .Select-value,
.inputs-centered .Select-value-label {
  text-align: center !important;
  width: 100%;
}

/* Dropdown control width: match your inputs (full width in your code), but keep centered */
.inputs-centered .dash-dropdown,
.inputs-centered .Select {
  width: 100%;
}

/* Checklist & Radios: center group and labels */
.inputs-centered .form-check,
.inputs-centered .dbc-checklist,
.inputs-centered .dbc-radio-items,
.inputs-centered .form-check-label,
.inputs-centered label {
  text-align: center;
  justify-content: center;
}

/* Put checklist/radio inline + centered (optional) */
.inputs-centered .form-check {
  display: inline-flex;
  gap: 8px;
}

/* Slider track centered with some breathing room */
.inputs-centered .rc-slider {
  width: 90%;
}

/* Buttons row already centered in your layout; this keeps any stray buttons centered */
.inputs-centered .btn {
  margin-left: auto;
  margin-right: auto;
}

/* Tiny tweak: center the small helper text under fields */
.inputs-centered small,
.inputs-centered .text-muted {
  display: block;
  text-align: center;
}