/* Dash360 Knowledge Base Custom Styles */

/* Import Roboto Font Family */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/* CSS Variables for Dash360 Brand Colors */
:root {
  --dash360-navy: #1a2951;
  --dash360-logo-blue: #2596be;
  --dash360-light-gray: #f8f9fa;
  --dash360-medium-gray: #6c757d;
  --dash360-white: #ffffff;
  --dash360-success: #28a745;
  --dash360-warning: #ffc107;
  --dash360-border: #e9ecef;
  --dash360-shadow: rgba(26, 41, 81, 0.1);
  --dash360-hover-shadow: rgba(26, 41, 81, 0.15);
}

/* Reset and Base Styles */
* {
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 400;
  line-height: 1.6;
  color: var(--dash360-navy) !important;
  background: var(--dash360-light-gray) !important;
  margin: 0;
  padding: 0;
}

/* Override existing styles */
#fullArticle, 
#fullArticle p, 
#fullArticle ul, 
#fullArticle ol, 
#fullArticle li, 
#fullArticle div, 
#fullArticle blockquote, 
#fullArticle dd, 
#fullArticle table {
  color: var(--dash360-navy) !important;
}

/* Header Navigation */
.navbar {
  border: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: 0 2px 8px var(--dash360-shadow) !important;
}

.navbar .navbar-inner {
  background: var(--dash360-navy) !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  min-height: 70px !important;
}

.navbar .container-fluid {
  padding: 0 20px !important;
  max-width: 1200px;
  margin: 0 auto;
}

.navbar .brand {
  color: var(--dash360-white) !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  padding: 23px 20px 23px 0 !important;
  text-shadow: none !important;
  transition: all 0.3s ease !important;
  transform: scale(1) !important;
  position: relative !important;
  cursor: pointer !important;
}

.navbar .brand:hover,
.navbar .brand:focus {
  color: var(--dash360-white) !important;
  text-decoration: none !important;
  transform: scale(1.07) !important;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.1) !important;
  filter: brightness(1.1) !important;
}

.navbar .nav {
  margin: 0 !important;
}

.navbar .nav li a {
  color: #c7c5c5 !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  padding: 23px 15px !important;
  text-shadow: none !important;
  transition: all 0.3s ease !important;
  border-radius: 0 !important;
}

.navbar .nav li a:hover,
.navbar .nav li a:focus,
.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus {
  color: var(--dash360-white) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  text-decoration: none !important;
}

.navbar .nav li a .caret {
  border-top-color: #c7c5c5 !important;
  border-bottom-color: #c7c5c5 !important;
  transition: all 0.3s ease !important;
}

.navbar .nav li a:hover .caret,
.navbar .nav .active a .caret {
  border-top-color: var(--dash360-white) !important;
  border-bottom-color: var(--dash360-white) !important;
}

/* Search Section */
#docsSearch {
  background: var(--dash360-white) !important;
  padding: 60px 0 40px 0 !important;
  text-align: center !important;
  border-bottom: 1px solid var(--dash360-border) !important;
}

#docsSearch h1 {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300 !important;
  font-size: 32px !important;
  color: var(--dash360-navy) !important;
  margin-bottom: 30px !important;
  text-align: center !important;
}

#searchBar {
  max-width: 600px !important;
  margin: 0 auto !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: var(--dash360-white) !important;
  border: 2px solid var(--dash360-border) !important;
  border-radius: 50px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px var(--dash360-shadow) !important;
  transition: all 0.3s ease !important;
}

#searchBar:focus-within {
  border-color: var(--dash360-logo-blue) !important;
  box-shadow: 0 4px 20px var(--dash360-hover-shadow) !important;
}

#searchBar input.search-query {
  border: none !important;
  background: transparent !important;
  padding: 15px 20px !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 20px !important;
  color: var(--dash360-navy) !important;
  flex: 1 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Main search bar text scrolling adjustment */
#docsSearch #searchBar input.search-query {
  padding: 15px 130px 15px 20px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#searchBar input.search-query::placeholder {
  color: var(--dash360-medium-gray) !important;
}

#searchBar button {
  background: var(--dash360-logo-blue) !important;
  border: none !important;
  padding: 15px 25px !important;
  color: var(--dash360-white) !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.3s ease !important;
  border-radius: 0 !important;
}

#searchBar button:hover {
  background: var(--dash360-navy) !important;
}

#searchBar button span {
  margin-left: 8px !important;
}

/* Search Bar Icon Styling - Only for main search */
#docsSearch #searchBar button .icon-search {
  font-size: 18px !important;
  color: var(--dash360-white) !important;
  position: relative !important;
  top: -2px !important;
}

/* Content Area */
#contentArea {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 20px !important;
}

#contentArea.container-fluid {
  padding: 20px !important;
}

/* Three Column Layout */
.threeCol.row-fluid,
section.threeCol.row-fluid {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.threeCol.row-fluid:after,
section.threeCol.row-fluid:after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}

