github.com/choria-io/go-choria@v0.28.1-0.20240416190746-b3bf9c7d5a45/docs/themes/hugo-theme-relearn/static/css/theme.css (about)

     1  @charset "UTF-8";
     2  
     3  @import "tags.css";
     4  
     5  /* until browsers don't let us set length values based on dppx, we
     6  need a way to calculate them ourself */
     7  :root {
     8      --dpr: 1;
     9      --bpx: 1;
    10      --bpx1: 1;
    11  }
    12  @media (min-resolution: 105dpi) {
    13      :root {
    14          --dpr: 1.1;
    15          --bpx: 1.1;
    16          --bpx1: calc(1/1.1);
    17      }
    18  }
    19  @media (min-resolution: 115dpi) {
    20      :root {
    21          --dpr: 1.2;
    22          --bpx: 1.2;
    23          --bpx1: calc(1/1.2);
    24      }
    25  }
    26  @media (min-resolution: 120dpi) {
    27      :root {
    28          --dpr: 1.25;
    29          --bpx: 1.25;
    30          --bpx1: calc(1/1.25);
    31      }
    32  }
    33  @media (min-resolution: 128dpi) {
    34      :root {
    35          --dpr: 1.333;
    36          --bpx: 1.333;
    37          --bpx1: calc(1/1.333);
    38      }
    39  }
    40  @media (min-resolution: 144dpi) {
    41      :root {
    42          --dpr: 1.5;
    43          --bpx: 1.5;
    44          --bpx1: calc(1/1.5);
    45      }
    46  }
    47  @media (min-resolution: 160dpi) {
    48      :root {
    49          --dpr: 1.666;
    50          --bpx: 1.666;
    51          --bpx1: calc(1/1.666);
    52      }
    53  }
    54  @media (min-resolution: 168dpi) {
    55      :root {
    56          --dpr: 1.75;
    57          --bpx: 1.75;
    58          --bpx1: calc(1/1.75);
    59      }
    60  }
    61  @media (min-resolution: 192dpi) {
    62      :root {
    63          --dpr: 2;
    64          --bpx: 1;
    65          --bpx1: 1;
    66      }
    67  }
    68  @media (min-resolution: 240dpi) {
    69      :root {
    70          --dpr: 2.5;
    71          --bpx: 1.25;
    72          --bpx1: calc(1/1.25);
    73      }
    74  }
    75  @media (min-resolution: 288dpi) {
    76      :root {
    77          --dpr: 3;
    78          --bpx: 1;
    79          --bpx1: 1;
    80      }
    81  }
    82  @media (min-resolution: 384dpi) {
    83      :root {
    84          --dpr: 4;
    85          --bpx: 1;
    86          --bpx1: 1;
    87      }
    88  }
    89  @media (min-resolution: 480dpi) {
    90      :root {
    91          --dpr: 5;
    92          --bpx: 1.25;
    93          --bpx1: calc(1/1.25);
    94      }
    95  }
    96  @media (min-resolution: 576dpi) {
    97      :root {
    98          --dpr: 6;
    99          --bpx: 1.5;
   100          --bpx1: calc(1/1.5);
   101      }
   102  }
   103  @media (min-resolution: 768dpi) {
   104      :root {
   105          --dpr: 8;
   106          --bpx: 1;
   107          --bpx1: 1;
   108      }
   109  }
   110  
   111  html {
   112      height: 100%;
   113      width: 100%;
   114  }
   115  
   116  body {
   117      display: flex;
   118      flex-direction: row-reverse; /* IE11 to allow body to have initial focus for PS and better SEO and a11y */
   119      font-size: 1.015625rem;
   120      font-weight: 300;
   121      height: 100%;
   122      justify-content: flex-end;
   123      line-height: 1.574;
   124      /* overflow: hidden; PSC removed for #242 #243 #244; to avoid browser scrollbar to flicker before we create our own */
   125      width: 100%;
   126  }
   127  
   128  b,
   129  strong,
   130  label,
   131  th {
   132      font-weight: 600;
   133  }
   134  
   135  ul {
   136      list-style: disc;
   137  }
   138  
   139  dt {
   140      font-style: italic;
   141  }
   142  
   143  dd {
   144      display: list-item;
   145      list-style: circle;
   146  }
   147  
   148  .default-animation{
   149      transition: all 0.35s ease;
   150  }
   151  
   152  #R-sidebar {
   153      display: flex;
   154      flex-basis: auto;
   155      flex-direction: column;
   156      flex-grow: 0;
   157      flex-shrink: 0;
   158      font-size: .953125rem;
   159      height: 100%;
   160      inset-inline-start: 0;
   161      line-height: 1.574;
   162      min-height: 100%;
   163      position: fixed;
   164      min-width: var(--INTERNAL-MENU-WIDTH-L);
   165      max-width: var(--INTERNAL-MENU-WIDTH-L);
   166      width: var(--INTERNAL-MENU-WIDTH-L);
   167  }
   168  
   169  #R-sidebar a{
   170      text-decoration: none;
   171  }
   172  
   173  #R-header-wrapper {
   174      text-align: center;
   175      padding: 1rem;
   176      position: relative;
   177  }
   178  #R-header {
   179      border-block-end: 1px solid transparent;
   180      position: relative;
   181      z-index: 1;
   182  }
   183  #R-header a {
   184      display: inline-block;
   185  }
   186  
   187  .searchbox {
   188      border-radius: 4px;
   189      border-style: solid;
   190      border-width: 1px;
   191      position: relative;
   192      margin-top: 1rem;
   193  }
   194  
   195  .searchbox > :first-child {
   196      inset-inline-start: .5rem;
   197      position: absolute;
   198  }
   199  
   200  .searchbox > button {
   201      -webkit-appearance: none;
   202      appearance: none;
   203      background-color: transparent;
   204      border: 0;
   205      margin: 0;
   206      padding: 0;
   207      top: .25rem;
   208  }
   209  
   210  .searchbox > i {
   211      top: .45rem;
   212  }
   213  
   214  .searchbox > :last-child {
   215      inset-inline-end: .5rem;
   216      position: absolute;
   217  }
   218  
   219  #R-sidebar .searchbox > :first-child,
   220  #R-sidebar .searchbox > :last-child{
   221      opacity: .65;
   222  }
   223  
   224  #R-sidebar .searchbox button:hover {
   225      opacity: 1;
   226  }
   227  
   228  .searchbox input {
   229      display: inline-block;
   230      width: 100%;
   231      height: 1.875rem;
   232      background: transparent;
   233      border: 0;
   234      padding-bottom: 0;
   235      padding-inline-end: 1.6rem;
   236      padding-inline-start: 1.8rem;
   237      padding-top: 0;
   238      margin: 0;
   239      font-weight: 300;
   240  }
   241  
   242  .searchbox input::placeholder {
   243      opacity: .45;
   244  }
   245  
   246  #R-content-wrapper {
   247      --ps-rail-hover-color: rgba( 176, 176, 176, .25 );
   248      display: flex;
   249      flex-direction: column;
   250      flex: 1; /* fill rest of vertical space */
   251      overflow: hidden;
   252      position: relative; /* PS */
   253      z-index: 100;
   254  }
   255  
   256  #R-sidebar .padding {
   257      padding: 0 1rem;
   258  }
   259  
   260  .footerFooter {
   261      font-size: .8125rem;
   262      padding-top: 2rem;
   263      padding-bottom: .75rem;
   264      text-align: center;
   265  }
   266  
   267  .footerFooter > * {
   268      margin: 0 auto;
   269  }
   270  
   271  #R-footer > hr:first-child {
   272      margin-top: 0;
   273  }
   274  
   275  /* increase specifity to override following #R-content-wrapper hr style */
   276  #R-footer > hr:nth-child(n) {
   277      margin-left: 0;
   278      margin-right: 0;
   279  }
   280  
   281  #R-sidebar ul {
   282      list-style: none;
   283      padding: 0;
   284      margin: 0;
   285  }
   286  
   287  #R-sidebar ul li {
   288      padding: 0;
   289  }
   290  
   291  #R-sidebar ul li.visited + span {
   292      margin-inline-end: 1rem;
   293  }
   294  
   295  #R-sidebar ul li .read-icon {
   296      display: none;
   297      font-size: .8125rem;
   298      inset-inline-end: 1rem;
   299      margin: .25rem 0 0 0;
   300      min-width: 1rem;
   301      position: absolute;
   302  }
   303  
   304  #R-sidebar ul li.visited > a .read-icon {
   305      display: inline;
   306  }
   307  
   308  #R-sidebar .nav-title {
   309      font-size: 2rem;
   310      font-weight: 200;
   311      letter-spacing: -.02175em;
   312      line-height: 110%;
   313      margin: 1.2rem 0 .8rem 0;
   314      padding-inline-start: 1rem;
   315      text-rendering: optimizeLegibility;
   316      text-transform: uppercase;
   317  }
   318  
   319  #R-sidebar .footermargin {
   320      flex-grow: 1;
   321  }
   322  
   323  #R-content-wrapper hr {
   324      border-bottom-style: solid;
   325      border-bottom-width: 1px;
   326      margin: 1.5rem 1rem 1rem 1rem;
   327  }
   328  
   329  #R-body {
   330      display: flex;
   331      flex-basis: 100%;
   332      flex-direction: column;
   333      flex-grow: 1;
   334      flex-shrink: 0;
   335      height: 100%;
   336      margin-inline-start: var(--INTERNAL-MENU-WIDTH-L);
   337      min-height: 100%;
   338      overflow-wrap: break-word; /* avoid x-scrolling of body if it is to large to fit */
   339      position: relative; /* PS */
   340      min-width: calc( 100% - var(--INTERNAL-MENU-WIDTH-L) );
   341      max-width: calc( 100% - var(--INTERNAL-MENU-WIDTH-L) );
   342      width: calc( 100% - var(--INTERNAL-MENU-WIDTH-L) );
   343      z-index: 70;
   344  }
   345  
   346  #R-body img,
   347  #R-body figure > figcaption > h4,
   348  #R-body figure > figcaption > p,
   349  #R-body .video-container {
   350      display: block;
   351      margin-left: auto;
   352      margin-right: auto;
   353      padding: 0;
   354      text-align: center;
   355  }
   356  
   357  #R-body img:not(.lightbox-image).left {
   358      margin-left: 0;
   359  }
   360  
   361  #R-body img:not(.lightbox-image).right {
   362      margin-right: 0;
   363  }
   364  
   365  #R-body img:not(.lightbox-image).border,
   366  #R-body .video-container.border {
   367      background-clip: padding-box;
   368      border: 1px solid rgba( 134, 134, 134, .333 );
   369  }
   370  
   371  #R-body img:not(.lightbox-image).shadow,
   372  #R-body .video-container.shadow {
   373      box-shadow: 0 10px 30px rgba( 176, 176, 176, .666 );
   374  }
   375  
   376  #R-body img:not(.lightbox-image).inline {
   377      display: inline;
   378      margin: 0;
   379      vertical-align: bottom;
   380  }
   381  
   382  #R-body figure > figcaption{
   383      margin: 0;
   384  }
   385  
   386  #R-body figure > figcaption > h4{
   387      font-size: 1.0rem;
   388      font-weight: 500;
   389      margin: 0;
   390  }
   391  
   392  #R-body figure > figcaption > p{
   393      font-size: .85rem;
   394      font-weight: 300;
   395      margin-top: .15rem;
   396  }
   397  #R-body figure > figcaption > h4 + p{
   398      margin-top: 0;
   399  }
   400  
   401  #R-body-inner {
   402      display: flex;
   403      flex: auto;
   404      flex-direction: column;
   405      overflow-y: auto;
   406      padding: 0 3.25rem 4rem 3.25rem;
   407      position: relative; /* PS */
   408  }
   409  @media screen and (max-width: 59.999rem) {
   410      #R-body-inner {
   411          padding: 0 2rem 1rem 2rem;
   412      }
   413  }
   414  @media screen and (max-width: 47.999rem) {
   415      #R-body-inner {
   416          padding: 0 1.25rem .375rem 1.25rem;
   417      }
   418  }
   419  
   420  #R-topbar a:hover:empty,
   421  #R-topbar a:active:empty,
   422  #R-topbar a:focus:empty,
   423  #R-topbar a:hover :not(i),
   424  #R-topbar a:active :not(i),
   425  #R-topbar a:focus :not(i),
   426  #R-topbar button:hover :not(i),
   427  #R-topbar button:active :not(i),
   428  #R-topbar button:focus :not(i),
   429  #R-topbar .title:hover,
   430  #R-topbar .title:active,
   431  #R-topbar .title:focus,
   432  .topbar-content a:hover,
   433  .topbar-content a:active,
   434  .topbar-content a:focus,
   435  article a:hover,
   436  article a:active,
   437  article a:focus,
   438  article a:hover .copy-to-clipboard,
   439  article a:active .copy-to-clipboard,
   440  article a:focus .copy-to-clipboard {
   441      text-decoration: underline;
   442  }
   443  .topbar-content a:hover,
   444  .topbar-content a:active,
   445  .topbar-content a:focus,
   446  article a:hover,
   447  article a:active,
   448  article a:focus,
   449  article a:hover .copy-to-clipboard,
   450  article a:active .copy-to-clipboard,
   451  article a:focus .copy-to-clipboard {
   452      outline: none;
   453  }
   454  article a:hover > img:only-child:empty,
   455  article a:active > img:only-child:empty,
   456  article a:focus > img:only-child:empty{
   457      outline: auto;
   458  }
   459  
   460  #R-body-inner:focus-visible{
   461      /* remove focus indicator for programatically set focus */
   462      outline: none;
   463  }
   464  
   465  #R-body h1 + hr {
   466      margin-bottom: 2rem;
   467      margin-top: -1rem;
   468  }
   469  
   470  #R-body .flex-block-wrapper {
   471      margin-left: auto;
   472      margin-right: auto;
   473      max-width: calc( var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem );
   474      width: 100%;
   475  }
   476  body:not(.print) #R-body .narrow .flex-block-wrapper {
   477      max-width: calc( var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 9.75rem );
   478  }
   479  /* we limit width if we have large screens */
   480  body.main-width-max #R-body .flex-block-wrapper {
   481      width: calc( var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 3.25rem );
   482  }
   483  body.main-width-max:not(.print) #R-body .narrow .flex-block-wrapper {
   484      width: calc( var(--INTERNAL-MAIN-WIDTH-MAX) - var(--INTERNAL-MENU-WIDTH-L) - 2 * 9.75rem );
   485  }
   486  
   487  body:not(.print) #R-body-inner.narrow {
   488      padding: 0 9.75rem 2rem 9.75rem;
   489  }
   490  @media screen and (max-width: 59.999rem) {
   491      body:not(.print) #R-body-inner.narrow {
   492          padding: 0 6.5rem 1rem 6.5rem;
   493      }
   494  }
   495  @media screen and (max-width: 47.999rem) {
   496      body:not(.print) #R-body-inner.narrow {
   497          padding: 0 3.25rem .375rem 3.25rem;
   498      }
   499  }
   500  
   501  #R-body-inner div.article-subheading,
   502  #R-body-inner .chapter.deprecated h3:first-of-type {
   503      font-weight: 200;
   504      margin-top: 0;
   505      text-align: center;
   506  }
   507  body:not(.print) #R-body-inner.narrow div.article-subheading{
   508      margin-top: 2rem;
   509  }
   510  @media screen and (max-width: 59.999rem) {
   511      body:not(.print) #R-body-inner.narrow div.article-subheading{
   512          margin-top: 1rem;
   513      }
   514  }
   515  @media screen and (max-width: 47.999rem) {
   516      body:not(.print) #R-body-inner.narrow div.article-subheading{
   517          margin-top: .375rem;
   518      }
   519  }
   520  
   521  body:not(.print) #R-body-inner.narrow p {
   522      font-size: 1.2rem;
   523      text-align: justify;
   524  }
   525  
   526  mark {
   527      background: transparent;
   528      border-radius: 0.8em 0.3rem;
   529      -webkit-box-decoration-break: clone;
   530      box-decoration-break: clone;
   531      color: rgba( 0, 0, 0, 1 );
   532      -webkit-print-color-adjust: exact;
   533      color-adjust: exact;
   534      margin: 0 -0.4rem;
   535      padding: 0.1em 0.4rem;
   536  }
   537  
   538  kbd {
   539      background-color: rgba( 134, 134, 134, .166 );
   540      border-color: rgba( 134, 134, 134, .5 );
   541      border-radius: 0.25rem;
   542      border-style: solid;
   543      border-width: 1px;
   544      box-shadow: 0 .0625rem 0 .0625rem rgba( 134, 134, 134, .5 );
   545      -webkit-print-color-adjust: exact;
   546      color-adjust: exact;
   547      font-size: 0.75rem;
   548      line-height: 1;
   549      min-width: 0.75rem;
   550      padding: .125rem .3125rem .125rem .3125rem;
   551      position: relative;
   552      text-align: center;
   553      top: -.125rem;
   554  }
   555  
   556  h1 {
   557      font-size: 3.25rem;
   558      font-weight: 200;
   559      margin: 0.85rem 0 1rem 0;
   560      /* big titles cause a horizontal scrollbar - fixing this by wrapping text */
   561      overflow-wrap: break-word;
   562      overflow-x: hidden;
   563      text-align: center;
   564      text-rendering: optimizeLegibility;
   565      text-transform: uppercase;
   566  }
   567  
   568  body:not(.print) #R-body-inner.narrow h1 {
   569      border-bottom: 4px solid rgba( 134, 134, 134, .125 );
   570      font-size: 3.5rem;
   571  }
   572  @media only screen and (min-width: 48rem) and (max-width: 59.999rem) {
   573      body:not(.print) #R-body-inner.narrow h1 {
   574          font-size: 2.8rem;
   575      }
   576  }
   577  @media only screen and (max-width: 47.999rem) {
   578      body:not(.print) #R-body-inner.narrow h1 {
   579          font-size: 2.5rem;
   580      }
   581  }
   582  
   583  h2 {
   584      font-size: 2.2rem;
   585      font-weight: 500;
   586  }
   587  
   588  h3, .article-subheading {
   589      font-size: 1.8rem;
   590      font-weight: 500;
   591  }
   592  
   593  h4 {
   594      font-size: 1.85rem;
   595      font-weight: 300;
   596  }
   597  
   598  h5 {
   599      font-size: 1.6rem;
   600      font-weight: 300;
   601  }
   602  
   603  h6 {
   604      font-size: 1.3rem;
   605      font-weight: 300;
   606  }
   607  
   608  h2, h3, .article-subheading, h4, h5, h6 {
   609      letter-spacing: -.0625rem;
   610      margin: 2rem 0 1rem 0;
   611      /* big titles cause a horizontal scrollbar - fixing this by wrapping text */
   612      overflow-wrap: break-word;
   613      overflow-x: hidden;
   614      text-rendering: optimizeLegibility;
   615  }
   616  
   617  h2, h3, h4, h5, h6 {
   618      /* leave space for anchor to avoid overflow */
   619      padding-inline-end: 2rem;
   620  }
   621  
   622  blockquote {
   623      border-inline-start: .6rem solid rgba( 134, 134, 134, .4 );
   624  }
   625  
   626  blockquote p {
   627      font-size: 1.06640625rem;
   628      font-style: italic;
   629      opacity: .75;
   630      text-align: justify;
   631  }
   632  
   633  blockquote cite {
   634      display: block;
   635      font-weight: bold;
   636      opacity: .5;
   637      padding-top: .5rem;
   638      text-align: end;
   639  }
   640  
   641  /* colored boxes */
   642  
   643  .cstyle {
   644      --VARIABLE-BOX-color: var(--INTERNAL-BOX-NEUTRAL-color);
   645      --VARIABLE-BOX-CAPTION-color: var(--INTERNAL-BOX-CAPTION-color);
   646      --VARIABLE-BOX-BG-color: var(--INTERNAL-BOX-BG-color);
   647      --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-NEUTRAL-TEXT-color);
   648      -webkit-print-color-adjust: exact;
   649      color-adjust: exact;
   650  }
   651  
   652  div.box {
   653      margin: 1.5rem 0;
   654      border-style: solid;
   655      border-width: 1px;
   656  }
   657  
   658  div.box > .box-label {
   659      font-weight: 500;
   660      padding: .2rem .6rem;
   661  }
   662  
   663  div.box > .box-content {
   664      padding-top: 1rem;
   665      padding-bottom: 1rem;
   666      padding-left: 1rem;
   667      padding-right: 1rem;
   668  }
   669  
   670  p:empty {
   671      /* in case of image render hook, Hugo may generate empty <p>s that we want to ignore */
   672      display: none;
   673  }
   674  
   675  /* in case of image render hook, Hugo may generate empty <p>s that we want to ignore aswell, so a simple :first-child or :last-child is not enough */
   676  #R-body table th > :nth-child(1 of :not(:empty)),
   677  #R-body table th > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
   678  #R-body table td > :nth-child(1 of :not(:empty)),
   679  #R-body table td > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
   680  #R-body div.box > .box-content > :nth-child(1 of :not(:empty)),
   681  #R-body div.box > .box-content > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
   682  #R-body div.expand > .expand-content-text > :nth-child(1 of :not(:empty)),
   683  #R-body div.expand > .expand-content-text > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
   684  #R-body div.tab-content > .tab-content-text > :nth-child(1 of :not(:empty)),
   685  #R-body div.tab-content > .tab-content-text > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)) {
   686      margin-top: 0;
   687  }
   688  
   689  #R-body table th > :nth-last-child(1 of :not(:empty)),
   690  #R-body table th > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
   691  #R-body table th > div.highlight:last-child pre:not(.mermaid),
   692  #R-body table td > :nth-last-child(1 of :not(:empty)),
   693  #R-body table td > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
   694  #R-body table td > div:last-child pre:not(.mermaid),
   695  #R-body div.box > .box-content > :nth-last-child(1 of :not(:empty)),
   696  #R-body div.box > .box-content > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
   697  #R-body div.box > .box-content > div:last-child pre:not(.mermaid),
   698  #R-body div.expand > .expand-content-text > :nth-last-child(1 of :not(:empty)),
   699  #R-body div.expand > .expand-content-text > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
   700  #R-body div.expand > .expand-content-text > div:last-child pre:not(.mermaid),
   701  #R-body div.tab-content > .tab-content-text > :nth-last-child(1 of :not(:empty)),
   702  #R-body div.tab-content > .tab-content-text > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
   703  #R-body div.tab-content > .tab-content-text > div:last-child pre:not(.mermaid) {
   704      margin-bottom: 0;
   705  }
   706  
   707  /* resources shortcode */
   708  
   709  div.attachments .box-content {
   710      display: block;
   711      margin: 0;
   712      padding-inline-start: 1.75rem;
   713  }
   714  
   715  /* Children shortcode */
   716  
   717  .children p {
   718      font-size: .8125rem;
   719      margin-bottom:  0;
   720      margin-top: 0;
   721      padding-bottom: 0;
   722      padding-top: 0;
   723  }
   724  
   725  .children-li p {
   726      font-size: .8125rem;
   727      font-style: italic;
   728  }
   729  
   730  .children-h2 p,
   731  .children-h3 p {
   732      font-size: .8125rem;
   733      margin-bottom:  0;
   734      margin-top: 0;
   735      padding-bottom: 0;
   736      padding-top: 0;
   737  }
   738  
   739  #R-body-inner .children h2,
   740  #R-body-inner .children h3,
   741  #R-body-inner .children h4,
   742  #R-body-inner .children h5,
   743  #R-body-inner .children h6 {
   744      margin-bottom: 0;
   745      margin-top: 1rem;
   746  }
   747  #R-body-inner ul.children-h2,
   748  #R-body-inner ul.children-h3,
   749  #R-body-inner ul.children-h4,
   750  #R-body-inner ul.children-h5,
   751  #R-body-inner ul.children-h6 {
   752      /* if we display children with style=h2 but without a containerstyle
   753      a ul will be used for structuring; we remove default indention for uls
   754      in this case */
   755      padding-inline-start: 0;
   756  }
   757  
   758  code,
   759  kbd,
   760  pre:not(.mermaid),
   761  samp {
   762      font-size: .934375rem;
   763      vertical-align: baseline;
   764  }
   765  
   766  code {
   767      border-radius: 2px;
   768      border-style: solid;
   769      border-width: 1px;
   770      -webkit-print-color-adjust: economy;
   771      color-adjust: economy;
   772      padding-left: 2px;
   773      padding-right: 2px;
   774      white-space: nowrap;
   775  }
   776  
   777  span.copy-to-clipboard {
   778      display: inline-block;
   779      white-space: nowrap;
   780  }
   781  
   782  code.copy-to-clipboard-code {
   783      border-end-end-radius: 0;
   784      border-start-end-radius: 0;
   785      border-inline-end-width: 0;
   786  }
   787  
   788  pre:not(.mermaid) {
   789      border-radius: 2px;
   790      border-style: solid;
   791      border-width: 1px;
   792      -webkit-print-color-adjust: economy;
   793      color-adjust: economy;
   794      line-height: 1.15;
   795      padding: 1rem;
   796      position: relative;
   797  }
   798  
   799  /* pre:not(.mermaid):has( code ), */
   800  /* the :has() operator isn't available in FF yet, so we patch this by JS */
   801  pre:not(.mermaid).pre-code {
   802      direction: ltr;
   803      text-align: left;
   804  }
   805  
   806  pre:not(.mermaid) code {
   807      background-color: inherit;
   808      border: 0;
   809      color: inherit;
   810      -webkit-print-color-adjust: economy;
   811      color-adjust: economy;
   812      font-size: .9375rem;
   813      margin: 0;
   814      padding: 0;
   815  }
   816  
   817  div.highlight{
   818      position: relative;
   819  }
   820  /* we may have special treatment if highlight shortcode was used in table lineno mode */
   821  div.highlight > div{
   822      border-style: solid;
   823      border-width: 1px;
   824  }
   825  /* remove default style for usual markdown tables */
   826  div.highlight > div table{
   827      background-color: transparent;
   828      border-width: 0;
   829      margin: 0;
   830  }
   831  div.highlight > div td{
   832      border-width: 0;
   833  }
   834  #R-body div.highlight > div a {
   835      line-height: inherit;
   836  }
   837  #R-body div.highlight > div a:after {
   838      display: none;
   839  }
   840  /* disable selection for lineno cells */
   841  div.highlight > div td:first-child:not(:last-child){
   842      -ms-user-select: none;
   843      -webkit-user-select: none;
   844      user-select: none;
   845  }
   846  /* increase code column to full width if highlight shortcode was used in table lineno mode  */
   847  div.highlight > div td:not(:first-child):last-child{
   848      width: 100%;
   849  }
   850  /* add scrollbars if highlight shortcode was used in table lineno mode */
   851  div.highlight > div table{
   852      display: block;
   853      overflow: auto;
   854  }
   855  div.highlight:not(.wrap-code) pre:not(.mermaid){
   856      overflow: auto;
   857  }
   858  div.highlight:not(.wrap-code) pre:not(.mermaid) code{
   859      white-space: pre;
   860  }
   861  div.highlight.wrap-code pre:not(.mermaid) code{
   862      white-space: pre-wrap;
   863  }
   864  /* remove border from row cells if highlight shortcode was used in table lineno mode */
   865  div.highlight > div td > pre:not(.mermaid) {
   866      border-radius: 0;
   867      border-width: 0;
   868  }
   869  /* in case of table lineno mode we want to move each row closer together - besides the edges
   870  this usually applies only to wrapfix tables but it doesn't hurt for non-wrapfix tables too */
   871  div.highlight > div tr:not(:first-child) pre:not(.mermaid){
   872      padding-top: 0;
   873  }
   874  div.highlight > div tr:not(:last-child) pre:not(.mermaid){
   875      padding-bottom: 0;
   876  }
   877  /* in case of table lineno mode we want to move each columns closer together on the inside */
   878  div.highlight > div td:first-child:not(:last-child) pre:not(.mermaid){
   879      padding-right: 0;
   880  }
   881  div.highlight > div td:not(:first-child):last-child pre:not(.mermaid){
   882      padding-left: 0;
   883  }
   884  
   885  hr {
   886      border-bottom: 4px solid rgba( 134, 134, 134, .125 );
   887  }
   888  
   889  #R-body-inner pre:not(.mermaid) {
   890      white-space: pre-wrap;
   891  }
   892  
   893  table {
   894      border: 1px solid rgba( 134, 134, 134, .333 );
   895      margin-bottom: 1rem;
   896      margin-top: 1rem;
   897      table-layout: auto;
   898  }
   899  
   900  th,
   901  thead td {
   902      background-color: rgba( 134, 134, 134, .166 );
   903      border: 1px solid rgba( 134, 134, 134, .333 );
   904      -webkit-print-color-adjust: exact;
   905      color-adjust: exact;
   906      padding: 0.5rem;
   907  }
   908  
   909  td {
   910      border: 1px solid rgba( 134, 134, 134, .333 );
   911      padding: 0.5rem;
   912  }
   913  tbody > tr:nth-child(even) > td {
   914      background-color: rgba( 134, 134, 134, .045 );
   915  }
   916  
   917  .tooltipped {
   918      position: relative;
   919  }
   920  
   921  .tooltipped:after {
   922      background: rgba( 0, 0, 0, 1 );
   923      border: 1px solid rgba( 119, 119, 119, 1 );
   924      border-radius: 3px;
   925      color: rgba( 255, 255, 255, 1 );
   926      content: attr(aria-label);
   927      display: none;
   928      font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
   929      font-size: .6875rem;
   930      font-weight: normal;
   931      -webkit-font-smoothing: subpixel-antialiased;
   932      letter-spacing: normal;
   933      line-height: 1.5;
   934      padding: 5px 8px;
   935      pointer-events: none;
   936      position: absolute;
   937      text-align: center;
   938      text-decoration: none;
   939      text-shadow: none;
   940      text-transform: none;
   941      white-space: pre;
   942      word-wrap: break-word;
   943      z-index: 140;
   944  }
   945  
   946  .tooltipped:before {
   947      border: 5px solid transparent;
   948      color: rgba( 0, 0, 0, 1 );
   949      content: "";
   950      display: none;
   951      height: 0;
   952      pointer-events: none;
   953      position: absolute;
   954      width: 0;
   955      z-index: 150;
   956  }
   957  
   958  .tooltipped:hover:before,
   959  .tooltipped:hover:after,
   960  .tooltipped:active:before,
   961  .tooltipped:active:after,
   962  .tooltipped:focus:before,
   963  .tooltipped:focus:after {
   964      display: inline-block;
   965      text-decoration: none;
   966  }
   967  
   968  .tooltipped-s:after,
   969  .tooltipped-se:after,
   970  .tooltipped-sw:after {
   971      margin-top: 5px;
   972      right: 50%;
   973      top: 100%;
   974  }
   975  
   976  .tooltipped-s:before,
   977  .tooltipped-se:before,
   978  .tooltipped-sw:before {
   979      border-bottom-color: rgba( 0, 0, 0, .8 );
   980      bottom: -5px;
   981      margin-right: -5px;
   982      right: 50%;
   983      top: auto;
   984  }
   985  
   986  .tooltipped-se:after {
   987      left: 50%;
   988      margin-left: -15px;
   989      right: auto;
   990  }
   991  
   992  .tooltipped-sw:after {
   993      margin-right: -15px;
   994  }
   995  
   996  .tooltipped-n:after,
   997  .tooltipped-ne:after,
   998  .tooltipped-nw:after {
   999      bottom: 100%;
  1000      margin-bottom: 5px;
  1001      right: 50%;
  1002  }
  1003  
  1004  .tooltipped-n:before,
  1005  .tooltipped-ne:before,
  1006  .tooltipped-nw:before {
  1007      border-top-color: rgba( 0, 0, 0, .8 );
  1008      bottom: auto;
  1009      margin-right: -5px;
  1010      right: 50%;
  1011      top: -5px;
  1012  }
  1013  
  1014  .tooltipped-ne:after {
  1015      left: 50%;
  1016      margin-left: -15px;
  1017      right: auto;
  1018  }
  1019  
  1020  .tooltipped-nw:after {
  1021      margin-right: -15px;
  1022  }
  1023  
  1024  .tooltipped-s:after,
  1025  .tooltipped-n:after {
  1026      transform: translateX(50%);
  1027  }
  1028  
  1029  .tooltipped-w:after {
  1030      bottom: 50%;
  1031      margin-right: 5px;
  1032      right: 100%;
  1033      transform: translateY(50%);
  1034  }
  1035  
  1036  .tooltipped-w:before {
  1037      border-left-color: rgba( 0, 0, 0, .8 );
  1038      bottom: 50%;
  1039      left: -5px;
  1040      margin-top: -5px;
  1041      top: 50%;
  1042  }
  1043  
  1044  .tooltipped-e:after {
  1045      bottom: 50%;
  1046      left: 100%;
  1047      margin-left: 5px;
  1048      transform: translateY(50%);
  1049  }
  1050  
  1051  .tooltipped-e:before {
  1052      border-right-color: rgba( 0, 0, 0, .8 );
  1053      bottom: 50%;
  1054      margin-top: -5px;
  1055      right: -5px;
  1056      top: 50%;
  1057  }
  1058  
  1059  #R-topbar {
  1060      min-height: 3rem;
  1061      position: relative;
  1062      z-index: 170;
  1063  }
  1064  
  1065  #R-topbar > .topbar-wrapper {
  1066      align-items: center;
  1067      background-color: rgba( 134, 134, 134, .066 );
  1068      display: flex;
  1069      flex-basis: 100%;
  1070      flex-direction: row;
  1071      height: 100%;
  1072  }
  1073  
  1074  .topbar-button {
  1075      display: inline-block;
  1076      position: relative;
  1077  }
  1078  .topbar-button:not([data-origin]) {
  1079      display: none;
  1080  }
  1081  
  1082  .topbar-button > .topbar-control {
  1083      display: inline-block;
  1084      padding-left: 1rem;
  1085      padding-right: 1rem;
  1086  }
  1087  .topbar-wrapper > .topbar-area-start > .topbar-button > .topbar-control {
  1088      border-inline-end: 1px solid rgba( 134, 134, 134, .333 );
  1089  }
  1090  .topbar-wrapper > .topbar-area-end > .topbar-button > .topbar-control {
  1091      border-inline-start: 1px solid rgba( 134, 134, 134, .333 );
  1092  }
  1093  
  1094  .topbar-button > button:disabled i,
  1095  .topbar-button > span i {
  1096      color: rgba( 134, 134, 134, .333 );
  1097  }
  1098  .topbar-button button{
  1099      -webkit-appearance: none;
  1100      appearance: none;
  1101      background-color: transparent;
  1102  }
  1103  
  1104  .topbar-sidebar-divider {
  1105      border-inline-start-style: solid;
  1106      border-inline-start-width: 1px;
  1107      margin-inline-end: -1px;
  1108      width: 1px;
  1109  }
  1110  .topbar-sidebar-divider::after {
  1111      content: "\00a0";
  1112  }
  1113  
  1114  .topbar-wrapper > .topbar-area-start {
  1115      display: flex;
  1116      flex-direction: row;
  1117      flex-shrink: 0;
  1118  }
  1119  .topbar-wrapper > .topbar-area-end {
  1120      display: flex;
  1121      flex-direction: row;
  1122      flex-shrink: 0;
  1123  }
  1124  .topbar-wrapper > .topbar-hidden {
  1125      display: none;
  1126  }
  1127  
  1128  html[dir="rtl"] .topbar-button-prev i,
  1129  html[dir="rtl"] .topbar-button-next i {
  1130      transform: scaleX(-1);
  1131  }
  1132  
  1133  .topbar-content {
  1134      top: .75rem;
  1135  }
  1136  .topbar-wrapper > .topbar-area-start .topbar-content {
  1137      inset-inline-start: 1.5rem;
  1138  }
  1139  .topbar-wrapper > .topbar-area-end .topbar-content {
  1140      inset-inline-end: 1.5rem;
  1141  }
  1142  .topbar-content .topbar-content{
  1143      /* we don't allow flyouts in flyouts; come on, don't get funny... */
  1144      display: none;
  1145  }
  1146  
  1147  .topbar-breadcrumbs {
  1148      flex-grow: 1;
  1149      margin: 0;
  1150      padding: 0 1rem;
  1151  }
  1152  @media screen and (max-width: 47.999rem) {
  1153      .topbar-breadcrumbs {
  1154          /* we just hide the breadcrumbs instead of display: none;
  1155          this makes sure that the breadcrumbs are still usable for
  1156          accessability */
  1157          visibility: hidden;
  1158      }
  1159  }
  1160  
  1161  .breadcrumbs {
  1162      min-width: 0;
  1163      overflow: hidden;
  1164      text-overflow: ellipsis;
  1165      width: 100%;
  1166      white-space: nowrap;
  1167  }
  1168  
  1169  .breadcrumbs meta {
  1170      display: none;
  1171  }
  1172  
  1173  .breadcrumbs li {
  1174      display: inline-block;
  1175  }
  1176  
  1177  #R-body a[aria-disabled="true"] {
  1178      pointer-events: none;
  1179      text-decoration: none;
  1180  }
  1181  
  1182  @media screen and (max-width: 59.999rem) {
  1183      #R-sidebar {
  1184          min-width: var(--INTERNAL-MENU-WIDTH-M);
  1185          max-width: var(--INTERNAL-MENU-WIDTH-M);
  1186          width: var(--INTERNAL-MENU-WIDTH-M);
  1187      }
  1188      #R-body {
  1189          margin-inline-start: var(--INTERNAL-MENU-WIDTH-M);
  1190          min-width: calc( 100% - var(--INTERNAL-MENU-WIDTH-M) );
  1191          max-width: calc( 100% - var(--INTERNAL-MENU-WIDTH-M) );
  1192          width: calc( 100% - var(--INTERNAL-MENU-WIDTH-M) );
  1193      }
  1194  }
  1195  @media screen and (max-width: 47.999rem) {
  1196      /* we don't support sidebar flyout in mobile */
  1197      .mobile-support #R-sidebar {
  1198          inset-inline-start: calc( -1 * var(--INTERNAL-MENU-WIDTH-S) );
  1199          min-width: var(--INTERNAL-MENU-WIDTH-S);
  1200          max-width: var(--INTERNAL-MENU-WIDTH-S);
  1201          width: var(--INTERNAL-MENU-WIDTH-S);
  1202      }
  1203      .mobile-support #navshow{
  1204          display: inline;
  1205      }
  1206      .mobile-support #R-body {
  1207          min-width: 100%;
  1208          max-width: 100%;
  1209          width: 100%;
  1210      }
  1211      .mobile-support #R-body {
  1212          margin-inline-start: 0;
  1213      }
  1214      .mobile-support.sidebar-flyout {
  1215          overflow: hidden;
  1216      }
  1217      .mobile-support.sidebar-flyout #R-sidebar {
  1218          inset-inline-start: 0;
  1219          z-index: 90;
  1220      }
  1221      .mobile-support.sidebar-flyout #R-body {
  1222          margin-inline-start: var(--INTERNAL-MENU-WIDTH-S);
  1223          overflow: hidden;
  1224      }
  1225      .mobile-support.sidebar-flyout #R-body-overlay{
  1226          background-color: rgba( 134, 134, 134, .5 );
  1227          bottom: 0;
  1228          cursor: pointer;
  1229          height: 100vh;
  1230          left: 0;
  1231          position: absolute;
  1232          right: 0;
  1233          top: 0;
  1234          z-index: 190;
  1235      }
  1236  }
  1237  
  1238  .copy-to-clipboard-button {
  1239      border-start-start-radius: 0;
  1240      border-start-end-radius: 2px;
  1241      border-end-end-radius: 2px;
  1242      border-end-start-radius: 0;
  1243      border-style: solid;
  1244      border-width: 1px;
  1245      cursor: pointer;
  1246      font-size: .934375rem;
  1247      line-height: 1.15;
  1248  }
  1249  
  1250  span > .copy-to-clipboard-button {
  1251      border-start-start-radius: 0;
  1252      border-start-end-radius: 2px;
  1253      border-end-end-radius: 2px;
  1254      border-end-start-radius: 0;
  1255  }
  1256  
  1257  .copy-to-clipboard-button > i {
  1258      font-size: .859625rem;
  1259  }
  1260  
  1261  /* only show copy to clipboard on hover for code blocks if configured */
  1262  div.highlight .copy-to-clipboard-button {
  1263      display: none;
  1264  }
  1265  @media (any-hover: none) {
  1266      /* if there is at least one input device that does not support hover, we want to force the copy button */
  1267      div.highlight .copy-to-clipboard-button {
  1268          display: block;
  1269      }
  1270  }
  1271  div.highlight:hover .copy-to-clipboard-button {
  1272      display: block;
  1273  }
  1274  .disableHoverBlockCopyToClipBoard div.highlight .copy-to-clipboard-button {
  1275      display: block;
  1276  }
  1277  
  1278  div.highlight > div table + .copy-to-clipboard-button > i,
  1279  div.highlight pre:not(.mermaid) + .copy-to-clipboard-button > i,
  1280  .copy-to-clipboard-code + .copy-to-clipboard-button > i {
  1281      padding-left: 5px;
  1282      padding-right: 5px;
  1283  }
  1284  
  1285  div.highlight > div table + .copy-to-clipboard-button,
  1286  div.highlight pre:not(.mermaid) + .copy-to-clipboard-button,
  1287  pre:not(.mermaid) > .copy-to-clipboard-button {
  1288      background-color: rgba( 160, 160, 160, .2 );
  1289      border-radius: 2px;
  1290      border-style: solid;
  1291      border-width: 1px;
  1292      right: 4px;
  1293      padding: 5px 3px;
  1294      position: absolute;
  1295      top: 4px;
  1296  }
  1297  
  1298  .disableInlineCopyToClipboard span > code.copy-to-clipboard-code + span.copy-to-clipboard-button {
  1299      display: none;
  1300  }
  1301  
  1302  .disableInlineCopyToClipboard span > code.copy-to-clipboard-code {
  1303      border-start-end-radius: 2px;
  1304      border-end-end-radius: 2px;
  1305      border-inline-end-width: 1px;
  1306  }
  1307  
  1308  #R-homelinks {
  1309      padding: 0;
  1310  }
  1311  #R-homelinks ul {
  1312      margin: .5rem 0;
  1313  }
  1314  #R-homelinks hr {
  1315      border-bottom-style: solid;
  1316      border-bottom-width: 1px;
  1317      margin: 0 1rem 3px 1rem;
  1318  }
  1319  
  1320  option {
  1321      color: initial;
  1322  }
  1323  
  1324  .expand {
  1325      margin-bottom: 1rem;
  1326      margin-top: 1rem;
  1327      position: relative;
  1328  }
  1329  
  1330  .expand > input {
  1331      -webkit-appearance: none;
  1332      appearance: none;
  1333      cursor: pointer;
  1334  }
  1335  
  1336  .expand > label {
  1337      cursor: pointer;
  1338      display: inline;
  1339      font-weight: 300;
  1340      inset-inline-start: 0;
  1341      line-height: 1.1;
  1342      margin-top: .2rem;
  1343      position: absolute;
  1344  }
  1345  
  1346  .expand > input:active + label,
  1347  .expand > input:focus + label,
  1348  .expand > label:hover {
  1349      text-decoration: underline;
  1350  }
  1351  
  1352  .expand > label > .fas {
  1353      font-size: .8rem;
  1354      width: .6rem;
  1355  }
  1356  
  1357  .expand > .expand-content {
  1358      margin-inline-start: 1rem;
  1359      margin-top: .5rem;
  1360  }
  1361  /* closed expander */
  1362  .expand > input + label + div {
  1363      display: none;
  1364  }
  1365  
  1366  .expand > input + label > .fa-chevron-down {
  1367      display: none;
  1368  }
  1369  .expand > input + label > .fa-chevron-right {
  1370      display: inline-block;
  1371  }
  1372  
  1373  /* open expander */
  1374  .expand > input:checked + label + div {
  1375  	display: block;
  1376  }
  1377  
  1378  .expand > input:checked + label > .fa-chevron-down {
  1379      display: inline-block;
  1380  }
  1381  .expand > input:checked + label > .fa-chevron-right {
  1382      display: none;
  1383  }
  1384  
  1385  /* adjust expander for RTL reading direction */
  1386  html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
  1387      transform: scaleX(-1);
  1388  }
  1389  
  1390  #R-body footer.footline{
  1391      margin-top: 2rem;
  1392  }
  1393  
  1394  .headline i,
  1395  .footline i{
  1396      margin-inline-start: .5rem;
  1397  }
  1398  .headline i:first-child,
  1399  .footline i:first-child{
  1400      margin-inline-start: 0;
  1401  }
  1402  
  1403  .mermaid-container {
  1404      margin-bottom: 1.7rem;
  1405      margin-top: 1.7rem;
  1406  }
  1407  
  1408  .mermaid {
  1409      display: inline-block;
  1410      border: 1px solid transparent;
  1411      padding: .5rem .5rem 0 .5rem;
  1412      position: relative;
  1413      /* don't use display: none, as this will cause no renderinge by Mermaid */
  1414      visibility: hidden;
  1415      width: 100%;
  1416  }
  1417  .mermaid-container.zoomable > .mermaid:hover {
  1418      border-color: rgba( 134, 134, 134, .333 );
  1419  }
  1420  .mermaid.mermaid-render {
  1421      visibility: visible;
  1422  }
  1423  
  1424  .mermaid > svg {
  1425      /* remove inline height from generated diagram */
  1426      height: initial !important;
  1427  }
  1428  .mermaid-container.zoomable > .mermaid > svg {
  1429      cursor: grab;
  1430  }
  1431  
  1432  .svg-reset-button {
  1433      background-color: rgba( 160, 160, 160, .2 );
  1434      border-radius: 2px;
  1435      border-style: solid;
  1436      border-width: 1px;
  1437      cursor: pointer;
  1438      display: none;
  1439      font-size: .934375rem;
  1440      line-height: 1.15;
  1441      padding: 5px 3px;
  1442      position: absolute;
  1443      right: 4px;
  1444      top: 4px;
  1445  }
  1446  .mermaid:hover .svg-reset-button.zoomed {
  1447      display: block;
  1448  }
  1449  @media (any-hover: some) {
  1450      /* if there is at least one input device that does not support hover, we want to force the reset button if zoomed */
  1451      .svg-reset-button.zoomed {
  1452          display: block;
  1453      }
  1454  }
  1455  
  1456  .svg-reset-button > i {
  1457      font-size: .859625rem;
  1458      padding-left: 5px;
  1459      padding-right: 5px;
  1460  }
  1461  
  1462  .mermaid-code {
  1463      display: none;
  1464  }
  1465  
  1466  .include.hide-first-heading h1:first-of-type,
  1467  .include.hide-first-heading h2:first-of-type,
  1468  .include.hide-first-heading h3:first-of-type,
  1469  .include.hide-first-heading h4:first-of-type,
  1470  .include.hide-first-heading h5:first-of-type,
  1471  .include.hide-first-heading h6:first-of-type {
  1472      display: none;
  1473  }
  1474  
  1475  .include.hide-first-heading h1 + h2:first-of-type,
  1476  .include.hide-first-heading h1 + h3:first-of-type,
  1477  .include.hide-first-heading h2 + h3:first-of-type,
  1478  .include.hide-first-heading h1 + h4:first-of-type,
  1479  .include.hide-first-heading h2 + h4:first-of-type,
  1480  .include.hide-first-heading h3 + h4:first-of-type,
  1481  .include.hide-first-heading h1 + h5:first-of-type,
  1482  .include.hide-first-heading h2 + h5:first-of-type,
  1483  .include.hide-first-heading h3 + h5:first-of-type,
  1484  .include.hide-first-heading h4 + h5:first-of-type,
  1485  .include.hide-first-heading h1 + h6:first-of-type,
  1486  .include.hide-first-heading h2 + h6:first-of-type,
  1487  .include.hide-first-heading h3 + h6:first-of-type,
  1488  .include.hide-first-heading h4 + h6:first-of-type,
  1489  .include.hide-first-heading h5 + h6:first-of-type {
  1490      display: block;
  1491  }
  1492  
  1493  /* Table of contents */
  1494  
  1495  .topbar-flyout #R-main-overlay{
  1496      bottom: 0;
  1497      cursor: pointer;
  1498      left: 0;
  1499      position: absolute;
  1500      right: 0;
  1501      top: 3rem;
  1502      z-index: 160;
  1503  }
  1504  
  1505  .topbar-content {
  1506      border: 0 solid rgba( 134, 134, 134, .166 );
  1507      box-shadow: 1px 2px 5px 1px rgba( 134, 134, 134, .2 );
  1508      height: 0;
  1509      opacity: 0;
  1510      overflow: hidden;
  1511      position: absolute;
  1512      visibility: hidden;
  1513      width: 0;
  1514      z-index: 180;
  1515  }
  1516  
  1517  .topbar-button.topbar-flyout .topbar-content {
  1518      border-width: 1px;
  1519      height: auto;
  1520      opacity: 1;
  1521      visibility: visible;
  1522      width: auto;
  1523  }
  1524  
  1525  .topbar-content .topbar-content-wrapper {
  1526      background-color: rgba( 134, 134, 134, .066 );
  1527  }
  1528  
  1529  .topbar-content-wrapper {
  1530      --ps-rail-hover-color: rgba( 176, 176, 176, .25 );
  1531      max-height: 90vh;
  1532      overflow: hidden;
  1533      padding: .5rem 1rem;
  1534      position: relative; /* PS */
  1535  }
  1536  
  1537  .topbar-content .topbar-button .topbar-control {
  1538      border-width: 0;
  1539      padding: 0;
  1540  }
  1541  .topbar-content .topbar-button .topbar-control {
  1542      border-width: 0;
  1543      padding: .5rem 0;
  1544  }
  1545  
  1546  #TableOfContents,
  1547  .TableOfContents {
  1548      font-size: .8125rem;
  1549  }
  1550  #TableOfContents ul,
  1551  .TableOfContents ul {
  1552      list-style: none;
  1553      margin: 0;
  1554      padding: 0 1rem;
  1555  }
  1556  
  1557  #TableOfContents > ul,
  1558  .TableOfContents > ul {
  1559      padding: 0;
  1560  }
  1561  
  1562  #TableOfContents li,
  1563  .TableOfContents li {
  1564      white-space: nowrap;
  1565  }
  1566  
  1567  #TableOfContents > ul > li > a,
  1568  .TableOfContents > ul > li > a {
  1569      font-weight: 500;
  1570  }
  1571  
  1572  .btn {
  1573      border-radius: 4px;
  1574      display: inline-block;
  1575      font-size: .9rem;
  1576      font-weight: 500;
  1577      line-height: 1.1;
  1578      margin-bottom: 0;
  1579      touch-action: manipulation;
  1580      -ms-user-select: none;
  1581      -webkit-user-select: none;
  1582      user-select: none;
  1583  }
  1584  .btn.interactive {
  1585      cursor: pointer;
  1586  }
  1587  
  1588  .btn > span,
  1589  .btn > a {
  1590      display: block;
  1591  }
  1592  
  1593  .btn > :where(button) {
  1594      -webkit-appearance: none;
  1595      appearance: none;
  1596      border-width: 0;
  1597      margin: 0;
  1598      padding: 0;
  1599  }
  1600  
  1601  .btn > * {
  1602      background-color: transparent;
  1603      border-radius: 4px;
  1604      border-style: solid;
  1605      border-width: 1px;
  1606      padding: 6px 12px;
  1607      text-align: center;
  1608      touch-action: manipulation;
  1609      -ms-user-select: none;
  1610      -webkit-user-select: none;
  1611      user-select: none;
  1612      white-space: nowrap;
  1613  }
  1614  
  1615  .btn > *:after {
  1616      /* avoid breakage if no content is given */
  1617      content: "\200b"
  1618  }
  1619  
  1620  #R-body #R-body-inner .btn > *.highlight:after {
  1621      background-color: transparent;
  1622  }
  1623  
  1624  .btn.interactive > .btn-interactive:focus {
  1625      outline: none;
  1626  }
  1627  
  1628  .btn.interactive > *:hover,
  1629  .btn.interactive > *:active,
  1630  .btn.interactive > *:focus {
  1631      text-decoration: none;
  1632  }
  1633  
  1634  /* anchors */
  1635  .anchor {
  1636      cursor: pointer;
  1637      font-size: .5em;
  1638      margin-inline-start: .66em;
  1639      margin-top: .9em;
  1640      position: absolute;
  1641      visibility: hidden;
  1642  }
  1643  @media (any-hover: none) {
  1644      /* if there is at least one input device that does not support hover, we want to force the copy button */
  1645      .anchor {
  1646          visibility: visible;
  1647      }
  1648  }
  1649  
  1650  h2:hover .anchor,
  1651  h3:hover .anchor,
  1652  h4:hover .anchor,
  1653  h5:hover .anchor,
  1654  h6:hover .anchor {
  1655      visibility: visible;
  1656  }
  1657  
  1658  /* Redfines headers style */
  1659  
  1660  h1 a,
  1661  h2 a,
  1662  h3 a,
  1663  h4 a,
  1664  h5 a,
  1665  h6 a {
  1666      font-weight: inherit;
  1667  }
  1668  
  1669  #R-body h1 + h2,
  1670  #R-body h1 + h3,
  1671  #R-body h1 + h4,
  1672  #R-body h1 + h5,
  1673  #R-body h1 + h6,
  1674  #R-body h2 + h3,
  1675  #R-body h2 + h4,
  1676  #R-body h2 + h5,
  1677  #R-body h2 + h6,
  1678  #R-body h3 + h4,
  1679  #R-body h3 + h5,
  1680  #R-body h3 + h6,
  1681  #R-body h4 + h5,
  1682  #R-body h4 + h6,
  1683  #R-body h5 + h6 {
  1684      margin-top: 1rem;
  1685  }
  1686  
  1687  .menu-control .control-style {
  1688      cursor: pointer;
  1689      height: 1.574em;
  1690      overflow: hidden;
  1691  }
  1692  
  1693  .menu-control i {
  1694      padding-top: .25em;
  1695  }
  1696  
  1697  .menu-control i,
  1698  .menu-control span {
  1699      cursor: pointer;
  1700      display: block;
  1701      float: left;
  1702  }
  1703  html[dir="rtl"] .menu-control i,
  1704  html[dir="rtl"] .menu-control span {
  1705      float: right;
  1706  }
  1707  
  1708  .menu-control :hover,
  1709  .menu-control i:hover,
  1710  .menu-control span:hover {
  1711      cursor: pointer;
  1712  }
  1713  
  1714  .menu-control select,
  1715  .menu-control button {
  1716      -webkit-appearance: none;
  1717      appearance: none;
  1718      outline: none;
  1719      width: 100%;
  1720  }
  1721  .menu-control button:active,
  1722  .menu-control button:focus,
  1723  .menu-control select:active,
  1724  .menu-control select:focus{
  1725      outline-style: auto;
  1726  }
  1727  
  1728  .menu-control select {
  1729      background-color: transparent;
  1730      background-image: none;
  1731      border: none;
  1732      box-shadow: none;
  1733      padding-left: 0;
  1734      padding-right: 0;
  1735  }
  1736  
  1737  .menu-control option {
  1738      color: rgba( 0, 0, 0, 1 );
  1739      padding: 0;
  1740      margin: 0;
  1741  }
  1742  
  1743  .menu-control button {
  1744      background-color: transparent;
  1745  	cursor: pointer;
  1746      display: block;
  1747      text-align: start;
  1748  }
  1749  
  1750  .clear {
  1751      clear: both;
  1752  }
  1753  
  1754  .footerLangSwitch,
  1755  .footerVariantSwitch,
  1756  .footerVisitedLinks,
  1757  .footerFooter {
  1758      display: none;
  1759  }
  1760  
  1761  .showLangSwitch,
  1762  .showVariantSwitch,
  1763  .showVisitedLinks,
  1764  .showFooter {
  1765      display: block;
  1766  }
  1767  
  1768  /* clears the 'X' from Chrome's search input */
  1769  input[type="search"]::-webkit-search-decoration,
  1770  input[type="search"]::-webkit-search-cancel-button,
  1771  input[type="search"]::-webkit-search-results-button,
  1772  input[type="search"]::-webkit-search-results-decoration { display: none; }
  1773  
  1774  span.math:has(> mjx-container[display]) {
  1775      display: block;
  1776  }
  1777  
  1778  @supports selector(.math:has(> mjx-container)){
  1779      .math{
  1780          visibility: hidden;
  1781      }
  1782      .math:has(> mjx-container){
  1783          visibility: visible;
  1784      }
  1785  }
  1786  .math.align-left > mjx-container{
  1787      text-align: left !important;
  1788  }
  1789  
  1790  .math.align-center > mjx-container{
  1791      text-align: center !important;
  1792  }
  1793  
  1794  .math.align-right > mjx-container{
  1795      text-align: right !important;
  1796  }
  1797  
  1798  .scrollbar-measure {
  1799      /* https://davidwalsh.name/detect-scrollbar-width */
  1800  	height: 100px;
  1801  	overflow: scroll;
  1802  	position: absolute;
  1803  	width: 100px;
  1804  	top: -9999px;
  1805  }
  1806  
  1807  .a11y-only {
  1808      /* idea taken from https://www.filamentgroup.com/lab/a11y-form-labels.html */
  1809      clip-path: polygon(0 0, 1px 0, 1px 1px, 0 1px);
  1810      overflow: hidden;
  1811      position: absolute;
  1812      height: 1px;
  1813      transform: translateY(-100%);
  1814      transition: transform .5s cubic-bezier(.18,.89,.32,1.28);
  1815      white-space: nowrap;
  1816      width: 1px;
  1817  }
  1818  
  1819  /* filament style for making action visible on focus - not adapted yet
  1820  .a11y-only:focus {
  1821      position: fixed;
  1822      height: auto;
  1823      overflow: visible;
  1824      clip: auto;
  1825      white-space: normal;
  1826      margin: 0 0 0 -100px;
  1827      top: -.3em;
  1828      left: 50%;
  1829      text-align: center;
  1830      width: 200px;
  1831      background: rgba( 255, 255, 255, 1 );
  1832      color: rgba( 54, 133, 18, 1 );
  1833      padding: .8em 0 .7em;
  1834      font-size: 16px;
  1835      z-index: 5000;
  1836      text-decoration: none;
  1837      border-bottom-right-radius: 8px;
  1838      border-bottom-left-radius: 8px;
  1839      outline: 0;
  1840      transform: translateY(0%);
  1841  }
  1842  */
  1843  
  1844  .mermaid-container.align-right  {
  1845      text-align: right;
  1846  }
  1847  
  1848  .mermaid-container.align-center  {
  1849      text-align: center;
  1850  }
  1851  
  1852  .mermaid-container.align-left {
  1853      text-align: left;
  1854  }
  1855  
  1856  .searchform {
  1857      display: flex;
  1858  }
  1859  
  1860  .searchform input {
  1861      flex: 1 0 60%;
  1862      border-radius: 4px;
  1863      border: 2px solid rgba( 134, 134, 134, .125 );
  1864      background: rgba( 134, 134, 134, .125 );
  1865      display: block;
  1866      margin: 0;
  1867      margin-inline-end: .5rem;
  1868  }
  1869  
  1870  .searchform input::-webkit-input-placeholder,
  1871  .searchform input::placeholder {
  1872      color: rgba( 134, 134, 134, 1 );
  1873      opacity: .666;
  1874  }
  1875  
  1876  .searchform .btn {
  1877      display: inline-flex;
  1878  }
  1879  
  1880  .searchhint {
  1881      margin-top: 1rem;
  1882      height: 1.5rem;
  1883  }
  1884  
  1885  #R-searchresults a.autocomplete-suggestion {
  1886      display: block;
  1887      font-size: 1.3rem;
  1888      font-weight: 500;
  1889      line-height: 1.5rem;
  1890      padding: 1rem;
  1891      text-decoration: none;
  1892  }
  1893  
  1894  #R-searchresults a.autocomplete-suggestion:after {
  1895      height: 0;
  1896  }
  1897  
  1898  #R-searchresults .autocomplete-suggestion > .breadcrumbs {
  1899      font-size: .9rem;
  1900      font-weight: 400;
  1901      margin-top: .167em;
  1902      padding-left: .2em;
  1903      padding-right: .2em;
  1904  }
  1905  
  1906  #R-searchresults .autocomplete-suggestion > .context {
  1907      font-size: 1rem;
  1908      font-weight: 300;
  1909      margin-top: .66em;
  1910      padding-left: .1em;
  1911      padding-right: .1em;
  1912  }
  1913  
  1914  .badge {
  1915      border-radius: 3px;
  1916      display: inline-block;
  1917      font-size: .8rem;
  1918      font-weight: 500;
  1919      vertical-align: middle;
  1920  }
  1921  
  1922  .badge > * {
  1923      border-radius: 3px;
  1924      border-style: solid;
  1925      border-width: 1px;
  1926      display: inline-block;
  1927      padding: 0 .25rem
  1928  }
  1929  
  1930  .badge > .badge-title {
  1931      background-color: rgba( 16, 16, 16, 1 );
  1932      border-inline-end: 0;
  1933      border-start-end-radius: 0;
  1934      border-end-end-radius: 0;
  1935      color: rgba( 240, 240, 240, 1 );
  1936      filter: contrast(2);
  1937      opacity: .75;
  1938  }
  1939  
  1940  .badge.badge-with-title > .badge-content {
  1941      border-start-start-radius: 0;
  1942      border-end-start-radius: 0;
  1943  }
  1944  
  1945  .badge-content:after {
  1946      /* avoid breakage if no content is given */
  1947      content: "\200b";
  1948  }
  1949  
  1950  /* task list and its checkboxes */
  1951  article ul > li:has(> input[type="checkbox"]) {
  1952      list-style: none;
  1953      margin-inline-start: -1rem;
  1954  }
  1955  
  1956  article ul > li:has(> input[type="checkbox"])::before {
  1957      content: "\200B"; /* accessibilty for Safari https://developer.mozilla.org/en-US/docs/Web/CSS/list-style */
  1958  }
  1959  
  1960  /* https://moderncss.dev/pure-css-custom-checkbox-style/ */
  1961  article ul > li > input[type="checkbox"] {
  1962      -webkit-appearance: none;
  1963      appearance: none;
  1964      /* For iOS < 15 */
  1965      border: 0.15em solid currentColor;
  1966      border-radius: 0.15em;
  1967      display: inline-grid;
  1968      font: inherit;
  1969      height: 1.15em;
  1970      margin: 0;
  1971      place-content: center;
  1972      transform: translateY(-0.075em);
  1973      width: 1.15em;
  1974  }
  1975  
  1976  article ul > li > input[type="checkbox"]::before {
  1977      box-shadow: inset 1em 1em var(--INTERNAL-PRIMARY-color);
  1978      clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  1979      content: "";
  1980      height: 0.65em;
  1981      transform: scale(0);
  1982      transform-origin: bottom left;
  1983      transition: 120ms transform ease-in-out;
  1984      width: 0.65em;
  1985      /* Windows High Contrast Mode fallback must be last */
  1986      background-color: CanvasText;
  1987  }
  1988  
  1989  article ul > li > input[type="checkbox"]:checked::before {
  1990      transform: scale(1);
  1991  }
  1992  
  1993  /* CSS Lightbox https://codepen.io/gschier/pen/kyRXVx */
  1994  .lightbox-back {
  1995      align-items: center;
  1996      background: rgba( 0, 0, 0, .8 );
  1997      bottom: 0;
  1998      display: none;
  1999      justify-content: center;
  2000      left: 0;
  2001      position: fixed;
  2002      right: 0;
  2003      text-align: center;
  2004      top: 0;
  2005      white-space: nowrap;
  2006      z-index: 1999;
  2007  }
  2008  
  2009  .lightbox-back:target {
  2010      display: flex;
  2011  }
  2012  
  2013  .lightbox-back img {
  2014      max-height: 95%;
  2015      max-width: 95%;
  2016      overflow: auto;
  2017      padding: min(2vh, 2vw);
  2018  }
  2019  
  2020  /* basic menu list styles (non-collapsible) */
  2021  
  2022  #R-sidebar ul > li > :is( a, span ) {
  2023      display: block;
  2024      position: relative;
  2025  }
  2026  
  2027  #R-sidebar ul.space > li > * {
  2028      padding-bottom: .125rem;
  2029      padding-top: .125rem;
  2030  }
  2031  #R-sidebar ul.space > li > ul {
  2032      padding-bottom: 0;
  2033      padding-top: 0;
  2034  }
  2035  
  2036  #R-sidebar ul.morespace > li > * {
  2037      padding-bottom: .25rem;
  2038      padding-top: .25rem;
  2039  }
  2040  #R-sidebar ul.morespace > li > ul {
  2041      padding-bottom: 0;
  2042      padding-top: 0;
  2043  }
  2044  
  2045  #R-sidebar ul.enlarge > li > :is( a, span ) {
  2046      font-size: 1.1rem;
  2047      line-height: 2rem;
  2048  }
  2049  #R-sidebar ul.enlarge > li > a > .read-icon {
  2050      margin-top: .5rem;
  2051  }
  2052  #R-sidebar ul.enlarge > li > ul > li:last-child {
  2053      padding-bottom: 1rem;
  2054  }
  2055  
  2056  #R-sidebar ul ul {
  2057      padding-inline-start: 1rem;
  2058  }
  2059  
  2060  /* collapsible menu style overrides */
  2061  
  2062  #R-sidebar ul.collapsible-menu > li {
  2063      position: relative;
  2064  }
  2065  
  2066  #R-sidebar ul.collapsible-menu > li > input {
  2067      -webkit-appearance: none;
  2068      appearance: none;
  2069      cursor: pointer;
  2070      display: inline-block;
  2071      margin-left: 0;
  2072      margin-right: 0;
  2073      margin-top: .65rem;
  2074      position: absolute;
  2075      width: 1rem;
  2076      z-index: 1;
  2077  }
  2078  #R-sidebar ul.collapsible-menu.enlarge > li > input {
  2079      margin-top: .9rem;
  2080  }
  2081  
  2082  #R-sidebar ul.collapsible-menu > li > label {
  2083      cursor: pointer;
  2084      display: inline-block;
  2085      inset-inline-start: 0;
  2086      margin-bottom: 0; /* nucleus */
  2087      padding-inline-start: .125rem;
  2088      position: absolute;
  2089      width: 1rem;
  2090      z-index: 2;
  2091  }
  2092  #R-sidebar ul.collapsible-menu.enlarge > li > label {
  2093      font-size: 1.1rem;
  2094      line-height: 2rem;
  2095  }
  2096  
  2097  #R-sidebar ul.collapsible-menu > li > label:after {
  2098      content: "";
  2099      display: block;
  2100      height: 1px;
  2101      transition: width 0.5s ease;
  2102      width: 0%;
  2103  }
  2104  
  2105  #R-sidebar ul.collapsible-menu > li > label:hover:after {
  2106      width: 100%;
  2107  }
  2108  
  2109  #R-sidebar ul.collapsible-menu > li > label > .fas {
  2110      font-size: .8rem;
  2111      width: .6rem;
  2112  }
  2113  
  2114  #R-sidebar ul.collapsible-menu > li > :is( a, span ) {
  2115      display: inline-block;
  2116      width: 100%;
  2117  }
  2118  
  2119  /* menu states for not(.collapsible-menu) */
  2120  
  2121  #R-sidebar ul ul {
  2122      display: none;
  2123  }
  2124  
  2125  #R-sidebar ul > li.parent > ul,
  2126  #R-sidebar ul > li.active > ul,
  2127  #R-sidebar ul > li.alwaysopen > ul {
  2128      display: block;
  2129  }
  2130  
  2131  /* closed menu */
  2132  
  2133  #R-sidebar ul.collapsible-menu > li > input + label ~ ul {
  2134      display: none;
  2135  }
  2136  
  2137  #R-sidebar ul.collapsible-menu > li > input + label > .fa-chevron-down {
  2138      display: none;
  2139  }
  2140  #R-sidebar ul.collapsible-menu > li > input + label > .fa-chevron-right {
  2141      display: inline-block;
  2142  }
  2143  
  2144  /* open menu  */
  2145  
  2146  #R-sidebar ul.collapsible-menu > li > input:checked + label ~ ul {
  2147  	display: block;
  2148  }
  2149  
  2150  #R-sidebar ul.collapsible-menu > li > input:checked + label > .fa-chevron-down {
  2151      display: inline-block;
  2152  }
  2153  #R-sidebar ul.collapsible-menu > li > input:checked + label > .fa-chevron-right {
  2154      display: none;
  2155  }
  2156  
  2157  /* adjust menu for RTL reading direction */
  2158  
  2159  html[dir="rtl"] #R-sidebar ul.collapsible-menu > li > label > i.fa-chevron-right {
  2160      transform: scaleX(-1);
  2161  }
  2162  
  2163  .columnize{
  2164      column-count: 2;
  2165  }
  2166  @media screen and (min-width: 79.25rem) {
  2167      .columnize{
  2168          column-count: 3;
  2169      }
  2170  }
  2171  
  2172  .columnize > *{
  2173      break-inside: avoid-column;
  2174  }
  2175  
  2176  .columnize .breadcrumbs{
  2177      font-size: .859625rem;
  2178  }
  2179  
  2180  #R-body .tab-panel{
  2181      margin-bottom: 1.5rem;
  2182      margin-top: 1.5rem;
  2183  }
  2184  
  2185  #R-body .tab-nav{
  2186      display: flex;
  2187      flex-wrap: wrap;
  2188  }
  2189  
  2190  #R-body .tab-nav-title{
  2191      font-size: .9rem;
  2192      font-weight: 400;
  2193      line-height: 1.42857143;
  2194      padding: .2rem 0;
  2195      margin-inline-start: .6rem;
  2196  }
  2197  
  2198  #R-body .tab-nav-button{
  2199      -webkit-appearance: none;
  2200      appearance: none;
  2201      background-color: transparent;
  2202      border: 1px solid transparent;
  2203      display: block;
  2204      font-size: .9rem;
  2205      font-weight: 300;
  2206      line-height: 1.42857143;
  2207      margin-inline-start: .6rem;
  2208  }
  2209  
  2210  #R-body .tab-nav-button.active{
  2211      border-radius: 2px 2px 0 0;
  2212      cursor: default;
  2213  }
  2214  
  2215  #R-body .tab-nav-button > .tab-nav-text{
  2216      border-bottom-style: solid;
  2217      border-bottom-width: .15rem;
  2218      display: block;
  2219      padding: .2rem .6rem 0 .6rem;
  2220  }
  2221  /* https://stackoverflow.com/a/46452396 */
  2222  #R-body .tab-nav-button.active > .tab-nav-text{
  2223      border-bottom-color: transparent;
  2224      border-radius: 1px 1px 0 0;
  2225      text-shadow: -0.06ex 0 0 currentColor, 0.06ex 0 0 currentColor;
  2226  }
  2227  @supports (-webkit-text-stroke-width: 0.04ex){
  2228      #R-body .tab-nav-button.active > .tab-nav-text{
  2229          text-shadow: -0.03ex 0 0 currentColor, 0.03ex 0 0 currentColor;
  2230          -webkit-text-stroke-width: 0.04ex;
  2231      }
  2232  }
  2233  
  2234  #R-body .tab-content{
  2235      border-style: solid;
  2236      border-width: 1px;
  2237      display: none;
  2238      /* if setting a border to 1px, a browser instead sets it to 1dppx which is not
  2239      usable as a unit yet, so we have to calculate it ourself */
  2240      margin-top: calc( -1px / var(--bpx) );
  2241      z-index: 10;
  2242  }
  2243  
  2244  #R-body .tab-content.active{
  2245      display: block;
  2246  }
  2247  
  2248  #R-body .tab-content-text{
  2249      padding: 1rem;
  2250  }
  2251  
  2252  /* remove margin if only a single code block is contained in the tab (FF without :has using .codify style) */
  2253  #R-body .tab-content.codify > .tab-content-text{
  2254      padding: 0;
  2255  }
  2256  #R-body .tab-content-text:has(> div.highlight:only-child){
  2257      padding: 0;
  2258  }
  2259  
  2260  /* remove border from code block if single in tab */
  2261  #R-body .tab-content-text > div.highlight:only-child > div,
  2262  #R-body .tab-content-text > div.highlight:only-child pre:not(.mermaid),
  2263  #R-body .tab-content-text > pre:not(.mermaid).pre-code:only-child{
  2264      border-width: 0;
  2265  }
  2266  
  2267  /* bordering the menu and topbar */
  2268  
  2269  #R-topbar {
  2270      border-bottom-style: solid;
  2271      border-bottom-width: 1px;
  2272  }
  2273  
  2274  #R-header-topbar {
  2275      border-bottom-color: transparent;
  2276      border-bottom-style: solid;
  2277      border-bottom-width: 1px;
  2278      border-inline-end-style: solid;
  2279      border-inline-end-width: 1px;
  2280      height: 3rem;
  2281      position: absolute;
  2282      top: 0;
  2283      width: 100%;
  2284      z-index: 1;
  2285  }
  2286  
  2287  #R-header-wrapper,
  2288  #R-homelinks,
  2289  #R-content-wrapper > * {
  2290      border-inline-end-style: solid;
  2291      border-inline-end-width: 1px;
  2292  }
  2293  
  2294  #topics > ul {
  2295      margin-top: 1rem;
  2296  }
  2297  
  2298  #R-sidebar ul.collapsible-menu li.active > a{
  2299      border-style: solid;
  2300      border-width: 1px;
  2301      padding-bottom: calc( .25rem - var(--bpx1)*1px);
  2302      padding-left: calc( 1rem - var(--bpx1)*1px);
  2303      padding-right: calc( 1rem - var(--bpx1)*1px);
  2304      padding-top: calc( .25rem - var(--bpx1)*1px);
  2305      width: calc(100% + var(--bpx1)*1px);
  2306  }
  2307  
  2308  #R-menu-footer {
  2309      padding-bottom: 1rem;
  2310  }
  2311  
  2312  #R-topics {
  2313      padding-top: 1rem;
  2314  }
  2315  
  2316  .term-list ul,
  2317  .term-list li {
  2318      list-style: none;
  2319      display: inline;
  2320      padding: 0;
  2321  }
  2322  .term-list i ~ ul > li:before{
  2323      content: " "
  2324  }
  2325  .term-list ul > li ~ li:before {
  2326      content: " | "
  2327  }