@font-face {
    font-family: NeueMontreal;
    src: url("./NeueMontreal-Regular.otf") format("opentype");
}

@font-face {
    font-family: NeueMontreal;
    src: url("./NeueMontreal-Medium.otf") format("opentype");
    font-weight: 500;
}


/* define primary blue */
:root {
    --primary-blue: #3d3affac;
    --primary-red: #ff6678;
    --primary-sand: #f5e9d7;
    --primary-teal: #00b4a2;
}


body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0;
    position: relative;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility;

    background-color: #f6f6f6;

    --text-color: #1c1c1c;
}

.trace-container {
    position: relative;
}

.md-header {
    background-color: white;
    border-bottom: 1px solid #E5E5E5;
    box-shadow: none;
}

.md-header__topic {
    color: var(--text-color);
    font-weight: 500 !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.md-icon svg {
    fill: var(--text-color);
    stroke: var(--text-color);
    opacity: 0.9;
}

.md-nav--primary .md-nav__title[for=__drawer] {
    background-color: white;
    color: var(--text-color);
}

.md-nav--primary .md-nav__title[for=__drawer] {
    color: var(--text-color);
    font-weight: 500 !important;
}

.md-header__title {
    margin-left: 0pt !important;
    font-size: 14pt;
}

.md-typeset h1 {
    color: var(--text-color);

    color: #0C0C13;
    font-family: NeueMontreal, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
    font-size: 38px;
    font-style: normal;
    line-height: 52px;
    letter-spacing: 0.55px;
    margin-bottom: 20pt;
    margin-top: 10pt;
}

.md-typeset p {
    font-size: 14pt;
}

a {
    color: #3A3E60;
    text-decoration: none;
}

a:hover {
    color: #3A3E60;
    text-decoration: underline;
}

a:visted {
    color: #3A3E60;
    text-decoration: none;
}

.md-main__inner {
    margin-top: 5pt;
}

.md-search__form {
    background-color: white;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    box-shadow: none;
    color: var(--text-color);
    border-radius: 50pt !important;
    margin-top: 2.5pt;
}

@media screen and (max-width:60em) {
    .md-search__form {
        margin-top: 50pt;
        margin-left: 5pt;
        margin-right: 5pt;
    }
}

@media screen and (min-width: 100em) {
    .md-search__form {
        margin-top: 1.25pt;
    }

    .md-header__title {
        margin-top: -2pt;
    }
}

@media screen and (min-width: 125em) {
    .md-search__form {
        margin-top: -1pt;
    }

    .md-header__title {
        margin-top: -1pt;
    }
}

.md-search__form input {
    color: var(--text-color);
}

/* placeholder text color */
.md-search__form input::placeholder {
    color: var(--text-color);
    opacity: 0.5;
}

.md-search-result__item a {
    text-decoration: none !important;
}

.md-search {
    margin-right: 5pt;
}

.md-search__output {
    margin-top: 10pt;
    border-radius: 2pt;
}

div.subtitle {
    position: relative;
    top: -15pt;
    font-size: 18pt;
    opacity: 0.5;
    margin-bottom: 0pt;
    font-weight: 500;
}

p>img:not(.inline-invariant) {
    border-radius: 4pt;
    margin: 10pt;
}

.md-footer {
    margin-top: 220pt;
}

.md-footer-invariant {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 40pt;
    align-items: center;
}

.md-footer-invariant div {
    margin-right: auto;
}

.md-footer-invariant a {
    display: block;
    margin-left: 5pt;
    color: grey;
    opacity: 0.7;
}

img.inline-invariant {
    width: 15pt;
    position: relative;
    top: 0.2em;
    margin-left: 0.1em;
}

.tiles {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20pt;
    margin: -10pt;
}

a.tile {
    display: inline-block;
    flex: 1;
    min-width: 228pt;
    background-color: white;
    border-radius: 5pt;
    padding: 10pt;
    margin: 10pt;
    border: 2pt solid #E5E5E5;
}

a.tile:hover {
    text-decoration: none;
    background-color: rgb(240, 240, 240);
}

a.tile span {
    display: block;
    margin-top: 5pt;
    color: #3A3E60;
}

a.tile span:nth-child(2) {
    font-size: 12pt;
    font-weight: 500;
    opacity: 0.8;
}

.spacer {
    height: 220pt;
}

strong {
    font-weight: 600 !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

blockquote {
    background-color: #fdfdfd;
    border-left: 2pt solid #3E3AFF !important;
    border-radius: 5pt;
    font-size: 12pt;
    padding-right: 5pt;
    border: 2pt solid #3E3AFF;
    background-color: hsl(241, 100%, 99.5%);
    overflow: hidden;
    color: black;
    margin-top: 30pt !important;
    padding-top: 5pt;
}


blockquote p {
    font-size: 12pt !important;
    color: #3A3E60;
}

figure {
    max-width: 400pt !important;
    display: block !important;
    margin: 40pt auto !important;
}

figure.wide {
    max-width: 500pt !important;
}

h1 {
    font-weight: 600 !important;
}

h2,
h3,
h4 {
    margin-top: 40pt !important;
    font-weight: 500 !important;
}

h2 {
    border-top: 1pt solid #e5e5e58e;
    padding-top: 20pt;
    margin-top: 30pt !important;
}

h5 {
    text-transform: none !important;
    border-top: 1pt solid #e5e5e58e;
    padding-top: 10pt;
    font-size: 14pt !important;
    line-height: 10pt !important;
}

h5 span.type {
    font-size: 10pt;
    position: relative;
    top: -0.07em;
    font-family: monospace;
}

h5 span.required:after {
    content: "Required";
    color: red;
    font-size: 10pt;
    margin-left: 10pt;
    font-weight: 400;
    display: inline-block;
}

h5 span.optional:after {
    content: "Optional";
    color: green;
    opacity: 0.5;
    font-size: 10pt;
    margin-left: 10pt;
    font-weight: 400;
    display: inline-block;
}


/* p when preceded by h5 */
h5+p,
h5+p+p,
h5+p+p+p,
h5+p+p+p+p {
    font-size: 12pt !important;
    margin-top: -5pt !important;
}

a {
    text-decoration: underline;
}

.md-nav__list a,
.tiles a {
    text-decoration: none;
}

.jupyter-wrapper .jp-InputArea-editor {
    /* border-radius: 5pt; */
    border: none !important;
}

.jupyter-wrapper .jp-InputArea-editor {
    padding: 5pt;
}

.jupyter-wrapper .jp-InputArea-editor pre {
    font-size: 12pt;
}

.jupyter-wrapper .jp-InputPrompt,
.jupyter-wrapper .jp-CodeCell .jp-Cell-inputWrapper .jp-InputPrompt {
    display: none !important;
}

.jupyter-wrapper .jp-Notebook .jp-Cell:not(.jp-mod-active) .jp-OutputPrompt {
    display: none !important;
}

/* output font size larger */
.jupyter-wrapper .jp-RenderedText.jp-OutputArea-output pre {
    font-size: 12pt;
    border-left: 4pt solid #3d3aff4d;
    padding-left: 8pt;
}

.jupyter-wrapper .jp-Cell-inputArea,
.jupyter-wrapper .jp-Cell-outputArea {
    margin-top: 10pt;
}

/* do not show stderr */
.jupyter-wrapper .jp-RenderedText.jp-OutputArea-output[data-mime-type="application/vnd.jupyter.stderr"] {
    display: none !important;
}

div.highlight {
    font-size: 12pt !important;
}

span.llm::before {
    content: "LLM-based";
    color: white;
    font-size: 8pt;
    position: relative;
    top: -3pt;
    margin-left: 3pt;
    background-color: rgb(199, 130, 199);
    display: inline-block;
    height: 10pt;

    padding: 2pt 4pt;
    border-radius: 4pt;
}

span.llm-badge::before {
    content: "LLM-based";
    color: white;
    font-size: 10pt;
    position: relative;
    top: -3pt;
    margin-left: 3pt;
    background-color: rgb(199, 130, 199);
    display: inline-block;
    height: 18pt;

    padding: 2pt 4pt;
    border-radius: 4pt;
}

span.detector-badge::before {
    content: "Detector";
    color: #eef2ff;
    font-size: 10pt;
    position: relative;
    top: -3pt;
    margin-left: 3pt;
    background-color: var(--primary-blue);
    display: inline-block;
    height: 18pt;

    padding: 2pt 4pt;
    border-radius: 4pt;
}

span.high-latency::before {
    content: "High-Latency";
    color: #eef2ff;
    font-size: 10pt;
    position: relative;
    top: -3pt;
    margin-left: 3pt;
    background-color: var(--primary-red);
    display: inline-block;
    height: 18pt;

    padding: 2pt 4pt;
    border-radius: 4pt;
}

span.parser-badge::before {
    content: "Parser";
    color: #eef2ff;
    font-size: 10pt;
    position: relative;
    top: -3pt;
    margin-left: 3pt;
    background-color: var(--primary-teal);
    display: inline-block;
    height: 18pt;

    padding: 2pt 4pt;
    border-radius: 4pt;
}


.builtin-badge::before {
    content: "Builtin";
    color: #eef2ff;
    font-size: 10pt;
    position: relative;
    top: -3pt;
    margin-left: 3pt;
    background-color: #3A99FF;
    display: inline-block;
    height: 18pt;

    padding: 2pt 4pt;
    border-radius: 4pt;
}

.parser-badge[size-mod="small"]::before {
    font-size: 10pt;
    height: 16pt;
    padding: 0pt 3pt;
    top: 0pt;
    margin-left: 0pt;
}


.builtin-badge[size-mod="small"]::before {
    font-size: 10pt;
    height: 16pt;
    padding: 0pt 3pt;
    top: 0pt;
    margin-left: 0pt;
}


.detector-badge {
    position: relative;
}

.detector-badge:hover::after {
    content: 'Detectors allow you to detect the presence of certain patterns and types of data in an input.';
}


.parser-badge {
    position: relative;
}

.parser-badge:hover::after {
    content: 'Parsers allow you to extract specific types of data from an input.';
}

.high-latency {
    position: relative;
}

.high-latency:hover::after {
    content: 'High-Latency checks may significantly increase the time it takes to process a request. Non-blocking checks are recommended.';
}

.builtin-badge {
    position: relative;
}

.builtin-badge:hover::after {
    content: 'Built-in functions are pre-defined functions that are available for use in your code without requiring any additional imports.';
}

.no-border-top_header {
    border-top: none !important;
    padding-top: 0pt !important;
}

.parser-badge:hover::after,
.detector-badge:hover::after,
.llm-badge:hover::after,
.builtin-badge:hover::after,
.high-latency:hover::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 100%;
    margin-bottom: 5px;
    background: rgba(0, 0, 0, 0.215);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    white-space: nowrap;
    z-index: 99;
    pointer-events: none;
}

.jupyter-wrapper {
    margin-top: -20pt;
}

label.md-nav__title {
    img {
        display: inline;
    }

    background-color: blue;
}

.overview {
    --body-blue: #6a7aff;
    --primary-blue: #3d3affac;
    border-radius: 4pt;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 5pt 20pt;
    align-items: center;
}


.md-sidebar__scrollwrap {
    background-color: #f6f6f6;
    height: calc(100vh - 80pt) !important;
}

.overview .box {
    border-radius: 10pt;
    text-decoration: none;
    background-color: #8993FE;
    border: 2pt solid #8993FE;
    padding: 20pt 10pt;
    margin: 0pt 5pt;
    text-align: center;
    color: white;
    min-height: 60pt;
    display: flex;
    flex-direction: column;
    font-size: 11pt;

    height: 80pt;
    position: relative;
}

.overview .box i.dmore {
    position: absolute;
    top: 32%;
    right: 10pt;
    transform: translateY(-50%);
    font-size: 15pt;
    font-style: normal;
    color: var(--primary-blue);
}

.overview .online {
    border: 2pt dashed var(--primary-blue);
    width: calc(100% - 50pt);
    height: 90pt;
    position: absolute;
    top: calc(-90pt);
    left: -1pt;
    z-index: 0;
    border-top-left-radius: 4pt;
    border-top-right-radius: 4pt;

    display: flex;
    flex-direction: row;
    padding: 4pt;
    padding-left: 0pt;
    padding-top: 20pt;
}

.offline {
    border: 0pt dashed var(--primary-blue);
    width: calc(62.5%);
    left: -1pt;
    z-index: 0;
    border-radius: 15pt;
    background-color: rgba(0, 0, 0, 0.049);

    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 4pt;
    padding-left: 4pt;
    padding-top: 9pt;
    align-items: flex-start;
    justify-content: flex-start;
}

.offline .box {
    width: auto;
    flex: 1;
    min-width: 120pt;
    margin-bottom: 5pt;
}

.offline hr {
    width: 160%;
    position: absolute;
    top: -25pt;
    left: -25%;
    background: none;
    background-color: transparent;
}

.online div.title,
.offline div.title {
    position: absolute;
    top: 4pt;
    left: 4pt;
    font-size: 10pt;
    margin: 0pt;
    padding: 0pt;
    line-height: 1.0;
    z-index: 100;
    border: none;
    color: var(--primary-blue);
}

.overview .box:hover {
    background-color: var(--primary-blue);
    cursor: pointer;
    color: white;
}

.overview .box p,
.overview .box i {
    padding: 0pt;
    margin: 0pt;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.overview .box p {
    font-weight: 500;
}

.overview .box.fill {
    width: 80%;
}

.overview .box.fill-2 {
    width: 20%;
}

.overview .box.clear {
    background-color: white;
    color: var(--primary-blue);
    border: 2pt solid #8993FE;
}

.overview .box.clear:hover {
    background-color: rgb(239, 239, 239);
}

.overview .box.thirdparty:hover {
    background: none;
    cursor: default;
}

.overview .box.main {
    border: none;
    padding: 0pt;
    display: flex;
    width: 45%;
}

.overview .box.main:hover {
    cursor: default;
}

.overview .box.main>.box {
    position: relative;
    left: -6pt;
    top: -0.5pt;
    width: 100%;
}

.overview .box.thirdparty {
    background-color: white;
    color: grey;
    border-width: 2pt;
    border-color: #E5E5E5;
    min-height: auto;
    height: auto;
    white-space: nowrap;
    text-align: center;
}

.overview .box.hidden {
    opacity: 0.0;
}

.overview.small {
    margin-top: 30pt;
    margin-bottom: 30pt;
}


@media print {
    .md-invariant {
        display: none
    }
}

iframe {
    border: 0;
    width: 100%;
    height: fit-content;
}

.btn-invariant {
    border-radius: .1rem;
    cursor: pointer;
    outline-offset: .1rem;
    position: absolute;
    right: 0.5em;
    top: 2em;
    transition: color .25s;
    height: 1.125em;
    width: 1.125em;
    z-index: 1;
    background-image: url("/assets/logo.svg");
    background-size: 1.125em;
}

.md-typeset .md-code__content {
    border-radius: 5pt;
    font-size: 12pt;
}

code {
    border-radius: 5pt;
    border: 2pt solid #E5E5E5;
    background-color: white !important;
}

.md-grid {
    max-width: 100%;
    margin-left: 0pt;
}

.md-content {
    max-width: 40rem;
    margin: auto;
}

.md-header {
    background-color: #f6f6f6;
    height: 41pt;
}

.md-header__topic {
    font-size: 16pt;
    font-family: NeueMontreal, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
    font-weight: 500;
}

.md-header img {
    width: 20pt !important;
    height: 20pt !important;
    margin-right: -3pt;
}

.md-nav__title {
    box-shadow: none !important;
}

.md-nav--primary .md-nav__title[for=__drawer],
.md-nav__title {
    background: transparent !important;
}

blockquote pre {
    position: relative;
    margin-left: -10pt;
}

blockquote pre code {
    border-radius: 0pt !important;
    border-left-width: 0pt;
    border-right-width: 0pt;
}

blockquote pre {
    width: calc(100% + 15pt);
}

ul.md-nav__list {
    font-weight: 400;
}

.md-nav__item.md-nav__item--section.md-nav__item--nested>label {
    color: black !important;
}

.risks blockquote {
    background-color: rgb(254, 243, 243);
    border: 2pt solid var(--primary-red) !important;
}

.risks blockquote>p>strong:first-child {
    margin-bottom: 10pt;
    display: inline-block;
    padding-left: 25pt;

    background: url("../assets/warning.svg") no-repeat 3pt 1pt;
    background-size: 1.2em;
    padding-top: -1pt;
    margin-top: -5pt;
}

.admonition {
    background-color: rgb(254, 243, 243) !important;
    border: 2pt solid var(--primary-red) !important;
    font-size: 12pt;
}

.admonition ul li, .admonition ol li {
    font-size: 12pt !important;
}

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

.admonition .admonition-title {
    background-color: transparent !important;
    margin: 0pt;
    margin-top: 2pt;
    padding: 0pt;
    padding-top: 10pt;
    padding-left: 27.5pt !important;
    background: url("../assets/warning.svg") no-repeat 3pt 1pt;
    background-position: 4pt 12pt;
    background-size: 1.2em;
    font-size: 12pt !important;
    font-weight: 500 !important;
}

.admonition .admonition-title:before {
    mask: none;
    -webkit-mask: none;
    display: none;
}

.admonition.info {
    background-color: rgb(243, 245, 254) !important;
    border: 2pt solid #8766ff !important;
}

.admonition.info .admonition-title {
    background-color: transparent !important;
    background: url("../assets/info.svg") no-repeat 3pt 1pt;
    background-position: 4pt 12pt;
    background-size: 1.2em;
}

.admonition.note {
    background-color: rgb(239, 239, 239) !important;
    border: 0pt solid #e1e1e1 !important;
    box-shadow: none !important;
}

.admonition.note .admonition-title {
    background-color: transparent !important;
    background: url("../assets/code-slash.svg") no-repeat 3pt 1pt;
    background-position: 4pt 12pt;
    background-size: 1.2em;
    font-size: 12pt !important;
}

.md-typeset__table {
    width: 100%;
}

.md-typeset__table table {
    width: 100%;
    table-layout: auto;
}

/* Set minimum widths for the first two columns */
.md-typeset__table th:nth-child(1),
.md-typeset__table td:nth-child(1) {
    width: 22%;
    min-width: 100px;
}

.md-typeset__table th:nth-child(2),
.md-typeset__table td:nth-child(2) {
    width: 25%;
    min-width: 250px;
}

/* Let the description column take up remaining space */
.md-typeset__table th:nth-child(3),
.md-typeset__table td:nth-child(3) {
    width: 50%;
}

.function-type {
    display: inline-block;
    background: #eef2ff;
    color: var(--primary-blue);
    padding-left: 6px;
    padding-right: 6px;
    border-radius: 4px;
    font-size: 0.85em;
    margin-left: 8px;
    font-weight: 500;
    font-family: monospace;
}


.code-caption {
    font-size: 0.65rem;
    color: #666;
    margin-top: -0.5rem;
    padding-left: 4px;
    font-style: italic;
}


.box.secondary {
    position: relative;
}

.box.secondary .top-connector {
    position: absolute;
    top: -18pt;
    left: 50%;
    z-index: -1;
    width: 5pt;
    transform: translateX(-50%);
    height: 18pt;
    background-color: #8993FE;
}

.language-example-trace {
    display: none;
}

.language-guardrail {
    position: relative;
    margin-top: 30pt;
}

@media (max-width: 600px) {
    .language-guardrail {
        margin-top: 30pt !important;
    }
}

.language-guardrail .action-links {
    display: inline-block;
    position: absolute;
    top: -22pt;
    right: 0pt;
    z-index: 10;
    font-size: 10pt;
    display: flex;
    flex-direction: row;
    gap: 10pt;
}

.action-links a.link {
    margin-right: 5pt;
    color: #3A3E60;
    opacity: 0.4;
    transition: opacity 0.2s;
    text-decoration: none !important;
}

.action-links a.link:hover {
    text-decoration: none;
    color: var(--md-accent-fg-color);
    opacity: 1.0;
}

.boolean-value-true {
    color: var(--md-code-hl-keyword-color);
    font-weight: 500;
    font-family: monospace;
}

.boolean-value-false {
    color: var(--md-code-hl-function-color);
    font-weight: 500;
    font-family: monospace;
}

.md-typeset ul li,
.md-typeset ol li {
    font-size: 14pt;
}

.md-sidebar--primary .md-sidebar__scrollwrap {
    overflow-y: visible;
}

.md-header__title {
    padding-left: 30pt;
    padding-top: 2pt;
    background: url("../assets/logo.svg") no-repeat 5pt 60%;
    background-size: 20pt;
    color: var(--text-color);
}

.md-header__inner .md-header__button.md-logo {
    width: 210pt;
    position: absolute;
    top: 0pt;
    left: 0pt;
    height: 35pt;
    border-radius: 4pt;

    background-color: rgba(0, 0, 0, 0.0);
}

.md-header__inner .md-header__button.md-logo:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.md-header__inner .md-header__button.md-logo img {
    display: none;
}

.md-header__inner label.md-header__button.md-icon[for=__drawer] {
    border: 1pt solid #E5E5E5;
    border-radius: 5pt;
    padding: 2.5pt;
    margin: 4pt;
    margin-top: 8pt;
    margin-left: 7pt;
}

.md-dialog {
    background-color: #3a3e60;
    border-radius: 15pt;
    line-height: 10pt;
    padding-left: 15pt;
    font-weight: 500;
    height: 30pt;
}

.styled-figure {
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 800pt !important;
    padding: 10pt;
    background-color: rgb(238, 238, 238);
    border-radius: 4pt;
}

.styled-figure.half {
    max-width: 500pt !important;
}

.styled-figure img {
    border: 1pt solid #efefef;
    border-radius: 4pt;
}

.styled-figure figcaption {
    margin-top: 5pt;
    margin-bottom: -2.5pt;
}

.rounded-figure {
    border-radius: 10pt;
}

strong .twemoji {
    margin-right: 3pt;
}

.format-explainer .off {
    font-weight: 500;
}

.format-explainer b {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
    text-align: center !important;
    display: block;
    margin-bottom: 10pt;
    font-size: 12pt !important;
}

.format-explainer code {
    border-radius: 4pt;
    border-width: 0pt;
    background-color: rgba(255, 255, 255, 0.402) !important;
}

.format-explainer {
    display: flex;
    flex-direction: row;
    gap: 20pt;
    margin-top: 40pt;
    padding: 10pt;
    background-color: #f0f0f0;
    border-radius: 10pt;
    padding-bottom: 40pt;
    position: relative;
}

.md-typeset .format-explainer figcaption {
    position: absolute;
    bottom: 5pt;
    left: 0pt;
    font-size: 10pt;
    color: #666;
    z-index: 10;
    display: block;
    text-align: center;
    max-width: 100%;
    width: 100%;
}

.format-explainer img {
    height: 300pt;
    margin-left: 20pt;
}

.format-explainer .graph {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.format-explainer .graph .node {
    background-color: #e4e4e4;
    border-radius: 15pt;
    min-width: 180pt;
    max-width: 50%;
    width: 220pt;
    text-align: center;
    padding: 5pt;
    cursor: pointer;
}

.format-explainer .graph .node:hover,
.format-explainer .graph .node.active {
    background-color: #406dff3d;
}

.format-explainer .graph .edge {
    width: 2pt;
    height: 20pt;
    background-color: grey;
}

.format-explainer .graph .node .node {
    width: auto;
    margin: 0pt;
    max-width: auto;
    min-width: 150pt;
    width: calc(100% - 10pt);
    margin-left: auto;
    margin-right: auto;
    margin-top: 5pt;
    border-radius: 12.5pt;
    background-color: rgba(0, 0, 0, 0.116);
}

.format-explainer .graph .node .node:hover {
    background-color: #406dff3d;
}


.format-explainer .examples {
    width: 50%;
    font-family: monospace;
    white-space: pre;
    overflow-x: auto;
    font-size: 10pt;

    /* hide scrollbar */
    scrollbar-width: none;
    -webkit-scrollbar-width: none;
}

.format-explainer .examples .highlight.active {
    background-color: #406dff3d;
    border-radius: 4pt;
}

.format-explainer .examples .edge-spacer {
    height: 12pt;
    width: 2pt;
}

.format-explainer .examples pre {
    overflow-x: auto;
}

.tabbed-labels a {
    text-decoration: none;
}