/* Collection Cards */
.threeCol .collection,
.threeCol.row-fluid .collection,
section.threeCol .collection,
section.threeCol.row-fluid .collection {
  background: var(--dash360-white) !important;
  border: 1px solid var(--dash360-border) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 6px 16px rgba(26, 41, 81, 0.12) !important;
  margin-bottom: 3em !important;
  width: 32% !important;
  float: left !important;
  margin-left: 0 !important;
  margin-right: 2% !important;
  margin-top: 0 !important;
  padding: 0 !important;
  min-height: 300px !important;
  display: inline-block !important;
  vertical-align: top !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Clear every 4th element to start new row */
.threeCol .collection:nth-child(3n+1),
.threeCol.row-fluid .collection:nth-child(3n+1),
section.threeCol .collection:nth-child(3n+1),
section.threeCol.row-fluid .collection:nth-child(3n+1) {
  clear: left !important;
}

/* Remove right margin from every 3rd collection */
.threeCol .collection:nth-child(3n),
.threeCol.row-fluid .collection:nth-child(3n),
section.threeCol .collection:nth-child(3n),
section.threeCol.row-fluid .collection:nth-child(3n) {
  margin-right: 0 !important;
}

/* Add extra top margin to collections starting new rows (except first row) */
.threeCol .collection:nth-child(n+4),
.threeCol.row-fluid .collection:nth-child(n+4),
section.threeCol .collection:nth-child(n+4),
section.threeCol.row-fluid .collection:nth-child(n+4) {
  margin-top: 1.5em !important;
}

/* Reset any Bootstrap span classes that might be interfering */
.threeCol .collection[class*="span"],
.threeCol.row-fluid .collection[class*="span"],
section.threeCol .collection[class*="span"],
section.threeCol.row-fluid .collection[class*="span"] {
  width: 32% !important;
  margin-left: 0 !important;
}

/* Collection Header */
.collection-head {
  background: linear-gradient(135deg, var(--dash360-navy) 0%, var(--dash360-logo-blue) 100%) !important;
  padding: 25px !important;
  border-bottom: none !important;
}

.collection-head h2 {
  margin: 0 0 8px 0 !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
}

.collection-head h2 a {
  color: var(--dash360-white) !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  transform: scale(1) !important;
  display: inline-block !important;
}

.collection-head h2 a:hover {
  color: var(--dash360-white) !important;
  text-decoration: none !important;
  transform: scale(1.07) !important;
}

.collection-head p {
  color: rgba(255, 255, 255, 0.9) !important;
  margin: 0 !important;
  font-size: 14px !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400 !important;
}

.collection-head.no-desc {
  padding-bottom: 20px !important;
}

/* Collection Body */
.collection-body {
  padding: 0 !important;
}

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

.popArticles li {
  border-bottom: 1px solid var(--dash360-border) !important;
}

.popArticles li:last-child {
  border-bottom: none !important;
}

.popArticles li a {
  display: flex !important;
  align-items: center !important;
  padding: 15px 25px !important;
  color: var(--dash360-navy) !important;
  text-decoration: none !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  transition: all 0.3s ease !important;
  border-left: 3px solid transparent !important;
  margin-left: 0 !important;
}

.popArticles li a:hover {
  background: var(--dash360-light-gray) !important;
  color: var(--dash360-logo-blue) !important;
  border-left-color: var(--dash360-logo-blue) !important;
  padding-left: 30px !important;
  box-shadow: 0 2px 8px rgba(26, 41, 81, 0.1) !important;
}

.popArticles li a i {
  margin-right: 12px !important;
  color: var(--dash360-medium-gray) !important;
  transition: color 0.3s ease !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
}

.popArticles li a:hover i {
  color: var(--dash360-logo-blue) !important;
}

.popArticles li a span {
  flex: 1 !important;
  text-align: left !important;
}

/* Custom Document Icon */
.popArticles li a i.icon-article-doc:before,
.articleList li a i.icon-article-doc:before {
  content: "📄" !important;
  font-family: inherit !important;
  font-size: 18px !important;
  color: var(--dash360-logo-blue) !important;
}

.popArticles li a:hover i.icon-article-doc:before,
.articleList li a:hover i.icon-article-doc:before {
  color: var(--dash360-navy) !important;
}

/* Browse All Articles Link */
a.browse {
  display: block !important;
  padding: 20px 25px !important;
  background: var(--dash360-light-gray) !important;
  color: var(--dash360-ligt-blue) !important;
  text-decoration: none !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
  border-top: 1px solid var(--dash360-border) !important;
}

a.browse:hover {
  background: var(--dash360-ligt-blue) !important;
  color: var(--dash360-white) !important;
}

/* Search Results Page Styling */
#serp h1 {
  font-family: 'Roboto', sans-serif !important;
  font-weight: 300 !important;
  font-size: 28px !important;
  color: var(--dash360-navy) !important;
  margin-bottom: 20px !important;
}

