.age-range-selects,
.date-range-selects {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.field .age-range-selects > select,
.field .date-range-selects > input {
  width: 100%;
  min-width: 0;
}

.record-date-field {
  min-width: 0;
}

.record-date-field input[type="date"] {
  font-size: 14px;
}

.age-range-selects > b,
.date-range-selects > b {
  font-weight: 400;
  white-space: nowrap;
}

.records-panel-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  flex: 0 0 auto;
}

/* Give the amount input more room on the four-column desktop form. */
@media (min-width: 1181px) {
  .record-modal .form-grid {
    grid-template-columns: 1.6fr 0.78fr 0.82fr 1.6fr;
  }

  .record-modal .amount-group {
    grid-template-columns: minmax(150px, 1.15fr) minmax(130px, 0.85fr);
  }
}

@media (max-width: 820px) {
  .records-panel .panel-heading {
    flex-wrap: wrap;
  }

  .records-panel-actions {
    width: 100%;
  }
}