:root {
  /* Company colors */
  --helix-color-mint: #01ffd1;
  --helix-color-mint-rgb: 1, 255, 209;
  --helix-color-mint-dark: #003032;
  --helix-color-red: #ff6b61;
  --helix-color-red-dark: #240f0e;
  --helix-color-gray: #ededed;
  --helix-color-gray-dark: #28282a;

  /* Extra Site Colors */
  --helix-color-mint-hover: #02cca7;
  --helix-color-gray-light: #f7f7f7;

  --helix-color-card-border: var(--helix-color-gray-dark);
  --helix-color-card-background: #1e1e24;

  /* More Site Colors (unvetted) */
  --helix-black: #000000;
  --helix-not-quite-black: #141414;
  --helix-not-quite-black-rgb: 10, 10, 10;
  --helix-white: #ededed;
  --helix-white-rgb: 237, 237, 237;
  --helix-not-quite-white: #eee;
  --helix-not-quite-white-rgb: 238, 238, 238;
  --helix-copy: #b5b5b6;

  /* Icons */
  --md-status--warning: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IS0tIFVwbG9hZGVkIHRvOiBTVkcgUmVwbywgd3d3LnN2Z3JlcG8uY29tLCBHZW5lcmF0b3I6IFNWRyBSZXBvIE1peGVyIFRvb2xzIC0tPgo8c3ZnIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHRpdGxlPmlvbmljb25zLXY1LXI8L3RpdGxlPjxwYXRoIGQ9Ik04NS41Nyw0NDYuMjVINDI2LjQzYTMyLDMyLDAsMCwwLDI4LjE3LTQ3LjE3TDI4NC4xOCw4Mi41OGMtMTIuMDktMjIuNDQtNDQuMjctMjIuNDQtNTYuMzYsMEw1Ny40LDM5OS4wOEEzMiwzMiwwLDAsMCw4NS41Nyw0NDYuMjVaIiBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2Utd2lkdGg6MzJweCIvPjxwYXRoIGQ9Ik0yNTAuMjYsMTk1LjM5bDUuNzQsMTIyLDUuNzMtMTIxLjk1YTUuNzQsNS43NCwwLDAsMC01Ljc5LTZoMEE1Ljc0LDUuNzQsMCwwLDAsMjUwLjI2LDE5NS4zOVoiIHN0eWxlPSJmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS13aWR0aDozMnB4Ii8+PHBhdGggZD0iTTI1NiwzOTcuMjVhMjAsMjAsMCwxLDEsMjAtMjBBMjAsMjAsMCwwLDEsMjU2LDM5Ny4yNVoiLz48L3N2Zz4=);
  --md-status--change: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTE4LjMwN3B4IiBoZWlnaHQ9IjEyMi44OHB4IiB2aWV3Qm94PSIwIDAgMTE4LjMwNyAxMjIuODgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDExOC4zMDcgMTIyLjg4IiB4bWw6c3BhY2U9InByZXNlcnZlIj48Zz48cGF0aCBkPSJNMTAuMDMsMzUuNjczYzIuMjQ1LTEwLjQ5Niw3LjIwMS0xOS4xNzYsMTQuMjQ2LTI1LjM2MkMzMi41MDQsMy4wODYsNDMuNDk4LTAuNjc0LDU2LjI3MSwwLjEgYzEuOTE2LDAuMTEzLDMuMzc3LDEuNzU4LDMuMjY1LDMuNjc0Yy0wLjExMywxLjkxNi0xLjc1NywzLjM3OC0zLjY3MywzLjI2NUM0NC45ODgsNi4zNzksMzUuNzEsOS41MDksMjguODQ4LDE1LjUzNSBjLTYuNDgzLDUuNjkzLTEwLjg4MywxNC4wMjgtMTIuNTEyLDI0LjI1OGwwLjYzOSwwLjI2NGwxMC4zODktNy4xNzJjMS40MjUtMC45ODYsMy4zOC0wLjYzLDQuMzY3LDAuNzk1IGMwLjk4NiwxLjQyNiwwLjYzLDMuMzgxLTAuNzk1LDQuMzY2bC0xNi41NTcsMTEuNDNjLTEuNDI1LDAuOTg2LTMuMzgsMC42My00LjM2Ni0wLjc5NWMtMC4wNjItMC4wODktMC4xMTgtMC4xOC0wLjE2OS0wLjI3MiBMOS44NCw0OC40MDlMMC4zOSwzMS4xNDZjLTAuODM2LTEuNTItMC4yODItMy40MzEsMS4yMzgtNC4yNjdjMS41Mi0wLjgzNiwzLjQzLTAuMjgyLDQuMjY2LDEuMjM4TDEwLjAzLDM1LjY3M0wxMC4wMywzNS42NzN6IE05OS4wMzIsMjMuMTA4bC0wLjIwNiwwLjE1OWwxLjAxNiwxMi41ODNjMC4xNDIsMS43MjgtMS4xNDUsMy4yNDMtMi44NzIsMy4zODRjLTEuNzI3LDAuMTQyLTMuMjQyLTEuMTQ1LTMuMzg0LTIuODcyIEw5MS45NjcsMTYuMzFjLTAuMTQyLTEuNzI4LDEuMTQ0LTMuMjQzLDIuODcxLTMuMzg0YzAuMTA4LTAuMDA5LDAuMjE1LTAuMDEzLDAuMzItMC4wMTFsMC4wMDEtMC4wMDJsMTkuNjc1LDAuNDQ2IGMxLjczNCwwLjAzNiwzLjExMiwxLjQ3MSwzLjA3NiwzLjIwNmMtMC4wMzUsMS43MzQtMS40NzEsMy4xMTEtMy4yMDYsMy4wNzVsLTkuNjUtMC4yMTljMy43NjksNC40MzcsNi43OTksOS40MjIsOS4wMSwxNC43NjIgYzIuNzc1LDYuNjk4LDQuMjQzLDEzLjkyMiw0LjI0MywyMS4yODFjMCwzLjYzLTAuMzU4LDcuMjUtMS4wNjQsMTAuODEyYy0wLjcsMy41MzUtMS43NTUsNy4wMjEtMy4xNTMsMTAuNDA5IGMtMC43MjksMS43NzMtMi43NTcsMi42Mi00LjUzLDEuODkxYy0xLjc3My0wLjcyOS0yLjYxOS0yLjc1Ny0xLjg5MS00LjUyOWMxLjIwNy0yLjkyNCwyLjEyNS01Ljk3NCwyLjc0NS05LjEwNCBjMC42MTYtMy4xMDQsMC45MjgtNi4yNzksMC45MjgtOS40NzhjMC02LjQ3Ni0xLjI3OS0xMi44MDQtMy42OTgtMTguNjQzQzEwNS41ODMsMzEuODUsMTAyLjY4NCwyNy4yMDcsOTkuMDMyLDIzLjEwOCBMOTkuMDMyLDIzLjEwOHogTTcyLjY1OCwxMDkuODZjLTUuNzI5LDEuMDQ3LTExLjU1OCwxLjE4MS0xNy4yNzcsMC40MjdjLTcuMTcyLTAuOTQzLTE0LjE2Mi0zLjI4OC0yMC41NTItNi45NzhsLTAuMDEtMC4wMDYgbC0wLjAwMywwLjAwNmMtMy4xNC0xLjgxMy02LjA5Ny0zLjkzNC04LjgzMi02LjMyOGMtMi43My0yLjM5Mi01LjIyMy01LjA0NS03LjQzNy03LjkyM2MtMS4xNzItMS41MTktMC44OTItMy42OTksMC42MjUtNC44NzEgczMuNjk5LTAuODkyLDQuODcxLDAuNjI2YzEuOTQ4LDIuNTMzLDQuMTMxLDQuODU3LDYuNTEyLDYuOTQzYzIuMzc3LDIuMDgyLDQuOTcsMy45MzksNy43NDMsNS41NGwtMC4wMDMsMC4wMDYgYzUuNTg4LDMuMjI1LDExLjcwNSw1LjI3NCwxNy45ODMsNi4xMDFjNS4zNSwwLjcwNSwxMC44MjQsMC41MTcsMTYuMTk2LTAuNTkzbC0wLjAzNS0wLjI2NGwtMTEuNDA1LTUuNDExIGMtMS41NjYtMC43NDEtMi4yMzYtMi42MTItMS40OTUtNC4xNzljMC43NDEtMS41NjcsMi42MTMtMi4yMzYsNC4xOC0xLjQ5NWwxOC4xNzcsOC42MjRjMS41NjYsMC43NDEsMi4yMzUsMi42MTIsMS40OTQsNC4xOCBjLTAuMDQ2LDAuMDk3LTAuMDk3LDAuMTkxLTAuMTUsMC4yODJsMC4wMDIsMC4wMDFsLTEwLjIyNSwxNi44MTZjLTAuODk4LDEuNDgzLTIuODMsMS45NTktNC4zMTQsMS4wNjEgYy0xLjQ4NC0wLjg5Ny0xLjk2LTIuODI5LTEuMDYyLTQuMzEzTDcyLjY1OCwxMDkuODZMNzIuNjU4LDEwOS44NnoiLz48L2c+PC9zdmc+);
}
.notice {
  position: relative;
  width: 100%;
  height: 30px;
  flex-shrink: 0;
  pointer-events: none;
  background-color: #ce2318;
  backdrop-filter: blur(10px);
  color: #f2f2f2;
  font-size: 14px;
  line-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 550;
  text-align: center;
}
@media screen and (max-width: 600px) {
  .notice {
    height: 50px;
    padding: 0 12px;
  }
}
@media screen and (max-width: 350px) {
  .notice {
    font-size: 12px;
    line-height: 16px;
  }
}
.modal-wrapper {
  height: 100vh;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
}
.modal {
  width: 550px;
  flex-shrink: 0;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  position: relative;
  background-color: #161616;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 1px 16px rgba(0, 0, 0, 0.4);
  border-radius: 8px;
  padding: 24px;
  padding-top: 14px;
}
.modal > p {
  font-weight: 400;
  font-size: 15px;
  color: #fff;
  text-align: center;
  line-height: 16px;
  min-width: 0;
}
.modal > button {
  background: var(--helix-color-mint);
  padding: 10px 18px;
  line-height: 14px;
  user-select: none;
  margin-top: 10px;
  color: #000;
  font-size: 13px;
  font-weight: 550;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.modal > button:hover {
  opacity: 0.8;
}
@media screen and (max-width: calc(550px + 24px)) {
  .modal {
    width: calc(100% - 24px);
    padding: 20px;
  }
  .modal > button {
    height: 40px;
    padding: 0;
    width: 100%;
    font-size: 15px;
    line-height: 16px;
  }
}

/* Slate theme customized to helix colors - base code from:
https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/stylesheets/palette/_scheme.scss
*/
[data-md-color-scheme="slate-helix"] {
  /* Indicate that the site is rendered with a dark color scheme */
  color-scheme: dark;

  /* Can also override base hue */
  /* --md-hue: 175deg; */

  /* Default color shades */
  --md-default-fg-color: hsla(var(--md-hue), 15%, 90%, 0.82);
  --md-default-fg-color--light: hsla(var(--md-hue), 15%, 90%, 0.56);
  --md-default-fg-color--lighter: hsla(var(--md-hue), 15%, 90%, 0.32);
  --md-default-fg-color--lightest: hsla(var(--md-hue), 15%, 90%, 0.12);
  --md-default-bg-color: hsla(
    var(--md-hue),
    15%,
    10%,
    1
  ); /* Changed all bg colors */
  --md-default-bg-color--light: hsla(var(--md-hue), 15%, 10%, 0.54);
  --md-default-bg-color--lighter: hsla(var(--md-hue), 15%, 10%, 0.26);
  --md-default-bg-color--lightest: hsla(var(--md-hue), 15%, 10%, 0.07);

  /* Code color shades */
  --md-code-fg-color: hsla(var(--md-hue), 18%, 86%, 0.82);
  --md-code-bg-color: hsla(var(--md-hue), 15%, 18%, 1);

  /* Code highlighting color shades */
  --md-code-hl-color: hsla(#{hex2hsl($clr-blue-a400)}, 1);
  --md-code-hl-color--light: hsla(#{hex2hsl($clr-blue-a400)}, 0.1);

  /* Code highlighting syntax color shades */
  --md-code-hl-number-color: hsla(6, 74%, 63%, 1);
  --md-code-hl-special-color: hsla(340, 83%, 66%, 1);
  --md-code-hl-function-color: hsla(291, 57%, 65%, 1);
  --md-code-hl-constant-color: hsla(250, 62%, 70%, 1);
  --md-code-hl-keyword-color: hsla(219, 66%, 64%, 1);
  --md-code-hl-string-color: hsla(150, 58%, 44%, 1);
  --md-code-hl-name-color: var(--md-code-fg-color);
  --md-code-hl-operator-color: var(--md-default-fg-color--light);
  --md-code-hl-punctuation-color: var(--md-default-fg-color--light);
  --md-code-hl-comment-color: var(--md-default-fg-color--light);
  --md-code-hl-generic-color: var(--md-default-fg-color--light);
  --md-code-hl-variable-color: var(--md-default-fg-color--light);

  /* Typeset color shades */
  --md-typeset-color: var(--md-default-fg-color);

  /* Typeset `a` color shades */
  --md-typeset-a-color: var(--helix-color-mint);

  /* Typeset `kbd` color shades */
  --md-typeset-kbd-color: hsla(var(--md-hue), 15%, 90%, 0.12);
  --md-typeset-kbd-accent-color: hsla(var(--md-hue), 15%, 90%, 0.2);
  --md-typeset-kbd-border-color: hsla(var(--md-hue), 15%, 14%, 1);

  /* Typeset `mark` color shades */
  --md-typeset-mark-color: hsla(#{hex2hsl($clr-blue-a200)}, 0.3);

  /* Typeset `table` color shades */
  --md-typeset-table-color: hsla(var(--md-hue), 15%, 95%, 0.12);
  --md-typeset-table-color--light: hsla(var(--md-hue), 15%, 95%, 0.035);

  /* Admonition color shades */
  --md-admonition-fg-color: var(--md-default-fg-color);
  --md-admonition-bg-color: var(--md-default-bg-color);

  /* Footer color shades - CHANGED */
  --md-footer-bg-color: hsla(var(--md-hue), 15%, 7%, 0.87);
  --md-footer-bg-color--dark: hsla(var(--md-hue), 15%, 5%, 1);

  /* Shadow depth 1 */
  --md-shadow-z1: 0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.05),
    0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.1);

  /* Shadow depth 2 */
  --md-shadow-z2: 0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.25),
    0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.25);

  /* Shadow depth 3 */
  --md-shadow-z3: 0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.4),
    0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.35);

  /* Hide images for light mode */
  img[src$="#only-light"],
  img[src$="#gh-light-mode-only"] {
    display: none;
  }

  /* Add hover color */
  --md-accent-fg-color: var(--helix-color-mint-hover);

  /* Change cookie button color */
  --md-primary-fg-color: var(--helix-color-mint);
  --md-primary-bg-color: var(--helix-color-mint-hover);

  /* Custom Overrides */

  /* Header general */
  .md-header {
    box-shadow: none;
    backdrop-filter: saturate(1.8) blur(20px);
    background-color: var(--helix-not-quite-black);
  }

  /* Add header nav bar underline */
  .md-tabs::before {
    content: "";
    position: absolute;
    bottom: 0; /* Align with the bottom of the md_tabs__item */
    left: 0;
    width: 100%;
    height: 0.2rem; /* Adjust the height as needed */
    background-color: var(--helix-color-gray-dark);
    z-index: 0; /* Ensure it appears below other content if necessary */
  }

  .md-tabs {
    position: relative;
    border: none; /* Remove border if any */
    background-color: transparent; /* Ensure no background color obscures items */
  }

  /* Add underline to active tab */
  li.md-tabs__item.md-tabs__item--active {
    position: relative;
    border-bottom: 0.2rem solid var(--helix-color-mint) !important; /* Needs override */
    z-index: 1; /* in front of .md_tabs::before line */
    background-color: transparent; /* Ensure the background is set if needed */
  }

  .md-search__icon.md-icon {
    color: var(--helix-color-mint);
  }

  .md-search__form {
    background-color: var(--helix-color-gray-dark);
    border-radius: 5px;
  }

  .download-button {
    background-color: var(--helix-color-gray-dark);
  }

  a.download-button {
    color: var(--helix-color-gray);
    opacity: 0.8;
  }

  a.download-button:hover {
    color: var(--helix-color-mint-hover);
  }

  .download-button svg {
    color: var(--helix-color-mint);
  }

  /* Mobile specific */
  @media screen and (max-width: 76.234375em) {
    .md-nav--primary .md-nav__title[for="__drawer"] {
      background-color: var(--helix-not-quite-black);
    }
  }

  @media screen and (max-width: 76.234375em) {
    .md-nav--primary .md-nav__title {
      background-color: var(--helix-not-quite-black);
    }
  }

  /* Edit/Comment buttons brighter */
  .md-content__button.md-icon {
    color: var(--helix-color-mint-hover);
  }

  /* Header tabs */
  .md-tabs {
    background-color: transparent;
  }

  /* Brighter non-active tabs */
  .md-tabs__link {
    opacity: 0.85;
  }

  /* Set active/hovered tab links to be mint */
  .md-tabs__item--active {
    color: var(--helix-color-mint);
  }
  .md-tabs__link:is(:focus, :hover) {
    color: var(--helix-color-mint);
  }

  /* Change annotation icon color for more obvious clickability */
  .md-annotation__index::after {
    background-color: var(--helix-color-mint);
  }

  .md-annotation:is(:focus, :hover) .md-annotation__index::after {
    background-color: var(--helix-color-mint-hover);
  }

  /* Grid cards */

  .md-typeset .grid.cards > ol > li,
  .md-typeset .grid.cards > ul > li,
  .md-typeset .grid > .card {
    background-color: var(--helix-color-card-background);
    box-shadow: inset 0 0 0 rgba(var(--helix-color-mint-rgb), 0.05);
    border: 0.05rem solid var(--helix-color-card-border);
    border-radius: 8px;
  }

  .md-typeset .grid.cards > ol > li:focus-within,
  .md-typeset .grid.cards > ol > li:hover,
  .md-typeset .grid.cards > ul > li:focus-within,
  .md-typeset .grid.cards > ul > li:hover,
  .md-typeset .grid > .card:focus-within,
  .md-typeset .grid > .card:hover {
    box-shadow: inset 20px 20px 20px rgba(var(--helix-color-mint-rgb), 0.05);
    border-color: rgba(var(--helix-not-quite-white-rgb), 0.2);
  }

  /* Increase grid-gap slightly */
  .md-typeset .grid {
    grid-gap: 0.6rem;
  }

  /* Make the third card full width on larger screens for specified classes */
  @media (min-width: 768px) {
    .grid.cards.full-width-3 > ul > li:nth-child(3) {
      grid-column: span 2; /* Span 2 columns */
    }
  }
}