#serp .articlesFound {
  font-family: 'Roboto', sans-serif !important;
  font-size: 14px !important;
  color: var(--dash360-medium-gray) !important;
  margin-bottom: 30px !important;
}

/* Search Results List */
#serp .articleList {
  list-style: none !important;
  margin: 0 0 30px 0 !important;
  padding: 0 !important;
}

#serp .articleList li {
  margin-bottom: 15px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: none !important;
  border-bottom: 1px solid var(--dash360-border) !important;
  padding-bottom: 15px !important;
}

#serp .articleList li:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

#serp .articleList li:hover {
  box-shadow: none !important;
  border-color: var(--dash360-border) !important;
}

#serp .articleList li a {
  color: var(--dash360-navy) !important;
  text-decoration: none !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 500 !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  transition: color 0.3s ease !important;
  display: flex !important;
  align-items: flex-start !important;
  margin-bottom: 8px !important;
  padding-left: 25px !important;
}

#serp .articleList li a:hover {
  color: var(--dash360-logo-blue) !important;
}

#serp .articleList li a i {
  margin-right: 10px !important;
  margin-left: -25px !important;
  color: var(--dash360-logo-blue) !important;
  flex-shrink: 0 !important;
  font-size: 20px !important;
  line-height: 1.4 !important;
}

#serp .articleList li a span {
  flex: 1 !important;
}

#serp .articleList li p {
  color: var(--dash360-medium-gray) !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding-left: 25px !important;
}

/* Pagination Styling */
.pagination {
  text-align: center !important;
  margin: 30px 0 !important;
}

.pagination ul {
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  gap: 8px !important;
}

.pagination ul li {
  display: inline-block !important;
  margin: 0 !important;
}

.pagination ul li a,
.pagination ul li span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--dash360-navy) !important;
  text-decoration: none !important;
  border: 3px solid #888888 !important;
  border-radius: 50% !important;
  background: var(--dash360-white) !important;
  transition: all 0.3s ease !important;
}

.pagination ul li:first-child a,
.pagination ul li:first-child span,
.pagination ul li:last-child a,
.pagination ul li:last-child span {
  border-radius: 50% !important;
}

.pagination ul li a:hover {
  background: var(--dash360-logo-blue) !important;
  border-color: var(--dash360-logo-blue) !important;
  color: var(--dash360-white) !important;
}

.pagination ul li.active a,
.pagination ul li.active span {
  background: var(--dash360-logo-blue) !important;
  border-color: var(--dash360-logo-blue) !important;
  color: var(--dash360-white) !important;
  font-weight: 600 !important;
}

.pagination ul li.disabled a,
.pagination ul li.disabled span {
  color: var(--dash360-medium-gray) !important;
  border-color: var(--dash360-light-gray) !important;
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

.pagination ul li.disabled a:hover {
  background: var(--dash360-white) !important;
  border-color: var(--dash360-light-gray) !important;
  color: var(--dash360-medium-gray) !important;
  transform: none !important;
}

/* Sidebar Styling */
#contentArea #sidebar h3 {
  text-transform: uppercase !important;
  font-size: 24px !important;
  color: var(--dash360-navy) !important;
  margin-bottom: 15px !important;
  margin-top: 25px !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
}

#contentArea #sidebar .nav.nav-list {
  margin-bottom: 20px !important;
}

#contentArea #sidebar .nav.nav-list li {
  margin: 2px 0 !important;
}

#contentArea #sidebar .nav.nav-list a {
  display: inline-block !important;
  color: #777777 !important;
  font-size: 18px !important;
  font-family: 'Roboto', sans-serif !important;
  font-weight: 600 !important;
  padding: 8px 15px 8px 0 !important;
  line-height: 1.2 !important;
  margin-left: 0 !important;
  transition: all 0.3s ease !important;
}

#contentArea #sidebar .nav.nav-list a:hover {
  color: var(--dash360-logo-blue) !important;
}

/* Sidebar Search Bar */
#sidebar form .search-query {
  font-size: 13px !important;
  line-height: 16px !important;
  font-family: 'Roboto', sans-serif !important;
  color: var(--dash360-navy) !important;
  border: 1px solid var(--dash360-border) !important;
  border-radius: 6px !important;
  padding: 10px 45px 10px 12px !important;
  transition: all 0.3s ease !important;
}

#sidebar form .search-query:focus {
  border-color: var(--dash360-logo-blue) !important;
  box-shadow: 0 0 0 3px rgba(74, 197, 212, 0.1) !important;
}

#sidebar form .search-query::placeholder {
  color: var(--dash360-medium-gray) !important;
}

#sidebar form button {
  color: var(--dash360-white) !important;
  transition: color 0.3s ease !important;
  background: var(--dash360-logo-blue) !important;
  border: none !important;
  border-radius: 0 6px 6px 0 !important;
  padding: 0 !important;
  width: 35px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 1px !important;
  right: 1px !important;
}

