

#header #homelink,
#header #homelink:visited,
#header #homelink:link,
#header #homelink:hover {
    margin-left: 0rem;
    margin-right: 0.5rem;
    font-weight: bold;
}

/* ---------------------- */

body {
    overflow-y: hidden;
    overflow-x: scroll;
    display: flex;
}

.container {
    height: calc(100vh - 5rem);
    overflow: scroll;  
    overflow-y: scroll;

}
.container-wrapper {
    max-width: calc(45rem + 3rem);
    position: relative;  
    overflow: visible;
}

.container-clickback {
    position: absolute;
    background-color: rgb(240, 240, 240);
    width: 2.0rem;
    height: 1.1rem;
    top: 0px;
    right: 0.75rem;
    border-radius: 0 0 0 1rem;
    cursor: pointer;
}

.single_tab_page-left-aligned {
    width: auto;
    margin: 0rem;
}

::-webkit-scrollbar {
    width: 0.3rem;
    height: 0.4rem;
    background-color: #ffffff; /* or add it to the track */
  }
::-webkit-scrollbar-thumb{
    background-color: rgb(var(--accent-color), 0.07);
    border: 0px;
    border-radius: 10px;
}


@media (max-width: 800px) {
    .container {
        width: calc(100vw - 4rem);
    }
    .container:after {
        content: "\a\a\a\a\a";
        white-space: pre;
    }
    .container-clickback {
        display: none;
    }
    .single_tab_page {
        width: 100vw;
        max-width: 100vw;
        margin:0rem;
        margin: auto;
    }
}

