/************************************************************************* 

                           API headings START

**************************************************************************/

span.get {
  background-color: #4d4dff;
  border: 3px solid #4d4dff;
  border-radius: 3px;
  font-size: 24px;
  line-height: 28px;
  font-weight: bold;
  padding-top: 2px;
  padding-bottom: 0px;
  padding-left: 2px;
  padding-right: 3px;
  margin-right: 4px;
  color: white;
  font-family: Courier;
  text-transform: uppercase;
}

span.post {
  background-color: green;
  border: 3px solid green;
  border-radius: 3px;
  font-size: 24px;
  line-height: 28px;
  font-weight: bold;
  padding-top: 2px;
  padding-bottom: 0px;
  padding-left: 2px;
  padding-right: 3px;
  margin-right: 4px;
  color: white;
  font-family: Courier;
  text-transform: uppercase;
}

span.delete {
  background-color: darkred;
  border: 3px solid darkred;
  border-radius: 3px;
  font-size: 24px;
  line-height: 28px;
  font-weight: bold;
  padding-top: 2px;
  padding-bottom: 0px;
  padding-left: 2px;
  padding-right: 3px;
  margin-right: 4px;
  color: white;
  font-family: Courier;
  text-transform: uppercase;
}

span.put {
  background-color: #e68a00;
  border: 3px solid #e68a00;
  border-radius: 3px;
  font-size: 24px;
  line-height: 28px;
  font-weight: bold;
  padding-top: 2px;
  padding-bottom: 0px;
  padding-left: 2px;
  padding-right: 3px;
  margin-right: 4px;
  color: white;
  font-family: Courier;
  text-transform: uppercase;
}

/************************ API headings END ***************************/

.md-content img /* This adds a border around all images */ {
  border-width: 1px;
  border-style: solid;
  border-color: black; /* Or use a CSS variable like var(--md-accent-fg-color) for a dynamic color */
}

/* BEGIN Stoplight:  use about 66% of the content width and center it */

.stoplight-container {
  width: calc(100% + 400px); /* Extend beyond constrained column */
  margin-left: -50px; /* Pull left to stay visually centered */
  padding: 1rem;
  background: white;
  overflow-x: auto;
  box-sizing: border-box;
  z-index: 1;
}

/* Ensure Stoplight Elements fills container and looks clean */
elements-api {
  width: 100%;
  display: block;
  --theme-layout: stacked;
}

/* Fix oversized expand/collapse arrows */
.stoplight-container summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.stoplight-container summary::marker,
.stoplight-container summary::-webkit-details-marker {
  font-size: 1rem;
  line-height: 1;
  display: inline-block;
}

.stoplight-container summary svg {
  width: 1em;
  height: 1em;
  max-width: 1em;
  max-height: 1em;
}

/* Constrain SVG icons inside the Stoplight container */
.stoplight-container svg {
  width: 1em;
  height: 1em;
  max-width: 1em;
  max-height: 1em;
  vertical-align: middle;
}

@media (max-width: 1200px) {
  .stoplight-container {
    max-width: 100%;
    margin: 0;
    padding: 1rem;
  }
}

/* END Stoplight styles */

.md-grid /* This controls the width of pgs, incl right and left nav */ {
  max-width: 1440px;
}

/************************************************************************* 
BEGIN custom css for tables
**************************************************************************/

.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  padding: 8px 12px; /* Adjust padding as needed */
}

/* Light Mode (default) */
[data-md-color-scheme="default"]
  .md-typeset
  table:not([class])
  tbody
  tr:nth-child(even) {
  background-color: var(
    --md-code-bg-color
  ); /* Lighter background for even rows */
}

[data-md-color-scheme="default"]
  .md-typeset
  table:not([class])
  tbody
  tr:nth-child(odd) {
  background-color: var(
    --md-default-bg-color
  ); /* Default background for odd rows */
}

/* Dark Mode (slate) */
[data-md-color-scheme="slate"]
  .md-typeset
  table:not([class])
  tbody
  tr:nth-child(even) {
  background-color: var(
    --md-default-bg-color--lighter
  ); /* Slightly lighter dark background for even rows */
}

[data-md-color-scheme="slate"]
  .md-typeset
  table:not([class])
  tbody
  tr:nth-child(odd) {
  background-color: var(
    --md-default-bg-color
  ); /* Default dark background for odd rows */
}
/* END custom css for tables */

/************************************************************************* 
BEGIN custom css for material theme that will override mkdocs.yml colors
**************************************************************************/
/* PRIMARY color */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #6f8d6a;
}

/* ACCENT color (for links, buttons, highlights) */
[data-md-color-scheme="default"] {
  --md-accent-fg-color: #0066ff;
}

/* This changes the slate colors for DARK MODE */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #6f8d6a;
  --md-accent-fg-color: limegreen;
}

.md-nav__item .md-nav__link--active {
  color: darkgreen;
}

/* Regular link color */
.md-typeset a {
  color: darkgreen;
  text-decoration: none; /* optional: remove underline */
}

[data-md-color-scheme="slate"] .md-content .md-typeset a {
  color: #9bd770 !important;
}

[data-md-color-scheme="slate"] .md-content .md-typeset a:hover {
  color: #c6ffb3 !important;
}

[data-md-color-scheme="slate"] .md-nav__item .md-nav__link--active {
  color: #9bd770 !important;
}

/* Sidebar hover */
.md-nav__link:hover {
  color: #0066ff;
}

/************************************************************************* 
BEGIN custom css for HOME PAGE
**************************************************************************/
/* Fix logo alignment in header - home page only */
.md-header .md-logo {
  vertical-align: middle !important;
  align-self: center !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}

.md-header .md-logo img,
.md-header .md-logo svg {
  vertical-align: middle !important;
  margin: auto !important;
}

/* END the fix logo alignment in header - home page only */f