#sidebar form button:hover {
  color: var(--dash360-white) !important;
  background: var(--dash360-navy) !important;
}

#sidebar form button .icon-search {
  font-size: 16px !important;
  color: var(--dash360-white) !important;
}

/* Search Dropdown */
#serp-dd {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--dash360-white) !important;
  border: 1px solid var(--dash360-border) !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 4px 12px var(--dash360-shadow) !important;
  z-index: 1000 !important;
}

#serp-dd .result {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#serp-dd .result li {
  border-bottom: 1px solid var(--dash360-border) !important;
}

#serp-dd .result li:last-child {
  border-bottom: none !important;
}

#serp-dd .result a {
  display: block !important;
  padding: 12px 20px !important;
  color: var(--dash360-navy) !important;
  text-decoration: none !important;
  font-family: 'Roboto', sans-serif !important;
  transition: background 0.3s ease !important;
}

#serp-dd .result a:hover,
#serp-dd .result > li.active {
  background: var(--dash360-light-gray) !important;
  color: var(--dash360-ligt-blue) !important;
}

/* Footer */
footer {
  margin-top: 60px !important;
  padding: 30px 20px !important;
  background: var(--dash360-white) !important;
  border-top: 1px solid var(--dash360-border) !important;
}

footer p {
  color: var(--dash360-medium-gray) !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 14px !important;
  margin: 0 !important;
}

footer a {
  color: var(--dash360-logo-blue) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

footer a:hover {
  color: var(--dash360-navy) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
  .navbar .container-fluid {
    padding: 0 15px !important;
  }
  
  #docsSearch {
    padding: 30px 15px 20px 15px !important;
  }
  
  #docsSearch h1 {
    font-size: 24px !important;
  }
  
  #contentArea {
    padding: 20px 15px !important;
  }
  
  .threeCol.row-fluid,
  section.threeCol.row-fluid {
    display: block !important;
    text-align: center !important;
  }
  
  .collection {
    width: 100% !important;
    float: none !important;
    margin: 0 0 20px 0 !important;
    display: block !important;
  }
}

/* Custom Article Link Styling */
.contentWrapper a,
.most-pop-articles .popArticles a,
.category-list .category .article-count {
  color: var(--dash360-logo-blue) !important;
  transition: color 0.3s ease !important;
}

.contentWrapper a:hover,
.most-pop-articles .popArticles a:hover {
  color: var(--dash360-navy) !important;
}

/* Contact Button Styling - Flipped colors */
.navbar .nav li .contactUs,
.navbar .nav li .contactMobile {
  background: var(--dash360-logo-blue) !important;
  color: var(--dash360-white) !important;
  border-radius: 6px !important;
  padding: 8px 16px !important;
  margin: 10px 5px !important;
  border: 1px solid var(--dash360-logo-blue) !important;
  font-size: 17px !important;
  transition: all 0.3s ease !important;
}

.navbar .nav li .contactUs:hover,
.navbar .nav li .contactMobile:hover {
  background: var(--dash360-white) !important;
  color: var(--dash360-logo-blue) !important;
  border-color: var(--dash360-white) !important;
}

/* Button Styling for Mobile Navigation */
.btn-navbar {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  transition: background 0.3s ease !important;
}

.btn-navbar:hover {
  background: var(--dash360-white) !important;
  border-color: var(--dash360-white) !important;
}

.btn-navbar .icon-bar {
  background: var(--dash360-white) !important;
}

.btn-navbar:hover .icon-bar {
  background: var(--dash360-navy) !important;
}

/* Additional Icon Styling */
.icon-private-w {
  color: #c7c5c5 !important;
  transition: color 0.3s ease !important;
}

.navbar a:hover .icon-private-w,
.navbar a:focus .icon-private-w,
.navbar .active a .icon-private-w {
  color: var(--dash360-white) !important;
}

/* Enhanced Focus States for Accessibility */
a:focus,
button:focus,
input:focus {
  outline: 2px solid var(--dash360-logo-blue) !important;
  outline-offset: 2px !important;
}

/* Remove focus outline from navbar elements */
.navbar .brand:focus,
.navbar .nav li a:focus,
.navbar .nav li .contactUs:focus,
.navbar .nav li .contactMobile:focus {
  outline: none !important;
}

/* Remove focus outline from body elements */
#contentArea a:focus,
#contentArea button:focus,
.collection a:focus,
.collection button:focus,
.popArticles a:focus,
.collection-head a:focus,
a.browse:focus,
footer a:focus,
#sidebar a:focus,
#sidebar button:focus,
.contentWrapper a:focus,
.articleList a:focus,
.nav-list a:focus {
  outline: none !important;
}


html {
  scroll-behavior: smooth;
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}


