#navbar a {
  line-height: 1.0; 
}

/* --- Left sidebar: make the section title look like other top-level entries --- */
#navbar .nav.level1 > li > a,
#navbar .nav.level1 > li > .sidebar-item {
  display: block;
  font-weight: 500;         /* matches #toc level1 weight */
  font-size: 16px;          /* keep consistent */
  padding: 5px 10px;        /* same padding as other level1 links */
  margin: 0 0 0px;
  text-decoration: none;    /* default: no underline (underline on hover only) */
}

/* --- Children: match level2 item style/spacing of the TOC below --- */
#navbar .nav.level2 > li > a,
#navbar .nav.level2 > li > a.sidebar-item {
  display: block;
  font-size: 16px;
  color: var(--sidebar-item-color);
  line-height: .75;         /* same tightened line-height used elsewhere */
  margin: 4px 0;            /* same vertical spacing as your .level2 rules */
  text-decoration: none;    /* default off; hover shows underline */
}

/* --- Hover/focus behavior to match rest of sidebar --- */
#navbar .nav.level2 > li > a:hover,
#navbar .nav.level2 > li > a:focus {
  color: var(--link-hover-color) !important;
  text-decoration: underline;
  text-decoration-color: var(--link-hover-color);
}

/* Optional: if the global #navbar a rule is causing underlines, normalize it */
#navbar a { line-height: 1.2; text-decoration: none; }


a 
{
    color: var(--link-color);
    text-decoration: underline;
    text-decoration-color: var(--link-color);
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
    transition: color .25s;
}

mark {
background-color: #ffc021;
}

article hiddentext {
  /* color:#00b0f0; */
  color: #ffffff;
}

/* Modifies appearance of table header */
table th {
  color: var(--table-header-color);
  background-color: var(--table-header-bg-color);
  text-transform: none;
  font-family: "Inter", sans-serif;
  font-weight: bold;
  border: none;
  font-size: 18px;
  line-height: normal;
  vertical-align: bottom;
  padding: 9px 10px;
}

/* Modifies appearance of table rows */
.table tr:nth-child(even) {
  color: #505050;
  background: #EFEFEF !Important;
  font-family: "Lato", sans-serif;
}

.table tr:nth-child(odd) {
  color: #505050;
  background: #ffffff !Important;
  font-family: "Lato", sans-serif;
}

.ha {
  color: #ffc021;
  font-size: 28px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  margin: 1rem 0 1rem;
}

.ha2 {
  color: #ffc021;
  font-size: 28px;
  font-weight: 600;
  font-family: "Inter", sans-serif;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

.alert > p 
{
    margin: 0;
    font-size: 18px;
    font-weight: 400;
   overflow: auto;
}

:hover > .anchorjs-link,.anchorjs-link:focus {
    opacity: 0;
}

/* Headings */

h1, h2, h3, h4, h5 {
    line-height: initial;
    padding-bottom: 0px;
    font-family: "Inter", sans-serif;
}

h1, h1:first-child {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: 0.5px;
    margin: 1.5rem 0 1rem;
    color: #1A2930;
}

.article h1 {
    margin-block-end: -0.2em;
}

h2 {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.3;
    margin: 1.25rem 0 10px;
    color: #1A2930;

}

.article h2 {
    margin-block-start: 1.3em;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--separator-color);
}

h3 {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.35;
    margin: 1.25rem 0 10px;
    color: #1A2930;
    margin-block-start: .5em;
}

.article h3 {
    font-size: 1.75em;
    font-weight: 500;
    margin-block-start: .75em;
    margin-block-end: 0.9em;
}

h4 {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    margin: 1.25rem 0 10px;
    border-bottom: none;
    color: #1A2930;
}

.article h4 {
    font-size: 1.5em;
    font-weight: 300;
    margin-block-start: .5em;
    margin-block-end: .5em;
    padding-bottom: 0;
    border-bottom: none;
} 

h5 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    margin: 1.25rem 0 10px;
    color: #1A2930;
    letter-spacing: 0.0em;
}

