/* css styles */
.important {
  color: maroon;
  text-align: center;
  font-size: 20px;
}



#mtcars-btn {
     font-size: x-small;
     padding: 0.2rem 0.3rem !important;
   }

#down-btn {
 margin-right: 2px;
 margin-left: 2px;
}

a:has(#mtcars-btn) {
 text-decoration: none !important;
}

.btn {
  padding: 2px 6px;
  background-color: #48d9ca;  /* Bootstrap blue */
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
}

.btn:hover {
  background-color: #37ab9f; /* Darker blue on hover */
}

table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  border: 1px solid #ddd;
}

th, td {
  padding: 0.5em 1em;
  vertical-align: top;
}

th {
  background-color: #f4f4f4;
  text-align: left;

  /* Sticky header styles */
  position: sticky;
  top: 0;
  z-index: 10;
  /* To prevent transparency when sticky */
  background-color: #f4f4f4;
  /* Optional: subtle border-bottom */
  border-bottom: 2px solid #bbb;
}


#toc {
    position: fixed;  /* Fix the TOC on the page */
    top: 0;           /* Align with the top of the page */
    left: 0;          /* Align to the left */
    width: 250px;     /* Adjust the width of the TOC */
    padding: 10px;    /* Optional padding inside TOC */
    background-color: white; /* Optional: background color */
    border-right: 1px solid #ddd; /* Optional: border to separate from content */
    z-index: 1000;    /* Ensure the TOC is above other content */
    height: 100vh;    /* Make it full height of the viewport */
    overflow-y: auto; /* Allow vertical scrolling if TOC is too long */
}


.code-copy-container {
  position: relative;
  margin-bottom: 1em;
}

.code-box {
  display: block;
  overflow-x: auto;
  white-space: pre; /* or 'pre-wrap' for wrapping */
  padding: 0.5em;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-family: monospace;
  font-size: 0.6em;
  max-width: 250px;
}

.copy-button {
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 10px;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #eee;
}

.copy-button:hover {
  background-color: #ddd;
}