/* --------------------- */
/* --- OPPTYLAB REF. --- */
/* --------------------- */

.opptylab-lib-docs-wrapper{
position:relative;
width:100%;
}
.opptylab-lib-docs-nav-wrapper{
position:fixed;
height:100%;
width:300px;
overflow-y:scroll;
z-index:10;
left:0px;
top:0px;
}
.opptylab-lib-docs-nav-inner-wrapper{
padding:1rem;
background:var(--dark);

}

.opptylab-lib-docs-content-wrapper{
padding:2rem;
padding-left:calc(300px + 2rem);
}

.opptylab-lib-docs-content-inner-wrapper{
position:relative;
width:100%;
margin:0 auto;
max-width:970px;
}





.opptylab-lib-nav-wrapper{
width:250px;
position:fixed;
z-index:1000;
background:var(--dark);
height:100%;
left:calc(50% - 650px);
}


.opptylab-lib-nav-inner-wrapper{
width:100%;
height:100%;
padding-left:1rem;
padding-right:1rem;
}


@media only screen and (max-width: 768px) {
.opptylab-lib-nav-wrapper{
width:100%;
margin:0em;
position:relative;
background:var(--surface-light-1);
 border-radius: 0; 

}
}


.opptylab-lib-section { 
position:absolute;
width:100%; 
max-width:1000px; 
left:calc(50% - 400px);
}

.opptylab-lib-inner-section { 
width:100%; 
padding-left:1rem;
padding-right:1rem;
}


@media only screen and (max-width: 768px) {
.opptylab-lib-section { padding-left:00px;}
.opptylab-lib-inner-section {  }
}



.opptylab-lib-nav-a{
display:block;
padding:0.5em 0em;
width:100%;
font-size:0.8em;
color:var(--text-diap);
}






/* wijzigingen obv side-tabs voor de side-navigatie 

.sidebar-wrapper { width: 100%; height:100vh;   }
.sidebar > .opptylab-component-side-tabs > .opptylab-tabs-wrapper { width: 300px; margin:2em; }

.sidebar > .opptylab-component-side-tabs > .opptylab-tabs-panel-wrapper { width: calc(100% - 300px); display:flex; justify-content: center; }
.sidebar > .opptylab-component-side-tabs > .opptylab-tabs-panel-wrapper > .opptylab-tabs-panel { max-width:970px !important;  }

.sidebar > .opptylab-component-side-tabs > .opptylab-tabs-wrapper   { border-radius: var(--border-radius-s); overflow: hidden; }
.sidebar > .opptylab-component-side-tabs > .opptylab-tabs-wrapper > .opptylab-tab  { border-radius:0px; margin:0px; overflow: hidden; padding: 0.5em 0.5em; font-size:0.8em; background:red;}

.sidebar > .opptylab-component-side-tabs > .opptylab-tabs-wrapper > .opptylab-tab  { background:#fff; }
.sidebar > .opptylab-component-side-tabs > .opptylab-tabs-wrapper > .opptylab-tab.active-tab  { background:rgba(0,0,0,.1); }
[data-theme="dark"] .sidebar > .opptylab-component-side-tabs > .opptylab-tabs-wrapper > .opptylab-tab  { background:var(--surface-light-1); }
[data-theme="dark"] .sidebar > .opptylab-component-side-tabs > .opptylab-tabs-wrapper > .opptylab-tab.active-tab  { background:rgba(0,0,0,.3); }



.sidebar > .opptylab-component-side-tabs > .opptylab-tabs-wrapper > .opptylab-tab.active-tab p,
.sidebar > .opptylab-component-side-tabs > .opptylab-tabs-wrapper > .opptylab-tab.active-tab p span { color: var(--text); }



@media only screen and (max-width: 900px) {
.sidebar > .opptylab-component-side-tabs > .opptylab-tabs-wrapper { width: calc(100% - 2em); margin:1em; }
}



.sidebar .opptylab-component-side-tabs > .opptylab-tabs-panel-wrapper > .opptylab-tabs-panel                                        { background-color: unset !important; }


*/
.p-text {
margin:0.25rem 0 1.5rem 0; 

}


.example, .code {
       background:rgba(255,255,255,0.4);
}


.example, .code {
        border:1px solid rgba(0,0,0,.1) !important;
        padding:1em !important; 
        margin:1em 0 !important; 
        border-radius:;
        border-radius:var(--border-radius-s); 
}

.example hr {   
        border:0px !important;
        border-top:1px solid rgba(0,0,0,.1) !important;
        margin:1rem 0;
}


.opptylab-hr { margin:2em 0px; opacity:0.25;}

/*
.code     { 
background:rgba(255,255,255,0.5);  
border-radius:var(--border-radius-s); 

}
.remarks  { background:none;  
}
*/

code.indent0  {padding-left:0rem;}
code.indent1  {padding-left:2rem;}
code.indent2  {padding-left:4rem;}
code.indent3  {padding-left:6rem;}
code.indent4  {padding-left:8rem;}
code.indent5  {padding-left:10rem;}
code.indent6  {padding-left:12rem;}
code.indent7  {padding-left:14rem;}

code  { color:rgba(0,0,0,.9); }
code.optional  { color:rgba(0,0,0,.5); }
[data-theme="dark"] code  { color:rgba(255,255,255,0.9); }
[data-theme="dark"] code.optional  { color:rgba(255,255,255,0.5); }

.code  {
  background: repeating-linear-gradient(
    to right,
    rgba(0,0,0,.0),
    rgba(0,0,0,.0) calc(2rem - 1px),
    rgba(0,0,0,.05) calc(2rem - 1px),
    rgba(0,0,0,.05) 2rem
  );
  background-position: 3rem;
  background-repeat: no-repeat;
}
[data-theme="dark"] .code  {
  background: repeating-linear-gradient(
    to right,
    rgba(255,255,255,0),
    rgba(255,255,255,0) calc(2rem - 1px),
    rgba(255,255,255,0.1) calc(2rem - 1px),
    rgba(255,255,255,0.1) 2rem
  );
  background-position: 3.6rem;
  background-repeat: no-repeat;
}

.code div {display:inline-block; width:3.9rem; font-size:0.8em;}

 .code, .remarks {  opacity:0.7;}
[data-theme="dark"] .code, [data-theme="dark"] .remarks {  border:1px solid rgba(255,255,255,.1); opacity:0.7;}