/*
Currently just mismatched placeholder colors
- Need to update mkdocs.yml scheme to be 'helix' instead of 'slate' to view
- See following link for details on the possible vars:
https://github.com/squidfunk/mkdocs-material/blob/master/src/templates/assets/stylesheets/main/_colors.scss
*/
[data-md-color-scheme="helix"] {
  /* Primary Foreground */

  /*--md-primary-fg-color: var(--helix-color-mint);*/
  --md-primary-fg-color: var(--helix-black);
  --md-primary-fg-color--light: var(--helix-color-gray);

  /*--md-primary-fg-color--dark: var(--helix-color-gray-dark);*/
  --md-primary-fg-color--dark: var(--helix-not-quite-black);

  /* Primary Background */
  --md-primary-bg-color: var(--helix-color-red-dark);
  --md-primary-bg-color--light: var(--helix-color-red);
  /* Accent Foreground */
  --md-accent-fg-color: white;
  --md-accent-fg-color--transparent: rgba(250, 250, 250, 0.5);
  /* Accent Background */
  --md-accent-bg-color: var(--helix-color-mint-dark);
  --md-accent-bg-color--light: var(--helix-color-mint);

  /* Default color shades */
  --md-default-fg-color: hsla(0, 0%, 13%, 0.87);
  --md-default-fg-color--light: hsla(0, 0%, 13%, 0.54);
  --md-default-fg-color--lighter: hsla(0, 0%, 13%, 0.32);
  --md-default-fg-color--lightest: hsla(0, 0%, 13%, 0.07);
  --md-default-bg-color: rgb(61, 61, 61);
  --md-default-bg-color--light: hsla(0, 0%, 100%, 0.7);
  --md-default-bg-color--lighter: hsla(0, 0%, 100%, 0.3);
  --md-default-bg-color--lightest: hsla(0, 0%, 100%, 0.12);

  --md-default-bg-color: var(--helix-not-quite-black);
  --md-primary-bg-color: var(--helix-white);
  --md-typeset-color: var(--helix-copy);

  --md-typeset-a-color: var(--helix-color-mint);
  --md-default-fg-color--light: var(--helix-color-gray);

  --md-footer-bg-color: var(var(--helix-color-gray-dark));

  .md-header {
    box-shadow: none;
    backdrop-filter: saturate(1.8) blur(20px);
    background-color: rgba(43, 43, 43, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
  }

  .md-top {
    background-color: rgba(var(--helix-white-rgb), 0.9);
    backdrop-filter: saturate(1.8) blur(20px);
    color: rgba(var(--helix-not-quite-black-rgb), 0.9);
    box-shadow: none;
  }

  .md-tabs {
    background-color: transparent;
  }

  .md-typeset .grid.cards > ol > li,
  .md-typeset .grid.cards > ul > li,
  .md-typeset .grid > .card {
    background-color: var(--helix-card-background);
    box-shadow: inset 0 0 0 rgba(var(--helix-color-mint-rgb), 0.05);
    border: 0.05rem solid var(--helix-card-border);
    border-radius: 8px;
  }

  .md-typeset .grid.cards > ol > li:focus-within,
  .md-typeset .grid.cards > ol > li:hover,
  .md-typeset .grid.cards > ul > li:focus-within,
  .md-typeset .grid.cards > ul > li:hover,
  .md-typeset .grid > .card:focus-within,
  .md-typeset .grid > .card:hover {
    box-shadow: inset 20px 20px 20px rgba(var(--helix-color-mint-rgb), 0.05);
    border-color: rgba(var(--helix-not-quite-white-rgb), 0.2);
  }
}

/* Change max grid width (wider page) */
.md-grid {
  max-width: 70rem;
}

/* Make top tabs larger */
.md-tabs__link {
  font-size: 0.8rem;
  font-weight: 600;
}

/* Make top tabs have bottom border */
li.md-tabs__item.md-tabs__item--active {
  border-bottom: 0.2rem solid var(--helix-color-gray);
}

/* Make markdown headers whiter and bolder */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: 500;
  color: var(--helix-color-gray);
}

