* {
    text-rendering: optimizeLegibility;
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: rgb(51, 51, 51);
    margin: 0rem;
    width: 100vw;
    height: 100vh;
    position: static;
    overflow: hidden;
}

  
table {
    margin: 1.5rem;
    margin-left: 0rem;
    text-align: left;
    border-collapse: collapse;
}
td {
    border-bottom: 1px solid #ececec;
    padding: 0.3rem;
    padding-left: 1rem;
    padding-right: 1rem;
}
td:nth-child(2n) {
    border-left: 1px dotted #cecece;
}
td:first-child {
    min-width: max-content;
}
th:first-child, td:first-child{
    padding-left: 0rem;
}
tr:last-child td {
    border-bottom: 0px;
}
th {
    text-transform: capitalize;
    border: 0px;
    padding: 0.3rem;
    padding-left: 1rem;
    font-weight: normal;
    font-style: italic;
    color: #9fbcd7;    
}
h1 + table {
    margin-top:0rem;
}
h2 + table {
    margin-top:0rem;
}
h3 + table {
    margin-top:0rem;
}
h4 + table {
    margin-top:0rem;
}



.container {
    flex-grow: 1;
    flex: auto;
    padding: 2rem;
    height: calc(100vh - 5rem);
    overflow-y: scroll;
    scrollbar-color: #414cfd12 #ffffff;
    scroll-margin-top: 2rem;
    max-width: 52rem;
}
.container img {
    max-width: 100%;
    padding: 0.2rem;
}
.container video {
    margin: auto;  
    max-width: 100%;
}
.container audio {
    margin: auto;  
    border-radius: 1.5rem;
    background-color: black;
}
.single_tab_page {
    width: 80vw;
    max-width: 75rem;
    margin: auto;
}
.single_tab_page-left-aligned {
    width: auto;
    margin: 0rem;
}
.container:after {
    content: "\a";
    white-space: pre;
}
.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;
}
::-webkit-scrollbar {
    width: 0.4rem;
    height: 0.4rem;
    background-color: #ffffff; /* or add it to the track */
  }
::-webkit-scrollbar-thumb{
    background-color: #7c7f8c;
    border: 0px;
    border-radius: 10px;
}
.container-wrapper {
    flex-grow: 1;
}


#right_pane,
#left_pane{
    padding: 1.7rem;
    padding-top: 0.9rem;
    overflow-y: scroll;
    height: calc(90vh - 4rem);
    scrollbar-color: #414cfd12 #ffffff;
    font-family: 'Roboto-Regular';
}
#left_pane{
    padding-left: 1.7rem;
    min-width: 15rem;
    width: 15rem;
    max-width: max-content;
}
#right_pane{
    padding-right: 3rem;
    padding-left:0rem;
    min-width: max-content;
    max-width: max-content;
}
.flex_col {
    display: flex;
    flex-direction:column;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    scroll-margin-top: 20rem;
}
.flex_row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100vw;
}

.single_tab_page {
    width:unset;
    max-width: 60vw;
}

#left_pane ul,
#right_pane ul {
    list-style: none;
    padding-left: 1.5rem;
    margin-top: 0.3rem;
    
    font-size: 11pt;    
}
#left_pane li,
#right_pane li {
    padding-top: 0.3rem;
}
#left_pane ul a,
#right_pane ul a {
    color: #373c42;
}
#left_pane ul a:hover,
#right_pane ul a:hover {
    color: #2d68b1;
    text-decoration: none;
}
.container {
    padding-top: 0.5rem;
}
.toc-header {
    color: black;
    margin-left: 1.5rem;
    font-weight: bold;
}
.navbar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: calc(100vw - 21rem);
    margin-bottom: -0.5rem;
}

#homelink {
    width: 15.5rem;
    background-color: #414cfd14;
    padding: 1rem;
    max-width: max-content;
    margin-top: -1rem;
    margin-left: 0rem;
    margin-right: 2.5rem;
    border-radius: 0.3rem;    
    max-height: 1.5rem;
}
.current_page_link a:hover,
.current_page_link a:link,
.current_page_link a:visited
{
    color: rgb(43, 43, 43);
}
.navbar-button {
    display: none;
    width: calc(100vw - 4rem);
    text-align: center;
    background-color: #414cfd2b;
    color: #414cfd;
    padding: 0.7rem;
    border-radius: 0.4rem;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    margin-top: 0.5rem;
    margin-bottom: 0.7rem;    
    cursor: pointer;
    width: calc(100vw - 4rem);
    margin-left: -0.7rem;
    margin-top: 1rem;
}


h1, h2, h3, h4, h5 {
    scroll-margin-top: 8rem;
}

.icon-tray {
    width:6rem; 
    height:1.6rem; 
    margin-top: -0.1rem;
}



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

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


.header {
    margin: 1rem;
    margin-left: 2rem;
    margin-top:2rem;
    margin-bottom:2rem;
    background-color: white;
    scroll-margin-top: 20rem;
    overflow-anchor: none;
}
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-of-type) {
    margin-top: 2rem;
}

h2 {
    font-size: 14pt;
    color: #000;
    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;
}

h3 {
    font-size: 13pt;
    font-weight: 500;
    border-bottom: 1px dashed #c0cae6;
    padding: 2px;
    color: #000000;
    margin-bottom: 0.5rem;
}
h3 + p {
    margin-top: 0rem;
    margin-bottom: 0.5rem;
}


.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;
  } 

  
a.nonexistent-link:link  ,
a.nonexistent-link:hover,
a.nonexistent-link:active,
a.nonexistent-link:visited {
    color:rgb(156, 156, 156);
}

.header a,
.header a:link,
.header a:visited {
    color: #161616;
}

.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;
}
a.navbar-link:visited
{
    color: #161616;
}
.navbar-link:hover {
    background-color: #414cfd;
    color: white;
    text-decoration: none;
}
a.navbar-link:hover
{
    text-decoration: none;
    color: white;
}


#homelink:visited {
    color: #414cfd;
}
#homelink:link {
    color: #414cfd;
}

.external-link::after {
    background: transparent url(/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%);
}


blockquote {
    background-color: #414cfd12;
    padding: 0rem 0rem 0rem 0.5rem;
    margin: 0rem;
    margin-bottom: 0.5rem;
    border: 1px dashed white;
    color: #4f4538;    
}

blockquote p {
    margin: 0.4rem;
}


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;
}

@media (max-width: 1300px) {
    #left_pane {
        flex: 0;
        display: none;
    }
}

@media (max-width: 840px) {

    #right_pane,
    #left_pane {
        flex: 0;
        display: none;
    }

    .container {
        float: none;
        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;
    }

    .navbar {
        display: flex;
    }    
}

@media (max-width: 602px) {
    #header_flex {
        flex-direction: column;
        margin-top: -1rem;
    }
    .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-top: 0;
        margin-bottom: 1rem;
    }
    #homelink {
        display: none
    }
    .icon-tray {
        position: initial;
        margin:auto;
    }
    .header {
        margin-bottom: 0rem;
        margin-top: 1.5rem
    }
}


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

code {font-family: 'SourceCodePro-Regular'; font-size: 10pt; font-weight: 500; background-color: aliceblue;
    color: #9c27ec;}
    .codehilite code {
        color: inherit;
        background-color: inherit;
    }

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 */