:root {
  --dit-content-max: 1760px;
  --dit-page-gutter: clamp(16px, 2vw, 32px);
}

html,
body,
#root,
.app {
  width: 100%;
  max-width: 100%;
}

.app,
.app > header,
.app > main {
  margin-inline: auto;
}

.app > header {
  width: 100%;
  padding-inline: max(16px, calc((100vw - var(--dit-content-max)) / 2 + 16px));
}

main,
main.stack,
.detail-page,
.flow-page,
.home-page {
  min-width: 0;
  margin-inline: auto !important;
}

main.stack,
.detail-page,
.flow-page,
.home-page {
  width: min(var(--dit-content-max), calc(100% - var(--dit-page-gutter)));
  max-width: var(--dit-content-max);
}

.back {
  margin-left: max(16px, calc((100vw - var(--dit-content-max)) / 2 + 16px));
}

.stack > *,
.panel,
.panel > *,
.table-wrap {
  min-width: 0;
  max-width: 100%;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.table-wrap table:not(.schedule-table) td {
  max-width: 420px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.section-pdf-action,
.total-pdf-footer {
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  :root {
    --dit-page-gutter: 0px;
  }

  .app > header {
    padding-inline: 14px;
  }

  main.stack,
  .detail-page,
  .flow-page,
  .home-page {
    width: 100%;
  }

  .back {
    margin-left: 14px;
  }
}