/*************************************************/
/***************   General Design   **************/
/*************************************************/
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/SourceSans3-ExtraLight.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/SourceSans3-ExtraLightItalic.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/SourceSans3-Light.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/SourceSans3-LightItalic.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/SourceSans3-Regular.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/SourceSans3-Italic.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/SourceSans3-Medium.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/SourceSans3-MediumItalic.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/SourceSans3-SemiBold.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/SourceSans3-SemiBoldItalic.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/SourceSans3-Bold.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/SourceSans3-BoldItalic.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/SourceSans3-ExtraBold.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/SourceSans3-ExtraBoldItalic.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/SourceSans3-Black.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/SourceSans3-BlackItalic.ttf') format('truetype');
  font-display: swap;
}

:root {
  --digi-dark-green: #41823C;
  --digi-green: #84C361;
  --digi-additional-green: #91D46C;
  --digi-hover-green: #9DE476;

  --digi-dark-gray: #4B4F53;
  --digi-gray: #3F4245;
  --digi-medium-gray: #717174;
  --digi-light-gray: #DAD8D8;
  --digi-very-light-gray: #EEF0F0;

  --digi-very-dark-blue: #1B4965;
  --digi-dark-blue: #127298;
  --digi-medium-blue: #00B7FF;
  --digi-very-light-blue: #E2F6FF;
  --digi-light-gray-blue: #E9ECEF;

  --digi-yellow: #FFBB42;
  --digi-orange: #C25629;

  /* Microswitch colors */
  --switch-black:#151515;
  --switch-gray:#444;
  --switch-text:#bbb;
  --switch-white:#fff;

  --font-family-source-sans3: "Source Sans 3", Arial, sans-serif;
}

strong, b {
  font-weight: 700;
}

em, i {
  font-style: italic;
}

body, .controls a.navbar-brand {
  font-family: var(--font-family-source-sans3);
  word-break: break-word;
  color: var(--digi-dark-gray);
}

h1, #content h1 > a.link,
h2, h2 > a.link,
h3, h3 > a.link,
h4, h4 > a.link,
h5, h5 > a.link,
h6, h6 > a.link,
#toctitle, #toctitle > a.link,
.sidebarblock > .content > .title,
.sidebarblock > .content > .title > a.link {
  font-family: var(--font-family-source-sans3);
  color: var(--digi-green);
  font-weight: 400;
}

@media only screen and (min-width: 768px) {
  h1 {
    font-size: 2.5em;
  }
}

.admonitionblock td.content > .title,
.audioblock > .title, .exampleblock > .title,
.imageblock > .title, .listingblock > .title,
.literalblock > .title, .stemblock > .title,
.openblock > .title, .paragraph > .title,
.quoteblock > .title, table.tableblock > .title,
.verseblock > .title, .videoblock > .title,
.dlist > .title, .olist > .title, .ulist > .title,
.qlist > .title, .hdlist > .title {
  font-family: var(--font-family-source-sans3);
  color: var(--digi-dark-gray);
}

