.md-tags {
        display: none !important;
    }

    /* Reserve the scrollbar gutter whether or not the page scrolls, so the
       centred header grid - and with it the logo - does not shift when moving
       between a short page and a scrolling one. Also in lp-styles.css. */
    html {
        scrollbar-gutter: stable;
    }

    a.md-nav__link--active {
        padding: .4rem;
        background-color: #4489ff22;
        border-radius: .3rem;
        font-weight: bold;

    }

    /* Dark theme: match selected nav item idle color to .back-to-category link blue */
    [data-md-color-scheme="slate"] a.md-nav__link--active {
        color: #2378FF;
    }

    .esxi_img {
        margin: .8rem;
        border-radius: 4px;
        box-sizing: border-box;
        box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
    }

    /* Keyboard keys (++enter++, ++esc++, etc.): text only, no key-specific icon glyphs. */
    .md-typeset kbd::before,
    .md-typeset kbd::after {
        content: none !important;
    }

    /* Keep the image inside its own two .8rem margins so left/right gaps stay
       equal on narrow screens. More specific than Material's .md-typeset img
       { max-width: 100% }, which would otherwise let the image fill the full
       content width and the left margin push it into a right-side overflow. */
    .md-typeset .esxi_img {
        max-width: calc(100% - 1.6rem);
    }

    .md-tabs {
        display: none;
    }

    .md-tabs__item--active {
        border-bottom: 3px solid #bbbbbb;
    }

    /* Footer, matched to the landing page's (see the .lp-footer block in
       lp-styles.css). Both bands are transparent, so the page background shows
       through exactly as it does on the landing, and the footer band's own top
       rule provides the separation. The markup comes from
       partials/footer.html, which reuses the landing's .lp-footer* classes. */
    .md-footer {
        background-color: transparent;
        color: var(--lp-text);
    }

    .md-footer__title .md-ellipsis {
        font-size: .8em;
    }

    .md-footer-meta {
        background-color: transparent;
        color: var(--lp-text);
    }

    .md-footer__inner:not([hidden]) {
        max-width: 50rem;
        background-color: transparent;
    }

    .lp-footer {
        margin-top: 2.6rem;
        border-top: 1px solid var(--lp-rule);
        padding: 1.1rem 0 1.4rem;
    }

    .lp-footer__inner {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: .6rem 1rem;
        max-width: 50rem;
        margin: 0 auto;
        padding: 0 1.2rem;
    }

    .lp-footer__start {
        display: flex;
        flex-direction: column;
        gap: .5rem;
    }

    /* the lockup links to vmssoftware.com; inline-flex keeps the anchor from
       adding baseline space under the image */
    .lp-footer__brand a {
        display: inline-flex;
        line-height: 0;
    }

    .lp-footer .lp-logo {
        height: 22px;
        width: auto;
    }

    .lp-footer .lp-logo--light {
        display: none;
    }

    body[data-md-color-scheme="default"] .lp-footer .lp-logo--dark {
        display: none;
    }

    body[data-md-color-scheme="default"] .lp-footer .lp-logo--light {
        display: block;
    }

    .lp-footer__links {
        display: flex;
        gap: .8rem;
        font-size: .65rem;
        line-height: 1.4;
    }

    .lp-footer__links a {
        color: var(--lp-muted);
        text-decoration: none;
    }

    .lp-footer__links a:hover {
        color: var(--lp-link);
    }

    /* Same size and line box as .lp-footer__links, so this sits on the same
       line as "VSI Documentation" and "Support": the row aligns on flex-end,
       which only lines the text up when the two boxes match. */
    .lp-footer__copyright {
        margin: 0 0 0 auto;
        font-size: .65rem;
        line-height: 1.4;
        color: var(--lp-muted);
    }

    @media screen and (max-width: 45em) {
        .lp-footer__copyright {
            margin-left: 0;
        }
    }

    /* Dark theme: black header (the footer bands stay transparent so the page
       background shows through, as on the landing page). Text/icons go light;
       Material icons follow currentColor, so setting `color` recolors them. */
    [data-md-color-scheme="slate"] .md-header,
    [data-md-color-scheme="slate"] .md-tabs {
        background-color: #000000;
        color: #eaeaea;
    }

    /* The same colour tokens the landing page defines in lp-styles.css, so the
       shared .lp-footer* rules resolve identically on both. Dark is the
       first-visit scheme; the light values follow below. The compound selector
       matters: data-md-color-scheme sits on <body> itself. */
    body {
        --lp-text: #cbd5e1;
        --lp-muted: #94a3b8;
        --lp-link: #60a5fa;
        --lp-rule: #1f2937;
    }

    body[data-md-color-scheme="default"] {
        --lp-text: #2b373f;
        --lp-muted: #5a6570;
        --lp-link: #2378FF;
        --lp-rule: #e6e8eb;
    }

    /* Dark theme: give every content page the same background as the portal
       landing page. home.html puts Tailwind `bg-gradient-to-br from-gray-900
       to-black` on its .md-main (= linear-gradient(to bottom right,#0f172a,#000)).
       Content pages otherwise show the flat slate `body` bg; mirror the gradient
       so all pages match. Cards/tables/admonitions keep the flat
       --md-default-bg-color, so they still read as surfaces on top.

       On <body>, not .md-main: the footer sits outside .md-main here (on the
       landing it is inside it), so a gradient on .md-main would stop above the
       footer and leave it on the flat slate colour. */
    body[data-md-color-scheme="slate"] {
        background-image: linear-gradient(to bottom right, #0f172a, #000);
        background-size: cover;
        background-attachment: fixed;
    }

    /* The page's own scrollbar follows the root element's colour scheme, not
       <body>'s. The theme's palette CSS sets `color-scheme: dark` on the
       [data-md-color-scheme=slate] body, and only its JS carries it up to the
       root (a <meta name="color-scheme"> it adds), so until the bundle ran a
       dark page painted a light scrollbar that then turned dark. Same rule in
       lp-styles.css for the landing page. */
    html:has(> body[data-md-color-scheme="slate"]) {
        color-scheme: dark;
    }

    /* The header's own column is narrowed to the landing page's width, so the
       brand sits the same distance from the page edge on every page. Content
       pages otherwise use a 1440px grid (below), which puts the logo nearly
       against the edge; lp-styles.css gives the landing 61rem, widening to
       1536px on very wide screens - both steps are mirrored here.
       Scoped to .md-header, so the article column keeps its own width. */
    .md-header .md-grid {
        max-width: 61rem;
    }


    @media screen and (min-width: 1536px) {
        .md-header .md-grid {
            max-width: 1536px;
        }
    }

    /* Header brand, matched to the landing page (see the same block in
       lp-styles.css). partials/logo_brand.html renders img/logo.svg twice - one
       per colour scheme - and the box below crops the full lockup to just the
       three-bar mark: the bars end at x=57 of the 290-wide viewBox, so at this
       height (scale .625) the mark is 35.6px, and the wordmark starting at
       x=87.7 stays outside the box. */
    .md-header__button.md-logo {
        display: inline-flex !important;
        align-items: center;
        /* Fixed 14px, matching the landing header, where `1em` resolves against
           a body pinned to 14px by lp-styles.css. Neither `em` nor `rem` works
           here: `em` follows this anchor's own font-size (10px, not 14px), and
           `rem` follows Material's html font-size, which steps up on wide
           viewports - both drift away from the landing. */
        margin-left: 14px !important;
        /* no right margin here: unlike the landing header, where the brand text
           sits inside this anchor, the site name is a separate element and its
           own left margin sets the gap (see .md-header__title below) */
        margin-right: 0 !important;
        padding: 0 !important;
    }

    .md-header__button.md-logo img.lp-logo {
        height: 1rem !important;
        width: 2.1rem;
        object-fit: cover;
        object-position: left center;
    }

    /* The mark swaps with the theme: white-wordmark file on the dark header,
       logo-light.svg on the light one. */
    .md-header__button.md-logo img.lp-logo--light {
        display: none;
    }

    [data-md-color-scheme="default"] .md-header__button.md-logo img.lp-logo--dark {
        display: none;
    }

    [data-md-color-scheme="default"] .md-header__button.md-logo img.lp-logo--light {
        display: block;
    }

    /* Site name next to the mark, sized like the landing page's brand text
       (which is itself sized to the footer wordmark's ink height). This is
       Material's own header title, so it keeps swapping to the page title on
       scroll. Material's defaults being replaced: font-size .9rem, and
       `.md-header__topic:first-child { font-weight: 700 }` - the landing brand
       is regular weight. The 1rem left margin also goes, so the gap to the mark
       matches the .45rem the landing header uses. */
    .md-header__title {
        font-size: 1.2rem;
        /* The landing header inherits Tailwind's preflight stack (tw-styles.css
           is loaded there, custom.css is not), whose first entry - IBM Plex
           Sans - is never loaded, so the brand renders in the next available
           face: Segoe UI on Windows, system-ui elsewhere. Material's own text
           font is Roboto, which made the same words look different between the
           two headers, so the landing's stack is repeated here verbatim. */
        font-family: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
            "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
        margin-left: .45rem !important;
        /* Material's 2.4rem is what makes this header taller than the landing's
           inner row; 2rem matches it (the padding and rule above make up the
           rest of the bar). */
        height: 2rem;
        line-height: 2rem;
        /* Centring this box puts the glyphs 1px below the mark's centre line
           (the line box carries descender space the mark's box does not).
           Nudged with relative positioning: a bottom margin like the landing
           brand's would make the bar 2px taller and break the height match,
           and a transform would put the text on its own compositing layer,
           which drops subpixel antialiasing and visibly changes the glyphs. */
        position: relative;
        top: -1px;
    }

    .md-header__title .md-header__topic:first-child {
        font-weight: 400;
    }

    .md-header__title .md-ellipsis a,
    .md-header__title .md-ellipsis {
        color: #eaeaea;
    }

    [data-md-color-scheme="default"] .md-header__title .md-ellipsis a,
    [data-md-color-scheme="default"] .md-header__title .md-ellipsis {
        color: #14171a;
    }

    /* Theme switch drawn as a pill with the icon in a round knob: sun on the
       left in the light scheme, half-moon on the right in the dark one. The
       icons come from the palette entries in mkdocs.yml
       (material/weather-sunny, material/weather-night) - Material renders one
       <label> per scheme and unhides the active one. Kept in step with the
       same block in lp-styles.css, which the landing page uses instead (see
       the note at the top of that file). */
    .md-header .md-header__option label.md-header__button {
        position: relative;
        display: flex;
        align-items: center;
        width: 2.1rem;
        height: 1.15rem;
        margin: 0;
        padding: 0;
        background-color: #33445c;
        border-radius: 1rem;
        cursor: pointer;
    }

    /* Material renders one label per scheme and marks all but the active one
       `hidden`; the display above would otherwise override that and show
       both. */
    .md-header .md-header__option label.md-header__button[hidden] {
        display: none;
    }

    .md-header .md-header__option label.md-header__button svg {
        position: absolute;
        top: 50%;
        /* dark scheme: knob to the right */
        right: .075rem;
        box-sizing: border-box;
        width: 1rem;
        height: 1rem;
        padding: .15rem;
        fill: #e2e8f0;
        background-color: #0f172a;
        border-radius: 50%;
        transform: translateY(-50%);
    }

    [data-md-color-scheme="default"] .md-header .md-header__option label.md-header__button {
        background-color: #d7dbe0;
    }

    [data-md-color-scheme="default"] .md-header .md-header__option label.md-header__button svg {
        right: auto;
        left: .075rem;
        fill: #14171a;
        background-color: #ffffff;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .2);
    }

    .md-typeset th {
        text-align: center !important;
    }

    .md-search-result mark {
        background-color: #c8ddff !important;
        color: black !important;
        text-decoration: none !important;
    }

    .md-nav--primary .md-nav__item>.md-nav__link {
        margin-right: 0 !important;
    }

    /* Material tints the nav scrollbar with the accent colour once the sidebar
       is hovered or focused. Hold it at the idle grey instead. First rule is
       the standard scrollbar-color path (Firefox), second is the WebKit thumb
       when the pointer is directly over it. Both use the same token Material
       uses when idle, so each palette keeps its own grey. */
    .md-sidebar__scrollwrap:focus-within,
    .md-sidebar__scrollwrap:hover {
        scrollbar-color: var(--md-default-fg-color--lighter) transparent;
    }

    .md-sidebar__scrollwrap:focus-within::-webkit-scrollbar-thumb:hover,
    .md-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb:hover {
        background-color: var(--md-default-fg-color--lighter);
    }

    /* Material pulls every navigation list up by .4rem (`.md-nav {
       margin-bottom: -.4rem }`) to trim the gap under nested lists. On the
       outermost list in a sidebar that margin collapses out through
       .md-sidebar__inner, leaving the scrollwrap 8px shorter than what it
       holds - a scrollbar with nothing to scroll, on almost every page, until
       the theme's JS gives the scrollwrap a fixed height a moment later. Zeroed
       for that one list only, and only at the widths where the theme sizes the
       sidebars (navigation from 76.25em, table of contents from 60em), so
       nested lists and the mobile drawer keep the theme's spacing. */
    @media screen and (min-width: 76.25em) {
        .md-sidebar--primary .md-sidebar__inner > .md-nav {
            margin-bottom: 0;
        }
    }

    @media screen and (min-width: 60em) {
        .md-sidebar--secondary .md-sidebar__inner > .md-nav {
            margin-bottom: 0;
        }
    }

    .pdf_only {
        display: none;
        break-after: page !important;
    }

    .intro_page p {
        margin-bottom: 0 !important;
    }

    [data-md-color-scheme="default"] {

        --md-primary-fg-color: #2378FF;
        --md-typeset-a-color: #2378FF;
        --md-accent-fg-color: #2378FF;
        --md-footer-bg-color--dark: #eaeaea;
    }

    .md-grid {
        max-width: 1440px;
    }

    /* #f9f9f9 matches the landing header (lp-styles.css), and so does the
       height: the landing pads the bar by .5em top and bottom and closes it
       with a 1px rule, while its inner row is 2rem tall rather than Material's
       2.4rem (set on .md-header__title below). Those three together are the
       7px the two headers used to differ by. */
    .md-header,
    .md-tabs {
        background-color: #f9f9f9;
        color: #2b373f;
    }

    .md-header {
        /* 7px, i.e. what the landing's `.5em` works out to against its
           14px-pinned body; `em` here resolves against this header's own
           font-size (10px) and would come out 2px short each side. */
        padding-top: 7px;
        padding-bottom: 7px;
        border-bottom: 1px solid #e6e8eb;
    }

    /* the landing uses #1f2937 for this rule on its dark header */
    [data-md-color-scheme="slate"] .md-header {
        border-bottom-color: #1f2937;
    }

    /* The bar's height is set by its tallest item, so matching the landing's
       2rem row means bringing these down to it: Material gives the search field
       2.4rem plus .1rem of wrapper padding, and its icon buttons .4rem padding
       around a 2rem glyph (40px + 8px of margin = 48). */
    /* One rule for the field, hover included. There used to be a second,
       unscoped `.md-search__form:hover { height: 1.8rem }` further down; it tied
       with this selector on specificity (two classes each) and, coming later,
       won on hover - which is why the field shrank when the pointer entered it.
       1.8rem is the size that hover produced, kept as the resting size. */
    .md-header .md-search__form,
    .md-header .md-search__form:hover {
        height: 1.8rem;
        background-color: #bbbbbb;
        border-radius: .4rem;
        color: #2b373f;
    }

    .md-header .md-search,
    .md-header .md-search__inner {
        padding: 0;
    }

    /* Pages carrying the "Download PDF" button (javascripts/pdf-link.js adds it)
       get their spacing from that button: 4px of margin either side plus its own
       .2rem padding, so its glyph clears the search field by 8px. Where the
       button is absent the palette toggle would otherwise touch the field, so
       the same 8px is restored there.

       :has() rather than `.md-header__option + .md-search`, because Material
       emits its palette <script> between the two, and an adjacent-sibling
       selector counts that script as the next element. */
    .md-header:not(:has([data-pdf-download])) .md-search {
        margin-left: 8px;
    }

    .md-header__button {
        padding: .2rem;
    }

    .md-header__button svg {
        height: 1rem;
        width: 1rem;
    }


    @media screen and (max-width:768px) {
        .md-search-result__article {
            font-size: .8rem !important;
        }

        .md-search-result .md-typeset h1 {
            font-size: .9rem !important;
        }
    }

    .md-typeset a {
        color: #2378FF;
    }


    .vms_button {
        background-color: transparent;
        border: none;
        border-radius: .3rem;
        margin-top: 1rem !important;
        cursor: pointer;
        display: inline-block;
        font-weight: 700;
        padding: .625em 2em;
        box-shadow: rgba(0, 0, 0, 0.24) 0px calc(3px * .8) calc(8px * .8);
    }

    .vms_button:hover {
        background-color: #2378FF;
        /* transform: scale(1.075);
    transition-duration: .25s; */
        cursor: pointer;
    }

    a.vms_button:hover {
        color: #ffffff;
    }

    /* Dark theme: blue box-shadow instead of black */
    [data-md-color-scheme="slate"] .vms_button {
        box-shadow: rgba(35, 120, 255, 0.5) 0px calc(3px * .8) calc(8px * .8);
    }

    /* Dark theme: off-white label like the index-page tiles / back-to-category
       button (was the #2378FF link color). Covers Get started, Download PDF,
       and every other `.vms_button` on the site. Hover keeps white on the blue
       bg; the :hover override is needed to beat the resting rule (0,3,1). */
    [data-md-color-scheme="slate"] .md-typeset a.vms_button {
        color: #cbd5e1;
    }

    [data-md-color-scheme="slate"] .md-typeset a.vms_button:hover {
        color: #ffffff;
    }

    .md-tabs {
        box-shadow: rgba(0, 0, 0, 0.24) 0px calc(3px * .8) calc(8px * .8);
    }

    /* ---------------------------------------------------------------------
       Content tabs styled to look like browser tabs (screen only).
       Wrapped in @media screen so the PDF/print rules below are untouched.
       Targets pymdownx.tabbed (alternate_style: true) markup:
         .tabbed-set > input (radios) ~ .tabbed-labels > label + .tabbed-content
       --------------------------------------------------------------------- */
    @media screen {

        .md-typeset .tabbed-set {
            /* single knob for outline thickness (labels + panel + seam) */
            --tab-border: .075rem;
            margin: 1em 0;
        }

        .md-typeset .tabbed-labels {
            display: flex;
            flex-wrap: wrap;
            gap: .25rem;
            box-shadow: none;
            /* remove the baseline shelf shadow Material draws */
            margin: 0;
            padding: 0;
        }

        /* remove Material's sliding underline indicator */
        .md-typeset .tabbed-labels::before {
            display: none;
        }

        .md-typeset .tabbed-labels>label {
            position: relative;
            z-index: 0;
            margin: 0;
            padding: .5em 1em;
            border: var(--tab-border) solid var(--md-default-fg-color--lighter);
            border-bottom: none;
            border-radius: .4rem .4rem 0 0;
            background-color: var(--md-default-fg-color--lightest);
            color: var(--md-default-fg-color--light);
            font-weight: 600;
            cursor: pointer;
            transition: background-color .2s, color .2s;
        }

        .md-typeset .tabbed-labels>label:hover {
            color: var(--md-accent-fg-color);
        }

        /* The theme's JS (the content.tabs.link feature) wraps each label's
           text in an <a> and marks the row .tabbed-labels--linked; the theme
           pads that <a> .78125em 1.25em .625em, on top of the label padding
           above. That is the size these tabs have always been seen at, so a
           label the JS has not reached yet gets the same total padding -
           otherwise the tab row grows by ~18px and pushes the page down when
           the theme's bundle arrives. */
        .md-typeset .tabbed-labels:not(.tabbed-labels--linked)>label {
            padding: calc(.5em + .78125em) calc(1em + 1.25em) calc(.5em + .625em);
        }

        /* the panel below the tabs */
        .md-typeset .tabbed-content {
            position: relative;
            z-index: 0;
            margin-top: calc(-1 * var(--tab-border));
            /* overlap the tab row so the active tab can merge into it */
            padding: 1em 1.2em;
            border: var(--tab-border) solid var(--md-default-fg-color--lighter);
            border-radius: 0 0 .4rem .4rem;
            background-color: var(--md-default-bg-color);
        }

        /* active tab: raise above the shelf line and merge into the panel.
           nth-child list covers up to 12 tabs per set (add more if needed). */
        .md-typeset .tabbed-set>input:nth-child(1):checked~.tabbed-labels> :nth-child(1),
        .md-typeset .tabbed-set>input:nth-child(2):checked~.tabbed-labels> :nth-child(2),
        .md-typeset .tabbed-set>input:nth-child(3):checked~.tabbed-labels> :nth-child(3),
        .md-typeset .tabbed-set>input:nth-child(4):checked~.tabbed-labels> :nth-child(4),
        .md-typeset .tabbed-set>input:nth-child(5):checked~.tabbed-labels> :nth-child(5),
        .md-typeset .tabbed-set>input:nth-child(6):checked~.tabbed-labels> :nth-child(6),
        .md-typeset .tabbed-set>input:nth-child(7):checked~.tabbed-labels> :nth-child(7),
        .md-typeset .tabbed-set>input:nth-child(8):checked~.tabbed-labels> :nth-child(8),
        .md-typeset .tabbed-set>input:nth-child(9):checked~.tabbed-labels> :nth-child(9),
        .md-typeset .tabbed-set>input:nth-child(10):checked~.tabbed-labels> :nth-child(10),
        .md-typeset .tabbed-set>input:nth-child(11):checked~.tabbed-labels> :nth-child(11),
        .md-typeset .tabbed-set>input:nth-child(12):checked~.tabbed-labels> :nth-child(12) {
            z-index: 1;
            background-color: var(--md-default-bg-color);
            color: var(--md-accent-fg-color);
            /* bg-colored bar paints over the panel's top border so the
               active tab visually connects to the content below it */
            box-shadow: 0 var(--tab-border) 0 0 var(--md-default-bg-color);
        }

        /* Dark theme: selected tab title blue matches nav/back-to-category (#2378FF) */
        [data-md-color-scheme="slate"] .md-typeset .tabbed-set>input:nth-child(1):checked~.tabbed-labels> :nth-child(1),
        [data-md-color-scheme="slate"] .md-typeset .tabbed-set>input:nth-child(2):checked~.tabbed-labels> :nth-child(2),
        [data-md-color-scheme="slate"] .md-typeset .tabbed-set>input:nth-child(3):checked~.tabbed-labels> :nth-child(3),
        [data-md-color-scheme="slate"] .md-typeset .tabbed-set>input:nth-child(4):checked~.tabbed-labels> :nth-child(4),
        [data-md-color-scheme="slate"] .md-typeset .tabbed-set>input:nth-child(5):checked~.tabbed-labels> :nth-child(5),
        [data-md-color-scheme="slate"] .md-typeset .tabbed-set>input:nth-child(6):checked~.tabbed-labels> :nth-child(6),
        [data-md-color-scheme="slate"] .md-typeset .tabbed-set>input:nth-child(7):checked~.tabbed-labels> :nth-child(7),
        [data-md-color-scheme="slate"] .md-typeset .tabbed-set>input:nth-child(8):checked~.tabbed-labels> :nth-child(8),
        [data-md-color-scheme="slate"] .md-typeset .tabbed-set>input:nth-child(9):checked~.tabbed-labels> :nth-child(9),
        [data-md-color-scheme="slate"] .md-typeset .tabbed-set>input:nth-child(10):checked~.tabbed-labels> :nth-child(10),
        [data-md-color-scheme="slate"] .md-typeset .tabbed-set>input:nth-child(11):checked~.tabbed-labels> :nth-child(11),
        [data-md-color-scheme="slate"] .md-typeset .tabbed-set>input:nth-child(12):checked~.tabbed-labels> :nth-child(12) {
            color: #2378FF;
        }

        /* Find-in-page (Ctrl+F) support for inactive tab panels.

           Material hides them with `.md-typeset .tabbed-block{display:none}`,
           and display:none content is invisible to find-in-page in every
           browser. Drop that here so javascripts/tabbed-findable.js can hide
           them with hidden="until-found" instead: that renders as
           content-visibility:hidden - skipped for painting, but still walked
           by find-in-page, which reveals the panel (after firing `beforematch`)
           on a hit.

           Gated on html.tabs-findable, which that script only sets once it has
           feature-detected `onbeforematch`. Chromium has it; Firefox and Safari
           have not shipped it, and there the class never appears, these two
           rules stay inert, and Material's display:none keeps hiding panels
           exactly as before - no half-applied state where every panel shows.

           Screen only, so the PDF exports are untouched: mkdocs_kvm.yml and
           mkdocs_esxi.yml declare no extra_javascript (the script never ships,
           and WeasyPrint would not run it anyway), so without this @media guard
           the display:block below would print every panel of every tab set. */
        html.tabs-findable .md-typeset .tabbed-block {
            display: block;
        }

        html.tabs-findable .md-typeset .tabbed-block[hidden="until-found"] {
            content-visibility: hidden;
        }
    }

    /*.md-nav__link a {
    font-weight: bold;
} */


    /* Section index cards (docs/Hypervisors/index.md, TCPIP, SSH, Licensing).
       One card per guide: a section emoji above the title, the whole card being
       the link. Replaces the old .tiles/.tile pill grid those pages used, and
       the `.md-grid:has(.border_titles)` width overrides that went with it -
       those pages hid the navigation sidebar and needed their own column
       widths; they now show the sidebar and use the normal content column. */
    .idx-cards {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
        gap: .8rem;
        margin: 1.2rem 0 2.5rem;
    }

    .idx-card {
        display: flex;
        flex-direction: column;
        gap: .55rem;
        padding: .9rem 1rem 1.1rem;
        background-color: var(--md-default-bg-color);
        border: 1px solid var(--lp-rule);
        border-radius: .5rem;
        text-decoration: none;
        transition: border-color 150ms;
    }

    .md-typeset .idx-card:hover {
        border-color: var(--lp-link);
    }

    /* Index-page title in the full text colour, like the landing page's
       headings; Material's default h1 is the muted --md-default-fg-color--light.
       Scoped by the card grid, so only these pages are affected. */
    .md-typeset:has(.idx-cards) h1 {
        color: var(--md-default-fg-color);
    }

    /* These pages hide the navigation sidebar, so their content would otherwise
       stretch the full grid and sit flush against the left edge while the header
       brand and the footer stay inset. Same 50rem column and 1.2rem gutters the
       landing page and the footer band use, so all three line up. */
    .md-content__inner:has(.idx-cards) {
        max-width: 50rem;
        margin-left: auto;
        margin-right: auto;
        padding: .6rem 1.2rem 1.2rem;
    }

    .idx-card__icon {
        font-size: 1.1rem;
        line-height: 1;
    }

    .md-typeset .idx-card .idx-card__title {
        color: var(--lp-link);
        font-size: .75rem;
        line-height: 1.35;
    }

    .pdf_only {
        display: none;
    }

    p>code,
    li>code {
        white-space: nowrap !important;
    }

    td code.code {

        white-space: nowrap !important;
        font-size: 8pt !important;
    }

    dt {
        font-weight: bold !important;
    }

    dl.command_ref dt {
        font-weight: bold !important;
        font-family: 'Courier New', Courier, monospace !important;
        font-size: 12pt !important;
    }

    span.hll,
    span.hl {
        font-weight: bold !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .md-typeset div.intro_page {
        display: flex;
        flex-direction: column;
    }

    .md-typeset div.intro_page>a {
        align-self: flex-end;
    }

    #pdf_button {
        display: block;
        width: 10%;
        margin-top: -5em;
    }

    .inline-image {
        height: 1em !important;
        width: auto !important;
        margin: 0 .2em !important;
    }


    @media print {

        article,
        .md-content,
        .md-content__inner {
            overflow: visible !important;
            height: auto !important;
            max-height: none !important;
        }

        * {
            break-inside: auto !important;
            box-sizing: border-box !important;
        }

        .pagebreak {
            break-after: page !important;
        }

        .md-typeset {
            font-family: "Times New Roman" !important;
            font-size: 11pt !important;
            line-height: 1.3em !important;
        }

        .md-typeset kbd {
            display: inline-block !important;
            padding: 0.1em 0.45em;
            margin: 0 0.08em;
            font-size: 0.7em;
            line-height: 1.2;
            color: #111;
            background: #f5f5f5;
            border: 1px solid #999;
            border-radius: 4px;
            box-shadow: none !important;
            vertical-align: middle;
            white-space: nowrap;
        }

        .md-typeset ul li:first-child,
        .md-typeset ol li:first-child {
            margin-right: .8em !important;
        }

        .admonition {
            break-inside: avoid !important;
        }

        .admonition {
            font-size: 10pt !important;
        }

        ol {
            break-inside: auto !important;

        }

        @page {
            size: A4 !important;
            margin: .8in !important;



            @top-right {
                content: none !important;
                /* font-size: 7pt;
            content: string(chapter);*/
            }

            @bottom-right {
                font-size: 9pt !important;
                content: counter(page) !important;


            }

            @bottom-center {
                font-size: 6pt;
                content: none !important;
            }
        }

        @page: first {
            @bottom-right {
                content: none !important;
            }
        }

        article#doc-cover {
            display: flex;
            flex-direction: column !important;
            height: auto !important;

            &>.wrapper {
                flex: 1 0 auto;
                text-align: center;
                padding: 0 3rem;

                &.upper {
                    flex: 1 1 auto;
                    max-height: 30vh;

                    >.logo {
                        margin-top: 1.8em !important;
                        margin-left: 18.2em !important;
                        height: 8.2% !important;
                    }
                }

                h1 {
                    font-size: 36pt !important;
                    line-height: 1 !important;
                    text-align: left !important;
                    margin-top: -2em !important;
                }

                h2 {
                    border: none;
                    text-align: left !important;
                    font-size: 24.8832pt !important;
                    font-weight: normal !important;


                }
            }

            &>.properties {
                flex: 0 0 auto;
                text-align: left !important;
                padding: 0 2rem;
                font-weight: bold !important;
                font-style: normal !important;

                p#copyright {
                    font-size: 1em !important;
                    font-weight: bold !important;
                    font-style: normal !important;

                }

                p#author {
                    font-size: 1em !important;
                    font-weight: bold !important;
                    font-style: normal !important;

                }
            }
        }

        article h1,
        article h2,
        article h3,
        article h4 {
            border-bottom: none !important;
            font-family: Helvetica !important;
        }

        .md-typeset h1 {
            font-weight: bold !important;
            letter-spacing: 0em !important;
            padding-left: 0 !important;
            margin: 0 0 .64em 0 !important;
            line-height: 1.3 !important;
            padding: 0 !important;
            color: #000000 !important;
            break-after: avoid !important;

        }

        .md-typeset h2 {
            font-weight: bold !important;
            letter-spacing: 0em !important;
            padding: 0 !important;
            margin: 1em 0 .64em 0 !important;
            line-height: 1.3 !important;
            color: #000000 !important;
        }

        article h4 {
            break-before: auto !important;
        }

        .md-typeset h1:target,
        .md-typeset h2:target,
        .md-typeset h3:target {
            --md-scroll-offset: 0rem !important
        }

        .md-typeset h4:target {
            --md-scroll-offset: 0rem !important
        }

        .md-typeset h3 {
            font-weight: bold;
            letter-spacing: 0em !important;
            line-height: 1.5;
            margin: 1em 0 .64em 0 !important;
            padding-left: 0 !important;
            /*break-before: avoid-column !important;*/

        }

        .md-typeset h4 {
            font-weight: bold !important;
            letter-spacing: 0em;
            margin: 0 !important;
            padding-left: 0 !important;

        }

        .pdf_ignore {
            display: none !important;
        }


        .pdf_only {
            display: block !important;
            margin-left: 0;
            padding-left: 0;
        }



        .pdf_tab_title {
            font-weight: bold;
            font-family: Helvetica;
            font-size: 14pt;
            break-after: avoid !important;
        }

        .md-typeset .tabbed-set label {
            background-color: transparent !important;
            font-weight: bold !important;
            font-size: 14pt !important;
            margin-left: 0 !important;
            padding-left: 0 !important;
            color: #000000 !important;
            break-after: avoid !important;

        }

        .md-typeset .tabbed-set>*,
        .md-typeset .tabbed-content>*,
        .md-typeset .tabbed-block>* {
            overflow: visible !important;
            height: auto !important;
            max-height: none !important;
            display: block !important;
        }

        .tabbed-set {
            break-inside: auto !important;
            page-break-inside: auto !important;
        }

        /* Each tab block can continue to next page */
        .tabbed-block {
            break-inside: auto !important;
            page-break-inside: auto !important;
        }

        .md-typeset dt {
            font-weight: bold !important;
        }

        .vms_button {
            display: none !important;
        }

        .md-typeset sup {
            vertical-align: baseline !important;
            position: relative !important;
            top: -0.3em !important;
        }

        .md-typeset table:not([class]) {
            font-size: 10pt !important;
            page-break-inside: auto !important;
            margin: 0 0 1em 0 !important;

        }

        .md-typeset table tr {
            break-inside: avoid !important;

        }

        .md-typeset table:not([class]) ul {
            margin: 0 !important;
        }

        .md-typeset th {
            text-align: center !important;
        }

        .md-typeset p>*>code,
        p>code,
        .md-typeset li>*>code,
        li>code {

            font-family: "Courier New" !important;
            background-color: transparent !important;
            text-align: baseline !important;
            white-space: nowrap;
            font-size: 10pt !important;
            padding: 0em !important;
        }

        .md-typeset pre>code {
            font-family: "Courier New" !important;
            font-size: 10pt !important;
            margin: .15em .15em !important;
            display: block !important;
            background-color: #f9f9f9f7 !important;
            border-radius: 6px;
            padding: .7720588235em 1.1764705882em !important;
            position: relative !important;
        }

        .md-typeset pre {
            display: block;
            line-height: 1.4;
            position: relative;
        }


        h1>.pdf-order,
        h2>.pdf-order,
        h3>.pdf-order {
            padding-left: 0 !important;
        }

        /* .intro_page a>img {
            display: none !important;
        }*/


    }

    /* Footnotes: the `content.footnote.tooltips` theme feature already shows
       each footnote as an on-hover popup, so the list Material prints at the
       end of the page is redundant on screen. Screen only — print/PDF builds
       have no hover, so they keep the list. Safe for the popup: the tooltip
       JS reads the footnote via `getElementById(...).cloneNode(true)` and
       appends the clone to <body>, so a display:none source still works. */
    @media screen {
        .md-typeset .footnote {
            display: none;
        }

        /* The marker keeps its href (the tooltip JS needs it), but the click is
           swallowed by javascripts/footnotes.js - so it reads as a hover hint,
           not a link. Same cursor Material uses for abbreviation tooltips. */
        .md-typeset .footnote-ref {
            cursor: help;
        }
    }

    /* "Back to <category>" sticky button (markup injected by hooks/category_nav.py) */
    .back-to-category {
        font-size: .6rem;
        position: sticky;
        top: 2.4rem;
        /* ~ Material header height; tune if it overlaps */
        z-index: 2;
        margin: 0 0 1rem 0;
        padding: .4rem 0;
        border: none;
        border-radius: .3rem;
    }

    .back-to-category__link {
        display: inline-block;
        font-weight: 700;
        text-decoration: none;
        background-color: var(--md-default-bg-color);
        color: #2378FF;
        border: 0px solid #2378FF;
        border-radius: .3rem;
        padding: .35em 1em;
        box-shadow: rgba(0, 0, 0, 0.24) 0px calc(3px * .8) calc(8px * .8);
        transition: background-color .2s, color .2s;
    }

    .md-typeset a.back-to-category__link:hover {
        background-color: #2378FF;
        color: #ffffff;
    }

    /* Dark theme: blue box-shadow instead of black */
    [data-md-color-scheme="slate"] .back-to-category__link {
        box-shadow: rgba(35, 120, 255, 0.5) 0px calc(3px * .8) calc(8px * .8);
    }

    /* Dark theme: off-white label like the index-page tiles (was the #2378FF
       link color). Hover keeps white on the blue bg. The :hover override is
       needed because it and the resting rule tie on specificity (0,3,1). */
    [data-md-color-scheme="slate"] .md-typeset a.back-to-category__link {
        color: #cbd5e1;
    }

    [data-md-color-scheme="slate"] .md-typeset a.back-to-category__link:hover {
        color: #ffffff;
    }

    /* Header "Download PDF" icon button (docs/overrides/partials/header.html)
       reuses Material's own .md-header__button .md-icon styling, so no
       custom rules are needed here - it already matches the search/menu
       icon buttons next to it. */

    /* Search results page (docs/search.md) */

    /* Keep the header showing "VMS Software" + logo on scroll instead of
       swapping to this page's title. */
    body:has(#search-page-root) .md-header__title--active .md-header__topic {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateX(0) !important;
        z-index: 0 !important;
    }

    body:has(#search-page-root) .md-header__title--active .md-header__topic+.md-header__topic {
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateX(1.25rem) !important;
        z-index: -1 !important;
    }

    /* Material mutes all text inside search result teasers, including code -
       restore the normal code color used in the rest of the documentation. */
    #search-page-root code,
    #search-page-root kbd,
    #search-page-root pre {
        color: var(--md-code-fg-color) !important;
    }

    #search-page-root details,
    #search-page-root summary {
        border: none !important;
        background: transparent !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    #search-page-root summary::before {
        display: none !important;
    }

    .md-typeset table.ref-table {
        font-size: 10pt !important;
        page-break-inside: auto !important;
        margin: 0 0 1em 1rem !important;
        table-layout: fixed !important;
        width: 100% !important;

    }

    /* Higher specificity than the generic p>code/td>code/pre>code rules below,
       so this wins regardless of how the code is nested inside a cell. */
    .md-typeset table.ref-table code {
        font-size: 8pt !important;
    }

    /* Other tables in the guide render un-classed, so they pick up mkdocs-material's
       own web theme rule for `.md-typeset table:not([class])` (main.*.min.css,
       also loaded into this combined PDF document) - not anything from the to-pdf
       plugin. That rule is reproduced here verbatim, since giving this table the
       ref-table class opted it out of the :not([class]) selector entirely. */
    .md-typeset table.ref-table {
        border: .05rem solid var(--md-typeset-table-color) !important;
        border-radius: .1rem !important;
    }

    .md-typeset table.ref-table th,
    .md-typeset table.ref-table td {
        padding: .9375em 1.25em !important;
        vertical-align: top !important;
    }

    .md-typeset table.ref-table th {
        font-weight: 700 !important;
    }

    .md-typeset table.ref-table td {
        border-top: .05rem solid var(--md-typeset-table-color) !important;
    }

    .md-typeset table.ref-table p {
        margin-top: 0 !important;
    }

    .md-typeset table tr {
        break-inside: avoid !important;
    }

    /* Column separators. Material draws the table's outer border and a rule
       between rows, but nothing between columns, which leaves the wider reference
       tables hard to read across. Only cells with a neighbour get one, so the
       table's own right border stays a single line rather than doubling up.

       Un-classed tables and .ref-table need naming separately: Material's own
       styling is written against `table:not([class])`, which .ref-table opted out
       of by carrying a class at all (see the rules above). The PDF exports take
       the same rule from docs/templates/styles.scss - custom.css is not among the
       stylesheets those builds load. */
    .md-typeset table:not([class]) th:not(:last-child),
    .md-typeset table:not([class]) td:not(:last-child),
    .md-typeset table.ref-table th:not(:last-child),
    .md-typeset table.ref-table td:not(:last-child) {
        border-right: .05rem solid var(--md-typeset-table-color);
    }