#fullArticle ul,
#fullArticle ol {
  margin: 0 0 0.75em 1.25em !important;
  padding: 0 !important;
  list-style-position: outside !important;
  line-height: 1.6 !important;
}

#fullArticle li {
  margin: 0 !important;
}

#fullArticle li + li {
  margin-top: 0.25em !important;
}

#fullArticle ul ul,
#fullArticle ol ol,
#fullArticle ul ol,
#fullArticle ol ul {
  margin: 0.25em 0 0.25em 1.25em !important;
}

#fullArticle li > p {
  margin: 0 !important;
}


/* Normalize ordered-list numbering by nesting level */
#fullArticle ol { 
  list-style-type: decimal !important;       /* 1, 2, 3 */
  list-style-position: outside !important;
  margin: 0 0 0.75em 1.25em !important;
  padding: 0 !important;
}

#fullArticle ol ol { 
  list-style-type: lower-alpha !important;   /* a, b, c */
  margin-left: 1.25em !important;
}

#fullArticle ol ol ol { 
  list-style-type: lower-roman !important;   /* i, ii, iii */
  margin-left: 1.25em !important;
}

#fullArticle ol ol ol ol { 
  list-style-type: lower-alpha !important;   /* a, b, c */
  margin-left: 1.25em !important;
}

#fullArticle ol ol ol ol ol { 
  list-style-type: lower-roman !important;   /* i, ii, iii */
  margin-left: 1.25em !important;
}


/* --- Undo the over-aggressive hide that nuked the sidebar --- */
/* If you have this from earlier, DELETE it, or override it here: */
/*

*/

/* Only hide the true right-rail/utilities, not the sidebar */
#contentArea .right-rail,
#contentArea .utilities,
#contentArea .docs-utilities {
  display: none !important;
}

/* --- Layout: keep left sidebar, give article the rest --- */
#contentArea {
  max-width: none !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 20px 24px !important;

  /* Two-column layout */
  display: flex !important;
  align-items: flex-start !important;
  gap: 28px !important;              /* space between sidebar and article */
}

/* Sidebar stays visible and fixed width */
#contentArea #sidebar {
  display: block !important;
  flex: 0 0 260px !important;        /* fixed sidebar width */
  max-width: 260px !important;
  position: static !important;       /* make sure it’s not off-screen */
}

/* Article takes the remaining width */
#contentArea #main,
#contentArea .contentWrapper,
#contentArea .article,
#contentArea #fullArticle {
  flex: 1 1 auto !important;
  min-width: 0 !important;           /* prevents overflow in flex children */
  max-width: none !important;
  width: 100% !important;
}

/* Move Powered by Help Scout / utilities box under the article */
#contentArea .docs-utilities,
#contentArea .utilities,
#contentArea .powered-by {
  order: 3 !important;         /* push to bottom of flex container */
  flex: 0 0 100% !important;   /* take full width like a footer */
  max-width: 100% !important;
  margin-top: 30px !important;
  text-align: center !important;
}


/* --- Responsive embeds (fix the “weird” Loom/video sizing) --- */
#fullArticle iframe,
#fullArticle embed,
#fullArticle object,
#fullArticle video {
  display: block !important;
  max-width: 100% !important;
}

/* Modern browsers: aspect-ratio handles height */
#fullArticle iframe {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
}

/* Fallback if your iframe is inside a theme wrapper with fixed dimensions */
#fullArticle .video, 
#fullArticle .embed,
#fullArticle .responsive-embed {
  max-width: 100% !important;
  width: 100% !important;
}

/* --- Stack on smaller screens --- */
@media (max-width: 1024px) {
  #contentArea {
    display: block !important;
  }
  #contentArea #sidebar {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    margin-bottom: 16px !important;
  }
}

/* Move the right-rail utilities block to the bottom, full width */
#contentArea .docs-utilities,
#contentArea .utilities,
#contentArea .right-rail,
#contentArea .powered-by,
#contentArea .kb-utilities,         /* catch common theme names */

#contentArea > [class*="utilities"]:not(#sidebar) {
  order: 3 !important;              /* after sidebar (1) and main (2) */
  flex: 0 0 100% !important;        /* full-width row at the bottom */
  max-width: 100% !important;
  margin: 24px 0 0 0 !important;
  align-self: stretch !important;

  /* optional: make it look like a footer */
  background: transparent !important;
  border: 0 !important;
  text-align: center !important;
  color: var(--dash360-medium-gray) !important;
  padding: 10px 0 !important;
}

/* Ensure the main two columns keep their layout */
#contentArea {
  display: flex !important;
  align-items: flex-start !important;
  gap: 28px !important;
}
#contentArea #sidebar { order: 1 !important; }
#contentArea #main,
#contentArea .contentWrapper,
#contentArea .article,
#contentArea #fullArticle { order: 2 !important; }

/* Mobile: it will naturally stack; keep spacing tidy */
@media (max-width: 1024px) {
  #contentArea {
    display: block !important;
  }
}