.imageblock {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.exampleblock > .content {
  background-color: #fbfbfb;
}

.collapsing > .content,
.collapse > .content {
  background-color: #ffffff;
  border-color: transparent;
  box-shadow: none;
  -webkit-box-shadow: none;
}

table {
  table-layout: fixed;
  width: 100%;
}

/* Source code tables (auto width for proper line number rendering) */
table.pyhltable {
  width: auto;
}

table > thead > tr > th,
table > tbody > tr > th {
  background-color: var(--digi-medium-gray);
  font-weight: bold;
}

table > tbody > tr > th > p {
  color: white;
}

table.tableblock,
table.tableblock p {
  font-size: 16px;
}

table.tableblock td > p,
table.tableblock td > p:last-child {
  margin-top: 0px;
  margin-bottom: 0px;
}

table > tbody > tr:nth-of-type(odd),
table > tbody > tr:nth-of-type(even) {
  background: transparent;
}

table ul li,
table ol li {
  margin: 3px !important;
}

table ul li p,
table ol li p {
  margin: 0;
}

/* SOURCE CODE BLOCKS */
pre.pygments.highlight {
  margin: 0px;
}

pre {
  margin: 0px;
}

.literalblock pre, .literalblock pre[class],
.listingblock pre, .listingblock pre[class] {
  -webkit-border-radius: 0px;
  border-radius: 0px;
  border-width: 0px;
  background: #F7F7F8;
}

.listingblock > .title {
  font-size: 16px;
  background-color: var(--digi-medium-gray);
  color: white;
  padding: 8px 10px;
  margin-bottom: 0px;
  font-style: normal;
}

.listingblock > .content > pre > code,
.literalblock > .content > pre > code,
.listingblock > .content > pre,
.literalblock > .content > pre {
  white-space: pre;
  font-size: 14px;
  tab-size: 8;
}

.listingblock > .content > pre,
.literalblock > .content > pre {
  word-break: keep-all;
  word-wrap: normal;
  padding: 10px;
  overflow-x: auto;
  position: relative;
  box-sizing: border-box;
}

/* Inline non-formatted text */
td code,
p code,
p.tableblock > code:only-child {
  border: 1px solid #e5e5e5;
  background-color: #f7f7f8;
}

pre code {
  border: none;
  display: inline-block;
  padding-right: 10px;
  box-sizing: content-box;
}

/* This overrides an unwanted -7px left margin from custom.css */
code + a > code {
  margin-left: 0px;
}

/* Console blocks */
.console-target,
.console-host {
  -webkit-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid var(--digi-light-gray);
}

.console-target pre,
.console-host pre {
  border-radius: 0 4px 4px 0 !important;
}

.console-target pre > code,
.console-host pre > code {
  color: #eee;
}

.console-target {
  border-left: 4px solid var(--digi-green);
}

.console-target pre,
.console-target pre > code {
  background-color: #1B2814 !important;
}

.console-host {
  border-left: 4px solid var(--digi-medium-blue);
}

.console-host pre,
.console-host pre > code {
  background-color: #003348 !important;
}

/*
 * Asciidoc "highlight" for code is done through HTML inclusion
 * of a <span> element with yellow background.
 * Higlighted text in console excerpts need to change text color to black
 * so that there is enough contrast.
 * This target these specific <span> elements inside console code.
 */
div.console-target * .pygments.highlight code span[style*="background-color: #ffffcc"],
div.console-host * .pygments.highlight code span[style*="background-color: #ffffcc"] {
  color: rgba(0, 0, 0, 0.8);
}

/* Override the asciidoc default highlight color (in <span> element) */
div.listingblock * .pygments.highlight code span[style*="background-color: #ffffcc"] {
  background-color: #ff0 !important;
}

/* Prompts for source code blocks */
.prompt {
  /* make prompt unselectable */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.prompt-target,
.prompt-uboot {
  color: var(--digi-green);
  font-weight: bold;
}

.prompt-host,
.prompt-docker {
  color: var(--digi-medium-blue);
  font-weight: bold;
}

h1[id], h2[id], h3[id], h4[id], h5[id], h6[id], dt[id] {
  padding-top: 10px;
}

.sect1, .sect2, .sect3, .sect4 {
  padding-top: 50px;
}

.sect1 + .sect1 {
  border-top: 0px;
}

a:link, a:visited, a:active {
  text-decoration: none;
  outline: none !important;
}

#tg-sb-content a:link, #tg-sb-content a:visited, #tg-sb-content a:active,
#topic-platform a:link, #topic-platform a:visited, #topic-platform a:active {
  color: #0074A2;
}

#tg-sb-content a:hover, footer .links a:hover, #topic-platform a:hover {
  color: var(--digi-medium-blue);
}

/* Override code color in links from custom.css */
a code {
    color: #0074A2;
}

/* Override hover code color in links from custom.css */
a:hover > code, p a > code:hover, code + a:hover > code {
    color: var(--digi-medium-blue);
}

p, blockquote, dt, td.content, span.alt,
.admonitionblock > table td.content,
p.lead, .paragraph.lead > p,
#preamble > .sectionbody > .paragraph:first-of-type p {
  font-size: 17px;
}

p, .admonitionblock > table td.content,
p.lead, .paragraph.lead > p,
#preamble > .sectionbody > .paragraph:first-of-type p {
  line-height: 26px;
}

.paragraph.lead > p,
#preamble > .sectionbody > .paragraph:first-of-type p {
  color: inherit;
}

.nav li a {
  line-height: 25px;
  font-size: 14px;
}

.nav > li > ul > li > a {
  font-size: 14px;
  line-height: 25px;
}

.scroll-line {
  top: 0px;
  position: fixed;
  height: 4px;
  background: var(--digi-green);
  width: 0%;
  z-index: 2000;
}
/*
.copy-button:before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 3px;
  background-size: contain;
  background-image: url(../../assets/images/clipboard.png);
  background-repeat: no-repeat;
  position: relative;
  top: 3px;
}

.copy-button:hover:before {
  background-image: url(../../assets/images/clipboard_white.png);
}

.copy-button {
  cursor: pointer;
  border: 0;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 500;
  padding: 2px 4px 4px;
  color: var(--digi-dark-gray);
  background-color: transparent;
  position: absolute;
  top: 0;
  right: 0;
}

.copy-button:hover, .copy-button:active, .copy-button:focus {
  outline: 0;
}

.copy-button:hover {
  background-color: var(--digi-green);
  color: #FFFFFF;
}

.copy-button:active{
  background-color: #EEEEEE;
}*/

div .listingblock {
  margin-top: 5px;
}

.listingblock code[data-lang]:before,
.listingblock:hover code[data-lang]:before {
  display: none;
  /*bottom: 0.425rem;
  top: auto;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 500;*/
}

/* Math formulae */
.MathJax {
  font-size: 85% !important;
}

/* Rotated-cell text (for narrow columns) */
.rotated-cell {
  writing-mode: sideways-lr;
  text-align: right !important;
}

.post-content img {
  margin: 0px 4px 3px 4px;
}

/********************************************************/
/**************** Expand/Collapse elements **************/
/********************************************************/

a.collapser, a.collapser:link, a.collapser:hover,
a.collapser:visited, a.collapser:active {
  outline: none;
}

