@import url(generics.css);
@import url(bootstrap-mods.css);
@import url(spring.css);
@import url(adoc-admonition-blocks.css);

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700);
@import url(https://fonts.googleapis.com/css?family=Fira+Mono);

/*------ Global Constants --------------------------------------------------------------*/

:root {

  /*--- General Layout ---*/
  --layout-header1-height          : 72px;
  --layout-header2-height          : 55px;
  --layout-header-height           : calc(var(--layout-header1-height) + var(--layout-header2-height));
  --layout-footer3-height          : 290px;
  --layout-footer4-height          : 70px;
  --layout-footer5-height          : 127px;
  --layout-page-width              : 1440px; /* makes the article center section 956 pixels wide */
  --doc-left-right-padding         : 40px; /* padding on each side of an article */

  /*--- Fonts ---*/
  --default-text-font-family       : Arial, sans-serif;
  --default-mono-font-family       : monospace;
  --better-text-font-family        : 'Open Sans', sans-serif;
  --better-mono-font-family        : 'Fira Mono', monospace;
  --bootstrap-font-family          : bootstrap-icons !important;
  --default-font-size              : 16px;
  --default-line-height            : 24px;

  /*--- Our Constants ---*/
  --hljs-copy-button-bg-color      : var(--body-font-light-color);
  --std-border-radius              : var(--small-border-radius);

  /*--- AsciiDoc Values ---*/
  --asciidoctor-heading-font-color : var(--std-fg-color); /* ensures headings are the correct color */

  /*--- Videos ---*/
  --video-frame-width              : 878px;
  --video-frame-height             : 494px;
}

/*------ Light-Themed Variables --------------------------------------------------------*/

:root, [data-bs-theme=light] {

  /*--- Main Colors --*/
  --std-fg-color                                   : var(--gray-dark); /* standard foreground color */
  --std-bg-color                                   : var(--gray-08); /* standard background color */
  --blk-bg-color                                   : var(--gray-20); /* background color for blocks */
  --page-border-color                              : var(--gray-20);
  --layout-border-color                            : var(--gray-30);
  --light-fg-color                                 : var(--gray-70);
  --high-contrast-bg-color                         : var(--gray-white);
  --sdk-class-bg-color                             : var(--gray-13);
  --sdk-class-border-color                         : var(--gray-20);

  /*--- KOS SVG Logo --*/
  --kos-logo-filter                                : none;

  /*--- Header ---*/
  --header-bg-color                                : var(--std-bg-color);
  --header-search-fg-color                         : var(--std-fg-color);
  --header-search-bg-color                         : var(--std-bg-color);
  --header-link-color                              : var(--std-bg-color);
  --header-link-color-hover                        : var(--gray-20);
  --header-btn-color-hover                         : var(--blue);

  /*--- Footer ---*/
  --footer-bg-color                                : var(--gray-08);
  --footer-background                              : linear-gradient(to top, rgb(179, 224, 255, 40%) 0, var(--footer-bg-color) 127px);

  /*--- Left-side table-of-contents and right-side on-this-page ---*/
  --toc-fg-color                                   : var(--gray-60);
  --toc-fg-hover-color                             : var(--std-fg-color);
  --toc-bg-hover-color                             : var(--blk-bg-color);
  --toc-fg-selected-color                          : var(--std-fg-color);
  --toc-bg-selected-color                          : none;
  --toc-divider-color                              : var(--gray-20);

  /*--- Document ---*/
  --doc-h1-font-color                              : var(--std-fg-color);
  --doc-h1-subtitle-color                          : var(--gray-60);
  --doc-h2-border-color                            : var(--gray-20);
  --doc-block-title-color                          : var(--std-fg-color);
  --doc-block-font-color                           : var(--std-fg-color);
  --doc-dlist-font-color                           : rgb(0, 24, 90); /* #00185a */

  /*--- General ---*/
  --btn-light-color                                : var(--gray-15);
  --btn-light-color-hover                          : rgb(92, 99, 106); /* #5c636a */

  /*--- Search Results ---*/
  --result-fg-color                                : var(--std-fg-color);
  --result-bg-color                                : var(--std-bg-color);
  --result-bg-hover-color                          : var(--blk-bg-color);

  /*--- AsciiDoc ---*/
  --asciidoctor-block-example-background           : var(--blk-bg-color);
  --asciidoctor-block-image-background             : var(--blk-bg-color);
  --asciidoctor-block-listing-background           : var(--blk-bg-color);
  --asciidoctor-block-literal-background           : var(--gray-10);
  --asciidoctor-block-quote-background             : rgb(243, 250, 251); /* #f3fafb */
  --asciidoctor-block-quote-border-color           : rgb(136, 199, 206); /* #88c7ce */
  --asciidoctor-block-quote-attribution-font-color : rgb(37, 112, 116); /* #257074 */
  --asciidoctor-block-sidebar-background           : var(--blk-bg-color);
  --asciidoctor-pre-background                     : var(--gray-white); /* (code background) */
}

/*------ Dark-Themed Variables ---------------------------------------------------------*/

[data-bs-theme=dark] {

  /*--- Main Colors --*/
  --std-fg-color                                   : var(--gray-white); /* standard foreground color */
  --std-bg-color                                   : var(--gray-dark); /* standard background color */
  --blk-bg-color                                   : var(--gray-80); /* background color for blocks */
  --page-border-color                              : var(--gray-70);
  --layout-border-color                            : var(--gray-60);
  --light-fg-color                                 : var(--gray-15);
  --high-contrast-bg-color                         : var(--gray-90);
  --sdk-class-bg-color                             : var(--gray-70);
  --sdk-class-border-color                         : var(--gray-60);

  /*--- KOS SVG Logo --*/
  --kos-logo-filter                                : invert(100%) sepia(23%) saturate(90%) hue-rotate(230deg) brightness(116%) contrast(92%); /* #f5f5f5 */

  /*--- Header ---*/
  --header-bg-color                                : var(--std-bg-color);
  --header-search-fg-color                         : var(--std-fg-color);
  --header-search-bg-color                         : var(--blk-bg-color);
  --header-link-color                              : var(--std-fg-color);
  --header-link-color-hover                        : var(--gray-20);
  --header-btn-color-hover                         : var(--blue);

  /*--- Footer ---*/
  --footer-bg-color                                : var(--gray-91);
  --footer-background                              : none;

  /*--- Left side table-of-contents and right side on-this-page ---*/
  --toc-fg-color                                   : var(--gray-30);
  --toc-fg-hover-color                             : var(--std-fg-color);
  --toc-bg-hover-color                             : var(--gray-50);
  --toc-fg-selected-color                          : var(--std-fg-color);
  --toc-bg-selected-color                          : none;
  --toc-divider-color                              : var(--gray-60);

  /*--- Document ---*/
  --doc-h1-font-color                              : var(--std-fg-color);
  --doc-h1-subtitle-color                          : var(--gray-30);
  --doc-h2-border-color                            : var(--gray-70);
  --doc-block-title-color                          : var(--std-fg-color);
  --doc-block-font-color                           : var(--std-fg-color);
  --doc-dlist-font-color                           : inherit;

  /*--- General ---*/
  --btn-light-color                                : var(--gray-70);
  --btn-light-color-hover                          : rgb(92, 99, 106); /* #5c636a */

  /*--- Search Results ---*/
  --result-fg-color                                : var(--gray-15);
  --result-bg-color                                : var(--std-bg-color);
  --result-bg-hover-color                          : var(--gray-70);

  /*--- AsciiDoc ---*/
  --asciidoctor-block-example-background           : var(--blk-bg-color);
  --asciidoctor-block-image-background             : var(--blk-bg-color);
  --asciidoctor-block-listing-background           : var(--blk-bg-color);
  --asciidoctor-block-literal-background           : var(--blk-bg-color);
  --asciidoctor-block-quote-background             : rgb(52, 52, 54); /* #343436 */
  --asciidoctor-block-quote-border-color           : rgb(106, 201, 206); /* #6ac9ce */
  --asciidoctor-block-quote-attribution-font-color : rgb(106, 201, 206); /* #6ac9ce */
  --asciidoctor-block-sidebar-background           : var(--blk-bg-color);
  --asciidoctor-pre-background                     : var(--gray-dark); /* (code background) */
}

/*------ Primary Selectors -------------------------------------------------------------*/

html {
  box-sizing         : border-box;
  scroll-behavior    : smooth;
  /* https://stackoverflow.com/questions/4086107/fixed-page-header-overlaps-in-page-anchors */
  scroll-padding-top : calc(var(--layout-header-height) + 15px); /* equal to the height of the sticky header plus a bit more */
}

body {
  background-color  : var(--std-bg-color);
  background-repeat : no-repeat;
  color             : var(--std-fg-color);
  font-family       : var(--better-text-font-family);
  font-size         : var(--default-font-size);
  font-style        : normal;
  font-weight       : normal;
  hyphens           : none;
  line-height       : var(--default-line-height);
  margin            : 0;
  overflow-x        : hidden; /* never show the horizontal scrollbar */
  overflow-y        : scroll; /* always show the vertical scrollbar */
  scrollbar-color   : silver transparent;
  scrollbar-width   : thin;
  text-size-adjust  : none;
  word-wrap         : normal;
}

a {
  color           : var(--link-color);
  text-decoration : none;
}

a:hover {
  color : var(--link-hover-color);
}

a:active {
  color : var(--link-active-color);
}

a.unresolved {
  color : var(--link-unresolved-color);
}

a[target].force-off-page-img::after,
a[target]:not(a[target~='kos-sdk-javadocs']):not(a[class~='no-off-page-img'])::after {
  content     : '\F1C5';
  font-family : var(--bootstrap-font-family);
  font-size   : 12px;
  padding     : 0 5px;
}

code {
  background-color : var(--sdk-class-bg-color);
  border           : 1px solid var(--sdk-class-border-color);
  border-radius    : 4px;
  color            : var(--std-fg-color);
  font-size        : var(--default-font-size);
  font-weight      : 400;
  padding          : 2px 4px 1px 5px;
}

code, kbd, pre {
  font-family : var(--better-mono-font-family);
  font-size   : var(--default-font-size);
}

mark {
  border-radius : var(--std-border-radius);
  padding       : 1px 5px 1px 6px;
}

table {
  border-collapse : collapse;
}

/*------ Common Rules ------------------------------------------------------------------*/

.text-muted {
  color   : inherit !important;
  opacity : 60%;
}

/*------ All Content -------------------------------------------------------------------*/

#kos-content {
}