.article h5 {
    font-size: 1.13em;
    font-weight: 400;
    text-decoration: none;
    margin-block-start: .5em;
    margin-block-end: .5em;
}

h6 {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    margin: 1.25rem 0 10px;
    color: #1A2930;
    letter-spacing: 0.0em;
}

p {
  margin-block-start: 10px;
  margin-block-end: 10px;
  font-weight: 400;
}

body {
  font-family: "Lato", sans-serif;
  line-height: 1.5;
  font-size: 18px;
}

main li > ul {
     display: block;
     padding-top: 0px;
}

toc li > ul {
     display: none;
}

ul.level2 > li > a.sidebar-item:hover,
ul.level2 > li > a.sidebar-item:focus,
ul.level3 > li > a.sidebar-item:hover,
ul.level3 > li > a.sidebar-item:focus
{
    color: var(--link-active-color);
    text-decoration: underline;
    text-decoration-color: var(--link-active-color);
}

ul.breadcrumb {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  color: #333;
}

ul.breadcrumb li {
  display: inline;
  white-space: nowrap;
}

ul.breadcrumb li + li::before {
  content: "/";
  margin: 0 0.4em;
  color: var(--text-color);
}


/* ========== Ellipsis Breadcrumb ========== */
.breadcrumb-ellipsis {
  padding: 0;
  margin-top: 10px;
  color: var(--text-color);
  font-weight: bold;
  cursor: default;
}

.breadcrumb-ellipsis:focus {
  text-decoration: underline;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: #ffffff;
  margin-block-start: 1em;
}

.flex-container > div {
  background-color: #ffffff;
  margin: 10px;
  text-align: center;
  font-size: 30px;
  width: 300px;
  padding-bottom: 20px;
}

.flex-container2 {
  display: flex;
  flex-wrap: wrap;
  background-color: #ffffff;
  gap: 10px 30px;
  padding-top: 10px;
  padding-left: 20px;
}

.flex-container2 > div {
  background-color: #ffffff;
  text-align: left;
}

.flex-container3 {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  background-color: #ffffff;
  margin-block-start: 1em;
}

.flex-container3 > div {
  background-color: #f9eec2;
  margin: 10px;
  text-align: left;
  font-size: 18px;
  width: 400px;
  padding-bottom: 0px;
  border-radius: 10px;
}

.flex-container3 img {
  display: block;      /* makes the image a block-level element */
  margin: 0 auto;      /* equal left/right margins centers it */
  padding-top: 10px;
}

