html {
  /*height: 100vh !important;
  width: 100% ;
  /* etc */
}
div.document a:hover {
  text-decoration: none;
}
.responsive-image {
  width: 100%; 
  display: block; 
  height: auto;
}
.screenshot {
height: 500px;
}
.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.panel {
  border: 1px solid #ccc;
  padding: 10px;
}
.banner {
  width: 150px;              /* Full width of the container */
  height: 300px;            /* Set height of the banner */
  background-size: cover;   /* Cover the entire area */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Avoid repeating the image */
  display: flex;            /* Allows content positioning inside the banner */
  justify-content: center;  /* Horizontally center content */
  align-items: center;      /* Vertically center content */
  color: white;             /* Optional: Text color for content inside the banner */
  font-size: 2em;           /* Optional: Adjust text size */
}
.banner-text {
  margin: 0;
  text-align: center;            /* Remove default margin for the heading */
}
.centered {
  text-align: center;
}
.ADHD-view  {
  border:3px solid 
}
.harry-hanging-out {
  float: right;
  vertical-align: top;
}
.tip-flex-container {
  display: flex;
  align-items: flex-start;   /* Align items at the top */
  gap: 10px;                 /* Optional: space between image and text */
}

.tip-flex-container p {
  flex: 8;                   /* Text takes up 80% of the space */
}

.tip-flex-container .harry-hanging-out {
  flex: 2;                   /* Image takes up 20% of the space */
  max-width: 100%;           /* Ensures the image doesn’t overflow */
}
.square-image {
  width: 35vw; /* Adjust this to control the size as needed */
  height: auto; /* Maintains responsiveness */
  aspect-ratio: 1 / 1; /* Forces square dimensions */
}

/* stuff */
.responsive-table {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin: 0 auto;
}

.responsive-row {
  display: contents; /* Allow full grid control */
}

.responsive-cell {
  background-color: transparent;
  padding: 1rem;
  border: 1px solid #ddd;
  text-align: center;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.responsive-cell img {
  max-width: 100%;
  height: auto;
  margin-bottom: 1rem;
}

/* For small devices */
@media (max-width: 768px) {
  .responsive-table {
    grid-template-columns: 1fr;
  }

  .responsive-cell {
    margin-bottom: 1rem;
  }
}



/* common issues grid */
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch; /* For smooth scrolling on mobile */
margin: 20px 0;
}

.horizontal-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}

.horizontal-table th, .horizontal-table td {
padding: 10px;
border: 1px solid #ddd;
text-align: center;
}

.horizontal-table th {
background-color: #f2f2f2;
}

.horizontal-table td {
text-align: left;
}

@media (max-width: 768px) {
.horizontal-table th, .horizontal-table td {
  font-size: 12px; /* Adjust font size */
  padding: 8px;    /* Adjust padding for smaller screens */
}
.table-container {
  overflow-x: auto;  /* Ensure horizontal scrolling */
}
}
/* Link colors for light and dark modes */
/* Light mode (default) */
.sidebar-tree .toctree-l1>.reference,
.sidebar-tree .toctree-l1>label .icon {
    color: #000 !important;
    text-decoration: none !important;
}

a {
    color: #000000 !important;
    text-decoration: underline !important;
    -webkit-text-decoration-color: var(--color-link-underline) !important;
    text-decoration-color: var(--color-link-underline) !important;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body:not([data-theme="light"]) .sidebar-tree .toctree-l1>.reference, body:not([data-theme="light"]) .sidebar-tree .toctree-l1>label .icon {
        color: #fff !important;
        text-decoration: none !important;
    }
    
    body:not([data-theme="light"]) a {
        color: #ffffff !important;
        text-decoration-color: #ffffff !important;
    }
}

/* Explicit dark theme override */
[data-theme="dark"] .sidebar-tree .toctree-l1>.reference,
[data-theme="dark"] .sidebar-tree .toctree-l1>label .icon {
    color: #fff !important;
    text-decoration: none !important;
}

[data-theme="dark"] a {
    color: #ffffff !important;
    text-decoration-color: #ffffff !important;
}

/* Explicit light theme override */
[data-theme="light"] .sidebar-tree .toctree-l1>.reference,
[data-theme="light"] .sidebar-tree .toctree-l1>label .icon {
    color: #000 !important;
    text-decoration: none !important;
}

[data-theme="light"] a {
    color: #000000 !important;
    text-decoration-color: #000000 !important;
}