@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

html,
body {
  --lava-home-rail: 760px !important;
  --lava-home-wide: 1040px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: linear-gradient(180deg, #f2f4fa 0%, #edf1f7 100%) !important;
  color: #211a2c !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

* {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  box-sizing: border-box !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

a {
  color: #ff5a1f !important;
  text-decoration-color: rgba(255, 90, 31, 0.45) !important;
  text-underline-offset: 2px !important;
  transition: color 0.2s ease, text-decoration-color 0.2s ease !important;
}

a:hover,
a:focus {
  color: #de3232 !important;
  text-decoration-color: rgba(222, 50, 50, 0.6) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #190d23 !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
}

p,
li,
span,
small,
div {
  color: inherit !important;
}

/* Header */
#mainNav {
  position: relative !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, #150720 0%, #22081f 100%) !important;
  box-shadow: 0 1px 0 rgba(255, 136, 51, 0.2), 0 14px 30px rgba(21, 7, 32, 0.36) !important;
  z-index: 20 !important;
}

#mainNav::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: 2px !important;
  background: linear-gradient(90deg, rgba(255, 90, 31, 0), rgba(255, 136, 51, 0.75), rgba(255, 90, 31, 0)) !important;
  pointer-events: none !important;
}

#mainNav .navbar-inner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 72px !important;
}

#mainNav .container-fluid {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 14px 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

#mainNav .brand,
#mainNav .navbar-brand {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: auto !important;
}

#mainNav .brand img,
#mainNav .navbar-brand img {
  max-height: 34px !important;
  width: auto !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18)) !important;
}

#mainNav .nav-collapse {
  margin-left: auto !important;
}

#mainNav .nav {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

#mainNav .nav > li {
  margin: 0 !important;
}

#mainNav .nav > li > a {
  color: #f4ebff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  opacity: 0.9 !important;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease !important;
}

#mainNav .nav > li > a:hover,
#mainNav .nav > li > a:focus {
  color: #ffffff !important;
  opacity: 1 !important;
  background: rgba(255, 136, 51, 0.18) !important;
}

#mainNav .nav > li.active > a {
  color: #ffffff !important;
  background: rgba(255, 90, 31, 0.24) !important;
  opacity: 1 !important;
}

/* Hero */
#docsSearch {
  position: relative !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 48px 20px 44px !important;
  text-align: center !important;
  background: radial-gradient(120% 120% at 12% -4%, rgba(255, 136, 51, 0.14) 0%, rgba(255, 136, 51, 0) 34%), linear-gradient(155deg, #150720 0%, #250b28 45%, #370e24 80%, #421019 100%) !important;
}

#docsSearch::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -128px !important;
  width: min(960px, 94vw) !important;
  height: 280px !important;
  transform: translateX(-50%) !important;
  background: radial-gradient(ellipse at center, rgba(255, 136, 51, 0.34) 0%, rgba(255, 90, 31, 0.13) 42%, rgba(255, 90, 31, 0) 76%) !important;
  pointer-events: none !important;
}

#docsSearch h1 {
  position: relative !important;
  margin: 0 auto 12px !important;
  max-width: 850px !important;
  color: #f7efff !important;
  font-size: clamp(28px, 4.4vw, 40px) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em !important;
  text-wrap: balance !important;
}

#docsSearch #searchBar {
  position: relative !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 760px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 6px !important;
  border-radius: 16px !important;
  background: rgba(247, 239, 255, 0.1) !important;
  border: 1px solid rgba(247, 239, 255, 0.2) !important;
  box-shadow: 0 18px 44px rgba(6, 2, 10, 0.38) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

#docsSearch #searchBar .search-query {
  width: 100% !important;
  margin: 0 !important;
  height: 48px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(247, 239, 255, 0.3) !important;
  border-radius: 10px !important;
  background: rgba(247, 239, 255, 0.14) !important;
  color: #fcf8ff !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

#docsSearch #searchBar .search-query::placeholder {
  color: rgba(247, 239, 255, 0.8) !important;
}

#docsSearch #searchBar .search-query:focus {
  outline: none !important;
  border-color: rgba(255, 136, 51, 0.92) !important;
  box-shadow: 0 0 0 3px rgba(255, 136, 51, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

#docsSearch #searchBar button {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  margin: 0 !important;
  height: 48px !important;
  min-width: 120px !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #ff8833 0%, #ff5a1f 100%) !important;
  color: #2f1300 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  padding: 0 !important;
  font-size: 0 !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) !important;
  box-shadow: 0 8px 20px rgba(255, 90, 31, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
}

#docsSearch #searchBar button i {
  display: none !important;
}