.kos-logo {
  filter : var(--kos-logo-filter);
}

/*------ Top / Header ------------------------------------------------------------------*/

#kos-top {
  background-color : var(--header-bg-color);
  border-bottom    : 1px solid var(--layout-border-color);
  max-width        : 100%;
}

#kos-top #header1,
#kos-top #header2 {
  margin    : auto;
  max-width : var(--layout-page-width);
}

#kos-top #header1 .dropdown .dropdown-item:hover,
#kos-top #header2 .dropdown .dropdown-item:hover {
  font-weight : bold;
}

#kos-top #header1 {
  min-height : var(--layout-header1-height);
}

#kos-top #header1 .kos-logo {
  height : 32px;
}

#kos-top #header1 #search-text {
  background-color    : var(--std-bg-color);
  background-image    : url(../icons/bs/bi-search-fixed-color.svg);
  background-position : 10px center;
  background-repeat   : no-repeat;
  height              : 40px;
  text-indent         : 24px;
  width               : 230px;
}

#kos-top #header1 #download-btn {
  height      : 40px;
  line-height : 20px;
}

#kos-top #header2 {
  border-top : 1px solid var(--layout-border-color);
  min-height : var(--layout-header2-height);
}

#kos-top #header2 .breadcrumbs .muted {
  color : var(--gray-50);
}