/* Increase space inbetween tabs */
.md-tabs__item {
  padding-left: 0.9rem;
  padding-right: 0.9rem;
}

/* ToDo: indent sidebar items slightly, but only on left and --active shouldn't unindent */
/* :not(div[class='md-sidebar--secondary']) */
/* a[class='md-nav__link'], a[class='md-nav__link--active'] {
  padding-left: 0.5rem;
} */

/* Toc also brighter */
.md-nav__title {
  color: var(--helix-color-gray);
}

/* Make sidebar headers more visible */
.md-nav__link[id^="__nav_"][id$="_label"] {
  color: var(
    --helix-color-gray
  ) !important; /* Doesn't work for first element unless important override */
}

/* Force GitHub link to not display */
.md-header__source,
.md-nav__source {
  display: none;
}

/* Make grid card headers be whiter */
.grid.cards ul li p strong {
  color: var(--helix-color-gray);
}

/* 
Statuses:

Inbuilt: 
-status (!) 
-status--new {!}
-status--deprecated {||}
-status--encrypted \^/

Custom (svg -> base64):
-status--warning /!\

Note: New and Deprecated also exist, but not shown here 
*/
.md-status--placeholder::after {
  mask-image: var(--md-status--new);
  -webkit-mask-image: var(--md-status--new);
}

