/**
 * Public knowledge base article view styles.
 * Loaded only on /knowledge-base/article/{slug}
 */

/* Bootstrap Affix TOC sidebar */
.kb-article-toc-affix.affix {
  top: 20px;
  z-index: 10;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.kb-article-toc-affix.affix-bottom {
  position: absolute;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}

.kb-article-content h1[id],
.kb-article-content h2[id],
.kb-article-content h3[id],
.kb-article-content h4[id],
.kb-article-content h5[id],
.kb-article-content h6[id] {
  scroll-margin-top: 24px;
}

.kb-article-content img.img-thumbnail {
  max-width: 100%;
  height: auto;
  border-color: #ccc;
  box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
}

/* Bootstrap 3 ScrollSpy sidenav (docs-style) */
.kb-article-toc .nav {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.kb-article-toc .nav > li {
  display: block;
  float: none;
  margin: 0;
  padding: 0;
}

.kb-article-toc .nav > li > a {
  display: block;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: #374151 !important;
  text-decoration: none !important;
  border-left: 2px solid transparent;
  border-radius: 0;
  word-break: break-word;
  background: transparent !important;
}

.kb-article-toc .nav > li > a:hover,
.kb-article-toc .nav > li > a:focus {
  color: #0284c7 !important;
  background: #f0f9ff !important;
  border-left-color: #bae6fd;
  text-decoration: none !important;
}

.kb-article-toc .nav > li.active > a,
.kb-article-toc .nav > li.active > a:hover,
.kb-article-toc .nav > li.active > a:focus {
  color: #0284c7 !important;
  background: #e0f2fe !important;
  border-left-color: #0284c7;
  font-weight: 600;
}

.kb-article-toc .nav > li > .nav {
  display: block;
  margin: 2px 0 6px;
  padding-left: 0;
  border-left: 2px solid #e5e7eb;
  margin-left: 12px;
}

.kb-article-toc .nav > li > .nav > li > a {
  padding: 4px 10px 4px 12px;
  font-size: 12.5px;
  font-weight: 400;
}

.kb-article-toc .nav > li > .nav > li > .nav > li > a {
  padding-left: 22px;
  font-size: 12px;
}

@media (max-width: 991px) {
  .kb-article-toc-affix.affix,
  .kb-article-toc-affix.affix-top,
  .kb-article-toc-affix.affix-bottom {
    position: static !important;
    top: auto !important;
    width: auto !important;
    max-height: none;
    overflow: visible;
  }
}


.h1, .h2, .h3, h1, h2, h3 {
  margin-top: 40px;
  margin-bottom: 20px;
}