div .collapse, div .collapsing {
  padding-left: 25px;
  padding-right: 25px;
}

i.clps.arrow {
  border: solid var(--digi-medium-gray);
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  margin-top: 8px;
  margin-right: 15px;
}

.clps.arrow.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  float: left !important;
}

.clps.arrow.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  float: left !important;
}

.clps.arrow.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  float: left !important;
}

.clps.arrow.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  float: left !important;
}

/********************************************************/
/*** Note, Tip, Warning, Caution and Important blocks ***/
/********************************************************/
.admonitionblock > table {
  border-collapse: collapse;
  width: 100%;
}

.admonitionblock > table thead > tr > th,
.admonitionblock > table > tbody > tr > th,
.admonitionblock > table > tfoot > tr > th,
.admonitionblock > table > thead > tr > td,
.admonitionblock > table > tbody > tr > td,
.admonitionblock > table > tfoot > tr > td {
  border-top: none;
}

.admonitionblock > table > tbody > tr {
  border-left-style: solid;
  border-left-width: 6px;
}

.admonitionblock > table td.icon {
  font-size: 20px;
  padding: 10px 15px !important;
  text-align: left;
  width: 60px;
}

.admonitionblock > table td.content {
  padding-left: 0px;
  color: var(--digi-dark-gray);
}

/* Note Block */
.admonitionblock td.icon .icon-note:before {
  content: "\F05A";
  text-shadow: none;
  color: var(--digi-medium-blue);
}
.admonitionblock.note > table > tbody > tr {
  border-left-color: var(--digi-medium-blue);
  background-color: #E7F6FB;
}

/* Tip Block */
.admonitionblock td.icon .icon-tip:before {
  content: "\F058";
  text-shadow: none;
  color: #669900;
}
.admonitionblock.tip > table > tbody > tr {
  border-left-color: #669900;
  background-color: #F9FFEA;
}

/* Warning Block */
.admonitionblock td.icon .icon-warning:before {
  content: "\F06A";
  text-shadow: none;
  color: #E67300;
}
.admonitionblock.warning > table > tbody > tr {
  border-left-color: #E67300;
  background-color: #FFF4E9;
}

/* Caution Block */
.admonitionblock td.icon .icon-caution:before {
  content: "\F071";
  text-shadow: none;
  color: #D14124;
}
.admonitionblock.caution > table > tbody > tr {
  border-left-color: #D14124;
  background-color: #FFEEEB;
}

/* Important Block */
.admonitionblock td.icon .icon-important:before {
  content: "\F024";
  text-shadow: none;
  color: #CC0000;
}
.admonitionblock.important > table > tbody > tr {
  border-left-color: #CC0000;
  background-color: #FFEEEB;
}

/*************************************************/
/****************   Top Banner   *****************/
/*************************************************/
.banner {
  background-color: var(--digi-dark-gray);
  z-index: 1000;
}

#banner-digi, #banner-digi img {
  height: 70px;
}

#banner-digi img {
  float: left;
  padding: 15px 0px;
  cursor: pointer;
}

#banner-text {
  color: #FFFFFF;
  font-weight: 500;
  font-size: 20px;
  padding-top: 34px;
  float: left;
  margin-bottom: 0px;
}

#banner-preliminary {
  color: #FFFFFF;
  font-size: 16px;
  font-style: italic;
  float: right;
  margin-bottom: 0px;
  text-align: right;
}

/*************************************************/
/******************   Footer   *******************/
/*************************************************/
footer {
  clear: both;
  background-color: var(--digi-dark-gray);
  margin: 50px 0px 0px 0px;
}

footer .row {
  margin-right: 0px;
  margin-left: 0px;
}

footer .links {
  column-count: 3;
  -webkit-column-count: 3;
  text-align: left;
  padding: 20px 0px;
  padding-left: 20px;
}

footer .links a {
  display: inline-block;
  width: 120%;
  padding: 4px 5px;
  color: white;
  font-size: 16px;
  line-height: 1.5em;
}

footer .links a[href^="http://"]:after,
footer .links a[href^="https://"]:after {
  content: none;
}

footer .copyright {
  font-size: 16px;
  color: white;
  padding: 25px 0px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

footer .copyright-info {
  line-height: 1.4;
  padding-top: 2px;
}

footer .footer-icon {
  padding-left: 20px;
  padding-top: 8px;
}

footer .footer-icon img {
  height: 30px;
}

/*This section is to make the footer sticky*/
#main-container {
  display: flex;
  flex-direction: column;
}

.container {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}

.scrollup {
  position: fixed;
  bottom: 40px;
  right: 40px;
  display: none;
  background: var(--digi-green);
  width: 60px;
  height: 60px;
  border-radius: 50px;
  text-align: center;
  z-index: 100;
}

@media (max-width: 576px) {
  .scrollup {
      width: 40px;
      height: 40px;
      bottom: 20px;
      right: 20px;
  }
}

.scrollup:focus {
  outline: 0;
}

.scrollup:hover {
  opacity: 0.8;
}

.scrollup img {
  margin-top: 14px;
}

@media (max-width: 576px) {
  .scrollup img {
      margin-top: 11px;
      width: 18px;
      height: 18px;
  }
}

