html {
  min-height: 100%;
}

body[data-afua-surface] {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body[data-afua-surface] > .nav,
body[data-afua-surface] > .floating-actions,
body[data-afua-surface] > .mobile-bottom-nav,
body[data-afua-surface] > .overlay,
body[data-afua-surface] > .loading-overlay {
  flex: 0 0 auto;
}

body[data-afua-surface] > main#app,
body[data-afua-surface] > main.container#app {
  flex: 1 0 auto;
  width: 100%;
}

body[data-afua-surface] > footer.footer {
  margin-top: auto;
  flex: 0 0 auto;
}

#app {
  width: 100%;
}

#app > .section:first-child {
  padding-top: 32px;
}

.surface-breadcrumb {
  margin-bottom: 18px;
}

@media (max-width: 768px) {
  #app > .section:first-child {
    padding-top: 24px;
  }
}