.md-status--wip::after {
  mask-image: var(--md-status--warning);
  -webkit-mask-image: var(--md-status--warning);
}

.md-status--change::after {
  mask-image: var(--md-status--change);
  -webkit-mask-image: var(--md-status--change);
}

.md-status--old::after {
  mask-image: var(--md-status);
  -webkit-mask-image: var(--md-status);
}

/* External link styling */

a.external::after,
a.external::after {
  content: "";
  width: 11px;
  height: 11px;
  margin-left: 4px;
  /* Fill color hardcorded for now */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--%3E%3Cpath fill='%2363E6BE' d='M352 0c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9L370.7 96 201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L416 141.3l41.4 41.4c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V32c0-17.7-14.3-32-32-32H352zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}

.whiter {
  color: var(--helix-color-gray);
}

/* Header button styling */
.md-header-social {
  position: relative;
  display: table-cell;
  transition: opacity 150ms 150ms;
  margin-right: 0.75rem;

  ul {
    margin: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  /* Hide when search is active */
  [data-md-toggle="search"]:checked ~ .md-header & {
    opacity: 0;
    transition: opacity 0ms;
  }
}

/* Download Buttons (Header Buttons) */
.download-button {
  display: inline-block;
  margin-right: 15px;
  padding: 6px 14px;
  font-weight: 400;
  font-size: 20px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  cursor: pointer;
}

.download-button svg {
  height: 20px;
  margin-bottom: 2px;
  margin-right: 2px;
  vertical-align: text-bottom;
  fill: currentcolor;
}

@media only screen and (max-width: 959px) {
  .download-button {
    display: none;
  }
}

@media screen and (min-width: 960px) and (max-width: 1219px) {
  .download-button {
    margin-top: 0;
  }
}

@media screen and (min-width: 1220px) and (max-width: 1599px) {
  .download-button {
    margin-top: 2px;
  }
}

@media screen and (min-width: 1600px) {
  .download-button {
    margin-top: 2px;
  }
}

/* Table Formatting */

/* Base table styling */
table:not([class]) {
  display: table;
  max-width: 100%;
  overflow: auto;
  font-size: px2rem(12.8px);
  table-layout: auto;
  background: var(--md-default-bg-color);
  border-bottom: 2px solid var(--helix-color-mint) !important;
  border-radius: px2rem(4px);
  box-shadow:
    0 px2rem(4px) px2rem(10px) rgba(0, 0, 0, 0.05),
    0 0 px2rem(1px) rgba(0, 0, 0, 0.1);
  touch-action: auto;
}

/* Print specific adjustments */
@media print {
  table:not([class]) {
    display: table;
  }
}

/* Margin adjustments for adjacent elements */
table:not([class]) + * {
  margin-top: 1.5em;
}

/* Margin adjustments for first child in th/td */
table:not([class]) :is(th, td) > *:first-child {
  margin-top: 0;
}

/* Margin adjustments for last child in th/td */
table:not([class]) :is(th, td) > *:last-child {
  margin-bottom: 0;
}

/* Text alignment for th/td without align attribute */
table:not([class]) :is(th, td):not([align]) {
  text-align: left;
}

/* Right-to-left text alignment for th/td without align attribute */
[dir="rtl"] table:not([class]) :is(th, td):not([align]) {
  text-align: right;
}

/* Styling for table header cells */
table:not([class]) th {
  min-width: px2rem(100px);
  padding: px2em(12px, 12.8px) px2em(16px, 12.8px);
  color: var(--helix-not-quite-white);
  white-space: nowrap;
  vertical-align: top;
  background-color: var(--helix-color-gray-dark);
  border-bottom: 2px solid var(--helix-color-mint);
}

/* Link styling within table header cells */
table:not([class]) th a {
  color: inherit;
}

/* Styling for table data cells */
table:not([class]) td {
  padding: px2em(8px, 8.8px);
  vertical-align: top;
  border-top: px2rem(1px) solid var(--md-typeset-table-color);
}

/* Row transition on hover */
table:not([class]) tbody tr {
  transition: background-color 125ms;
}

/* Background color change on row hover */
table:not([class]) tbody tr:hover {
  background-color: rgba(0, 0, 0, 0.035);
  box-shadow: 0 px2rem(1px) 0 var(--md-default-bg-color) inset;
}

/* Remove top border from first td in tbody */
table:not([class]) tbody tr:first-child td {
  border-top: 0;
}

/* Set width for first td in tbody */
table:not([class]) tbody tr td:first-child {
  width: 250px;
}

/* Set width for specific class in first td in tbody */
table:not([class]) tbody tr td.even-table:first-child {
  width: 50%;
}

/* Word break behavior for links within tables */
table:not([class]) a {
  word-break: normal;
}

/* Additional table styles */
.md-typeset table:not([class]) td:first-of-type {
  white-space: pre;
}

/* Adjust font size for specific table context */
.md-typeset table:not([class]) {
  font-size: 0.75rem;
}

/* Full width display for specific table context */
.md-typeset__table {
  width: 100%;
}

/* Ensure display property for nested tables within specific context */
.md-typeset__table table:not([class]) {
  display: table;
}