/**** Base ****/
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    font-family: "Lato", Helvetica, Arial, sans-serif;
    font-size: 100%;
}

body {
    margin: 0;
    background: #f8f8fa;
    color: #424b5f;
    line-height: 1.625;
}

input[type="search"]:focus {
    outline: 0;
}

a {
    background-color: transparent;
    color: #00c6ff;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.125em;
    -webkit-transition: color .3s ease;
    transition: color .3s ease;
}

    a:hover {
        color: #424b5f;
    }

.anchor {
    margin-left: 4px;
    visibility: hidden;
}

h1:hover .anchor,
h2:hover .anchor,
h3:hover .anchor,
h4:hover .anchor,
h5:hover .anchor,
h6:hover .anchor {
    visibility: visible;
}

.pointer {
    cursor: pointer;
}


/**** Site Header ****/
.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    width: 100%;
    box-sizing: border-box;
}


.site-title {
    color: #178ec7;
    font-weight: normal;
    font-size: 1.5em;
    line-height: 1.2;
    margin: 0;
}


.site-logo {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjusts the horizontal spacing between the image and the text */
}

.site-search {
    display: flex;
    justify-content: center;
    /* Keeps the search bar from shrinking or expanding wildly */
    flex: 0 0 auto;
}

    .site-search input[type="search"] {
        width: 400px; /* Adjust width as needed */
        padding: 8px 12px;
        line-height: 1.5;
        border: 1px solid #ccc;
        border-radius: 4px;
        font-size: 1.2em;
    }

/**** Main article ****/
.div-article {
    overflow-wrap: anywhere;
    word-break: break-word;
}

    .div-article table {
        font-size: 0.8em;
        border-collapse: collapse;
    }
        /* Article tables with 3 or more columns, 100% width. */
        .div-article table:has(th:nth-child(3)) {
            width: 100%;
            table-layout: fixed;
        }

        /* Article tables with 2 or fewer columns, auto size. */
        .div-article table:has(th:nth-child(3)) {
            width: auto;
            table-layout: auto;
        }

    .div-article th, .div-article td {
        border: 1px solid #ddd;
        padding: 3px 4px;
        white-space: normal;
    }


/**** Search results ****/
.search-results li {
    padding: 0.625em 1.875em;
}

/* List of sections for a search result */
.search-results ul {
    list-style: none;
    padding-left: 0;
    font-size: 90%;
    marker: none;
}

    .search-results ul div {
        overflow: hidden;
        white-space: nowrap;
        margin: 0;
        padding: 0;
        line-height: 1.1;
    }

@media (min-width: 800px) {
    .search-results ul {
        column-count: 2;
        column-gap: 2rem;
    }
}

.search-results ul li {
    break-inside: avoid;
    padding: 7px;
}

.search-score {
    font-style: italic;
    font-size: smaller;
}


/**** Document category badges, "How To", "Release Notes", etc. ****/
/* Base style */
.badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    margin-right: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transform: translateY(-1px); /* slightly tighten alignment with adjacent links */
}

/* General */
.badge-gen {
    background-color: #f1f5f9;
    color: #334155;
}
/* How To */
.badge-how {
    background-color: #e0f7f7;
    color: #0f766e;
}
/* Tutorial */
.badge-tut {
    background-color: #eaf7ea;
    color: #2e7d32;
}
/* Release Notes */
.badge-new {
    background-color: #fff4e5;
    color: #b26a00;
}
/* Pipeline Script Guide */
.badge-psg {
    background-color: #e5e7eb;
    color: #5c4b5f;
}
/**** Articles menu (left menu) ****/
#docs-menu {
    color: #283040;
    font-weight: bold;
    line-height: 1.5;
    list-style: none;
    margin: 0;
    padding: 0;
}

    #docs-menu .current {
        color: #00c6ff;
        font-weight: 600;
    }

    #docs-menu a {
        color: inherit;
        display: block;
        text-decoration: none;
    }

        #docs-menu a:hover {
            color: #00c6ff;
        }

.docs-menu-item {
    margin-left: 0.0em;
    margin-bottom: 0.5rem;
}

    .docs-menu-item.has-children {
        padding-right: 0;
        // 30px;
        position: relative;
    }

        .docs-menu-item.has-children.active .docs-submenu {
            display: block;
        }

        .docs-menu-item.has-children.active > .docs-submenu-toggle .icon-angle-right {
            -webkit-transform: rotate(135deg);
            transform: rotate(135deg);
        }