/* === Layout: keep sidebar, wide article, push right rail to bottom === */

/* Ensure flex layout is on */
#contentArea {
  display: flex !important;
  align-items: flex-start !important;
  gap: 28px !important;
}

/* Sidebar stays fixed on the left */
#contentArea > #sidebar {
  order: 1 !important;
  flex: 0 0 260px !important;
  max-width: 260px !important;
}

/* ===== CLEAN, STABLE LAYOUT FOR HELPSCOUT ARTICLE PAGES ===== */

/* 1) Make #contentArea a two-column flex layout that can wrap a footer row */
#contentArea {
  max-width: none !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 20px 24px !important;

  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 28px !important;
  flex-wrap: wrap !important;          /* allows a full-width footer row */
}

/* 2) Sidebar: fixed width, first column */
#contentArea #sidebar,
#contentArea .sidebar {
  order: 1 !important;
  display: block !important;
  flex: 0 0 260px !important;          /* fixed sidebar width */
  max-width: 260px !important;
  min-width: 220px !important;
}

/* 3) Main article column: takes all remaining width */
#contentArea #main,
#contentArea .contentWrapper,
#contentArea .article,
#contentArea #fullArticle,
#contentArea .docs-article,
#contentArea .article-container {
  order: 2 !important;
  flex: 1 1 auto !important;
  min-width: 600px !important;         /* prevents ultra-skinny column */
  max-width: none !important;
  width: 100% !important;
}

/* 4) Kill any stray width caps/narrowing applied inside the article */
#fullArticle,
#fullArticle > * {
  max-width: none !important;
  width: auto !important;
  white-space: normal !important;      /* stop vertical letter stacking */
  word-break: normal !important;
  overflow-wrap: anywhere;             /* but still wrap long URLs */
}

/* 5) Responsive embeds (Loom/YouTube/etc.) */
#fullArticle iframe,
#fullArticle video,
#fullArticle embed,
#fullArticle object {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;     /* keeps proper proportions */
}

/* 6) Move the right rail / utilities to a footer row under the article */
#contentArea .docs-utilities,
#contentArea .utilities,
#contentArea .powered-by,
#contentArea .kb-utilities,
#contentArea .article-utilities,
#contentArea .hs-utilities {
  order: 3 !important;                 /* after sidebar (1) and main (2) */
  flex: 0 0 100% !important;           /* full-width footer strip */
  max-width: 100% !important;
  margin: 24px 0 0 0 !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  align-self: stretch !important;
}

/* 7) Tablet/phone: stack naturally */
@media (max-width: 1024px) {
  #contentArea #sidebar,
  #contentArea .sidebar {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 16px !important;
  }
  #contentArea #main,
  #contentArea .contentWrapper,
  #contentArea .article,
  #contentArea #fullArticle,
  #contentArea .docs-article,
  #contentArea .article-container {
    min-width: 0 !important;
  }
}

/* Shift sidebar slightly to the right */
#contentArea #sidebar {
  margin-left: 80px !important;   /* adjust the px value to taste */
}

/* Force true black for all article copy (but keep links logo-blue) */
#fullArticle,
#fullArticle p,
#fullArticle li,
#fullArticle span,
#fullArticle strong,
#fullArticle b,
#fullArticle em,
#fullArticle i,
#fullArticle blockquote,
#fullArticle code,
#fullArticle pre,
#fullArticle table,
#fullArticle th,
#fullArticle td,
#fullArticle dt,
#fullArticle dd,
#fullArticle h1,
#fullArticle h2,
#fullArticle h3,
#fullArticle h4,
#fullArticle h5,
#fullArticle h6 {
  color: #000 !important;
  -webkit-font-smoothing: auto !important;  /* avoid washed-out bold on macOS */
  -moz-osx-font-smoothing: auto !important;
}

/* Make sure list markers (•, 1., i.) are black too */
#fullArticle li::marker {
  color: #000 !important;
}

/* Ensure bold actually looks bold */
#fullArticle strong,
#fullArticle b {
  font-weight: 700 !important;
}

/* Links stay logo-blue (override comes AFTER the global black rule) */
#fullArticle a,
#fullArticle a:visited,
#fullArticle a:hover,
#fullArticle a:focus {
  color: var(--dash360-logo-blue) !important;
}


/* Top nav: make all menu link text white */
.navbar .nav li a,
.navbar .nav li a:visited {
  color: var(--dash360-white) !important;
}

/* Keep hover/active states white (background stays as-is) */
.navbar .nav li a:hover,
.navbar .nav li a:focus,
.navbar .nav .active a,
.navbar .nav .active a:hover,
.navbar .nav .active a:focus {
  color: var(--dash360-white) !important;
}

/* Dropdown caret (triangle) also white */
.navbar .nav li a .caret {
  border-top-color: var(--dash360-white) !important;
  border-bottom-color: var(--dash360-white) !important;
}