/*************************************************/
/**************   Navigation bar   ***************/
/*************************************************/
.navbar {
  min-height: 40px;
}

.navbar-inverse {
  background-color: var(--digi-light-gray);
  border: none;
}

.navbar-inverse .navbar-toggle:focus{
  background-color: transparent;
}

.navbar-inverse .navbar-toggle:active,
.navbar-inverse .navbar-toggle:hover {
  background-color: var(--digi-green);
}

.navbar-inverse .navbar-nav>li>a,
.navbar-inverse .navbar-brand {
  color: var(--digi-medium-gray);
}

.navbar-inverse .navbar-toggle {
  border-color: var(--digi-medium-gray);
}

.navbar-inverse .navbar-toggle .icon-bar {
  background-color: var(--digi-medium-gray);
}

.navbar-toggle {
  margin-top: 3px;
  margin-bottom: 3px;
}

.navbar-brand {
  height: 40px;
  padding: 10px 15px;
}

.navbar-inverse .navbar-nav > li > a {
  margin-top: 0px;
  padding: 8px 10px;
}

.navbar-inverse .navbar-nav > li > a:visited,
.navbar-inverse .navbar-nav > li > a:active {
  color: var(--digi-medium-gray);
}

.navbar-inverse .navbar-nav > li > a:hover {
  color: var(--digi-medium-blue);
}

#tg-sb-link {
  margin-left: -5px;
  padding-top: 8px;
  height: 40px;
}

@media (max-width: 1000px){
  .navbar-nav>li {
    float: left;
  }

  .navbar-nav {
      float: right !important;
  }

  .navbar-left, .navbar-right {
      float: right !important;
  }

  #search-input {
    width: 16em;
  }

  #tg-sb-toc {
    max-width: none !important;
  }
}

/*************************************************/
/*************   General Container   *************/
/*************************************************/
@media (min-width: 300px) {
  /* All column types have the same with because with this resoulution only the
  content is shown. We don't know what type of column it will be assigned, so
  we set all of them to the same value to avoid problems. This is related to
  the javascript in the toc.html file.*/
  .col-md-2 {
    width: 290px;
  }
  .col-md-8 {
    width: 290px;
  }
  .col-md-10 {
    width: 290px;
  }
  .col-md-12 {
    width: 290px;
  }

  #banner-preliminary {
    width: 100px;
    margin-top: 10px;
  }
}

@media (min-width: 400px) {
  /* All column types have the same with because with this resoulution only the
  content is shown. We don't know what type of column it will be assigned, so
  we set all of them to the same value to avoid problems. This is related to
  the javascript in the toc.html file.*/
  .col-md-2 {
    width: 380px;
  }
  .col-md-8 {
    width: 380px;
  }
  .col-md-10 {
    width: 380px;
  }
  .col-md-12 {
    width: 380px;
  }
}

@media (min-width: 470px) {
  /* All column types have the same with because with this resoulution only the
  content is shown. We don't know what type of column it will be assigned, so
  we set all of them to the same value to avoid problems. This is related to
  the javascript in the toc.html file.*/
  .col-md-2 {
    width: 450px;
  }
  .col-md-8 {
    width: 450px;
  }
  .col-md-10 {
    width: 450px;
  }
  .col-md-12 {
    width: 450px;
  }
  #tg-sb-content .tab-panel .nav-tabs > li > a {
    width: auto;
    min-width: 125px;
    max-width: 250px;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .container {
    width: 550px;
  }
  /* All column types have the same with because with this resoulution only the
  content is shown. We don't know what type of column it will be assigned, so
  we set all of them to the same value to avoid problems. This is related to
  the javascript in the toc.html file.*/
  .col-md-2 {
    width: 100%;
  }
  .col-md-8 {
    width: 100%;
  }
  .col-md-10 {
    width: 100%;
  }
  .col-md-12 {
    width: 100%;
  }
  #tg-sb-content .tab-panel .nav-tabs > li > a {
    width: auto;
    min-width: 125px;
    max-width: 250px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
  .controls > a {
    height: 40px;
    padding: 8px 30px;
  }
  .navbar>.container .navbar-brand,
  .navbar>.container-fluid .navbar-brand {
    margin-left: 0px;
  }
  .aa-input-search {
    width: 115px;
  }
  .aa-dropdown-menu {
    width: 180px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .aa-input-search {
    width: 262px;
  }
  .aa-dropdown-menu {
    width: 360px;
  }
}
@media (min-width: 993px) {
  /* With big displays, set the different column types to the specific
  values they should have.*/
  .col-md-2 {
    width: 20%;
  }
  .col-md-8 {
    width: 60%;
  }
  .col-md-10 {
    width: 80%;
  }
  .col-md-12 {
    width: 100%;
  }
  .container {
    width: 960px;
  }
  #banner-preliminary {
    width: 180px;
    margin-top: 38px;
  }
}

@media (min-width: 1000px) {
  .container {
    width: 920px;
  }
}

@media (min-width: 1100px) {
  .container {
    width: 1000px;
  }
}

/* Extra large devices */
@media (min-width: 1200px) {
  .container {
    width: 1100px;
  }
}