#kos-top #header2 .breadcrumbs a.muted:hover {
  border-bottom : 1px solid var(--gray-50);
}

/*------ Middle ------------------------------------------------------------------------*/

#kos-middle {
  visibility : hidden; /* made visible by Page.showContent() method called at initialization */
}

/*------ Left Sidebar ------*/

#kos-left {
  color       : var(--toc-fg-color);
  font-family : system-ui;
  height      : 100%;
  line-height : 26px;
  position    : sticky;
  top         : calc(var(--layout-header-height) + 44px);
}

#kos-left .toc-title {
  color        : var(--std-fg-color);
  font-size    : 18px;
  font-weight  : bold;
  padding-top  : 4px;
  padding-left : 4px;
}

#kos-left .toc-title a {
  color : var(--std-fg-color);
}

#kos-left #site-table-of-contents {
  font-size  : 14px;
  max-height : 80vh;
  overflow-y : auto;
}

#kos-left #site-table-of-contents *:focus {
  outline : none; /* removes unsightly focus border when an item gets clicked */
}

#kos-left #site-table-of-contents ul li {
  margin-top    : 8px;
  margin-bottom : 8px;
}

/* up and down arrows */
#kos-left #site-table-of-contents ul li a {
  color        : var(--std-fg-color); /* fixes color of left and down arrows */
  font-family  : sans-serif; /* fixes problem with jqTree "closed" image */
  font-size    : 10px; /* makes the arrows a bit smaller */
  padding-left : 3px;
}

