/* Corporate design of www.integral-learning.de (colors from il-website/tailwind.config.ts) */
:root {
  --md-primary-fg-color: #0e6771;        /* cp10 */
  --md-primary-fg-color--light: #18a1b1; /* cs10 */
  --md-primary-fg-color--dark: #233333;  /* cp20 */
  --md-accent-fg-color: #18a1b1;         /* cs10 */
  --md-accent-fg-color--transparent: rgba(24, 161, 177, 0.1);
  --md-text-font: 'Open Sans', -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
  --md-code-font: 'Roboto Mono', SFMono-Regular, Consolas, Menlo, monospace;
}
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: 'Roboto Slab', Georgia, serif;
  font-weight: 600; /* as on the homepage; Material's default 300 looks thin */
  color: var(--md-primary-fg-color);
}

/* Thin lines between the navigation, the content and the page TOC (desktop only, the sidebars are drawers below) */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    border-right: 1px solid #ededed;
  }
  .md-sidebar--secondary {
    border-left: 1px solid #ededed;
  }
}
@media screen and (max-width: 76.1875em) {
  .md-content__inner {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
  }
}

/* Wide content area for the many tables and screenshots */
.md-grid {
  max-width: 80rem;
}

/* Classes used in the pages (ported from the former Jingo _style.css) */
.md-typeset div.alert {
  /* Notice boxes: warning (default), tip (.green), danger (.red); styled like the theme's admonitions */
  margin: 1em 0;
  padding: 0.6rem 0.8rem;
  border-left: 0.2rem solid #e59a1c;
  border-radius: 0.2rem;
  background-color: #fff7e6;
  color: #233333;
  text-align: left;
}
.md-typeset div.alert.green {
  border-left-color: #18a1b1;
  background-color: #e6f7f9;
}
.md-typeset div.alert.red {
  border-left-color: #d64545;
  background-color: #fdeeee;
}
.md-typeset div.alert > :first-child {
  margin-top: 0;
}
.md-typeset div.alert > :last-child {
  margin-bottom: 0;
}
.md-typeset div.left {
  text-align: start;
}
.md-typeset .center {
  text-align: center;
}
.md-typeset p.info {
  color: #c2710b;
}
.md-typeset div.ilAlign + table > thead {
  display: none;
}
.md-typeset div.ilAlign + table td {
  border: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.md-typeset table.custom {
  display: table !important;
  width: 80% !important;
}
.md-typeset table.custom th.col {
  text-align: center !important;
}
.md-typeset table.custom tr:first-child {
  background-color: #eee !important;
}
.md-typeset table.custom td:first-child {
  width: 25% !important;
}
.md-typeset table.custom td:not(:first-child) {
  text-align: center !important;
}

/* ---- Header like the homepage (white bar, logo, menu, 80px high on desktop) ---- */
.md-header {
  background-color: #ffffff;
  color: #233333;
}
.md-header,
.md-header--shadow {
  box-shadow: 0 2px 3px #23333314; /* same shadow before and after scrolling */
}
.md-header__inner {
  max-width: 80rem; /* same width as the content grid (.md-grid), so logo and search align with the columns */
  padding: 0 0.8rem; /* the logo aligns with the navigation text, the search keeps the same distance on the right */
}
.md-header__button {
  color: #18a1b1;
}
.md-header__button.md-logo {
  margin: 0;
  padding: 0;
}
.md-header__button.md-logo img {
  height: 2.2rem; /* 44px, as on the homepage */
  width: auto;
}
.md-header__title {
  display: none; /* the header shows the logo only, as on the homepage */
}
@media screen and (min-width: 76.25em) {
  .md-header__inner {
    height: 4rem; /* 80px */
    align-items: flex-end;
    padding: 0 0.8rem;
  }
  .md-header__button.md-logo {
    margin-bottom: 0.75rem;
  }
  .md-header__button.md-icon,
  .md-header__option {
    margin-bottom: 0.4rem;
  }
  .md-search {
    padding-bottom: 0.35rem;
  }
}

/* Search field on the white header, in the light blue of the homepage */
.md-header .md-search__form {
  background-color: #e6f7f9;
}
.md-header .md-search__form:hover {
  background-color: #d5eff2;
}
.md-header .md-search__input,
.md-header .md-search__input::placeholder,
.md-header .md-search__icon {
  color: #233333;
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: #ffffff;
}

/* ---- Footer in the light grey of the homepage footer ---- */
:root,
[data-md-color-scheme="default"] {
  --md-footer-bg-color: #ffffff;      /* footer white with a shadow, like the header */
  --md-footer-bg-color--dark: #ffffff;
  --md-footer-fg-color: #233333;
  --md-footer-fg-color--light: #233333;
  --md-footer-fg-color--lighter: #7b8585;
}
.md-footer-meta .md-copyright a {
  color: #0e6771;
}

/* Compact footer: previous/next on one slim row, copyright on a second, about half the theme's height.
   Separated from the content by the same shadow as the header, mirrored upwards. */
.md-footer {
  position: relative;
  z-index: 1;
  box-shadow: 0 -2px 3px #23333314;
}
.md-footer__inner {
  padding: 0 0.8rem;
}
.md-footer__link {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}
.md-footer__title {
  margin-bottom: 0;
  font-size: 0.7rem;
  line-height: 1.2;
  max-width: none; /* the theme's calc assumes its own button size and would truncate the page title */
}
.md-footer__title .md-ellipsis {
  font-size: 0.8rem;
}
.md-footer-meta__inner {
  padding: 0.2rem 0.8rem 0.3rem;
  font-size: 0.6rem;
}
.md-footer-meta .md-copyright {
  width: 100%;
  margin: 0;
  padding: 0.1rem 0;
  text-align: center; /* centred, so it keeps clear of the previous/next arrows at the edges */
}
.md-footer-meta .md-copyright__highlight {
  display: inline; /* copyright, imprint, privacy and "Made with" on one line */
}
.md-footer-meta .md-copyright__highlight::after {
  content: " \00b7 ";
}

/* Show the logo on tablet and phone too, as the homepage does (Material hides it below 76.25em) */
@media screen and (max-width: 76.1875em) {
  .md-header__button.md-logo {
    display: inline-block;
    margin-right: 0.4rem;
  }
  .md-header__button.md-logo img {
    height: 1.8rem;
  }
}

/* Tablet and phone: the logo aligns with the left edge of the text (1.6rem, the content's margin plus
   padding), burger and search sit at the right edge */
@media screen and (max-width: 76.1875em) {
  .md-header__inner {
    padding: 0 0.8rem 0 1.6rem;
  }
  .md-header__button.md-icon[for="__drawer"] {
    margin-left: auto;
  }
  /* As long as the burger is shown, the search is an icon next to it (the theme would show the
     search box from 60em on, with the burger stranded in the middle) */
  .md-search {
    display: none;
  }
  .md-header__button.md-icon[for="__search"] {
    display: inline-block;
  }
  .md-header__title {
    flex-grow: 0; /* hidden anyway, but it must not push the buttons around */
  }
}

/* Search sits at the right edge of the header */
@media screen and (min-width: 60em) {
  .md-search {
    margin-left: auto;
  }
}
/* Zensical renders the header search as a button (Ctrl+K), Material as a form; style both alike */
.md-header .md-search__button {
  background-color: #e6f7f9;
  color: #233333;
}
.md-header .md-search__button:hover,
.md-header .md-search__button:focus {
  background-color: #d5eff2;
  color: #0e6771;
}
.md-header .md-search__button:before {
  background-color: #233333;
}
.md-header .md-search__button:after {
  background: #0e67711f;
}

/* ---- Desktop: header and footer stay put, navigation, content and page TOC scroll independently ---- */
@media screen and (min-width: 76.25em) {
  html,
  body {
    height: 100%;
    overflow: hidden;
    scrollbar-gutter: auto; /* the page itself no longer scrolls, so no reserved scrollbar strip */
  }
  .md-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 4rem); /* header is 4rem and sits outside the container */
  }
  .md-main {
    flex: 1 1 auto;
    min-height: 0;
  }
  .md-main__inner {
    height: 100%;
    margin-top: 0;
  }
  .md-sidebar,
  .md-sidebar--primary,
  .md-sidebar--secondary {
    position: relative;
    top: 0 !important; /* the theme's JS sets an inline sticky offset of the header height */
    align-self: stretch;
    height: auto !important;
    padding: 0;
    overflow: hidden;
  }
  .md-sidebar .md-sidebar__scrollwrap,
  .md-sidebar--primary .md-sidebar__scrollwrap {
    position: absolute;
    inset: 0;
    height: auto !important;
    max-height: none !important;
    margin: 0 0.2rem;
    padding: 1.2rem 0;
    box-sizing: border-box;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #919d9d transparent;
  }
  .md-content {
    height: 100%;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #919d9d transparent;
  }
  .md-footer {
    flex: none;
  }
  .md-top {
    display: none;
  }
}

/* No site name title above the navigation, neither on desktop nor as the header of the phone drawer */
.md-sidebar--primary .md-nav--primary > .md-nav__title {
  display: none;
}