/* Extra extra large devices (large desktops, 1500px and up) */
@media (min-width: 1500px) {
  .container {
    width: 1400px;
  }
}

.container {
  max-width: 1500px;
}

/*************************************************/
/******************   Content   ******************/
/*************************************************/
#tg-sb-content {
  padding-left: 35px;
  padding-right: 35px;
}

/*************************************************/
/******************   Sidebar   ******************/
/*************************************************/
#tg-sb-sidebar, #tg-sb-toc {
  padding-left: 0px;
  padding-right: 0px;
  max-width: 280px;
}

ul#mysidebar {
  border-right: 2px solid var(--digi-light-gray);
  width: 100%;
  max-width: 300px;
  margin-top: 10px;
}

.sb-toc-title {
  color: #8D8D8D;
  margin-top: 10px;
  margin-bottom: 0px;
  padding: 0px;
  font-size: 22px;
}

/* Right sidebar with topic's TOC */
#refresh-toc #toc-title {
  font-size: 17px;
}

.sb-toc-title > a {
  color: var(--digi-medium-gray);
}

.sb-toc-title > a:hover {
  color: var(--digi-dark-gray);
}

.nav li {
  margin: 0px;
}

/* First level (main folders)*/
.nav li.sb-folders a {
  padding-left: 10px;
  margin: 0px;
  background-color: transparent;
  border: 0px;
}

/* Rest of levels (even the nested ones)*/
.nav li.sb-folders > ul li {
  padding-left: 20px;
  margin: 0px;
  background-color: transparent;
  border: 0px;
}

.nav li.sb-folders a:hover, .nav li a.sb-section:hover,
.nav li a.sb-subsection:hover, .nav li.active a.sb-section:hover,
.nav li.active a.sb-subsection:hover {
  background-color: var(--digi-medium-gray);
  color: white;
}

.nav li a.sb-section {
  font-size: 15px;
  padding-left: 10px;
}

.nav li a.sb-subsection {
  background-color: transparent;
  font-size: 16px;
  border: 0px;
  padding-left: 20px;
}

.nav .navbar-nav .navbar-right {
  border: 0px;
}

.nav li.active > a > span:after,
.nav li > a > span:after {
  color: var(--digi-medium-gray);
}

.nav li.active > a:hover > span:after,
.nav li > a:hover > span:after {
  color: white;
}

/*************************************************/
/*************   Table of Contents   *************/
/*************************************************/
#toc {
  border-bottom: 0px solid transparent;
  padding: 10px 5px;
}

div#toc ul li {
  margin: 0px;
  font-size: 17px;
  list-style: none;
}

div#toc ul {
  background-color: transparent;
  margin-bottom: 0px;
  padding: 0px;
  font-family: var(--font-family-source-sans3);
}

div#toc > ul::before {
  content: none;
}

div#toc > .nav li > a {
  color: var(--digi-dark-gray);
  border-left: 2px solid var(--digi-light-gray);
  background-color: transparent;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 18px;
}

div#toc > .nav li > a:hover {
  border-left: 5px solid var(--digi-medium-gray);
}

div#toc > .nav > li.active > a,
div#toc > .nav > li.active > a:hover {
  font-weight: bold;
}

div#toc > .nav li > a:hover,
div#toc > .nav > li.active > a,
div#toc > .nav > li.active > a:hover {
  padding-left: 16px;
  margin-left: -1px;
}

div#toc > .nav > li.active > a {
  border-left: 5px solid var(--digi-green);
}

div#toc > .nav > li.active > a:hover {
  border-left: 5px solid var(--digi-medium-gray);
}

div#toc > .nav li > a:active {
  text-decoration: none;
}

div#toc > .nav ul li a {
  border-top: 0px;
}

div#toc ul li ul li::before {
  content: none;
}

div#toc ul li ul {
  padding-left: 0px;
}

div#toc ul li ul li.active a {
  border-left: 5px solid var(--digi-medium-gray);
  font-weight: bold;
}

div#toc ul li ul li a,
div#toc > .nav li > ul li a {
  padding-left: 34px;
}

div#toc > .nav li > ul li a:hover,
div#toc > .nav li > ul li.active a,
div#toc > .nav li > ul li.active a:hover {
  padding-left: 32px;
  margin-left: -1px;
}

div#toc ul li ul, div#toc ul li ul li {
  margin: 0px;
}

/* Remove background color and borders when rendering code with line numbers. */
.pygments table.pyhltable tbody tr td {
  border: 0px;
}
.pygments table.pyhltable tbody tr {
  background-color: transparent;
}

/*************************************************/
/***************   Platform topic   **************/
/*************************************************/
#topic-container {
  border-bottom: 0px solid transparent;
  padding: 10px;
}

#topic-platform {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: 10px;
  background-color: #EEEEEE;
}

.topic-platform-title {
  font-weight: bold;
  color: var(--digi-dark-gray);
  margin-bottom: 10px;
  float: left;
  max-width: 80%;
}

#topic-platform ul {
  list-style: none;
  margin-bottom: 0px;
  margin-left: 0px;
}

#topic-platform li::before {
  content: "•";
  color: var(--digi-dark-gray);
  margin-right: 10px;
  font-size: 1.4em;
  line-height: 0px;
}