/* divider between top-level folders */
#kos-left #site-table-of-contents > ul.jqtree-tree > li.jqtree-folder {
  border-bottom  : 1px solid var(--toc-divider-color);
  padding-top    : 8px;
  padding-bottom : 16px;
  width          : 99%;
}

/* hovered item */
#kos-left #site-table-of-contents ul.jqtree-tree li > div.jqtree-element:hover {
  background    : var(--toc-bg-hover-color) !important;
  border-radius : 3px;
}

/* selected item */
#kos-left #site-table-of-contents ul.jqtree-tree li.jqtree-selected > div.jqtree-element {
  background  : var(--toc-bg-selected-color);
  font-weight : bold;
  text-shadow : none;
}

#kos-left #site-table-of-contents ul.jqtree-tree div.jqtree-element span {
  padding-left : 12px;
  text-indent  : -12px;
}

#kos-left #site-table-of-contents ul.jqtree-tree span.jqtree-title {
  color : var(--std-fg-color);
}

#kos-left #site-table-of-contents ul.jqtree-tree span.jqtree-title:not(.jqtree-title-folder) {
  margin-left : 12px; /* a little less left-side spacing in page names */
}

/*------ Center Section ------*/

#kos-center {
  background-color : var(--std-bg-color);
  border-left      : 1px solid var(--page-border-color);
  padding          : 0 var(--doc-left-right-padding);
}

#kos-center .prev-next-labels {
  border-top  : 1px solid var(--page-border-color);
  font-size   : 14px;
  font-weight : bold;
  line-height : 21px;
  margin-top  : 48px;
  padding-top : 32px;
}

#kos-center .prev-next-links {
  font-weight    : bold;
  padding-bottom : 32px;
}

/*------ Right Sidebar ------*/

#kos-right {
  color       : var(--toc-fg-color);
  font-family : system-ui;
  height      : 100%;
  line-height : 26px;
  position    : sticky;
  top         : calc(var(--layout-header-height) + 44px);
}

#kos-right .toc-title {
  color        : var(--std-fg-color);
  font-size    : 18px;
  font-weight  : bold;
  padding-top  : 4px;
  padding-left : 4px;
}

#kos-right #page-table-of-contents {
  font-size  : 14px;
  max-height : 80vh;
  overflow-y : auto;
}

#kos-right #page-table-of-contents nav {
  border-left  : 1px solid var(--page-border-color);
  padding-left : 8px;
}

#kos-right #page-table-of-contents nav ul {
  list-style-type : none;
  padding-left    : 10px; /* reduces indent spacing */
}

#kos-right #page-table-of-contents nav > ul:first-of-type {
  padding-left : 0;
}

/* smaller vertical spacing in wrapped lines */
#kos-right #page-table-of-contents nav ul li {
  line-height   : 22px;
  margin-top    : 4px;
  margin-bottom : 4px;
}

/* regular item */
#kos-right #page-table-of-contents nav ul li > a {
  border-radius   : 3px;
  color           : var(--toc-fg-color);
  display         : block;
  padding         : 2px 1px 2px 18px;
  text-decoration : none;
  text-indent     : -12px;
}

/* hovered item */
#kos-right #page-table-of-contents nav ul li > a:hover {
  background : var(--toc-bg-hover-color) !important;
  color      : var(--toc-fg-hover-color);
}

/* selected item */
#kos-right #page-table-of-contents nav ul li.active > a {
  background  : var(--toc-bg-selected-color);
  color       : var(--toc-fg-selected-color);
  font-weight : bold;
}

/*------ Bottom / Footer ---------------------------------------------------------------*/

#kos-bottom {
  background       : var(--footer-background);
  background-color : var(--footer-bg-color);
  border-top       : 1px solid var(--layout-border-color);
  border-bottom    : 1px solid var(--layout-border-color);
  max-width        : 100%;
}

#kos-bottom #footer1,
#kos-bottom #footer2,
#kos-bottom #footer3,
#kos-bottom #footer4,
#kos-bottom #footer5 {
  margin    : auto;
  max-width : var(--layout-page-width);
}

