body.data-list-page {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

body.data-list-page .app-shell {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

body.data-list-page .main {
  display: flex;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}

body.data-list-page .topbar {
  flex: 0 0 72px;
}

body.data-list-page #app.content {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  margin: 0 auto;
  overflow: hidden;
}

body.data-list-page #app > .page-title,
body.data-list-page #app > .searchbar {
  flex: 0 0 auto;
}

body.data-table-page #app > .panel {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}

body.data-table-page #app > .panel > .panel-head {
  flex: 0 0 auto;
}

body.data-table-page #app > .panel > .table-wrap {
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.data-table-page #app .table-wrap thead th {
  position: sticky;
  z-index: 2;
  top: 0;
}

body.data-service-page #app > #service-list {
  min-height: 0;
  flex: 1 1 auto;
  grid-auto-rows: max-content;
  align-content: start;
  overflow: auto;
  overscroll-behavior: contain;
  padding-bottom: 4px;
}

body.data-service-page #service-list > .service-card {
  min-height: min-content;
}

body.data-ready-services-page #app > .ready-services-panel {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}

body.data-ready-services-page #app > .ready-services-panel > .panel-head {
  flex: 0 0 auto;
}

body.data-ready-services-page #app .ready-service-list {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

body.data-pos-page #app > .panel {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
}

body.data-pos-page #app > .panel > .panel-head {
  flex: 0 0 auto;
}

body.data-pos-page #app #pos-items.item-grid {
  min-height: 0;
  flex: 1 1 auto;
  align-content: start;
  overflow: auto;
  overscroll-behavior: contain;
}

@media (max-width: 780px) {
  body.data-list-page .topbar {
    flex-basis: 64px;
  }

  body.data-list-page #app.content {
    padding-bottom: 14px;
  }
}

@media (max-width: 420px) {
  body.data-list-page #app.content {
    padding-bottom: 11px;
  }
}