.doc {
  min-height: calc(100vh - 10.5rem);
}

@media screen and (min-width: 1920px) {
  .doc {
    max-width: 72rem;
    font-size: .875rem;
  }
}

body {
  font-family: acumin-pro,Helvetica,Arial,sans-serif;
  font-size: 1em;
  /*padding-top: 5.722rem;*/
}

footer.footer {
  font-size: .75rem;
  background-color: #fcfcfc;
  color: #5d5d5d;
  font-weight: 100;
  height: 3.125rem;
  width: 100%;
}

table.tableblock {
  border: 1px solid #e1e1e1;
  border-radius: 3px;
}

table.tableblock, th.tableblock, td.tableblock {
  border: 0 solid #e1e1e1;
}

.tableblock th.tableblock {
  font-weight: bold;
}

table.frame-all {
  border-width: 1px;
}

table.grid-all th.tableblock, table.grid-all td.tableblock {
  border-width: 0 1px 1px 0;
}

table.tableblock thead,
table.tableblock tfoot {
  background: #f0f0f0;
  font-weight: bold;
}

.doc .table-scroll-wrapper {
  margin-bottom: 2rem;
  overflow-x: auto;
}

.doc .table-scroll-wrapper table.tableblock {
  margin-bottom: 0px;
}

/**
 * For older documentation version we are not removing the footer designation so this
 * is designed to help migrate old documentation to be as close to the new stuff
 * as possible.
 */
body.version-0-9 table.tableblock tfoot,
body.version-0-10 table.tableblock tfoot,
body.version-1-0 table.tableblock tfoot {
  background: #fff;
  font-weight: 400;
}

table.tableblock tr:nth-of-type(even) {
  background: #f8f8f7;
}

table.tableblock tr:nth-of-type(odd) {
  background: inherit;
}

/**
 * For older documentation version we are not stripping the table background colors.
 * This is used to keep old versions of the documentation aligned with this fact.
 */
body.version-0-9 table.tableblock tr:nth-of-type(even),
body.version-0-10 table.tableblock tr:nth-of-type(even),
body.version-1-0 table.tableblock tr:nth-of-type(even) {
  background: inherit;
}

.nav {
  background-color: #f8f8f8;
  border-right: 1px solid #eaeaea;
  /*height: calc(100vh - 5.722rem);*/
  /*top: 5.722rem;*/
}

.main {
  background-color: #fcfcfc;
}

.doc > h1 {
  font-size: 2em;
  margin: 1.5rem 0;
  font-weight: 700;
}

.doc h3, .doc h4 {
  text-decoration: underline;
  text-decoration-color: #919191;
}

.navbar {
  /*top: 40px;*/
}

.toolbar {
  /*top: 5.722rem;*/
  z-index: 1;
}

#rhbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 4;
}

.navbar {
  background-color: #656565;
}

.navbar-end > a.navbar-item {
  color: #e6e7e8;
}

.navbar-end > a.navbar-item:hover {
  background-color: #656565;
  color: #ffffff;
}

.nav-menu > .nav-list {
  margin-bottom: 2.5rem; /* make sure last item is visible */
}

.page-versions-container {
  display: none;
  padding-top: 12px;
}

@media screen and (min-width: 1024px) {
  .page-versions-container {
    display: inline-flex;
  }

  .nav-container {
    font-size: .8rem;
  }
}

.page-versions {
  margin-top: -7px;
}
.page-versions button{
  text-transform: capitalize;
}
@media screen and (max-width: 1023px) {
  .navbar-menu {
    background: #656565;
  }
}

.navbar-end > a.navbar-item:hover {
  color: #ffffff;
}

/* control article width relative to viewport */
#article-wrapper {
  width: 100%;
}

/* Render article with full width */
.doc {
  max-width: 100%;
}

.page-versions.is-active .version.is-current {
  display: block;
}

.page-versions .version-menu {
  border: 1px solid #ccc;
  padding: .15rem .5rem .5rem;
  top: -5px;
  left: 8px;
  width: 100%;
  z-index: 10;
  text-transform: capitalize;
}

