:root {
  /* Navbar */
  --navbar-height: 4rem;
  --navbar-logo-height: 20px;
  --navbar-logo-mini-height: 20px;

  /* Sidebar */
  --sidebar-width-open: 15.625rem;
  --sidebar-width-closed: 3.5rem;
  --sidebar-width: var(--sidebar-width-open);

  /* Footer */
  --footer-height: 4rem;

  /* Content */
  --min-height: calc(100vh - var(--navbar-height));
}

/******************/
/*   Containers   */
/******************/

.front-office {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  min-height: var(--min-height);
}

.front-office.transparentNavbar .section__fluid {
  margin-top: calc(var(--navbar-height) * -1);
}

.back-office {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  flex: 1;
  height: 1px; /*https://stackoverflow.com/questions/58548583/why-does-height-100-on-a-child-element-not-apply-when-the-parent-element-has-a*/
  min-height: var(--min-height);
}

.back-office .sidebar.sidebar-open {
  --sidebar-width: var(--sidebar-width-open);
  max-width: 100%;
}

.back-office .sidebar.sidebar-closed {
  --sidebar-width: var(--sidebar-width-closed);
}

.back-office .sidebar.sidebar-open ~ section {
  margin-left: var(--sidebar-width-open);
}

.back-office .sidebar.sidebar-closed ~ section {
  margin-left: var(--sidebar-width-closed);
}

.back-office .sidebar.sidebar-open ~ section {
  width: calc(100% - var(--sidebar-width-open));
}

.back-office .sidebar.sidebar-closed ~ section {
  width: calc(100% - var(--sidebar-width-closed));
}

.back-office .sidebar.sidebar-open ~ .footer,
.back-office .sidebar.sidebar-open ~ footer {
  margin-left: var(--sidebar-width-open);
}

.back-office .sidebar.sidebar-closed ~ .footer,
.back-office .sidebar.sidebar-closed ~ footer {
  margin-left: var(--sidebar-width-closed);
}

section {
  transition: all 0.25s linear;
  margin-top: var(--navbar-height);
  min-height: calc(var(--min-height) - 3rem);
  box-sizing: border-box;
}

.front-office section {
  margin-top: 0;
}

.footer,
footer {
  transition: margin-left 0.25s linear;
  font-size: var(--fs-sm);
}

.section__header {
  scroll-margin: var(--navbar-height);
  width: 100%;
  margin: 3rem 0 1rem 0;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 200%;
  border-bottom: thin solid var(--separator-color);
}

.section__header p,
.section__header h1,
.section__header h2,
.section__header span,
.section__header .MuiTypography-root,
.section__header a {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: bold;
}

@media (max-width: 899px) {
  .back-office .sidebar.sidebar-open ~ section,
  .back-office .sidebar.sidebar-closed ~ section,
  .back-office .sidebar.sidebar-open ~ footer,
  .back-office .sidebar.sidebar-closed ~ footer {
    margin-left: 0;
  }
}