.icon-angle-right {
    background: 0;
    border-color: currentColor;
    border-style: solid;
    border-width: 1px 1px 0 0;
    box-sizing: border-box;
    height: 8px;
    left: 50%;
    margin-left: -4px;
    margin-top: -4px;
    position: absolute;
    top: 50%;
    width: 8px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.docs-submenu {
    border-left: 0;
    /*border-left: 1px solid #dde0e7;*/
    padding-left: 1.1em;
    color: #424b5f;
    display: none;
    font-size: 0.9375em;
    font-weight: normal;
    list-style: none;
    margin-top: 0.625rem;
    padding-left: 1.25rem;
}

.docs-submenu-toggle {
    background: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
    cursor: pointer;
    display: block;
    font-size: inherit;
    height: 30px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
}

.menu-section-title {
    font-size: 1.2em;
}

.submenu-section-title {
    font-size: 1.0em;
    margin-left: 0.4em;
}

.docs-nav {
    margin-bottom: 1.875em;
}

    .docs-nav .docs-nav-toggle {
        color: #283040;
        font-size: 1.125em;
        margin: 0;
        padding-right: 30px;
        text-align: left;
        width: 100%;
    }

    .docs-nav .docs-submenu-toggle {
        color: #67758d;
        position: absolute;
        right: 0;
        top: 0;
    }
/**** Main content ****/

.main-content {
    background: #fff;
    border: 1px solid #dde0e7;
    border-radius: 5px;
    /*    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);*/
    padding: 0.0em 1.0em;
    min-width: 70%;
}

    .main-content img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        max-width: fit-content
    }

/**** Jump to section ****/

.jts a {
    color: #424b5f;
    display: block;
    text-decoration: none;
}

    .jts a:hover {
        color: #00c6ff;
    }

    .jts a.active {
        font-weight: 600;
        color: #00c6ff;
    }

.jts-H1 {
    font-size: 1.0em;
    font-weight: bold;
}

.jts-H2 {
    font-size: 0.9em;
    margin-left: 0.8em;
}

.jts-H3 {
    font-size: 0.9em;
    margin-left: 1.6em;
}

.jts-H4 {
    font-size: 0.8em;
    margin-left: 2.4em;
}

.jts-H5 {
    font-size: 0.8em;
    margin-left: 3.2em;
}

.jts-H6 {
    font-size: 0.8em;
    margin-left: 4.0em;
}

/*** Code blocks ****/
pre,
code,
kbd,
samp {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1em;
}

pre {
    background: #283040;
    border-radius: 3px;
    color: #f8f8fa;
    font-size: 0.875em;
    line-height: 1.5;
    margin: 2.14286em 0;
    overflow: auto;
    padding: 1.5em;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
}

/* style and colours copied from node_modules\codemirror\theme\material.css and classes renamed for Rouge classNames produced by jekyll */
.highlighter-rouge .highlight .k /* .cm-keyword */ {
    color: #c792ea;
}

.highlighter-rouge .highlight .ow /* .cm-operator */ {
    color: #89ddff;
}

.highlighter-rouge .highlight .vi,
.highlighter-rouge .highlight .vg,
.highlighter-rouge .highlight .vc {
    color: #f07178;
}

.highlighter-rouge .highlight .cm-builtin {
    color: #ffcb6b;
}

.highlighter-rouge .highlight .cm-atom {
    color: #f78c6c;
}

.highlighter-rouge .highlight .m,
.highlighter-rouge .highlight .mi,
.highlighter-rouge .highlight .mf /* cm-number */ {
    color: #ff5370;
}

.highlighter-rouge .highlight .cm-def {
    color: #82aaff;
}

.highlighter-rouge .highlight .s {
    /* .cm-string */
    color: #c3e88d;
}

.highlighter-rouge .highlight .s2 {
    /* cm-string-2 */
    color: #f07178;
}

.highlighter-rouge .highlight .c /* cm-comment */ {
    color: #546e7a;
}

.highlighter-rouge .highlight .nv /* .cm-variable */ {
    color: #f07178;
}

.highlighter-rouge .highlight .nt {
    /* .cm-tag */
    color: #ff5370;
}

.highlighter-rouge .highlight .cm-meta {
    color: #ffcb6b;
}

.highlighter-rouge .highlight .na {
    /* .cm-attribute */
    color: #c792ea;
}

.highlighter-rouge .highlight .nl {
    /* cm-property*/
    color: #c792ea;
}

.highlighter-rouge .highlight .cm-qualifier {
    color: #decb6b;
}