.nav-panel-menu {
  margin-bottom: calc(50% - 5rem);
}

.nav-panel-explore .context .version,
.nav-panel-explore .versions {
  text-transform: capitalize;
}
/* by default the toc-rightbar is not shown */
#toc-rightbar {
  display: none;
}

.article-grid {
  display: table;
  table-layout: fixed;
  width: 100%;
}

.article-grid .article-cell1 {
  display: table-cell;
  overflow-x: auto;
}

.article-grid .article-cell2 {
  display: table-cell;
  /* by default article right cell not visible */
  width: 0%;
}

.doc .dlist > dl {
  margin-block-end: 0px;
}

.doc .exampleblock {
  margin: 0px;
}

.doc .exampleblock .title {
  margin: 1rem 0 0;
}

.doc .exampleblock .content {
  border: 2px solid #5d5d5d;
  border-radius: .15rem;
}

strong {
  font-weight: 600;
}

.doc .exampleblock .title,
.doc .imageblock .title,
.doc .literalblock .title,
.doc .listingblock .title,
.doc .openblock .title,
.doc .tableblock .caption {
  color: #ba3c23;
}

.doc .paragraph > .title {
  text-decoration: underline;
  padding-bottom: 8px;
}

.doc p code {
  background: #e8e8e8;
}

.doc .tableblock p code {
  background: inherit;
}

/* Custom Highlight JS styles */

.highlightjs .language-xml .hljs-tag {
  color: #e6e87c;
}

.highlightjs .language-xml .hljs-name {
  color: #e6e87c;
}

.highlightjs .language-xml.hljs {
  color: #fff;
}

.highlightjs .language-java .hljs-comment {
  color: #86c786;
}

.highlightjs .language-java .hljs-doctag {
  color: #86c786;
  font-weight: bold;
}

.highlightjs .language-java .hljs-keyword {
  color: #d88;
}

.highlightjs .language-java .hljs-title {
  color: white;
}

.highlightjs .language-java .hljs-number {
  color: #9dc3ea;
}

.highlightjs .language-java.hljs {
  color: #fff;
}

.highlightjs .language-java .hljs-string {
  color: #6bcc24;
}

.highlightjs .language-java .hljs-meta {
  color: #e6e87c;
}

div.version-banner {
    padding: 0.75rem 1.25rem;
    margin-bottoM: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    margin-top: 25px;
}

div.version-banner-development {
    color: #004005;
    background-color: #cce5ff;
    border-color: #b8daff;
}

div.version-banner-outdated {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}

@media screen and (min-width: 1200px) {
  /* Hides the original ToC contents on screens larger than 1200px as will be rendered in #toc-rightbar */
  .main.with-toc .article-cell1 #toc {
    display: none;
  }

  .main.with-toc .article-grid .doc {
    margin-right: 4rem;
  }

  /* For screens larger than 1200px, configure the toc-rightbar */
  #toc-rightbar {
    position: fixed;
    top: 108px; /*148px;*/
    right: 0px;
    left: 86%;
    height: 100%;
    background-color: #fafafa;
    height: calc(100vh - 6.5rem);
    padding: 5px;
    overflow-y: auto;
    z-index: 0;
    border: none;
    border-left: 1px solid #e8e8e8;
    border-top: 1px solid #e8e8e8;
  }

  /* Set by default.hbs if page contains a toc */
  .main.with-toc #toc-rightbar {
    display: block;
  }

  .main.with-toc .article-cell2 {
    width: 14%;
  }

  /* Various Right Bar ToC styles */
  #toc-rightbar .toc {
    display: block;
    color: #222;
    height: 100%;
    padding-left: 8px;
  }

  #toc-rightbar .toc::-webkit-scrollbar {
    widtH: .25rem;
  }

  #toc-rightbar .toc::-webkit-scrollbar-thumb {
    background-color: #c1c1c1;
  }

  /* Keep title hidden */
  #toc-rightbar .toc > .title {
    display: none;
    height: 0;
  }

  #toc-rightbar .toc ul {
    padding-left: 20px;
  }

  #toc-rightbar .toc > ul {
    padding-inline-start: 0px;
    padding-right: 10px;
    font-size: .7rem;
    line-height: 1.2;
    margin-block-start: 0px;
  }

  #toc-rightbar .toc > ul ul li {
    margin-top: .5em;
  }

  #toc-rightbar a {
    color: inherit;
    text-decoration: none;
  }

  #toc-rightbar a:hover {
    color: inherit;
    text-decoration: underline;
  }

  #toc-rightbar .toc ul > li {
    list-style: none;
  }

  #toc-rightbar .toc ul.sectlevel1 > li:before {
    content: '';
    display: inline-block;
    height: 1.15rem;
    /*width: 8px;*/
  }

  #toc-rightbar .toc ul.sectlevel1 > li.expanded:before {
    content: '';
    display: inline-block;
    height: 1.15rem;
    /*width: 8px;*/
  }
}

