.logistics-dispatch-form {
  display: grid;
  gap: 16px;
  max-width: 530px;
  color: var(--muted);
}
.dispatch-field {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}
.dispatch-field > span { text-align: right; font-weight: 600; }
.dispatch-field input:not([type=checkbox]):not([type=radio]), .dispatch-field select { min-height: 36px; }
.dispatch-required { color: var(--danger); }
.dispatch-field > input[type=checkbox] {
  appearance: none;
  justify-self: start;
  position: relative;
  width: 40px;
  height: 20px;
  margin: 0;
  border-radius: 12px;
  background: var(--field-border);
  cursor: not-allowed;
}
.dispatch-field > input[type=checkbox]::before {
  position: absolute;
  inset: 2px auto auto 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  content: '';
}
.dispatch-region {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.dispatch-pickup, .dispatch-pickup-after {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.dispatch-pickup-after input[type=number] { width: 104px; }
.logistics-dispatch-form > .dispatch-offset { margin: 0 0 0 138px; }
@media (max-width: 560px) {
  .dispatch-field { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .dispatch-field > span { text-align: left; }
  .logistics-dispatch-form > .dispatch-offset { margin-left: 0; }
}