#docsSearch #searchBar button::after {
  content: 'Search' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: block !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#docsSearch #searchBar button:hover,
#docsSearch #searchBar button:focus {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px rgba(255, 90, 31, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  filter: saturate(1.05) !important;
}

/* Main content shell */
#contentArea {
  max-width: 1280px !important;
  margin: 8px auto 0 !important;
  padding: 14px 24px 50px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#contentArea .container-fluid,
#contentArea .row-fluid {
  margin: 0 !important;
  padding: 0 !important;
}

#contentArea .row-fluid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

#contentArea .row-fluid > #main-content,
#contentArea .row-fluid > #sidebar,
#contentArea .row-fluid > .span9,
#contentArea .row-fluid > .span3 {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

#contentArea h2 {
  color: #260e1f !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
  margin: 0 0 16px !important;
}

#main-content .category-description,
#main-content .categoryDescription {
  margin: 0 0 18px !important;
  color: #5c6984 !important;
  font-size: 16px !important;
}

#categoryHead {
  margin: 0 0 16px !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-areas: 'title sort' 'desc sort' !important;
  gap: 8px 16px !important;
  align-items: start !important;
}

#categoryHead h1 {
  grid-area: title !important;
  margin: 0 !important;
}

#categoryHead .descrip,
#categoryHead .description {
  grid-area: desc !important;
  margin: 0 !important;
  color: #5b6987 !important;
  font-size: 20px !important;
  line-height: 1.45 !important;
}

#categoryHead .sort {
  grid-area: sort !important;
  margin: 0 !important;
}

#categoryHead .sort form {
  margin: 0 !important;
}

#sortBy {
  min-width: 210px !important;
  height: 42px !important;
  padding: 0 12px !important;
  border: 1px solid #cfd8ea !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #2f2740 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(21, 29, 50, 0.06) !important;
}

#sortBy:focus {
  outline: none !important;
  border-color: rgba(255, 90, 31, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.16) !important;
}

#main-content .articleList {
  margin: 16px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

#main-content .articleList li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#main-content .articleList li a {
  display: block !important;
  padding: 13px 14px !important;
  border-radius: 10px !important;
  border: 1px solid #dde4f2 !important;
  background: #ffffff !important;
  color: #332545 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}

#main-content .articleList li a:hover,
#main-content .articleList li a:focus {
  color: #ff5a1f !important;
  border-color: rgba(255, 90, 31, 0.42) !important;
  transform: translateY(-1px) !important;
}

/* Popular articles */
.most-pop-articles {
  width: 100% !important;
  max-width: var(--lava-home-rail) !important;
  margin: 0 auto 14px !important;
  padding: 0 !important;
  background: transparent !important;
}

.most-pop-articles h2 {
  margin: 0 0 10px !important;
  text-align: center !important;
}

.popArticles {
  margin: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  align-items: stretch !important;
  gap: 8px !important;
}

.popArticles li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
}

.popArticles li a {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 78px !important;
  padding: 10px 14px !important;
  border-radius: 9px !important;
  border: 1px solid #dde4f2 !important;
  background: #ffffff !important;
  color: #342245 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.32 !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
}

.popArticles li a:hover,
.popArticles li a:focus {
  color: #ff5a1f !important;
  border-color: rgba(255, 90, 31, 0.42) !important;
  background: #ffffff !important;
  transform: translateY(-1px) !important;
}

.icon-article-doc {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
}

.sep {
  width: 100% !important;
  max-width: var(--lava-home-wide) !important;
  margin: 16px auto !important;
  border: 0 !important;
  border-top: 1px solid #dfe5f0 !important;
}

/* Category cards */
.category-list {
  width: 100% !important;
  max-width: var(--lava-home-wide) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.category-list .category {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 132px !important;
  margin: 0 !important;
  padding: 18px 18px !important;
  border-radius: 14px !important;
  border: 1px solid #dde4f2 !important;
  background: #ffffff !important;
  box-shadow: 0 10px 24px rgba(21, 29, 50, 0.08) !important;
  text-decoration: none !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.category-list .category::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #ff8833 0%, #ff5a1f 70%, #de3232 100%) !important;
  opacity: 0.35 !important;
  transition: opacity 0.2s ease !important;
}

.category-list .category:hover,
.category-list .category:focus {
  transform: translateY(-3px) !important;
  border-color: rgba(255, 90, 31, 0.34) !important;
  box-shadow: 0 16px 30px rgba(21, 7, 32, 0.15) !important;
}

.category-list .category:hover::before,
.category-list .category:focus::before {
  opacity: 1 !important;
}

.category-list .category h3,
.category-list .category h4 {
  margin: 0 0 10px !important;
  color: #251a36 !important;
  font-size: 24px !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  text-wrap: balance !important;
}

.category-list .category .article-count {
  margin: 0 !important;
  color: #5f6d87 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.category-list .category .article-count .notranslate {
  color: #2f2244 !important;
  font-weight: 700 !important;
}

/* Article pages */
#main-content,
#fullArticle,
.article-body,
.article-content,
.contentWrapper {
  color: #2a1828 !important;
}

#main-content {
  padding: 0 !important;
  background: transparent !important;
}

