.petoc-wrapper{
position:relative;
z-index:5;
}

/* Sticky polyfill states (JS toggles these) */
.petoc-wrapper.petoc-is-fixed{
position:fixed;
top:120px;
}

.petoc-wrapper.petoc-is-absolute{
position:absolute;
top:auto;
bottom:0;
}

.petoc-container{
background:#F0F6FF;
border:1px solid #eee;
border-radius:14px;
padding:20px;
max-height:80vh;
overflow:auto;
transition:all .3s ease;
}

/* Keep scrolling but hide the scrollbar "line" */
.petoc-container{
  scrollbar-width:none;        /* Firefox */
  -ms-overflow-style:none;     /* IE/Edge legacy */
}
.petoc-container::-webkit-scrollbar{
  width:0;
  height:0;
}

.petoc-title{
font-weight:700;
margin-bottom:10px;
font-size:16px;
}

#petoc-list{
list-style:none;
padding-left:0;
margin:0;
}

#petoc-list li{
margin:8px 0;
}

#petoc-list a{
text-decoration:none;
font-size:14px;
color:#333;
transition:.2s;
display:block;
}

#petoc-list a:hover{
color:#ff6a00;
}

#petoc-list a.active{
color:#ff6a00;
font-weight:600;
border-left:3px solid #ff6a00;
padding-left:6px;
}

.petoc-h3{
padding-left:18px;
font-size:13px;
opacity:.9;
}

/* Mobile */

.petoc-mobile-toggle{
display:none;
width:100%;
padding:12px;
border:none;
background:#f5f5f5;
border-radius:10px;
font-weight:600;
margin-bottom:10px;
}

@media(max-width:768px){

.petoc-mobile-toggle{
display:block;
}

.petoc-container{
display:none;
position:relative;
}

.petoc-container.petoc-open{
display:block;
}

.petoc-wrapper{
position:relative;
top:0;
}

}