@react-awesome-query-builder/mui/css/fixes.css

User-friendly query builder for React. MUI 5 widgets

.qb-compact {
  --item-offset-left: 10px;
  --item-offset: 5px;
  --rulegroup-offset-left: 10px;
  --rulegroup-offset: 5px;
  --rule-padding: 5px;
  --rule-parts-distance: 5px;
  --drag-offset-right: 5px;
  --rule-group-actions-offset-left: 5px;
}

.qb-dark {
  --rule-background: rgba(83, 83, 83, 0.3490196078);
  --rule-border-color: transparent;
  --rulegroup-background: rgba(143, 143, 143, 0.6392156863);
  --rulegroup-border-color: rgba(143, 143, 143, 0.6392156863);
  --rulegroupext-background: rgba(143, 143, 143, 0.6392156863);
  --rulegroupext-border-color: rgba(143, 143, 143, 0.6392156863);
  --group-border-color: rgba(143, 143, 143, 0.6392156863);
  --group-background: rgba(62, 62, 62, 0.4705882353);
  --switch-border-color: rgba(143, 143, 143, 0.6392156863);
  --switch-background: rgba(62, 62, 62, 0.4705882353);
  --case-border-color: rgba(143, 143, 143, 0.6392156863);
  --case-background: rgba(62, 62, 62, 0.4705882353);
  --main-text-color: white;
}

.query-builder .MuiIconButton-sizeSmall {
  padding: 3px;
}
.query-builder .MuiSlider-markLabel {
  margin-top: -12px;
}

/* should be outside of .query-builder */
.customSelectOption {
  color: var(--custom-select-option-color, lightcoral);
}

.query-builder .group--conjunctions > .MuiFormControl-root > .MuiButtonGroup-root {
  border-radius: var(--conjunctions-radius, var(--item-radius, 5px));
  overflow: hidden;
}