#kos-bottom #footer1,
#kos-bottom #footer2 {
  border-bottom : 1px solid var(--page-border-color);
}

#kos-bottom #footer3 {
  min-height : var(--layout-footer3-height);
}

#kos-bottom #footer4 {
  border-top : 1px solid var(--page-border-color);
  min-height : var(--layout-footer4-height);
}

#kos-bottom #footer5 {
  border-top : 1px solid var(--page-border-color);
  min-height : var(--layout-footer5-height);
}

#kos-bottom #footer5 .copyright-notice {
  font-size    : 14px;
  padding-left : 12px;
}

/*------ Search Results Page -----------------------------------------------------------*/

#doc #searcher .search-term {
  background    : var(--asciidoctor-code-background);
  border-radius : var(--std-border-radius);
  font-family   : var(--better-mono-font-family);
  padding       : 4px 10px;
  margin        : 0 4px;
}

#doc #searcher a {
  font-weight : normal;
}

/*------ Overrides of AsciiDoc Styles --------------------------------------------------*/

/* not sure why this class is missing */
.big {
  font-size : 120%;
}

/*------ Overrides of highlightjs-copy Styles ------------------------------------------*/

.hljs-copy-button {
  background-color : var(--hljs-copy-button-bg-color);
  top              : 16px;
}

/*------ Overrides of highlightjs-line-numbers Styles ----------------------------------*/

td.hljs-ln-numbers {
  border-right   : 1px solid #999999;
  padding-right  : 6px;
  text-align     : right;
  vertical-align : top;
}

td.hljs-ln-code {
  padding-left : 10px;
}

/*------ Overrides of spring.css Styles ------------------------------------------------*/

#doc {
  line-height : 26px;
}

#doc .bold {
  font-weight : bold;
}

#doc .italic {
  font-style : italic;
}

#doc code, #doc kbd, #doc pre {
  font-family : var(--better-mono-font-family);
}

#doc .listingblock code {
  border      : none;
  background  : none;
  font-weight : inherit;
}

#doc a.sdk-class {
  background-color : var(--sdk-class-bg-color);
  border           : 1px solid var(--sdk-class-border-color);
  border-radius    : 4px;
  font-family      : var(--better-mono-font-family);
  font-weight      : 400;
  padding          : 1px 4px 1px 5px;
}

#doc li p {
  margin-bottom : 0;
}

#doc .conum[data-value] {
  line-height : 1.3; /* improves the position of number inside circle used for code notes */
}

/*------ Headers -----------------------------------------------------------------------*/

#doc h1, #doc h2, #doc h3, #doc h4, #doc h5, #doc h6 {
  margin-top    : 32px;
  margin-bottom : 16px;
  word-break    : break-word;
}

/* @formatter:off */
#doc h1 { font-size: 40px; line-height: 44px; font-weight: 700; }
#doc h2 { font-size: 32px; line-height: 36px; font-weight: 600; }
#doc h3 { font-size: 28px; line-height: 32px; font-weight: 600; }
#doc h4 { font-size: 24px; line-height: 28px; font-weight: 600; }
#doc h5 { font-size: 20px; line-height: 24px; font-weight: 600; }
#doc h6 { font-size: 16px; line-height: 20px; font-weight: 600; }
/* @formatter:on */

#doc h1 a.anchor, #doc h2 a.anchor, #doc h3 a.anchor, #doc h4 a.anchor, #doc h5 a.anchor, #doc h6 a.anchor {
  margin-left  : -30px;
  padding-left : 8px;
  position     : absolute;
  visibility   : hidden;
  width        : 32px;
}

#doc h1 a.anchor:after, #doc h2 a.anchor:after, #doc h3 a.anchor:after, #doc h4 a.anchor:after, #doc h5 a.anchor:after, #doc h6 a.anchor:after {
  content : '\00A7'; /* section sign */
}

#doc h1:hover a.anchor, #doc h2:hover a.anchor, #doc h3:hover a.anchor, #doc h4:hover a.anchor, #doc h5:hover a.anchor, #doc h6:hover a.anchor {
  text-decoration : none;
  visibility      : visible;
}

#doc h1 #subtitle {
  color         : var(--doc-h1-subtitle-color);
  font-size     : 20px;
  font-weight   : normal;
  line-height   : 24px;
  margin-bottom : 24px;
  margin-top    : 12px;
}

#doc h2 {
  border-bottom  : 1px solid var(--doc-h2-border-color);
  margin-top     : 48px;
  margin-bottom  : 24px;
  padding-bottom : 8px;
}

