
/* TOC Container (outer sliding wrapper) */
.dtoc-sliding-sticky-container {
  position: fixed;  
  background: #f5f5f5;
  border: 1px solid #ddd;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
  transition: transform 0.3s;
  z-index: 1000;

  /* Flexible width with maximum limit */
  width: auto;           /* grows with content */
  max-width: 350px;      /* don’t exceed this width */  
  padding: 0; 
  margin: 0;           /* padding inside inner wrapper */
  box-sizing: border-box;
}

/* Inner wrapper scrollable content */
.dtoc-sliding-sticky-inner {
  max-height: 100vh;
  overflow-y: auto;  
  padding: 15px; /* inner padding */
}

/* TOC list */
.dtoc-sliding-sticky-container ul {
  list-style: none;
  padding-left: 0;
}
.dtoc-sliding-sticky-container li {
  margin-bottom: 10px;
}
.dtoc-sliding-sticky-container a {
  text-decoration: none;
  color: #0073aa;
}

/* Toggle button */
.dtoc-sliding-sticky-toggle-btn {
  position: absolute;    
  padding: 12px 15px;
  cursor: pointer;  
  font-size: 14px;
  user-select: none;
  transition: background 0.3s;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
  outline: none;      /* removes default outline */  
  border: none;
}
.dtoc-sliding-sticky-toggle-btn:hover {
  background: #005177;
}

/* Toggle button border-radius */
.dtoc-left-top .dtoc-sliding-sticky-toggle-btn,
.dtoc-left-middle .dtoc-sliding-sticky-toggle-btn,
.dtoc-left-bottom .dtoc-sliding-sticky-toggle-btn {
  border-radius: 0 0 8px 8px;
}

.dtoc-right-top .dtoc-sliding-sticky-toggle-btn,
.dtoc-right-middle .dtoc-sliding-sticky-toggle-btn,
.dtoc-right-bottom .dtoc-sliding-sticky-toggle-btn {
  border-radius: 0 0 8px 8px;
}

/* ---------------- LEFT SIDE ---------------- */
.dtoc-left-top { top: 0; left: 0; }
.dtoc-left-middle { top: 0; left: 0; }
.dtoc-left-bottom { bottom: 0; left: 0; top: 0; }

/* Toggle button left side */
.dtoc-left-top .dtoc-sliding-sticky-toggle-btn { top: 60px; right: -54px; transform: rotate(-90deg); }
.dtoc-left-middle .dtoc-sliding-sticky-toggle-btn { top: 50%; right: -54px; transform: translateY(-50%) rotate(-90deg); }
.dtoc-left-bottom .dtoc-sliding-sticky-toggle-btn { bottom: 60px; right: -54px; transform: rotate(-90deg); }

/* ---------------- RIGHT SIDE ---------------- */
.dtoc-right-top { top: 0; right: 0; left: auto;  }
.dtoc-right-middle { top: 0; right: 0; left: auto;  }
.dtoc-right-bottom { bottom: 0; top: 0; right: 0; left: auto;  }

/* Toggle button right side */
.dtoc-right-top .dtoc-sliding-sticky-toggle-btn { top: 60px; left: -54px; transform: rotate(90deg); }
.dtoc-right-middle .dtoc-sliding-sticky-toggle-btn { top: 50%; left: -54px; transform: translateY(-50%) rotate(90deg); }
.dtoc-right-bottom .dtoc-sliding-sticky-toggle-btn { bottom: 60px; left: -54px; transform: rotate(90deg); }

.dtoc-sliding-sticky-title-str {
  font-weight: 600;
  display: block;
  margin-bottom: 10px;
}
