/* main content */
[id='{"index":0,"type":"page-content"}'] {
  grid-area: content;
  padding: 1.5rem;
  transition: all 0.3s;
  background-color: #F2F5F8;
  overflow-y: auto;
  height: 100%;
  width: 100%;
  border-left: 2px solid var(--border-color);
  border-top: 2px solid var(--border-color);
}

[id='{"index":0,"type":"page-content"}'].expanded {
  margin-left: 0;
}

h3.content-page-header {
  color: var(--color-primary-darker-blue);
  font-weight: 700;
}

h4.content-page-subheader {
  color: var(--color-primary-blue);
  font-weight: 700;
}

/* Responsive */
@media (max-width: 768px) {
  [id='{"index":0,"type":"page-content"}'] {
    margin-left: 0;
    padding: 1rem;
  }

}

/* outer wrapper of every page */
.content-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* area-level loading overlay wrapper (one per Ladebereich). While a data-fetch
   or figure-creation callback of its area is running, dcc.Loading renders a
   centered spinner over this area only. dcc.Loading puts the class on its
   outer and inner div; its last child holds the spinner. */
.loading-area {
  position: relative;
}

/* room for the spinner while it is shown, e.g. on the first load of an empty
   area; flat areas (often empty, e.g. a status banner) keep their height */
.loading-area:not(.loading-area-flat):has(> .loading-area + div > *) {
  min-height: 4rem;
}