:root {
  --md-primary-fg-color: #292a2a;
  --md-primary-fg-color--light: #292a2a;
  --md-primary-fg-color--dark: #292a2a;

}


/* Additional styling to keep other sections intact */
.head1 {
  font-weight: bold;
  color: var(--md-default-fg-color--light);
  font-size: 2em;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.md-header {
  background-color: #292a2a; /* Default color for light mode */
}

/* Change background color of sidebar title for mobile devices */
@media (max-width: 1219px) {
  .md-nav__title {
    background-color: #292a2a !important; /* Sidebar title background for mobile */
    color: #ffffff !important; /* Sidebar title text color for mobile */
  }

}



/* For WebKit browsers (Chrome, Safari) */
.md-sidebar .md-nav__list {
  overflow-y: auto; /* Ensure the scrollbar appears */
}

/* Scrollbar styles for WebKit browsers */
.md-sidebar .md-nav__list::-webkit-scrollbar {
  width: 8px; /* Width of the scrollbar */
}

.md-sidebar .md-nav__list::-webkit-scrollbar-thumb {
  background-color: #444444; /* Color of the scrollbar thumb */
  border-radius: 10px; /* Rounded corners for the scrollbar thumb */
}

.md-sidebar .md-nav__list::-webkit-scrollbar-track {
  background: #f1f1f1; /* Background color of the scrollbar track */
}

/* For Firefox */
.md-sidebar .md-nav__list {
  scrollbar-width: thin; /* Make the scrollbar thin */
  scrollbar-color: #444444 #f1f1f1; /* Thumb color and track color */
}



/* for schema */



.schema-section {
  margin-bottom: 30px;
}

.section-title {
  color: #777;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 15px;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}

.parameter {
  display: flex;
  align-items: flex-start;
  margin-bottom: 0px;
  position: relative;
}

.parameter::before {
  content: '';
  position: absolute;
  left: -7px;
  top: 0;
  bottom: 20px;
  width: 2px;
  background: #eee;
}

.param-name {
  min-width: 200px;
  padding-right: 20px;
  font-size: 15px;
}

.param-info {
  flex: 1;
}

.param-required {
  color: #e53935;
  font-size: 12px;
  display: block;
}

.param-optional {
  font-size: 12px;
  display: block;
}

.param-type {
  color: #666;
  font-size: 13px;
}

.param-description {
  margin-top: 5px;
  font-size: 14px;
}

.sub-item {
  margin-left: 0px;
  margin-top: 10px;
  padding: 2px;
  border-radius: 4px;
}

.sub-item-label {
  display: inline-block;
  background: #e9ecef;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}


.sub-item1 {
  margin-left: 55px;
  margin-top: 10px;
  padding: 2px;
  border-radius: 4px;
}

.sub-item1-label {
  display: inline-block;
  background: #e9ecef;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.md-typeset hr {
  border-bottom: .05rem solid var(--md-default-fg-color--lightest);
  display: flow-root;
  margin: 1em 0;
}

/* Ensure Nested Items Are Visible and Responsive */
@media (max-width: 768px) {
  .parameter {
      flex-direction: column; /* Stack elements vertically */
  }

  .param-name {
      min-width: 100%; /* Full width for smaller screens */
      margin-bottom: 5px; /* Add some spacing below */
  }

  
  .param-info {
      flex: 1;
      width: 100%; /* Full width for nested content */
  }

  .sub-item {
    margin-left: 20px; /* Adjust nested item indentation for clarity */
    padding: 10px; /* Add padding for consistency */
    width: auto; /* Ensure it adapts to container size */
    display: block; /* Ensure it remains visible */
}

  .sub-item1 {
      margin-left: 35px; /* Adjust nested item indentation for clarity */
      padding: 10px; /* Add padding for consistency */
      width: auto; /* Ensure it adapts to container size */
      display: block; /* Ensure it remains visible */
  }

  .sub-item-label,
  .sub-item1-label {
      font-size: 12px; /* Keep consistent label size */
      display: block; /* Ensure labels remain visible */
  }
}