/* Lock/private icon in nav: white by default too */
.icon-private-w {
  color: var(--dash360-white) !important;
}

/* Make category card headers solid (no light fade) */
.threeCol .collection .collection-head,
section.threeCol .collection .collection-head,
.collection-head {
  background: var(--dash360-navy) !important;   /* same dark as the top bar */
  background-image: none !important;            /* kill any gradient */
}


/* === TYPOGRAPHY TUNE-UP (sizes only) =============================== */

/* 1) Home page hero title ("How can we help?") */
#docsSearch h1 {
  font-size: 40px !important;   /* was ~32px */
  line-height: 1.25 !important;
}

/* Home page category card titles (Release Notes / General / etc.) */
.collection-head h2 {
  font-size: 24px !important;   /* was ~20px */
  line-height: 1.25 !important;
}

/* Home page/article lists under each card */
.popArticles li a,
.articleList li a,
.articleList li p {
  font-size: 19px !important;   /* was ~16px */
  line-height: 1.6 !important;
}

/* 2 & 3) Article pages (and category pages that show an article body)
   Make all body copy larger without changing link colors. */
#fullArticle {
  font-size: 21px !important;   /* base size for paragraphs & lists */
  line-height: 1.8 !important;
}

/* Headings inside articles (keeps a clear hierarchy) */
#fullArticle h1 { font-size: 32px !important; line-height: 1.25 !important; }
#fullArticle h2 { font-size: 26px !important; line-height: 1.3  !important; }
#fullArticle h3 { font-size: 22px !important; line-height: 1.35 !important; }

/* Optional: slightly tighten small screens so it doesn’t feel oversized */
@media (max-width: 768px) {
  #docsSearch h1 { font-size: 34px !important; }
  #fullArticle     { font-size: 22px !important; }
  #fullArticle h1  { font-size: 28px !important; }
  #fullArticle h2  { font-size: 26px !important; }
  #fullArticle h3  { font-size: 24px !important; }
}

/* 1) Home + category lists: make the black row text larger */
.popArticles li a,
.articleList li a {
  font-size: 18px !important;
  line-height: 1.6 !important;
}

/* 2 & 3) Article pages: make the body copy larger everywhere */
#fullArticle,
#fullArticle p,
#fullArticle li,
#fullArticle td,
#fullArticle th,
#fullArticle code,
#fullArticle pre,
.docs-article,
.docs-article p,
.docs-article li,
.article,
.article p,
.article li,
.article-container,
.article-container p,
.article-container li,
.contentWrapper .article,
.contentWrapper .docs-article {
  font-size: 18px !important;      /* bump this to 19/20px if you want bigger */
  line-height: 1.75 !important;     /* comfortable reading line-height */
}

/* === Article typography – unified size & color === */
#fullArticle,
#fullArticle .contentWrapper,
#fullArticle .article {
  font-size: 18px !important;      /* baseline for the whole article */
  line-height: 1.7 !important;
}

/* Make body copy inherit that baseline everywhere */
#fullArticle p,
#fullArticle li,
#fullArticle td, #fullArticle th,
#fullArticle dd, #fullArticle dt {
  font-size: 1em !important;       /* inherits the 18px above */
  line-height: 1.7 !important;
  color: #0b0b0b !important;       /* keep links their own color */
}

/* Keep bold truly dark */
#fullArticle b,
#fullArticle strong {
  color: #0b0b0b !important;
  font-weight: 700 !important;
}

/* Kill the theme’s larger “lead/intro/first paragraph” size */
#fullArticle p.lead,
#fullArticle .lead,
#fullArticle .intro,
#fullArticle .article-body > p:first-child,
#fullArticle .contentWrapper > p:first-child {
  font-size: 1em !important;       /* same 18px as the rest */
  line-height: 1.7 !important;
}

/* (Optional) If pasted content brought inline sizes, neutralize them */
#fullArticle [style*="font-size"] { font-size: 1em !important; }

/* ===== Unified article text sizing (affects Admin articles too) ===== */

/* Choose your base article body size here */
:root { --kb-body-size: 18px; }  /* try 19px or 20px if you want bigger */

/* Set the baseline on every article wrapper variant */
#fullArticle,
#fullArticle .contentWrapper,
#fullArticle .article,
#fullArticle .article-body,
.docs-article,
.article,
.article-container {
  font-size: var(--kb-body-size) !important;
  line-height: 1.7 !important;
}

/* Make all common text elements inherit that baseline */
#fullArticle :is(p, ul, ol, li, span, a, blockquote, figcaption, dt, dd, td, th, code, pre, small),
.docs-article :is(p, ul, ol, li, span, a, blockquote, figcaption, dt, dd, td, th, code, pre, small),
.article :is(p, ul, ol, li, span, a, blockquote, figcaption, dt, dd, td, th, code, pre, small),
.article-container :is(p, ul, ol, li, span, a, blockquote, figcaption, dt, dd, td, th, code, pre, small) {
  font-size: 1em !important;           /* inherits --kb-body-size */
  line-height: 1.7 !important;
}