#main-content .contentWrapper {
  padding: 30px 34px !important;
  border-radius: 16px !important;
  border: 1px solid #dde4f2 !important;
  background: #ffffff !important;
  box-shadow: 0 10px 28px rgba(23, 30, 52, 0.06) !important;
}

#main-content h1,
#fullArticle h1,
.article-body h1,
.article-content h1 {
  color: #180a22 !important;
  font-size: clamp(30px, 4vw, 40px) !important;
  line-height: 1.14 !important;
  margin: 0 0 16px !important;
}

a[href='javascript:window.print()'] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  border: 1px solid #d6deef !important;
  background: #ffffff !important;
  color: #64557d !important;
  text-decoration: none !important;
}

a[href='javascript:window.print()']:hover,
a[href='javascript:window.print()']:focus {
  border-color: rgba(255, 90, 31, 0.36) !important;
  color: #ff5a1f !important;
}

#main-content h2,
#fullArticle h2,
.article-body h2,
.article-content h2 {
  color: #240f22 !important;
  font-size: clamp(24px, 3vw, 30px) !important;
  line-height: 1.25 !important;
  margin: 32px 0 10px !important;
}

#main-content h3,
#fullArticle h3,
.article-body h3,
.article-content h3 {
  color: #2f1530 !important;
  font-size: 21px !important;
  line-height: 1.32 !important;
  margin: 24px 0 8px !important;
}

#main-content p,
#fullArticle p,
.article-body p,
.article-content p,
#main-content li,
#fullArticle li,
.article-body li,
.article-content li {
  font-size: 17px !important;
  line-height: 1.75 !important;
  color: #2f1d2f !important;
}

#main-content ul,
#fullArticle ul,
.article-body ul,
.article-content ul,
#main-content ol,
#fullArticle ol,
.article-body ol,
.article-content ol {
  padding-left: 1.2em !important;
}

#main-content a,
#fullArticle a,
.article-body a,
.article-content a {
  color: #ff5a1f !important;
  font-weight: 600 !important;
}

#main-content a:hover,
#fullArticle a:hover,
.article-body a:hover,
.article-content a:hover {
  color: #de3232 !important;
}

#main-content code,
#fullArticle code,
.article-body code,
.article-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace !important;
  font-size: 0.92em !important;
  color: #ffe7d9 !important;
  background: #23091d !important;
  border: 1px solid rgba(255, 136, 51, 0.38) !important;
  border-radius: 6px !important;
  padding: 0.14em 0.4em !important;
}

