.main-logo {
    background: linear-gradient(to right, var(--brand-primary), var(--brand-gradient-middle), var(--brand-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: arial;
    font-weight: bold;
    font-size: 1.5em;
}



/*Json Viewer ------------------------------------------------------------------*/

/* Token colours are the original site's, matching the hero panel on the marketing site.
   pre.json-viewer, not .json-viewer: the blocks also carry .hljs, which is declared later in this
   file and would otherwise win the background. */
pre.json-viewer {
    background-color: #fff;
    border: 1px solid #e2e5f1;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

    .json-viewer .string {
        color: green;
    }

    .json-viewer .number {
        color: darkorange;
    }

    .json-viewer .boolean {
        color: blue;
    }

    .json-viewer .null {
        color: magenta;
    }

    .json-viewer .key {
        color: red;
    }

/*End Json Viewer --------------------------------------------------------------*/


/* github style */
.hljs {
    display: block;
    color: #333;
    background: #f8f8f8;
}

.hljs-comment, .hljs-template_comment, .diff .hljs-header, .hljs-javadoc {
    color: #998;
    font-style: italic;
}

.hljs-keyword, .css .rule .hljs-keyword, .hljs-winutils, .javascript .hljs-title, .nginx .hljs-title, .hljs-subst, .hljs-request, .hljs-status {
    color: #333;
    font-weight: bold;
}

.hljs-number, .hljs-hexcolor, .ruby .hljs-constant {
    color: #099;
}

.hljs-string, .hljs-tag .hljs-value, .hljs-phpdoc, .tex .hljs-formula {
    color: #d14;
}

.hljs-title, .hljs-id, .coffeescript .hljs-params, .scss .hljs-preprocessor {
    color: #900;
    font-weight: bold;
}

.javascript .hljs-title, .lisp .hljs-title, .clojure .hljs-title, .hljs-subst {
    font-weight: normal;
}

.hljs-class .hljs-title, .haskell .hljs-type, .vhdl .hljs-literal, .tex .hljs-command {
    color: #458;
    font-weight: bold;
}

.hljs-tag, .hljs-tag .hljs-title, .hljs-rules .hljs-property, .django .hljs-tag .hljs-keyword {
    color: #000080;
    font-weight: normal;
}

.hljs-attribute, .hljs-variable, .lisp .hljs-body {
    color: #008080;
}

.hljs-regexp {
    color: #009926;
}

.hljs-symbol, .ruby .hljs-symbol .hljs-string, .lisp .hljs-keyword, .tex .hljs-special, .hljs-prompt {
    color: #990073;
}

.hljs-built_in, .lisp .hljs-title, .clojure .hljs-built_in {
    color: #0086b3;
}

.hljs-preprocessor, .hljs-pragma, .hljs-pi, .hljs-doctype, .hljs-shebang, .hljs-cdata {
    color: #999;
    font-weight: bold;
}

.hljs-deletion {
    background: #fdd;
}

.hljs-addition {
    background: #dfd;
}

.diff .hljs-change {
    background: #0086b3;
}

.hljs-chunk {
    color: #aaa;
}

.list-group-item-action {
    margin-left:10px
}

/* Try it pop-up (Pages/Docs/_TryIt.cshtml) ---------------------------------------*/

/* Sits on the title's baseline, a clear step away from it, and small beside the h1. */
.try-it-button {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: 1.25rem;
    padding: 0.375rem 1rem 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    position: relative;
    top: -0.35rem;
}

    .try-it-button .bx {
        font-size: 1.15rem;
    }

.try-it-url {
    white-space: pre-wrap;
    word-break: break-all;
    background: #f8f8f8;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
}

.try-it-body {
    max-height: 24rem;
    overflow: auto;
}