/* Shared boxed fields, based on the planning form. */
input.inputField,
select.inputField,
textarea.inputField,
#searchInput,
.searchField,
.mobileNavSearch input {
  box-sizing:border-box;
  width:100%;
  min-width:0;
  height:42px;
  margin:0;
  padding:0 12px;
  border:1px solid var(--controlBorder);
  border-radius:6px;
  background:var(--pageBg);
  color:var(--txt);
  box-shadow:none;
  text-decoration:none;
  text-transform:none;
  font-family:inherit;
  font-size:14px;
  font-weight:400;
}
input.inputField:focus,
select.inputField:focus,
textarea.inputField:focus,
#searchInput:focus,
.searchField:focus,
.mobileNavSearch input:focus {
  border-color:var(--theme);
  outline:2px solid var(--theme);
  outline-offset:1px;
}
input[type="date"].inputField {
  display:flex;
  align-items:center;
  line-height:40px;
}
input[type="date"].inputField::-webkit-datetime-edit {
  display:inline-flex;
  align-items:center;
  padding:0;
}
input[type="date"].inputField::-webkit-calendar-picker-indicator {
  opacity:1;
}
textarea.inputField {height:auto; min-height:120px; padding:10px 12px; resize:vertical;}
.inputLabel {display:block; order:-1; color:var(--fieldLabel); font-size:.9rem; line-height:1.35;}
.inputLabelContent {display:block;}
@media (prefers-color-scheme:dark) {
  input[type="date"].inputField::-webkit-calendar-picker-indicator {filter:invert(1);}
}

#searchInput {width:auto; max-width:100%; margin:0 5px;}
select.inputField {
  text-align:left;
  padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
}
select.inputField:hover, select.inputField:focus {margin:0; background-color:var(--pageBg); color:var(--txt);}