/* Business travel inputs: medium NInput reference. Keep field types and events intact. */
#content-area .is-business-travel-layout :is(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="range"], [type="color"], [data-native-english-source], .date-hour-picker, .portal-select__input, .md-search-select__input), textarea) {
  --travel-input-border: #DDE3EC;
  --travel-input-active: #264AFF;
  --travel-input-ring: rgba(38, 74, 255, .2);
  box-sizing: border-box;
  min-width: 0;
  padding: 6px 16px !important;
  border: 1px solid var(--travel-input-border) !important;
  border-radius: 2px !important;
  background: #FFFFFF !important;
  color: #172033 !important;
  font: 400 14px/22px "D-DIN", "Noto Sans", "Noto Sans SC", sans-serif !important;
  caret-color: var(--travel-input-active);
  box-shadow: none !important;
  outline: none !important;
}
#content-area .is-business-travel-layout :is(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="range"], [type="color"], [data-native-english-source], .date-hour-picker, .portal-select__input, .md-search-select__input), textarea)::placeholder { color: #A8B1C1 !important; opacity: 1; }
#content-area .is-business-travel-layout :is(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="range"], [type="color"], [data-native-english-source], .date-hour-picker, .portal-select__input, .md-search-select__input), textarea):hover { border-color: var(--travel-input-active) !important; }
#content-area .is-business-travel-layout :is(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="range"], [type="color"], [data-native-english-source], .date-hour-picker, .portal-select__input, .md-search-select__input), textarea):focus {
  border-color: var(--travel-input-active) !important;
  box-shadow: 0 0 0 2px var(--travel-input-ring) !important;
}
#content-area .is-business-travel-layout :is(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="range"], [type="color"], [data-native-english-source], .date-hour-picker, .portal-select__input, .md-search-select__input), textarea)[data-status="warning"] {
  --travel-input-border: #D97706;
  --travel-input-active: #D97706;
  --travel-input-ring: rgba(217, 119, 6, .2);
}
#content-area .is-business-travel-layout :is(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="range"], [type="color"], [data-native-english-source], .date-hour-picker, .portal-select__input, .md-search-select__input), textarea):is(.is-invalid, [aria-invalid="true"], [data-status="error"]) {
  --travel-input-border: #D92D3F;
  --travel-input-active: #D92D3F;
  --travel-input-ring: rgba(217, 45, 63, .2);
}
#content-area .is-business-travel-layout :is(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="range"], [type="color"], [data-native-english-source], .date-hour-picker, .portal-select__input, .md-search-select__input), textarea):disabled {
  border-color: #C2CAD7 !important;
  background: #F3F5F8 !important;
  color: #A8B1C1 !important;
  -webkit-text-fill-color: #A8B1C1;
  box-shadow: none !important;
  opacity: 1 !important;
}
#content-area .is-business-travel-layout :is(input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="range"], [type="color"], [data-native-english-source], .date-hour-picker, .portal-select__input, .md-search-select__input), textarea):not(textarea) { height: 36px !important; min-height: 36px !important; }
/* Leave room for the existing calendar icon; keep the hidden native picker untouched. */
#content-area .is-business-travel-layout .date-field input.date-input { padding-right: 40px !important; }
#content-area .is-business-travel-layout .date-field .date-icon { right: 16px; }
/* Joined date input and calendar trigger form one outline. */
#content-area .is-business-travel-layout .doc-code-date-control {
  border-radius: 2px;
  background: #FFFFFF;
}
#content-area .is-business-travel-layout .doc-code-date-control > input.form-control {
  border-right: 0 !important;
  border-radius: 2px 0 0 2px !important;
}
#content-area .is-business-travel-layout .doc-code-date-control__trigger {
  box-sizing: border-box;
  height: 36px !important;
  flex-basis: 40px;
  border: 1px solid #DDE3EC;
  border-left: 0;
  border-radius: 0 2px 2px 0;
  background: #FFFFFF;
  color: #536079;
  font-size: 16px;
}
#content-area .is-business-travel-layout .doc-code-date-control:is(:hover, :focus-within) > :is(input.form-control, .doc-code-date-control__trigger) { border-color: #264AFF !important; }
#content-area .is-business-travel-layout .doc-code-date-control:focus-within { box-shadow: 0 0 0 2px rgba(38, 74, 255, .2); }
#content-area .is-business-travel-layout .doc-code-date-control > input.form-control:focus { box-shadow: none !important; }
#content-area .is-business-travel-layout .doc-code-date-control:has(input:is(.is-invalid, [aria-invalid="true"])) > :is(input.form-control, .doc-code-date-control__trigger) { border-color: #D92D3F !important; }
#content-area .is-business-travel-layout .doc-code-date-control:has(input:is(.is-invalid, [aria-invalid="true"])):focus-within { box-shadow: 0 0 0 2px rgba(217, 45, 63, .2); }
#content-area .is-business-travel-layout .doc-code-date-control:has(input:disabled) { box-shadow: none; }
#content-area .is-business-travel-layout .doc-code-date-control:has(input:disabled) > :is(input.form-control, .doc-code-date-control__trigger) { border-color: #C2CAD7 !important; background: #F3F5F8 !important; color: #A8B1C1 !important; }

/* The basic fields scroll vertically. Reserve space outside the controls for
   their 2px focus rings, without moving the fields relative to the heading. */
#content-area .is-business-travel-layout .business-travel-basic-panel > .expense-basic-fields {
  box-sizing: border-box;
  width: calc(100% + 8px);
  max-width: calc(100% + 8px);
  margin-inline: -4px;
  padding-inline: 4px;
  padding-bottom: 4px;
}