@font-face {
    font-family: 'SourceCodePro-Regular';
    src: url('{html_url_prefix}/obs.html/static/SourceCodePro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: monospace;
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url('{html_url_prefix}/obs.html/static/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


.header {
    width: 100vw;
    padding: 1rem;
    padding-left: 2rem;
}
h1, h2, h3, h4, h5 {
    scroll-margin-top: 4rem;
}
h1 {
    font-size: 28px;
    line-height: 34px;
    margin-top: 0px;
    margin-bottom: 16px;
    color: inherit;
    font-weight: 600;
    border-bottom: 1px solid #d6d5df;
    padding-bottom: 0.2rem;
}
h1:not(:first-child) {
    margin-top: 2rem;
}

h2 {
    font-size: 14pt;
    border-bottom: 1px dotted #777070;
    font-weight: 600;
    padding-bottom: 0.2rem;
    margin-top: 2rem;
}
h1 + h2 {
    margin-top: 1rem;
}
h2 + p {
    margin-top: 0rem;
}



.anchor {
    visibility: hidden;
    float: left;
    padding-right: 4px;
    margin-left: -20px;
    line-height: 1;
}
.anchor svg {
    fill: #2f2f2f;
}

li {
    margin-bottom: 0.3rem;
}

 /* unvisited link */
 a:link {
    color: rgb(10, 132, 255);
    text-decoration: none;
  }
  
  /* visited link */
  a:visited {
    color: rgb(60, 158, 255);
    text-decoration: none;
  }
  
  /* mouse over link */
  a:hover {
    color: rgb(10, 132, 255);
    text-decoration: underline;
  }
  
  /* selected link */
  a:active {
    color: rgb(10, 132, 255);
    text-decoration: none;
  } 


.external-link::after {
    background: transparent url({html_url_prefix}/obs.html/static/external.svg) 0 0 no-repeat;
    background-size: auto;
    background-size: 16px;
    content: "";
    height: 16px;
    margin-left: 3px;
    width: 16px;
    display: inline-block;
    filter: invert(90%) sepia(6%) saturate(9%) hue-rotate(14deg) brightness(90%) contrast(93%);
}



span.tag {
    font-weight: 600;
    color: rgb(57, 88, 136);
    text-transform: capitalize;
}


.graph_svg {
    width: 100%;
    height: 400px;
}

.dir-container {
    padding-left:1rem;
    display: none;
    padding-left: 1.5rem;
}
.dir-button {
    background-color: transparent;
    border: none;
    font-size: 12pt;
    display: block;
    cursor: pointer;
    margin-bottom: 0.2rem;
    font-family: 'Roboto-Regular';
}
.dir-list {
    margin-top: 0.2rem;
    padding-left: 0.2rem;
    margin-bottom: 0.2rem;
}
.dir-list li {
    list-style-type: none;
}


.header {
    margin: 1rem;
    margin-bottom:2rem;
    background-color: var(--header-bg);
    scroll-margin-top: 20rem;
    overflow-anchor: none;
}

.navbar-button {
    margin-top: 0.5rem;
    margin-left: 0rem;

}
.navbar-link {
    display: block;
    padding: 0.7rem;
    border-radius: 0.4rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    margin-top: -0.2rem;
    margin-bottom: 0.7rem;
    max-height: 1.5rem;
}

#homelink:visited {
    color: rgb(var(--accent-color));
}
#homelink:link {
    color: rgb(var(--accent-color));
}
/* #homelink {
    width: 15.5rem;
    background-color: __accent_color__14;
    padding: 1rem;
    padding-top:0.5rem;
    padding-bottom:0.5rem;
    max-width: max-content;
    margin-top: -1rem;
    margin-left: 0rem;
    margin-right: 0.5rem;
    border-radius: 0.3rem;    
    max-height: 1.5rem;
} */

.toc {
    display: none;
    
    background-color: __accent_color__08;
    padding: 1rem;
    padding-top: 0.2rem;
    border-radius: 0.6rem;
    margin-bottom: 1rem;
    padding-right: 2rem;    
}
.icon-tray {
    margin-left: 1rem;
    margin-top: -0.1rem;
}
@media (max-width: 602px) {
    #header_flex {
        flex-direction: column;
        margin-top: -1rem;
    }
    #header_flex2 {
        flex-direction: column;
        margin-top: -1rem;
    }
    .header {
        padding: 0px;
    }
    .navbar {
        margin-top: 1rem;
        margin-left: -0.7rem;
        margin-bottom: 1rem;
        flex-direction: column;
        display: none;
    }
    .navbar-link{
        width: calc(100vw - 4rem);
        text-align: center;
    }
    .navbar-button {
        display: block;
        margin: auto;
        margin-top: -1rem;
        margin-bottom: 1rem;
    }
    #homelink {
        display: none
    }
    .icon-tray {
        position: initial;
        margin:auto;
    }
    .header {
        margin: auto;
        margin-bottom: 0rem;
        margin-top: 1rem;
        padding-bottom: 0rem;        
    }
}




.codehilite { 
    background: #050b15; 
    padding: 0.5rem; 
    padding-left: 1rem;
    color: #d7d7d7; 
    font-weight: 400; 
    margin-top: 0.5rem;
    margin-bottom: 1rem; 
    overflow-x: auto;
}