#main-content pre,
#fullArticle pre,
.article-body pre,
.article-content pre {
  margin: 20px 0 !important;
  padding: 16px !important;
  border-radius: 10px !important;
  overflow-x: auto !important;
  background: linear-gradient(160deg, #150720 0%, #25091f 100%) !important;
  border: 1px solid rgba(255, 136, 51, 0.32) !important;
  box-shadow: 0 10px 22px rgba(21, 7, 32, 0.22) !important;
}

#main-content pre code,
#fullArticle pre code,
.article-body pre code,
.article-content pre code {
  background: transparent !important;
  border: 0 !important;
  color: #ffe9de !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

#main-content blockquote,
#fullArticle blockquote,
.article-body blockquote,
.article-content blockquote {
  margin: 20px 0 !important;
  padding: 12px 16px !important;
  border-left: 4px solid #ff5a1f !important;
  background: rgba(255, 136, 51, 0.08) !important;
  color: #361527 !important;
  border-radius: 0 10px 10px 0 !important;
}

/* Sidebar, crumbs, metadata */
#sidebar,
.sidebar,
aside#sidebar {
  order: -1 !important;
  display: grid !important;
  grid-template-columns: minmax(320px, 480px) 1fr !important;
  align-items: center !important;
  gap: 16px !important;
  background: radial-gradient(120% 120% at 48% 115%, rgba(255, 136, 51, 0.2) 0%, rgba(255, 136, 51, 0) 55%), linear-gradient(150deg, #170724 0%, #250826 55%, #3a0c21 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  padding: 16px !important;
  box-shadow: 0 16px 34px rgba(12, 8, 20, 0.25) !important;
}

#sidebar h3,
.sidebar h3 {
  display: none !important;
}

#sidebar #searchBar.sm,
.sidebar #searchBar.sm {
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 6px !important;
  border: 1px solid rgba(247, 239, 255, 0.22) !important;
  border-radius: 16px !important;
  background: rgba(247, 239, 255, 0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

#sidebar .search-query,
.sidebar .search-query {
  display: block !important;
  height: 50px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid rgba(247, 239, 255, 0.28) !important;
  border-radius: 12px !important;
  background: rgba(247, 239, 255, 0.12) !important;
  color: #fff5ff !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

#sidebar .search-query::placeholder,
.sidebar .search-query::placeholder {
  color: rgba(247, 239, 255, 0.74) !important;
}

#sidebar #searchBar.sm button,
.sidebar #searchBar.sm button {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  font-size: 0 !important;
  line-height: 1 !important;
  margin: 0 !important;
  min-width: 140px !important;
  width: 140px !important;
  height: 50px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  border: 0 !important;
  background: linear-gradient(180deg, #ff8833 0%, #ff5a1f 100%) !important;
  color: #301600 !important;
  box-shadow: 0 8px 18px rgba(255, 90, 31, 0.28) !important;
  transform: none !important;
  text-shadow: none !important;
  overflow: hidden !important;
}

#sidebar #searchBar.sm button i,
.sidebar #searchBar.sm button i {
  display: none !important;
}

#sidebar #searchBar.sm button::after,
.sidebar #searchBar.sm button::after {
  content: 'Search' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: block !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#sidebar .nav,
#sidebar .nav-list,
.sidebar .nav,
.sidebar .nav-list {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
}

#sidebar .nav > li > a,
#sidebar .nav-list > li > a,
.sidebar a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 9px 12px !important;
  border-radius: 10px !important;
  color: rgba(247, 239, 255, 0.96) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  background: rgba(247, 239, 255, 0.08) !important;
  border: 1px solid rgba(247, 239, 255, 0.16) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.articleFoot button,
#main-content button {
  border-radius: 10px !important;
}

#sidebar .nav > li > a:hover,
#sidebar .nav-list > li > a:hover,
#sidebar .nav > li.active > a,
#sidebar .nav-list > li.active > a,
.sidebar li.active a {
  color: #ff5a1f !important;
  background: rgba(255, 90, 31, 0.2) !important;
  border-color: rgba(255, 90, 31, 0.28) !important;
}

#sidebar .icon-arrow,
.sidebar .icon-arrow {
  display: none !important;
}

#sidebar .nav li.active a::after,
#sidebar .nav-list li.active a::after,
.sidebar li.active a::after {
  content: '→' !important;
  font-weight: 700 !important;
  margin-left: 6px !important;
  color: #ff5a1f !important;
}

.breadcrumbs,
.breadcrumb,
ol.breadcrumb {
  margin: 0 0 14px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.breadcrumb a,
.breadcrumbs a {
  color: #730011 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

#fullArticle .articleFoot,
.articleFoot {
  margin-top: 28px !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(79, 0, 11, 0.14) !important;
}

.articleFoot time.lu,
time.lu {
  color: #6e576f !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Utility states */
::selection {
  color: #1f0f1f !important;
  background: rgba(255, 136, 51, 0.4) !important;
}

.no-results,
#noResults {
  background: #fff !important;
  border: 1px solid #dde4f2 !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

/* Footer */
footer,
#contentArea footer,
.center footer,
.powered-by {
  margin-top: 34px !important;
  padding-top: 14px !important;
  border-top: 1px solid rgba(79, 0, 11, 0.1) !important;
  color: #7b667d !important;
  background: transparent !important;
  text-align: center !important;
}

footer p,
footer span,
footer a,
.powered-by,
.powered-by a {
  color: #7b667d !important;
  font-size: 13px !important;
}

footer a:hover,
.powered-by a:hover {
  color: #ff5a1f !important;
}

/* Responsive */
@media (max-width: 980px) {
  body {
    padding: 0 !important;
  }

  #mainNav .container-fluid {
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 12px 16px !important;
  }

  #mainNav .nav {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  #docsSearch {
    padding: 38px 14px 44px !important;
  }

  #docsSearch h1 {
    margin-bottom: 10px !important;
    font-size: clamp(24px, 7.5vw, 34px) !important;
  }

  #docsSearch #searchBar {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 6px !important;
    border-radius: 14px !important;
  }

  #docsSearch #searchBar button {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    border-radius: 9px !important;
  }

  #docsSearch #searchBar .search-query {
    height: 44px !important;
    border-radius: 9px !important;
    padding: 0 14px !important;
    font-size: 15px !important;
  }

  .popArticles {
    grid-template-columns: 1fr !important;
  }

  .popArticles li a {
    min-height: 66px !important;
    padding: 10px 12px !important;
  }

  .category-list {
    grid-template-columns: 1fr 1fr !important;
  }

  .most-pop-articles,
  .sep,
  .category-list {
    max-width: 100% !important;
  }

  .category-list .category h3,
  .category-list .category h4 {
    font-size: 24px !important;
  }

  #contentArea {
    margin: 8px auto 0 !important;
    padding: 12px 12px 34px !important;
  }

  #sidebar,
  aside#sidebar,
  .sidebar {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 14px !important;
  }

  #sidebar #searchBar.sm button,
  .sidebar #searchBar.sm button {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    border-radius: 9px !important;
  }

  #sidebar .search-query,
  .sidebar .search-query {
    height: 44px !important;
    border-radius: 9px !important;
    font-size: 15px !important;
  }

  #sidebar .nav,
  #sidebar .nav-list,
  .sidebar .nav,
  .sidebar .nav-list {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 2px !important;
  }

  #sidebar .nav > li,
  #sidebar .nav-list > li,
  .sidebar .nav > li,
  .sidebar .nav-list > li {
    flex: 0 0 auto !important;
  }

  #sidebar .nav > li > a,
  #sidebar .nav-list > li > a,
  .sidebar a {
    white-space: nowrap !important;
  }

  #categoryHead {
    grid-template-columns: 1fr !important;
    grid-template-areas: 'title' 'desc' 'sort' !important;
  }

  #categoryHead .sort {
    justify-self: start !important;
  }

  #main-content .contentWrapper {
    padding: 24px 20px !important;
  }
}