@media screen and (min-width: 1200px) {
  /* Images scale based on viewer UI */
  .doc .image img,
  .doc .content img {
    max-width: 100%;
  }

  /* by default the TOC won't be shown until the with-toc class is added */
  .doc .toc {
    display: none;
  }

  /* makes sure that child sections scroll to the same point as parent section headings */
  .doc.with-toc h3:not(.discrete) {
    padding-top: .4rem;
  }
}

@media screen and (min-width: 1600px) {
  /* Keep images scaled down a bit */
  .doc .image img,
  .doc .content img {
    max-width: 1200px;
  }
}

/**
 * Particularly on the connector properties and data-types sections of our documentation,
 * we have tables that contain code blocks and these tables are designed to stretch, but
 * the code block word break behavior is based upon spaces and often can be an issue
 * when referencing packages or certain string formats; ergo the table stretches wider
 * than expected when rendering on smaller screens or browser window sizes.
 *
 * These CSS are meant to be used on a case-by-case basis, meaning that these only need
 * be applied to tables where its expected or known that such rendered <code> sections
 * will cause the table to expand wider than anticipated.
 *
 * To use these, simply add either "code-wordbreak-col" or "code-wordbreak-colX", where
 * X represents the column desired to apply the formatting starting at 1 and up to 5,
 * to the Asciidoc role of the table, e.g.:
 *
 * [cols="50%a,50%a",role="table table-striped code-wordbreak-col2"]
 *
 * See the "[[data-types]]" section in the PostgreSQL documentation for an example.
 */
@media screen and (max-width: 1674px) {
  /* explicitly specifies word-break normal in paragraph types in columns specifying code-wordbreak */
  .doc table.code-wordbreak-col td p,
  .doc table.code-wordbreak-col1 td:nth-child(1) p,
  .doc table.code-wordbreak-col2 td:nth-child(2) p,
  .doc table.code-wordbreak-col3 td:nth-child(3) p,
  .doc table.code-wordbreak-col4 td:nth-child(4) p,
  .doc table.code-wordbreak-col5 td:nth-child(5) p {
    word-break: normal;
  }

  /* applies word break to all p > code elements */
  .doc table.code-wordbreak-col td p code,
  .doc table.code-wordbreak-col1 td:nth-child(1) p code,
  .doc table.code-wordbreak-col2 td:nth-child(2) p code,
  .doc table.code-wordbreak-col3 td:nth-child(3) p code,
  .doc table.code-wordbreak-col4 td:nth-child(4) p code,
  .doc table.code-wordbreak-col5 td:nth-child(5) p code {
    word-break: break-all;
  }
}
a code {
  color: #1565c0 !important;
}

.videoblock.responsive {
    position: relative;
    width: 100%;
    margin: 2em 0 2em 0; /* Add some space below the video */
}

.videoblock.responsive .title {
    text-align: center;
    font-weight: bold;
    margin-bottom: 5px; /* Space between title and video */
    font-size: 1em; /* Slightly larger font */
    color: #333; /* Dark text color for visibility */
}

.videoblock.responsive .content {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.videoblock.responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}