#help {
  float: left;
  margin-top: 4px;
  margin-right: 6px;
}

#topic-container .topic-list {
  clear: both;
  padding: 0px 10px;
}

/*************************************************/
/***********   Menu navigation TOC  **************/
/*************************************************/
.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
  border-color: var(--digi-dark-gray) !important;
  background-color: var(--digi-light-gray);
  overflow: hidden;
}

.menu-nav-title {
  color: var(--digi-dark-gray);
  margin: 15px 0px;
  padding: 0px;
  padding-left: 20px;
  font-size: 24px;
  width: fit-content;
}

.menu-nav-title a:hover {
  color: var(--digi-medium-blue);
}

.menu-nav-contents {
  background-color: #EEEEEE;
}

.menu-nav a {
  color: var(--digi-dark-gray);
  display: block;
  outline: none;
  text-decoration: none;
}

.menu-nav ul {
  padding: 0;
  margin: 0px;
}

.menu-nav li, .menu-nav li li {
  margin: 0px;
}

.menu-nav, .menu-nav ul, .menu-nav li {
  list-style: none;
}

.menu-nav li.sb-folders a {
  padding-left: 60px;
  font-size: 15px;
  margin: 0px;
  background-color: transparent;
  border: 0px;
  padding-top: 2px;
  padding-bottom: 2px;
}

.menu-nav-contents li.sb-folders a,
.menu-nav-contents li.sb-folders > ul li {
  padding-left: 30px;
  margin: 0px;
  background-color: transparent;
  border: 0px;
}

.nav li.sb-active > a,
.menu-nav-contents li.sb-active > a {
  color: var(--digi-dark-gray);
  font-weight: bold;
  border-top: 1px;
  border-style: solid;
}

.nav li.super-active > a,
.menu-nav-contents li.super-active > a {
  background: rgba(132, 195, 97, .25);
}

.nav li.sb-active > a {
  border-color: white;
}

.menu-nav-contents li.sb-active > a {
  border-color: #EEEEEE;
}

.menu-nav li.sb-folders a:hover {
  background-color: #8D8D8D;
  color: white;
}

.menu-nav li .sb-section {
  background-color: var(--digi-light-gray);
  color: var(--digi-dark-gray);
  font-size: 24px;
  border: 0px;
  padding: 5px 0px;
  padding-left: 40px;
}

.menu-nav li .sb-subsection {
  background-color: #EEEEEE;
  font-size: 22px;
  border: 0px;
  padding-left: 60px;
}

/*************************************************/
/**************   Navigation bar   ***************/
/*************************************************/
.navbar-collapse {
  margin: 0px;
  padding: 0px;
}

.navbar-inverse {
  border: 0px;
}

.navbar-brand > img {
  width: 24px;
  height: 24px;
}

.controls .control-icon-selected {
  background-color: var(--digi-green);
  height: 5px;
  margin-top: 3px;
  margin-left: -10px;
  margin-right: -10px;
  vertical-align: bottom;
}

.controls > a {
  float: left;
  padding: 8px 10px;
  outline: 0;
}

.controls a.navbar-brand {
  font-size: 16px;
}

.controls {
  margin-right: 10px;
  margin-left: 10px;
  height: 40px;
  float: left;
}

@media (max-width: 768px) {
  .controls {
    margin-left: 0px;
  }
}

.controls a:link, .controls a:visited, .controls a:active {
  color: var(--digi-medium-gray);
}

.controls a:hover, .controls a.navbar-brand:hover {
  color: var(--digi-medium-blue);
}

#search {
  margin: 10px 10px;
}

/*************************************************/
/*****   Genaral purpose show/hide classes  ******/
/*************************************************/
.display-on {
  display: block;
}
.display-off {
  display: none;
}

/*************************************************/
/********************   TABS   *******************/
/*************************************************/
#tg-sb-content .tab-panel {
  margin-bottom: 20px;
  margin-top: 25px;
}

#tg-sb-content .tab-panel .nav-tabs {
  margin-bottom: 0px;
  border-bottom: 1px solid var(--digi-light-gray);
  display: flex;
  flex-wrap: nowrap; /* Prevent wrapping */
  justify-content: flex-start; /* Align tabs to the left */
  gap: 4px;
}

#tg-sb-content .tab-panel .nav-tabs > li {
  flex: 0 1 auto; /* Allow shrinking if needed */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  position: relative; /* Required for tooltip */
  margin: 0px;
  margin-bottom: -1px;
}

#tg-sb-content .tab-panel .nav-tabs > li > a {
  min-width: 90px; /* Prevent tabs from becoming too small */
  max-width: 150px; /* Limit max width */
  background-color: var(--digi-light-gray);
  color: var(--digi-dark-gray);
  border: none;
  border-bottom: 1px solid var(--digi-light-gray);
  display: block;
  padding: 5px 10px;
  font-size: 16px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

#tg-sb-content .tab-panel .nav-tabs > li > a:hover {
  background-color: var(--digi-green);
  color: white;
  border-bottom: 1px solid var(--digi-green);
}