@media (max-width: 700px) {
  #mainNav .navbar-inner {
    min-height: 56px !important;
  }

  #mainNav .container-fluid {
    padding: 10px 12px !important;
  }

  #mainNav .brand img,
  #mainNav .navbar-brand img {
    max-height: 28px !important;
  }

  #mainNav .nav-collapse,
  #mainNav .btn-navbar {
    display: none !important;
  }

  #docsSearch {
    padding: 30px 10px 32px !important;
  }

  #docsSearch h1 {
    max-width: 320px !important;
    font-size: clamp(20px, 9vw, 30px) !important;
    line-height: 1.14 !important;
  }

  #docsSearch #searchBar {
    max-width: 330px !important;
    gap: 6px !important;
  }

  #docsSearch #searchBar button,
  #docsSearch #searchBar .search-query {
    height: 42px !important;
  }

  #docsSearch #searchBar button::after {
    font-size: 14px !important;
  }

  #contentArea {
    padding: 10px 8px 28px !important;
  }

  .most-pop-articles h2 {
    margin-bottom: 8px !important;
    font-size: 22px !important;
  }

  .popArticles {
    gap: 6px !important;
  }

  .popArticles li a {
    min-height: 56px !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    line-height: 1.28 !important;
  }

  .category-list {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .category-list .category {
    min-height: 104px !important;
    padding: 14px !important;
    border-radius: 12px !important;
  }

  .category-list .category h3,
  .category-list .category h4 {
    margin-bottom: 6px !important;
    font-size: 30px !important;
    line-height: 1.02 !important;
  }

  .category-list .category .article-count {
    font-size: 14px !important;
  }

  #main-content,
  #fullArticle {
    width: 100% !important;
  }

  #sidebar,
  aside#sidebar,
  .sidebar {
    margin-top: 0 !important;
    padding: 10px !important;
  }

  #sidebar .nav > li > a,
  #sidebar .nav-list > li > a,
  .sidebar a {
    padding: 8px 10px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
  }

  #main-content .contentWrapper {
    padding: 16px 14px !important;
    border-radius: 12px !important;
  }

  #main-content h1,
  #fullArticle h1,
  .article-body h1,
  .article-content h1 {
    font-size: clamp(28px, 8vw, 32px) !important;
    line-height: 1.1 !important;
  }

  #main-content h2,
  #fullArticle h2,
  .article-body h2,
  .article-content h2 {
    font-size: clamp(20px, 6vw, 24px) !important;
    margin: 22px 0 8px !important;
  }

  #main-content p,
  #fullArticle p,
  .article-body p,
  .article-content p,
  #main-content li,
  #fullArticle li,
  .article-body li,
  .article-content li {
    font-size: 15px !important;
    line-height: 1.62 !important;
  }
}