/* Primary sidebar pages share one content axis and one responsive gutter. */
:root {
  --main-view-max-width: 1180px;
  --main-view-inline-padding: 34px;
  --main-view-top-padding: 30px;
  --main-view-bottom-padding: 54px;
}

.app-content {
  scrollbar-gutter: stable;
}

/* Selector row labels use the same typography as their option buttons. */
.special-training-selectors section > span {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  align-self: stretch;
  padding-inline: 10px;
  color: #40566a !important;
  font-family: inherit;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.25;
  text-align: center;
}

.app-content > .app-view:is(
  [data-app-view-section="home"],
  [data-app-view-section="textbooks"],
  [data-app-view-section="library"],
  [data-app-view-section="review"],
  [data-app-view-section="specialTraining"],
  [data-app-view-section="history"],
  [data-app-view-section="settings"]
) {
  box-sizing: border-box;
  width: min(var(--main-view-max-width), 100%) !important;
  max-width: var(--main-view-max-width) !important;
  margin-inline: auto !important;
  padding: var(--main-view-top-padding) var(--main-view-inline-padding) var(--main-view-bottom-padding) !important;
}

@media (max-width: 680px) {
  :root {
    --main-view-inline-padding: 12px;
    --main-view-top-padding: 22px;
    --main-view-bottom-padding: 42px;
  }
}