/* Kill the theme’s larger “lead/intro/first paragraph” style */
#fullArticle :is(.lead, .intro),
#fullArticle .article-body > p:first-child,
#fullArticle .contentWrapper > p:first-child,
.docs-article :is(.lead, .intro),
.docs-article > p:first-child {
  font-size: 1em !important;
  line-height: 1.7 !important;
}

/* If any pasted content brought inline font-size, normalize it */
#fullArticle [style*="font-size"] { font-size: 1em !important; }


/* Table of Contents / in-page anchor links inside articles */
:root { --kb-body-size: 18px; } /* keep or bump to 19/20px if you want bigger */

#fullArticle nav.toc a,
#fullArticle .toc a,
#fullArticle #toc a,
#fullArticle .table-of-contents a,
#fullArticle .article-toc a,
#fullArticle .toc-list a,
#fullArticle a[href^="#"] {
  font-size: var(--kb-body-size, 18px) !important;
  line-height: 1.6 !important;
}

/* Make the list items match too (some themes size the <li> smaller) */
#fullArticle nav.toc li,
#fullArticle .toc li,
#fullArticle #toc li,
#fullArticle .table-of-contents li,
#fullArticle .article-toc li,
#fullArticle .toc-list li {
  font-size: var(--kb-body-size, 18px) !important;
  line-height: 1.6 !important;
}


/* Stronger hover/active highlight for top navbar items (not the Contact pill) */
:root { --nav-hover-alpha: 0.22; }  /* tweak to 0.26–0.30 for even lighter */

.navbar .nav > li > a:not(.contactUs):hover,
.navbar .nav > li > a:not(.contactUs):focus {
  background: rgba(255, 255, 255, var(--nav-hover-alpha)) !important;
  color: var(--dash360-white) !important;
}

.navbar .nav > li.active > a:not(.contactUs),
.navbar .nav > li.active > a:not(.contactUs):hover,
.navbar .nav > li.active > a:not(.contactUs):focus {
  background: rgba(255, 255, 255, var(--nav-hover-alpha)) !important;
  color: var(--dash360-white) !important;
}

/* Home page: make the 3 cards narrower with bigger gutters */
:root {
  --home-card-width: 30%;  /* was 32% */
  --home-card-gap:   5%;   /* was ~2% (30 + 5 + 30 + 5 + 30 = 100) */
}

.threeCol .collection,
.threeCol.row-fluid .collection,
section.threeCol .collection,
section.threeCol.row-fluid .collection,
.threeCol .collection[class*="span"],
.threeCol.row-fluid .collection[class*="span"],
section.threeCol .collection[class*="span"],
section.threeCol.row-fluid .collection[class*="span"] {
  width: var(--home-card-width) !important;
  margin-right: var(--home-card-gap) !important;
}

/* keep the 3rd card flush on the right */
.threeCol .collection:nth-child(3n),
.threeCol.row-fluid .collection:nth-child(3n),
section.threeCol .collection:nth-child(3n),
section.threeCol.row-fluid .collection:nth-child(3n) {
  margin-right: 0 !important;
}

/* Add side gutters around the 3-card rows on the home page */
:root { --home-outer-gutter: 28px; }  /* tweak to taste: 24–40px */

.threeCol.row-fluid,
section.threeCol.row-fluid {
  padding-left: var(--home-outer-gutter) !important;
  padding-right: var(--home-outer-gutter) !important;
}







/* === Sidebar width + search width (tiny bump, no other layout changes) === */
#contentArea #sidebar,
#contentArea .sidebar {
  flex: 0 0 292px !important;   /* was 260px — small increase so caret fits */
  max-width: 292px !important;
}

/* Make the sidebar search fill the new width cleanly */
#sidebar form { position: relative !important; }
#sidebar form .search-query { width: 100% !important; display: block !important; }


/* Normalize all images inside articles */
#fullArticle img {
  display: block !important;
  max-width: 100% !important;   /* keeps them responsive */
  height: auto !important;      /* preserves proportions */
  margin: 20px auto !important; /* centers the image with spacing */
  
  /* Force consistent size */
  width: 900px !important;      /* adjust this to your preferred "large" size */
}

/* Normalize all article images: left-aligned and large */
#fullArticle img {
  display: block !important;
  width: 100% !important;      /* make images stretch across the article width */
  max-width: 1300px !important; /* cap so they don’t get *too* wide, adjust as needed */
  height: auto !important;      /* keeps proportions */
  margin: 20px 0 !important;    /* spacing above/below, no auto-centering */
}

/* Shift Dash360 logo slightly left so it doesn't overlap menu */
.navbar .brand {
  margin-left: -80px !important;   /* adjust px value until logo sits correctly */
}