/*------ Other -------------------------------------------------------------------------*/

#doc img {
  border-radius : 9px;
}

#doc pre {
  font-size : 14px;
}

#doc table.tableblock {
  display    : table; /* enables table "width" to work */
  margin-top : 32px;
}

#doc table.tableblock thead {
  background-color : var(--asciidoctor-code-background);
}

#doc table.tableblock th,
#doc table.tableblock td {
  padding-left  : 16px;
  padding-right : 16px;
}

#doc.java table.tableblock td {
  padding-top    : 0;
  padding-bottom : 0;
}

#doc table.tableblock td:first-child {
  border-right : 1px solid var(--asciidoctor-table-border-color);
}

#doc table.tableblock td {
  background-color : var(--high-contrast-bg-color);
}

#doc table.tableblock td p {
  margin-top    : 8px;
  margin-bottom : 8px;
}

#doc div.title {
  font-weight    : bold;
  padding-bottom : 0.75em;
}

#doc .dlist dt {
  font-style : normal;
}

#doc .dlist dd {
  margin-bottom : 12px;
}

#doc .sidebarblock {
  border-radius : var(--std-border-radius);
  padding       : 16px;
}

/*------ Other Blocks ------------------------------------------------------------------*/

/* @formatter:off */

/* Generic block titles */
#doc div.exampleblock    div.title,
#doc div.imageblock      div.title,
#doc div.listingblock    div.title,
#doc div.literalblock    div.title,
#doc div.quoteblock      div.title,
#doc div.sidebarblock    div.title {
  color: var(--doc-block-title-color);
  font-style: normal;
}

#doc div.listingblock div.title {
  letter-spacing: normal;
}

/* Image block titles */
#doc div.imageblock div.title {
  font-style: italic;
  font-weight: normal;
  margin-bottom: 16px;
}

/* Generic block contents */
#doc div.exampleblock    div.content,
#doc div.imageblock      div.content,
#doc div.listingblock    div.content,
#doc div.literalblock    div.content,
#doc div.quoteblock      blockquote,
#doc div.sidebarblock    div.content {
  color: var(--doc-block-font-color);
}

/* Image block contents */
#doc div.imageblock.text-left {
  margin-left: 16px;
  width: fit-content;
}
#doc div.imageblock div.content {
  border: 1px solid grey;
  border-radius: 9px;
}

/* Generic block backgrounds */
#doc div.exampleblock div.content pre { background: var(--asciidoctor-block-example-background); }
#doc div.imageblock   div.content pre { background: var(--asciidoctor-block-image-background);   }
#doc div.listingblock div.content pre { background: var(--asciidoctor-block-listing-background); }
#doc div.literalblock div.content pre { background: var(--asciidoctor-block-literal-background); }
#doc div.quoteblock   div.content pre { background: var(--asciidoctor-block-quote-background);   }
#doc div.sidebarblock div.content pre { background: var(--asciidoctor-block-sidebar-background); }

/* @formatter:on */

/*------ Video Pages ------------------------------------------------------------------*/

#doc.videos #video-iframe {
  margin-top    : 4px;
  margin-bottom : 48px;
  height        : var(--video-frame-height);
  width         : var(--video-frame-width);
}

#doc.videos #video-nav {
  border-bottom : 1px solid var(--page-border-color);
}

/*------ Zoom In/Out Buttons -----------------------------------------------------------*/

#btn-hide-toc::after,
#btn-show-toc::after {
  background-repeat : no-repeat;
  content           : '';
  cursor            : pointer;
  display           : inline-block;
  height            : 24px;
  width             : 24px;
}

:root, [data-bs-theme=light] {
  #btn-hide-toc::after {
    background-image : url(../icons/misc/chevron-left-light-24x24.png);
  }

  #btn-show-toc::after {
    background-image : url(../icons/misc/chevron-right-light-24x24.png);
  }
}

[data-bs-theme=dark] {
  #btn-hide-toc::after {
    background-image : url(../icons/misc/chevron-left-dark-24x24.png);
  }

  #btn-show-toc::after {
    background-image : url(../icons/misc/chevron-right-dark-24x24.png);
  }
}

/*------ Misc --------------------------------------------------------------------------*/

.full-width-horz-line {
  border-top : 1px solid var(--page-border-color);
  margin     : 0 -64px 24px -64px;
}