/* The PNG's vertical grip edge is at x=516; its remaining 62px overlap the dialog. */
.nm-appointment-layout {
  display: grid;
  grid-template-columns: clamp(9rem, 24%, 14rem) minmax(0, 1fr);
  align-items: start;
  gap: 0;
  max-width: 60rem;
  margin: 2rem auto;
  isolation: isolate;
}
.nm-appointment-layout > .nm-appointment-neo {
  position: relative;
  z-index: 1;
  width: calc(100% * 578 / 516);
  max-width: none;
  margin: 0;
  pointer-events: none;
}
.nm-appointment-neo img {
  display: block;
  width: 100%;
  height: auto;
}
.nm-appointment-layout > .neodialog {
  min-width: 0;
  width: 100%;
  max-width: none;
  margin: 0;
}
.nm-appointment-layout .neodialog__shell {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/* Keep the grip on narrow screens while giving the form most of the width. */
@media (max-width: 640px) {
  .nm-appointment-layout {
    grid-template-columns: clamp(2.5rem, 13vw, 5rem) minmax(0, 1fr);
    margin-block: 1.25rem;
  }
  .nm-appointment-layout .neodialog__header { gap: .4rem; padding-inline: .75rem; }
}
@media (max-width: 640px) {
  .nm-appointment-layout { max-width: none; margin-inline: -1rem; }
}
@media (max-width: 360px) {
  .nm-appointment-layout .neodialog__header { flex-wrap: wrap; }
  .nm-appointment-layout .neodialog__header > span:first-child { flex-basis: 100%; }
  .nm-appointment-layout .neodialog__progress { margin-left: 0; }
  .nm-appointment-layout .neodialog__reset { margin-left: auto; }
}