/* Updated: 2025-08-08 */

.code-comment {
    color: rgb(0, 164, 0);
}

.code-group {
    display: flex;
    break-inside: avoid;
    flex-direction: column;
    height: 300px;
}

    .code-group .code {
        background-color: rgb(248,248,248);
        border-color: rgb(100,100,100);
        border-style: solid;
        border-width: 1px;
        font-family: monospace;
        font-size: 1.0em;
        flex-grow: 1;
        overflow: scroll;
        padding: 12px;
        white-space: pre;
    }

    .code-group .code-heading {
        background-color: rgb(240,240,240);
        border-color: rgb(100,100,100);
        border-style: solid;
        border-bottom-width: 0px;
        border-left-width: 1px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border-right-width: 1px;
        border-top-width: 1px;
        flex-grow: 0;
        padding: 4px;
    }

        .code-group .code-heading:first-child {
            margin-top: 0px;
        }

        .code-group .code-heading > button {
            margin-left: 4px;
        }

        .code-group .code-heading > span {
            font-weight: bold;
        }

    .code-group .code-heading-button {
        background-color: inherit;
        border: none;
        color: rgb(0,0,255);
        font-size: inherit;
        line-height: inherit;
        text-decoration: none;
    }

        .code-group .code-heading-button:hover {
            background-color: rgb(222,222,222);
        }

.code-tabs {
    background-color: rgb(232, 232, 232);
    border-color: rgb(100,100,100);
    border-style: solid;
    border-bottom-width: 0px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px;
    display: grid;
    grid-template-columns: 120px 120px 120px 120px 120px 1fr;
    margin: 0px;
    padding: 0px;
    top: 0px;
}

    .code-tabs button {
        background-color: rgb(232, 232, 232);
        border-bottom: none;
        border-left: none;
        border-right-color: rgb(255, 255, 255);
        border-right-style: solid;
        border-right-width: 2px;
        border-top: none;
        padding: 4px;
    }

        .code-tabs button.active {
            background-color: rgb(200, 200, 255);
        }

        .code-tabs button:hover {
            background-color: rgb(200, 200, 200);
        }

.func-args {
    color: rgb(190,0,0);
}

.func-name {
    color: rgb(0,120,0);
}

.func-return {
    color: rgb(0,0,180);
}

.html-group {
    display: flex;
    break-inside: avoid;
    flex-direction: column;
    flex-grow: 1;
    height: 0px;
}

    .html-group .contents {
        background-color: rgb(248,248,248);
        border-color: rgb(100,100,100);
        border-style: solid;
        border-width: 1px;
        font-size: 1.0em;
        flex-grow: 1;
        line-height: 1.6;
        overflow: scroll;
        padding: 12px;
    }

    .html-group .html-heading {
        background-color: rgb(212, 212, 212);
        border-left-color: rgb(150, 150, 150);
        border-left-style: solid;
        border-left-width: 1px;
        border-right-color: rgb(150, 150, 150);
        border-right-style: solid;
        border-right-width: 1px;
        border-top-color: rgb(150, 150, 150);
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        border-top-style: solid;
        border-top-width: 1px;
        font-weight: bold;
        padding-bottom: 4px;
        padding-left: 4px;
        padding-top: 4px;
    }

        .html-group .heading:first-child {
            margin-top: 0px;
        }

        .html-group .heading > button {
            margin-left: 4px;
        }

        .html-group .heading > span {
            font-weight: bold;
        }

    .html-group .heading-button {
        background-color: inherit;
        border: none;
        color: rgb(0,0,255);
        font-size: inherit;
        line-height: inherit;
        text-decoration: none;
    }

        .html-group .heading-button:hover {
            background-color: rgb(222,222,222);
        }

.html-tabs {
    background-color: rgb(232, 232, 232);
    border-color: rgb(100,100,100);
    border-style: solid;
    border-bottom-width: 0px;
    border-left-width: 1px;
    border-right-width: 1px;
    border-top-width: 1px;
    display: grid;
    grid-template-columns: 120px 120px 120px 120px 120px 1fr;
    margin: 0px;
    padding: 0px;
    top: 0px;
}

    .html-tabs button {
        background-color: rgb(232, 232, 232);
        border-bottom: none;
        border-left: none;
        border-right-color: rgb(255, 255, 255);
        border-right-style: solid;
        border-right-width: 2px;
        border-top: none;
        padding: 4px;
    }

        .html-tabs button.active {
            background-color: rgb(200, 200, 255);
        }

        .html-tabs button:hover {
            background-color: rgb(200, 200, 200);
        }