#tg-sb-content .tab-panel .nav-tabs > li.tab-active > a,
#tg-sb-content .tab-panel .nav-tabs > li.tab-active > a:hover {
  color: var(--digi-dark-gray);
  background-color: #fbfbfb;
  font-weight: bold;
  border: 1px solid var(--digi-light-gray);
  border-bottom-color: transparent;
}

/* Hide all panes by default and show only the active one */
#tg-sb-content .tab-panel .tab-pane {
  display: none;
}

#tg-sb-content .tab-panel .tab-pane.pane-active {
  display: block;
}

/* Hide all panes by default and show only the active one */
#tg-sb-content .tab-panel .tab-pane {
  display: none;
}

#tg-sb-content .tab-panel .tab-pane.pane-active {
  display: block;
}

#tg-sb-content .tab-panel .tab-content {
  padding: 10px 20px;
  background-color: #fbfbfb;
  border-left: 0px solid transparent;
  border-bottom: 0px solid transparent;
  border-right: 0px solid transparent;
  -webkit-box-shadow: 0px 0px 0px transparent;
  box-shadow: 0px 0px 0px transparent;
}

.tab-content > .exampleblock .content {
  border: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

#tab-tooltip {
  position: absolute;
  background: var(--digi-light-gray);
  color: var(--digi-dark-gray);
  padding: 6px 8px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 14px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  z-index: 1000;
}

/* Tooltip arrow at the bottom */
#tab-tooltip::after {
  content: "";
  position: absolute;
  top: 100%; /* Arrow positioned below the tooltip */
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: var(--digi-light-gray) transparent transparent transparent;
  width: 0;
  height: 0;
}

/********************************************************/
/*******************   Instant Search   *****************/
/********************************************************/

.aa-input-container {
  display: inline-block;
  position: relative;
}

.aa-input-search {
  padding: 6px 26px 4px 10px;
  border: 2px solid var(--digi-light-gray);
  border-radius: 4px;
  -webkit-transition: .2s;
  transition: .2s;
  font-size: 15px;
  box-sizing: border-box;
  color: var(--digi-dark-gray);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-top: 3px;
}

.aa-input-search::-webkit-search-decoration,
.aa-input-search::-webkit-search-cancel-button,
.aa-input-search::-webkit-search-results-button,
.aa-input-search::-webkit-search-results-decoration {
  display: none;
}

.aa-input-search:focus {
  outline: 0;
  border-color: var(--digi-green);
}

input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #999999;
  opacity: 1; /* Firefox */
}
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
  color: #999999;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #999999;
  opacity: 1;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #999999;
  opacity: 1;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #999999;
}
input::-ms-input-placeholder { /* Microsoft Edge */
  color: #999999;
}

.aa-input-icon {
  height: 16px;
  width: 16px;
  position: absolute;
  top: 20px;
  right: 16px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  fill: #CCCCCC;
}

.aa-hint {
  color: var(--digi-light-gray);
}

.aa-dropdown-menu {
  background-color: white;
  border: 2px solid rgba(228, 228, 228, 0.6);
  border-top-width: 1px;
  margin-top: 2px;
  font-size: 14px;
  border-radius: 4px;
  box-sizing: border-box;
}

.aa-suggestion {
  border-top: 1px solid rgba(228, 228, 228, 0.6);
  cursor: pointer;
  -webkit-transition: .2s;
  transition: .2s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.aa-suggestion .suggestion-link {
  padding: 12px;
  background-color: transparent;
  width: 100%;
}

.aa-suggestion .suggestion-link:after {
  content: "";
}

.aa-suggestion .suggestion-link:hover,
.aa-cursor .suggestion-link {
  background-color: rgba(132, 195, 97, .25) !important;
}

.aa-suggestion .suggestion-link > span:first-child,
#show-more-link {
  color: var(--digi-dark-gray);
  font-size: 14px;
  display: block;
}

#show-more-link {
  text-align: center;
  font-size: 16px;
}

.aa-suggestion .suggestion-link > span:last-child {
  color: #999999;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 200px;
}

.aa-suggestion .suggestion-link > span:last-child p {
  font-size: 14px;
}

.aa-suggestion .suggestion-link > span:first-child em,
.aa-suggestion .suggestion-link > span:last-child em {
  font-weight: 700;
  font-style: normal;
  background-color: yellow;
  padding: 2px 0 2px 2px;
}

/********************************************************/
/*******************   Search Results   *****************/
/********************************************************/

/* INPUT */
header {
  position: relative;
  height: 80px;
  margin-top: 40px;
}

/* INPUT */
header .aa-input-search {
  width: 600px;
  padding: 15px 30px 15px 15px;
  border: 2px solid var(--digi-light-gray);
  border-radius: 4px;
  -webkit-transition: .2s;
  transition: .2s;
  font-size: 17px;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

header .aa-input-icon {
  height: 20px;
  width: 20px;
  position: absolute;
  top: 50%;
  right: 16px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  fill: #CCCCCC;
}

/* HITS */
#hits {
  margin: 4px 0;
  padding: 10px 0;
  border-top: 2px solid #eee;
}

