.onPageNav ul li,
.onPageNav ul ul li {
    padding-bottom: 0; /* moved to ul ul, ul a, ul ul a */
}

.onPageNav ul ul {
    padding-top: 1.5px;
    padding-bottom: 6.5px;
}

.onPageNav ul a {
    display: block;
    padding: 4px;
}

.onPageNav ul ul a {
    padding: 2.5px;
}

.onPageNav a.active {
    background-color: rgb(27 31 35 / 5%);
    font-weight: bold;
}

.fixedHeaderContainer header img {
    height: 80%;
}

.nav-footer .logo {
    display: block;
    margin: 1em auto;
    width: 175px;
}

.nav-footer .copyright {
    line-height: 1.5;
}

.nav-footer .copyright a {
    color: rgb(255 255 255 / 60%);
}

.nav-footer .copyright a:hover,
.nav-footer .copyright a:focus {
    color: white;
    text-decoration: none;
}

.showcaseSection .logos .imgbox {
    width: 168px;   /* 128px for img + 20*2 for padding */
    height: 168px;  /* 128px for img + 20*2 for padding */
    position: relative;
}

@media only screen and (max-width: 735px) {
    .showcaseSection .logos .imgbox {
        width: 104px;   /* 64px for img + 20*2 for padding */
        height: 104px;  /* 64px for img + 20*2 for padding */
        position: relative;
    }
}

.showcaseSection .logos .imgbox img {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

/* Add special CSS for supported.md rendered on mobile */
@media screen and (max-width: 480px) {
    /* We have two styles for very narrow screens.
    * We apply the hopscotch style to headless tables. It breaks
    * tables down so that each cell acts like a <div>
    *
    * We apply a card style to tables with headings. This converts
    * each cell into its own row, with a heading to its left.
    */

    .katex-cards table td {
        display: block;
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }

    .katex-hopscotch table td {
        display: inline-block;
        background: #fff;
    }

    .katex-hopscotch table tr {
        border: none;
        background: #fff;
    }

    .katex-cards table,
    .katex-cards thead,
    .katex-cards tbody,
    .katex-cards th {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    .katex-cards thead tr {
        display: block;
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .katex-cards td:nth-of-type(1),
    .katex-cards td:nth-of-type(2) { background-color: #fff; }

    .katex-cards td:nth-of-type(3),
    .katex-cards td:nth-of-type(4) { background-color: #f6f8fa; }

    .katex-cards table td:nth-child(even) { border-bottom: 1px solid #ccc; }

    .katex-cards td::before {
        /* Now like a table header */
        position: absolute;

        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }

    /*
    Label the data
    */
    #spacing-tbl td:nth-of-type(1)::before,
    #spacing-tbl td:nth-of-type(3)::before { content: "Function:"; }

    #spacing-tbl td:nth-of-type(2)::before,
    #spacing-tbl td:nth-of-type(4)::before { content: "Produces:"; }

    #math-alpha td:nth-of-type(1)::before,
    #math-alpha td:nth-of-type(3)::before { content: "Item:"; }

    #math-alpha td:nth-of-type(2)::before,
    #math-alpha td:nth-of-type(4)::before { content: "Range:"; }

    #environments td:nth-of-type(1)::before,
    #environments td:nth-of-type(3)::before { content: "Environment:"; }

    #environments td:nth-of-type(2)::before,
    #environments td:nth-of-type(4)::before { content: "From code:"; }

    #unit-tbl td:nth-of-type(1)::before,
    #unit-tbl td:nth-of-type(3)::before { content: "Unit:"; }

    #unit-tbl td:nth-of-type(2)::before,
    #unit-tbl td:nth-of-type(4)::before { content: "Value:"; }

    #unit-blocks td:nth-of-type(2)::before { content: "textstyle:"; }
    #unit-blocks td:nth-of-type(3)::before { content: "scriptscript:"; }
    #unit-blocks td:nth-of-type(4)::before { content: "huge:"; }
    #unit-blocks td { background-color: #fff; }
}

/* stylelint-disable block-no-empty */
@media only screen and (min-device-width: 360px) and (max-device-width: 736px) {
}

@media only screen and (min-width: 1024px) {
}

@media only screen and (max-width: 1023px) {
}

@media only screen and (min-width: 1400px) {
}

@media only screen and (min-width: 1500px) {
}