.flex-container-lic {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.flex-container-lic-child1 {
 width: 20%;
 text-align: left;
 color: white;
}

.flex-container-lic-child2 {
 width: 80%;
 text-align: left;
}

@media (max-width: 600px) {
  .flex-container-lic {
    display: flex;
    flex-direction: column;
  }
}

table td {
  font-weight: normal;
  vertical-align: top;
}

.toc-filter {
   border-radius: 10px;
}

.toc-filter > input {
    font-size: 18px;
}

ul.level2 > li > a, ul.level2 > li > a.sidebar-item {
    font-size: 16px;
    color: var(--sidebar-item-color);
    margin: 4px 0;
}

ul.level3 > li > a, ul.level3 > li > a.sidebar-item {
    font-size: 16px;
    color: var(--sidebar-item-color);
    margin: 4px 0;
}

ul.level4 > li > a, ul.level4 > li > a.sidebar-item {
    margin-left: 17px;
    font-size: 16px;
    color: var(--sidebar-item-color);
}

ul.level5 > li > a, ul.level5 > li > a.sidebar-item {
    margin-left: -2px;
    margin-bottom: 2px;
    font-size: 16px;
    color: var(--sidebar-item-color);
}

ul.level6 > li > a, ul.level6 > li > a.sidebar-item {
    margin-left: -22px;
    margin-bottom: 2px;
    font-size: 16px;
    color: var(--sidebar-item-color);
}

ul.level7 > li > a, ul.level6 > li > a.sidebar-item {
    margin-left: -22px;
    margin-bottom: 2px;
    font-size: 16px;
    color: var(--sidebar-item-color);
}

ul.level4 .expand-stub {
    top: 1px;
    margin-left: 16px;
}

ul.level5 .expand-stub {
    top: 1px;
    margin-left: -4px;
}

ul.level6 .expand-stub {
    top: 1px;
    margin-left: -24px;
}

ul.level4 {
    padding-inline-start: 0;
    margin-bottom: 0px;
}

.table-of-contents {
  position: sticky;
  max-height: 100%;
  font-size: 16px;
  border-radius: 10px;
  margin-left: .25em;
  background: var(--table-header-bg-color);
}

.table-of-contents ul {
  margin-top: 0em;
  padding-inline-start: 1.5em;
  display: list-item;
  margin-block-start: 0em;
}

.table-of-contents li {
  margin: 0 0 0.0 0;
  line-height: 2em;
  display: flex;
  position: relative;
}

.table-of-contents ul li::before {
  content: "•";
  margin-right: 5px;
  font-family: "Lato", sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.7em;
}

.table-of-contents a {
  text-decoration: none;
  text-decoration: none;
  text-decoration-color: var(--link-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

.alert.alert-info {
    overflow: auto;
}

@media (max-width: 600px) {
  
}

@media (max-width: 600px) {
  article {
    margin-top: -40px;
  }
}

article {
  margin-top: -10px;
}

.search {
  background: var(--search-bg-color);
  border: 1px solid var(--search-border-color);
  border-radius: 10px;
  position: relative;
  margin-block-start: 20px;
  margin-block-end: 20px;
}

.search > .search-icon {
    font-size: 1.2em;
    color: var(--search-searchicon-color);
    position: absolute;
    top: 6px;
    left: 9px;
}

.toc-filter > .filter-icon {
    font-size: 1.2em;
    color: var(--toc-filter-filtericon-color);
    position: absolute;
    top: 6px;
    left: 9px;
}

.blackout {
    display: block;
    visibility: hidden;
    position: absolute;
    z-index: 100;
    top: 60px;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
}

@media (max-width: 600px) {
nav {
    background-color: #e8e8e8;
  }
}

@media (max-width: 600px) { nav {
    border-radius: 10px;
  }
}

@media (max-width: 600px) {
#toc ul.level1 > li > a, #toc ul.level1 > li > a.active {
    background-color: #e8e8e8 !important;
    border-radius: 10px;
  }
}

pre {
    padding: 9.5px;
    margin: 0 0 10px;
    font-size: 13px;
    word-break: break-all;
    word-wrap: break-word;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 10px;
    display:block;
    overflow:auto;
    scrollbar-width:thin;
}

::-webkit-scrollbar {
    scrollbar-width: thin;
}

article ul li, article ol li {
    margin-top: 10px;
    margin-bottom: 10px;
}

#toc ul.level1 > li > a {
    font-weight: 500;
    margin-bottom: 10px;
    padding: 5px 10px;
    font-size: 16px;
}

.toc .nav > li.active > a {
    font-weight: 600;
    color: #000; /* Adjust the color if needed */
}

#toc ul.level1>li>a, #toc ul.level1>li>a.active {
    background-color: #ffffff; 
    border-radius: 10px;
    margin-left: -10px;
}

table td p {
    font-weight: normal;
    margin-block-start: 10px;
    margin-block-end: 10px;
}