.hit {
  font-size: 0;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.hit-name {
  margin: 0;
}

.search-item {
  font-size: 15px;
  font-weight: 300;
  display: inline-block;
  vertical-align: top;
}

.search-item em {
  font-style: normal;
  background-color: yellow;
}

.search-item p {
  font-size: 14px;
}

/* PAGINATION */
#pagination {
  margin-top: 60px;
}

#pagination ul {
  font-size: 0;
  list-style-type: none;
  text-align: center;
}

#pagination li {
  font-size: 14px;
  display: inline;
}
#pagination a {
  padding: 8px 12px;
  text-decoration: none;
  color: #000;
  border: 1px solid #eee;
}

#pagination a:hover {
  background: #f5f5f5;
}

#pagination li:first-child a {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

#pagination li:last-child a {
  border-right: 1px solid #eee;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

#pagination li.ais-pagination--item__active a {
  color: white;
  border-color: var(--digi-green);
  background: var(--digi-green);
}

#pagination li.ais-pagination--item__active a:hover {
  cursor: default;
}

#pagination li.ais-pagination--item__disabled a {
  cursor: not-allowed;
}

#pagination li.ais-pagination--item__disabled a:hover {
  background: none;
}

/* NO RESULTS */
.no-results #pagination, .no-results #sort-by, .no-results #stats, .no-results #facets {
  display: none;
}

.ais-hits__empty {
  font-size: 16px;
  font-weight: bold;
  padding-top: 10px;
}

/*SEARCH RESULTS*/
a.clear-all {
  font-size: 12px;
  line-height: 1;
  display: inline-block;
  margin: 10px;
  padding: 8px 12px;
  text-decoration: none;
  color: black;
  border: 2px solid var(--digi-light-gray);
  border-radius: 4px;
}

a.clear-all:hover {
  transition: border-color .3s ease-in;
  border-color: #999;
}

.search-item {
  padding-top: 15px;
  padding-bottom: 15px;
  line-height: 25px;
}

.search-item .search-title a {
  font-size: 17px;
}

.search-item .search-title a:hover {
  text-decoration: underline;
}

.search-item .search-title a:after {
  content: "";
}

.search-item .search-link {
  color: #CCCCCC;
  font-size: 14px;
}

/********************************************************/
/******************   Version selector   ****************/
/********************************************************/

#version-container-toc {
  margin-top: 10px;
  background-color: var(--digi-light-gray);
  padding: 5px;
  text-align: right;
  margin-bottom: -10px;
}

#version-container-toc span {
  font-size: 14px;
}

#version-container-toc select {
  width: auto;
  font-size: 14px;
}

#version-container-nav {
  margin-top: 10px;
  background-color: var(--digi-light-gray);
  padding: 5px;
  text-align: right;
}

#version-container-nav span {
  font-size: 16px;
}

#version-container-nav select {
  width: auto;
  font-size: 14px;
}

#version-container-nav a {
  display: unset;
}

/********************************************************/
/******************   GitHub Snippets   *****************/
/********************************************************/

/* Code block container */
pre[class*="language-"] {
  background-color: #FCFCFC !important;
  border-color: #EFEFEF;
  border-radius: 4px;
}

div.code-toolbar > .toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar > .toolbar-item > span {
  color: white !important;
  font-size: 14px !important;
  padding: 4px 6px !important;
  background: var(--digi-green) !important;
  box-shadow: 0 2px 0 0 #EFEFEF !important;
  border-radius: 4px !important;
}

div.code-toolbar > .toolbar > .toolbar-item > button {
  color: white !important;
}

div.code-toolbar > .toolbar > .toolbar-item {
  margin: 0px 5px;
}


/****************************************************/
/******************   Microswitch   *****************/
/****************************************************/
.switch-dip {
  display:inline-block;
  background:var(--switch-gray);
  color:var(--switch-text);
  padding:4px;
  border-radius:2px;
  font:600 14px/1.2 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  width:max-content;
  box-shadow: 0 1px 1px rgba(0,0,0,0.4), 2px 2px 8px rgba(0,0,0,0.4);
  margin: 12px;
}

.switch-label {
  margin-bottom:4px;
  margin-left: 2px;
  letter-spacing:.5px;
}

.switch-bank {
  display:grid;
  gap:0;
  justify-content:space-between;
  margin-bottom:2px;
  grid-auto-columns: 25px;
  grid-auto-flow: column;
  column-gap: 2px;
}

/* Switch body */
.switch {
  flex: 1;
  margin: 0 3px;
  position:relative;
  aspect-ratio: 1 / 1.9;   /* keeps proportions while responsive */
  background:var(--switch-black);
  border-radius:3px;
  box-shadow:inset 0 0 0 2px var(--switch-black);
}

/* Slider (the white block) */
.switch::before {
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  height:28%;
  background:var(--switch-white);
  border-radius:2px;
  transition:transform .2s ease;
}

/* Positions */
.switch.ON::before { top:2px; }
.switch.OFF::before { bottom:2px; }
.switch.NA::before { display:none; }

/* Numbers row */
.switch-nums {
  display:flex;
  justify-content:space-between;
  padding:0;
  font-weight:700;
}
.switch-nums span {
  flex: 1;
  text-align:center;
}
.switch-nums span.disabled {
  color: var(--switch-black);
}