html, body {
  margin: 0; padding: 0; height: 100%;
}

body {
  font-family: sans-serif; line-height: 1.6; position: relative;;
}

.sidebar {
  position: fixed; top: 0; left: 0; width: 330px; height: 100vh; overflow-y: auto; background-color: #f4f4f4; padding: 15px; padding-top: 45px; border-right: 1px solid '#ddd'; z-index: 1000; box-sizing: border-box; transition: transform 0.3s ease, width 0.3s ease, padding 0.3s ease, border 0.3s ease;;
}

.content {
  padding: 20px; height: 100vh; overflow-y: auto; box-sizing: border-box; margin-left: 0; transition: none;
}

#sidebar-toggle {
  position: fixed; top: 10px; left: 10px; z-index: 1001; cursor: pointer; background-color: #ddd; border: 1px solid '#bbb'; padding: 4px 8px; border-radius: 4px; font-size: 1.1em; line-height: 1; transition: left 0.3s ease;;
}

p {
  margin-bottom: 1em; color: #333;
}

a {
  color: #007bff; text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

table {
  border-collapse: collapse; width: 100%; margin-bottom: 1em;
}

th, td {
  border: 1px solid '#ddd'; padding: 8px; text-align: left;
}

th {
  background-color: #f2f2f2; font-weight: bold;
}

code {
  background-color: #eee; padding: 0.2em 0.4em; border-radius: 3px; font-family: monospace;
}

pre > code, pre {
  background-color: #f0f0f0; padding: 1em; border: 0px solid; border-radius: 5px; overflow-x: auto; overflow-y: visible; font-family: Consolas, 'Courier New', Courier, monospace; margin-bottom: 1.5em; line-height: 3; white-space: pre; font-size: 0.95em;
}

ul, ol {
  margin-left: 20px; margin-bottom: 1em;
}

.sidebar-ul {
  list-style-type: none; padding-left: 0; margin: 0;
}

.sidebar-li {
  margin-bottom: 0.1em;
}

.sidebar-a {
  color: #333; text-decoration: none; display: block; padding: 0.3em 8px; border-radius: 3px; white-space: normal; word-wrap: break-word; transition: background-color 0.2s ease, color 0.2s ease, font-weight 0.2s ease;;
}

.sidebar-a:hover {
  text-decoration: none; background-color: #e0e0e0;
}

.sidebar-level-1 > a {
  padding-left: 8px; font-weight: bold;;
}

.sidebar-level-2 > a {
  padding-left: 23px; font-weight: normal;;
}

.sidebar-level-3 > a {
  padding-left: 38px; font-weight: normal;; font-size: 0.95em;;
}

.sidebar-level-4 > a {
  padding-left: 53px; font-weight: normal;; font-size: 0.9em;; color: #555;
}

.sidebar-li.sidebar-unit-group > a {
  font-weight: bold;; color: #111; margin-top: 0.5em;; display: block;; background-color: #ddd;
}

li.sidebar-level-1 > a.sidebar-a.active-link {
  text-decoration: underline;; color: #0056b3; background-color: #ddeaff;
}

li.sidebar-level-2 > a.sidebar-a.active-link {
  text-decoration: underline;; color: #0056b3; background-color: #ddeaff;
}

li.sidebar-level-3 > a.sidebar-a.active-link {
  text-decoration: underline;; color: #0056b3; background-color: #ddeaff; font-size: 0.95em;;
}

li.sidebar-level-4 > a.sidebar-a.active-link {
  text-decoration: underline;; color: #0056b3; background-color: #ddeaff; font-size: 0.9em;;
}

h1 {
  font-size: 2.2em; color: #333; margin-top: 1.5em; margin-bottom: 0.5em; border-bottom: 2px solid '#eee'; padding-bottom: 0.2em;
}

h2 {
  font-size: 1.8em; color: #444; margin-top: 1.3em; margin-bottom: 0.4em; border-bottom: 1px solid '#eee'; padding-bottom: 0.1em;
}

h3 {
  font-size: 1.4em; color: #555; margin-top: 1.2em; margin-bottom: 0.3em;
}

h4 {
  font-size: 1.1em; color: #666; margin-top: 1.1em; margin-bottom: 0.3em;
}


@media (max-width: 768px) {

  body {
  overflow-x: hidden;;
}

  .sidebar {
  transform: translateX(-100%);; border-right: none;; box-shadow: none;; width: 330px;; padding: 15px;; padding-top: 45px;;
}

  body.sidebar-hidden .sidebar {
  transform: translateX(-100%);; box-shadow: none;; border-right: none;;
}

  body:not(.sidebar-hidden) .sidebar {
  transform: translateX(0);; box-shadow: 2px 0 5px rgba(0,0,0,0.2);;
}

  body.sidebar-hidden #sidebar-toggle {
  left: 10px;;
}

  body:not(.sidebar-hidden) #sidebar-toggle {
  left: 340px;;
}

}


@media (min-width: 769px) {

  .sidebar {
  transform: translateX(0);; box-shadow: none;; border-right: 1px solid '#ddd';; width: 330px;; padding: 15px;; padding-top: 45px;;
}

  .content {
  transition: margin-left 0.3s ease;;
}

  body.sidebar-hidden .sidebar {
  transform: translateX(-100%);; width: 0;; padding-left: 0;; padding-right: 0;; border-right: none;;
}

  body.sidebar-hidden .content {
  margin-left: 15px;;
}

  body:not(.sidebar-hidden) .content {
  margin-left: 330px;;
}

  body.sidebar-hidden #sidebar-toggle {
  left: 10px;;
}

  body:not(.sidebar-hidden) #sidebar-toggle {
  left: 8px;;
}

}