a:hover, a:focus {
  color: var(--link-hover-color) !important;
  text-decoration: underline;
  text-decoration-color: var(--link-hover-color);
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

/* Left sidebar links */
nav a.sidebar-item:hover,
nav a.sidebar-item:focus {
  color: var(--link-hover-color) !important;
  text-decoration: underline;
  text-decoration-color: var(--link-hover-color);
}

/* Right TOC links */
.table-of-contents a:hover,
.table-of-contents a:focus {
  color: var(--link-hover-color) !important;
  text-decoration: underline;
  text-decoration-color: var(--link-hover-color);
}

.subnav.navbar {
    margin: 0 -15px;
    margin-left: 0px;
    margin-right: 0px;
}

.btn {
  font-family: "Inter", sans-serif;
  border-radius: 10px;
  border: none;
  padding: 10px;
  cursor: pointer;
  font-size: 18px;
}

.btn-primary {
  background-color: #E81863;
  color: white;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #BE2933;
}

.alert.alert-info {
    border: 2px solid var(--alert-info-border-color);
    background: var(--alert-info-bg-color);
    border-radius: 10px;
}

.alert.alert-danger {
    border: 2px solid var(--alert-danger-border-color);
    background: var(--alert-danger-bg-color);
    border-radius: 10px;
    margin-right: 0px !important;
}

.TIP.alert.alert-info {
    border: 2px solid var(--alert-tip-border-color);
    background: var(--alert-tip-bg-color);
    border-radius: 10px;
}

.alert.alert-warning {
    border: 2px solid var(--alert-warning-border-color);
    background: var(--alert-warning-bg-color);
    border-radius: 10px;
}

/* ========== Layout for TOC and Main Content ========== */
.content-with-toc {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}

.main-content {
  flex: 1;
  max-width: calc(100% - 300px);
}

/* ========== Responsive Behavior ========== */
@media (max-width: 900px) {
  .content-with-toc {
    flex-direction: column;
  }
  .main-content {
    max-width: 100%;
  }
}

/* ========== Footer ========== */

.footer {
  display: none;
  background-color: #fff;
  text-align: center;
  color: var(--text-color);
  padding: 10px;
  margin: 0 20px 20px 20px;
  border-radius: 8px;
  font-size: 16px;
  font-family: "Inter", sans-serif;
}

@media (max-width: 768px) {
  .footer {
    display: block;
    background-color: #fff;
    text-align: center;
    color: var(--text-color);
    padding: 10px;
    margin: 0 20px 20px 20px;
    border-radius: 16px;
    font-size: 16px;
    font-family: "Inter", sans-serif;
  }
}

footer.copyright-footer {
  flex-shrink: 0;
  clear: both;
  width: 100%;
  text-align: center;
  padding: 1rem 0;
  font-size: 16px;
  font-family: "Inter", sans-serif;
  color: var(--sidebar-item-color);
  background-color: transparent;
  margin-top: 2rem;
  position: relative;
  z-index: 0;
  font-weight: normal;
}

@media (max-width: 768px) {
  .copyright-footer {
    display: block !important;
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-family: "Inter", sans-serif;
    color: var(--sidebar-item-color);
    background-color: transparent;
    font-weight: normal;
    margin-bottom: 3rem;
  }
}

.copyright-footer {
  font-weight: normal;
  font-size: 16px;
}


/* Responsive fix for note boxes on narrow screens */
.NOTE,
.IMPORTANT,
.WARNING,
.TIP {
  box-sizing: border-box;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

@media (max-width: 600px) {
  .NOTE,
  .IMPORTANT,
  .WARNING,
  .TIP {
    width: 100%;
    padding: 1rem;
    margin-left: 0;
    margin-right: 0;
    font-size: 18px;
  }

  .NOTE h5 {
    font-size: 18px;
    margin-top: 0;
  }
}

/* Align "In this article" sidebar with the article title, not breadcrumb */

/* Refined "In this article" sticky alignment */

/* Pixel-perfect alignment of "In this article" with H1 title */

/* Optional: Reduce spacing below breadcrumb */
#breadcrumb {
  margin-bottom: 0.5rem !important;
  padding: 8px 8px;
  background: var(--breadcrumb-bg-color);
  border-radius: 4px;
  line-height: 0px;
}

/* Tighten wrapped TOC items and preserve spacing between them */
.sidebar .toc ul li a {
  display: block;
  line-height: 1.3;
  text-underline-offset: 5px;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}

/* Ensure spacing between top-level and child items is consistent */
.sidebar .toc ul li {
  margin-bottom: 0.5em;
}

/* Optional: slightly increase spacing for nested groups */
.sidebar .toc ul ul {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}

/* On this page styling */
.on-this-page {
  position: sticky;
  top: 3.0rem !important;
  align-self: flex-start;
  margin-top: 0 !important;
  padding-top: 0 !important;
  width: 260px;
  background: var(--table-header-bg-color, #f9f9f9);
  font-size: 16px;
  padding-left: 1em;
  padding-right: 1em;
  border-radius: 10px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-left: auto;
}

.on-this-page ul li a {
  display: block;
  line-height: 1.3;
  text-underline-offset: 5px;
}

.on-this-page ul li {
  margin-bottom: 0.5em;  /* Spacing between bullets */
}

@media (max-width: 768px) {
  .on-this-page {
    display: none !important;
  }
}

.sidebar .toc ul li a {
  display: block;
  line-height: 1.3;
  text-underline-offset: 5px;
}

.sidebar .toc ul li {
  margin-bottom: 0.5em;
}

#toc ul li a {
    padding: 0 0 0 10px;
    margin-bottom: .5em;
}

html, body {
  padding: 0;
  margin: 0;
  font-size: 18px;
  font-family: "Lato", sans-serif;
  color: var(--text-color);
  background-color: var(--main-bg-color);
  min-height: 100%;
  overflow-x: hidden; /* optional, to prevent horizontal scroll */
}


/* Reset iframe styling to remove default spacing */
iframe {
  max-width: 800px;
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid;
  border-color: var(--text-color);
  box-shadow: 5px 5px 5px -5px var(--text-color);
  border-radius: 10px;
  margin: 0 !important;
  padding: 0 !important;
  margin-block-start:1em
}

/* Ensure videos are responsive on smaller screens */
.responsive-video iframe {
  width: 100% !important;
  height: auto;
  aspect-ratio: 16 / 9;
}

.video-medium {
  max-width: 800px;
  margin: 0;
}

.search > input {
    font-size: 16px;
    font-family: 'Lato', sans-serif;
    color: var(--search-color);
    border: 0;
    background: none;
    padding: 11px 30px 10px 37px;
    width: 100%;
}

.toc-filter > input {
    font-size: 16px;
    font-family: 'Lato', sans-serif;
    color: var(--toc-filter-color);
    border: 0;
    background: none;
    padding: 11px 30px 10px 37px;
    width: 100%;
}

.main-panel {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* ensures it spans full height */
}

.hide-when-search {
  flex: 1 0 auto;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.body-content {
  flex: 1 0 auto;
}

a.brand .logomark {
    height: 32px;
}

.sidebar {
    padding: 20px 25px 32px 32px;
}


/* ==== Sparkrock Docs: Left sidebar nav fixes (2025-09-11) ====
   Purpose: Ensure the "Sparkrock Product" group displays its children
   and matches the TOC list styles. Place at the very end of the CSS. */

/* 1) Force nested lists in #navbar to be visible */
#navbar .nav > li > ul,
#navbar .nav.level2,
#navbar .nav.level3 {
  display: block !important;
}

/* 2) Normalize link defaults for the left sidebar only */
#navbar a {
  text-decoration: none;
  line-height: 1.3;          /* comfortable click target */
}

/* underline on hover/focus only */
#navbar a:hover,
#navbar a:focus {
  text-decoration: underline;
  color: var(--link-hover-color) !important;
}

/* 3) Make the section title & children look like the TOC entries below */
#navbar ul.level1 > li > a {
  font-weight: 500;
  font-size: 16px;
  padding: 5px 10px;
  margin: 0 0 10px;
}

#navbar ul.level2 > li > a {
  font-size: 16px;
  color: var(--sidebar-item-color);
  margin: 4px 0;
}

table {
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  border-color: #ffffff;
  background-color: #ffffff;
}

/* Ensure rows themselves don't paint backgrounds */
table tbody tr { background: transparent !important; }

/* Keep cell backgrounds inside the curve cleanly */
table th, table td { background-clip: padding-box; }