pre { line-height: 125%; font-family: 'SourceCodePro-Regular'; font-size: 10pt;  }
td.linenos .normal { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
span.linenos { color: inherit; background-color: transparent; padding-left: 5px; padding-right: 5px; }
td.linenos .special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
.codehilite .hll { background-color: #ffffcc }

.codehilite .c { color: #4b4668; font-style: italic } /* Comment */
.codehilite .k { color: #26adff;  } /* Keyword */
.codehilite .o { color: #666666 } /* Operator */
.codehilite .ch { color: #4b4668; line-height: 1.5rem;  } /* Comment.Hashbang */
.codehilite .cm { color: #4b4668;  } /* Comment.Multiline */
.codehilite .cp { color: #BC7A00 } /* Comment.Preproc */
.codehilite .cpf { color: #4b4668; } /* Comment.PreprocFile */
.codehilite .c1 { color: #4b4668;  } /* Comment.Single */
.codehilite .cs { color: #4b4668;  } /* Comment.Special */
.codehilite .gd { color: #A00000 } /* Generic.Deleted */
.codehilite .ge { font-style: italic } /* Generic.Emph */
.codehilite .gr { color: #FF0000 } /* Generic.Error */
.codehilite .gh { color: #000080;  } /* Generic.Heading */
.codehilite .gi { color: #00A000 } /* Generic.Inserted */
.codehilite .go { color: #888888 } /* Generic.Output */
.codehilite .gp { color: #000080;  } /* Generic.Prompt */
.codehilite .gs { font-weight: bold; } /* Generic.Strong */
.codehilite .gu { color: #800080;  } /* Generic.Subheading */
.codehilite .gt { color: #0044DD } /* Generic.Traceback */
.codehilite .kc { color: #26adff;  } /* Keyword.Constant */
.codehilite .kd { color: #26adff;  } /* Keyword.Declaration */
.codehilite .kn { color: #26adff;  } /* Keyword.Namespace */
.codehilite .kp { color: #bff4bf } /* Keyword.Pseudo */
.codehilite .kr { color: #26adff;  } /* Keyword.Reserved */
.codehilite .kt { color: #B00040 } /* Keyword.Type */
.codehilite .m { color: #666666 } /* Literal.Number */
.codehilite .s { color: #BA2121 } /* Literal.String */
.codehilite .na { color: #7D9029 } /* Name.Attribute */
.codehilite .nb { color: #fff; text-shadow: 1px 1px 0 #000; } /* Name.Builtin */
.codehilite .nc { color: #A9A9FF;  } /* Name.Class */
.codehilite .no { color: #fd992e } /* Name.Constant */
.codehilite .nd { color: #AA22FF } /* Name.Decorator */
.codehilite .ni { color: #999999;  } /* Name.Entity */
.codehilite .ne { color: #D2413A;  } /* Name.Exception */
.codehilite .nf { color: #A9A9FF } /* Name.Function */
.codehilite .nl { color: #A0A000 } /* Name.Label */
.codehilite .nn { color: #A9A9FF;  } /* Name.Namespace */
.codehilite .nt { color: #26adff;  } /* Name.Tag */
.codehilite .nv { color: #BAC4FD; } /* Name.Variable */
.codehilite .ow { color: #AA22FF;  } /* Operator.Word */
.codehilite .w { color: #bbbbbb } /* Text.Whitespace */
.codehilite .mb { color: #666666 } /* Literal.Number.Bin */
.codehilite .mf { color: #666666 } /* Literal.Number.Float */
.codehilite .mh { color: #666666 } /* Literal.Number.Hex */
.codehilite .mi { color: #666666 } /* Literal.Number.Integer */
.codehilite .mo { color: #666666 } /* Literal.Number.Oct */
.codehilite .sa { color: #BA2121 } /* Literal.String.Affix */
.codehilite .sb { color: #BA2121 } /* Literal.String.Backtick */
.codehilite .sc { color: #BA2121 } /* Literal.String.Char */
.codehilite .dl { color: #BA2121 } /* Literal.String.Delimiter */
.codehilite .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */
.codehilite .s2 { color: #BCC1A2 } /* Literal.String.Double */
.codehilite .se { color: #BB6622;  } /* Literal.String.Escape */
.codehilite .sh { color: #BA2121 } /* Literal.String.Heredoc */
.codehilite .si { color: #BB6688;  } /* Literal.String.Interpol */
.codehilite .sx { color: #bff4bf } /* Literal.String.Other */
.codehilite .sr { color: #BB6688 } /* Literal.String.Regex */
.codehilite .s1 { color: #BCC1A2 } /* Literal.String.Single */
.codehilite .ss { color: #BAC4FD } /* Literal.String.Symbol */
.codehilite .bp { color: #bff4bf } /* Name.Builtin.Pseudo */
.codehilite .fm { color: #A9A9FF } /* Name.Function.Magic */
.codehilite .vc { color: #BAC4FD } /* Name.Variable.Class */
.codehilite .vg { color: #BAC4FD } /* Name.Variable.Global */
.codehilite .vi { color: #BAC4FD } /* Name.Variable.Instance */
.codehilite .vm { color: #BAC4FD } /* Name.Variable.Magic */
.codehilite .il { color: #666666 } /* Literal.Number.Integer.Long */
