@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;600;700&display=swap');

html[data-theme='dark'] {
    --ifm-navbar-background-color: #1a1b23;
    --ifm-background-color: #1a1b21;
    --ifm-background-surface-color: #242736;

    --ifm-font-color-base: #f2f3fb;

    --ifm-pre-background: #242736;

    --ifm-color-primary: #5d9df1;
    --ifm-link-color: #5d9df1;
    --ifm-heading-color: #f2f3fb;
    --ifm-navbar-link-color: #f2f3fb;
    --ifm-menu-color-active: #b2b8cc;

    --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.1);

    --docsearch-text-color: #8c93a8;
    --docsearch-highlight-color: #f3f4fa;

    --color-background: #1a1b21;
    --color-background-subtle: #2a2d39;
    --color-background-muted: #252832;
    --color-field-background: #101114;
    --color-separator: #343847;
    --color-border: #414758;
    --color-card-background: #1e2027;
    --color-card-background-hover: #252832;
    --color-text: #f3f4fa;
    --color-text-subtle: #8c93a8;
    --color-text-muted: #b2b8cc;
    --color-text-on-primary: #1a1b21;
    --color-text-placeholder: #6e758a;
    --color-black-action: #fff;
    --color-icon: #b2b8cc;
    --color-hover: #2d313e;
    --color-primary-action-hover: #d1d5e4;
}

:root {
    /* use default system font based on https://devhints.io/css-system-font-stack */
    --ifm-font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    --ifm-heading-font-family: 'Lota Grotesque', sans-serif;
    --ifm-font-weight-semibold: 600;
    --ifm-font-color-base: #242736;

    --ifm-navbar-item-padding-horizontal: 0;
    --ifm-navbar-item-padding-vertical: 0;
    --ifm-navbar-sidebar-width: 100%;

    --ifm-navbar-link-color: #41465d;
    --ifm-navbar-shadow: none;

    --ifm-heading-margin-top: var(--ifm-heading-margin-bottom);
    --ifm-hero-background-color: transparent;

    --ifm-code-background: var(--ifm-pre-background) !important;
    --ifm-code-padding-horizontal: 0.4rem;
    --ifm-code-padding-vertical: 0.2rem;

    --ifm-color-primary-lightest: #5d9df1;
    --ifm-color-primary-lighter: #3a87ee;
    --ifm-color-primary-light: #2e80ed;
    --ifm-color-primary: #1672eb;
    --ifm-color-primary-dark: #1266d5;
    --ifm-color-primary-darker: #1161c9;
    --ifm-color-primary-darkest: #0e50a6;

    --ifm-link-color: hsl(214, 84%, 50%);
    --ifm-link-hover-color: hsl(214, 84%, 65%);
    --ifm-link-hover-decoration: none;
    --ifm-pre-padding: 1.6rem;

    --ifm-footer-background-color: #272c3d;
    --ifm-footer-title-color: #f2f3fb;
    --ifm-footer-link-color: #f2f3fb;
    --ifm-menu-color-active: #555d76;
    --max-layout-width: 1680px;

    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
    --docsearch-highlight-color: #242836;

    --ifm-heading-color: #242736;

    --docsearch-text-color: #6c7590;
    --docsearch-highlight-color: #242836;

    --color-background: #fff;
    --color-background-subtle: #f3f4fa;
    --color-background-muted: #f8f9fc;
    --color-field-background: #f8f9fc;
    --color-separator: #e0e3f2;
    --color-border: #d0d5e9;
    --color-card-background: #fff;
    --color-card-background-hover: #f8f9fc;

    --color-text: #242836;
    --color-text-subtle: #6c7590;
    --color-text-muted: #555d76;
    --color-text-on-primary: #fff;
    --color-text-placeholder: #969eb8;
    --color-black-action: #272d3e;
    --color-icon: #555d76;
    --color-hover: #eef0f8;
    --color-primary-action-hover: #2b3143;
}

footer,
nav {
    --max-layout-width: 1200px;
}

@font-face {
    font-family: 'Lota Grotesque';
    src: url('/font/lota.woff2') format('woff2'),
         url('/font/lota.woff') format('woff');
    font-weight: 600;
}

.footer__title {
    font-size: 1.25rem;
    font-weight: 600;
}

html .DocSearch-Button {
    border-radius: 6px !important;
    font-weight: 400 !important;
    background: var(--color-field-background) !important;
    border: 1px solid var(--color-border) !important;
    width: 256px;
    height: 40px;
    padding: 0;
    padding-inline: 4px;

    /* Annoying, but needed */
    /* https://stackoverflow.com/questions/26140050/why-is-font-family-not-inherited-in-button-tags-automatically/26140154 */
    font-family: inherit;

    color: var(--color-text-placeholder);

    &:hover {
        color: var(--color-text-muted);
        box-shadow: none !important;
        background: var(--color-field-background) !important;
    }
}
.DocSearch-Button-Placeholder {
    display: block !important;
    font-size: 16px !important;
}

.DocSearch-Search-Icon {
    display: none;
}

div[class*="navbarSearchContainer"] {
    position: static;
}

html[data-theme="dark"] .DocSearch-Button {
    background: none;
    border: 1px solid var(--docsearch-muted-color);
}

html[data-theme="dark"] .DocSearch-Button .DocSearch-Search-Icon {
    color: var(--docsearch-muted-color);
}

html.plugin-pages .main-wrapper {
    overflow-x: hidden;
}

.main-wrapper > div {
    max-width: var(--max-layout-width);
}

aside > div > a {
    padding-left: 16px;
}

aside > div > a > b {
    display: none;
}

@media (max-width: 1200px) {
    .navbar__toggle {
        display: inherit;
    }
    .navbar__item {
        display: none;
    }
}

@media (max-width: 767px) {
    .navbar__items--right > div,
    .navbar__items--right > a {
        display: none;
    }
}

.navbar__toggle {
    margin: 0;
    padding: 8px !important;

    svg {
        color: var(--color-icon);
        width: 20px;
        height: 20px;
    }
}

.navbar__title {
    /* Replaced by SVG */
    display: none;
}

.navbar__inner {
    /* .container */
    max-width: var(--max-layout-width);
    margin: auto;
    width: 100%;
}

.navbar__items {
    height: 28px;
    @media (min-width: 768px) {
        height: 40px;
    }
}

.navbar__items--right {
    gap: 16px;
}

.navbar__item, .navbar__link {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px; /* 150% */
    padding: 0;
    color: var(--color-text);
    border-radius: 12px;

    &:hover,
    &:focus {
        color: var(--color-text-muted);
        background: var(--color-background-muted);
    }
}

.navbar__item {
    padding: 4px 8px;
}

.navbar__item.dropdown {
    padding: 4px 16px 4px 8px;
    a {
        display: inline-flex;
    }
}

.navbar__link--active {
    color: var(--color-text-muted);
    background: var(--color-background-muted);
}

.dropdown > .navbar__link::after {
    border-color: currentColor;
    border-style: solid;
    border-width: 0.1em 0.1em 0 0;
    content: '';
    display: inline-block;
    height: 0.3em;
    left: 0.3em;
    position: relative;
    vertical-align: top;
    width: 0.3em;
    top: 8px;
    transform: rotate(135deg);
}

.navbar {
    border-bottom: 1px solid var(--color-separator);
    height: auto;
    background: var(--color-background);

    padding: 16px;

    @media (min-width: 768px) {
        padding: 20px 40px;
    }
    @media (min-width: 1024px) {
        padding: 20px 64px;
    }
}

nav[class*='navbarHidden'] {
    div[class*='navbarLogo'] {
        display: none;
    }
}

.navbar .icon {
    font-size: 0;
    padding: 4px;
    margin-left: 20px;
    line-height: 0;
}

.navbar .icon::before {
    content: '';
    display: block;
    width: 24px;
    height: 24px;
    background-size: cover;
}

.navbar svg[class*="iconExternalLink"],
aside svg[class*="iconExternalLink"] {
    display: none;
}

header.hero div[class^="heroButtons"] {
    justify-content: inherit;
}

article .card h2 {
    margin-top: 0;
}

.tsd-kind-icon,
.menu__link,
.table-of-contents__link {
    text-overflow: ellipsis;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.tsd-flag {
    user-select: none;
}

.menu__caret:before,
.menu__link--sublist:after {
    float: right;
}

.table-of-contents__link {
    height: 20px;
}

nav.navbar .dropdown__menu {
    top: 32px;

    min-width: 6rem;
    background: var(--color-card-background);
    border: 1px solid var(--color-border);
}

.dropdown__menu .dropdown__link {
    width: 100%;
    border-radius: 8px;
}

.dropdown__menu .dropdown__link--active {
    color: var(--color-text-muted);
    background: var(--color-background-muted);
}

.dropdown__menu .dropdown__link:hover,
.dropdown__menu .dropdown__link--active:hover {
    background: var(--color-background-muted);
    color: var(--color-text-muted);
}

.navbar__logo {
    height: 2rem;
}

.navbar__logo_appendix {
    margin-left: -30px;
    font-weight: bold;
}

.navbar__logo_appendix_sidebar {
    display: block;
    position: absolute;
    top: 18px;
    left: 213px;
}

.main-wrapper {
    align-items: safe center;
}

.main-wrapper > div {
    width: calc(min(100%, var(--max-layout-width))) !important;
}

.main-wrapper a[class*="sidebarLogo"] {
    margin: 0;

    b {
        display: none;
    }

    img {
        height: 28px;
        margin-top: 4px;
        margin-bottom: 24px;
        margin-left: 24px;
    }
}

div[class*="sidebarViewport"] {
    top: 22px;
}

html.plugin-pages {
    font-size: 18px;
    line-height: 32px;
}

html.plugin-pages h2 {
    font-size: 36px;
    line-height: 48px;
}

html.plugin-docs .theme-doc-markdown {
    font-size: 18px;
    line-height: 32px;
}

html.plugin-docs .theme-doc-markdown h1 {
    font-weight: 600;
    font-size: 48px;
    line-height: 64px;
    color: #000;
}

html[data-theme="dark"].plugin-docs .theme-doc-markdown h1 {
    color: #fff;
}

html.plugin-typedoc-api .theme-doc-markdown h1 {
    color: #000;
}

html[data-theme="dark"].plugin-typedoc-api .theme-doc-markdown h1 {
    color: #fff;
}

html.plugin-docs .theme-doc-markdown h2 {
    font-size: 36px;
    line-height: 48px;
}

html.plugin-docs .theme-doc-markdown h3 {
    font-size: 28px;
    line-height: 36px;
    /*color: #242736;*/
}

.theme-doc-toc-desktop .table-of-contents {
    font-size: 16px;
    line-height: 24px;
}

.theme-doc-sidebar-menu .menu__link,
.theme-doc-toc-desktop .table-of-contents .toc-highlight {
    height: auto;
    color: #6f7490;
    background: none;
}

.theme-doc-sidebar-menu .menu__link:hover {
    background: inherit;
}

.theme-doc-sidebar-menu .menu__link {
    font-weight: 400;
}

.theme-doc-sidebar-menu .menu__link--active {
    font-weight: 700;
    color: var(--color-text-muted);
}

.theme-doc-sidebar-menu .menu__list-item-collapsible,
.theme-doc-sidebar-menu .menu__list-item-collapsible--active {
    background: none;
}

.theme-doc-toc-desktop .table-of-contents .table-of-contents__link--active {
    font-weight: 700;
}

html[data-theme='dark'] .theme-doc-sidebar-menu .menu__link,
html[data-theme='dark'] .theme-doc-toc-desktop .table-of-contents .toc-highlight {
    color: #b3b8d2;
}

html[data-theme='dark'] .theme-doc-sidebar-menu .menu__link--active,
html[data-theme='dark'] .theme-doc-toc-desktop .table-of-contents .table-of-contents__link--active {
    color: #f2f3fb;
}

.theme-doc-sidebar-menu .menu__link:hover,
.theme-doc-sidebar-menu .menu__link--active,
.theme-doc-toc-desktop .table-of-contents .table-of-contents__link:hover,
.theme-doc-toc-desktop .table-of-contents .table-of-contents__link--active {
    color: #242736;
}

.hero {
    position: relative;
}

.apiItemContainer .tsd-readme h1:first-child {
    display: none;
}

html .theme-doc-sidebar-container {
    border: 0;
}

html .theme-doc-sidebar-container button {
    border: 0;
    border-radius: 10px;
}

html .table-of-contents {
    border-left: 0;
}

html .table-of-contents ul {
    border-left: 2px solid #dfe2f5;
}

html.plugin-typedoc-api .theme-doc-sidebar-menu > li:first-child::before,
html.plugin-typedoc-api .theme-doc-sidebar-menu > li:nth-child(6)::before {
    text-transform: uppercase;
    font-size: 18px;
    line-height: 28px;
    color: #6f7490;
    padding: 20px 12px;
}

/*
html.plugin-typedoc-api .theme-doc-sidebar-menu > li:first-child::before {
    display: block;
    content: 'Core';
}

html.plugin-typedoc-api .theme-doc-sidebar-menu > li:nth-child(6)::before {
    display: block;
    content: 'Advanced';
    padding-top: 60px;
}
 */

#giscus-comments {
    display: block;
    margin-top: 50px;
}

.video-container {
    margin: 85px auto 0;
    max-width: 560px;
    overflow: hidden;
    position: relative;
    width: 100%;
    border-radius: 10px;
}

.yt-lite > .lty-playbtn {
    border: 0;
    cursor: pointer;
}

@media screen and (min-width: 768px) {
    .runnable-code-block .code-block.no-title pre + div {
        position: absolute;
        right: 170px;
        line-height: 28px;
    }
}

.runnable-code-block .code-block button {
    height: 36px;
    margin-top: 1px;
}

.runnable-code-block:hover .code-block button {
    opacity: 0.4;
}

html[data-theme='dark'] .runnable-code-block svg .apify-logo {
    fill: #fff;
}

/*
 * Reset the line-number counter for each .prism-code scope
 */
.prism-code {
    counter-reset: line-number;
}

/*
 * Notice the chained .language-ts class name to .prism-code
 * You can chain more languages in order to add line numbers
 */
.prism-code.language-ts .token-line::before,
.prism-code.language-typescript .token-line::before,
.prism-code.language-javascript .token-line::before,
.prism-code.language-json .token-line::before,
.prism-code.language-json5 .token-line::before,
.prism-code.language-python .token-line::before,
.prism-code.language-dockerfile .token-line::before,
.prism-code.language-XML .token-line::before,
.prism-code.language-js .token-line::before,
.prism-code.language-python .token-line::before {
    counter-increment: line-number;
    content: counter(line-number);
    margin-right: calc(var(--ifm-pre-padding) * 0.8);
    text-align: right;
    min-width: 1.5rem;
    display: inline-block;
    opacity: .3;
    position: sticky;
    left: var(--ifm-pre-padding);
}

div[class^="announcementBar_"] {
    background: #4585b6;
    color: #fff;
}

div[class^="announcementBar_"] button {
    color: #fff;
}

.markdown blockquote {
    --ifm-alert-background-color: var(--ifm-color-info-contrast-background);
    --ifm-alert-background-color-highlight: rgba(84,199,236,.15);
    --ifm-alert-foreground-color: var(--ifm-color-info-contrast-foreground);
    --ifm-alert-border-color: var(--ifm-color-info-dark);
    --ifm-code-background: var(--ifm-alert-background-color-highlight);
    --ifm-link-color: var(--ifm-alert-foreground-color);
    --ifm-link-hover-color: var(--ifm-alert-foreground-color);
    --ifm-link-decoration: underline;
    --ifm-tabs-color: var(--ifm-alert-foreground-color);
    --ifm-tabs-color-active: var(--ifm-alert-foreground-color);
    --ifm-tabs-color-active-border: var(--ifm-alert-border-color);
    background-color: var(--ifm-alert-background-color);
    border: var(--ifm-alert-border-width) solid var(--ifm-alert-border-color);
    border-left-width: var(--ifm-alert-border-left-width);
    border-radius: var(--ifm-alert-border-radius);
    box-shadow: var(--ifm-alert-shadow);
    padding: var(--ifm-alert-padding-vertical) var(--ifm-alert-padding-horizontal);
}

.tsd-parameters li {
    margin-bottom: 16px;
}

.tsd-parameters-title {
    font-size: 16px;
    margin-bottom: 16px !important;
}

.tsd-returns-title {
    font-size: 16px;
}

.DocSearch-Button-Key {
    background: var(--color-background-subtle) !important;
    box-shadow: none !important;
    border: 1px solid var(--color-border) !important;
    padding: 0 !important;
    color: var(--color-text-muted) !important;
}

.navbar-sidebar__brand {
    border-bottom: 1px solid var(--color-separator);
    flex-direction: column;
    height: auto;
    padding: 0;
}

.menu-primary {
    padding: 0;
    .menu__list-item {
        border-bottom: 1px solid var(--color-separator);
        margin: 0px 24px !important;
        a {
            margin: 8px 0px 4px;
            padding: 8px;
        }
        display: flex;
    }
    .menu__link {
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
    }
}

.navbar-sidebar__close {
    margin-left: 16px;
    svg {
        g {
            stroke: var(--color-icon);
        }
        width: 32px;
        height: 32px;
        padding: 8px;
    }
}

.DocSearch-Modal {
    font-family: var(--ifm-font-family-base);

    border-radius: 8px !important;
    border: 1px solid var(--color-border) !important;
    background: var(--color-card-background) !important;
    box-shadow: none !important;

    button {
        font-family: var(--ifm-font-family-base);
    }

    .DocSearch-Logo {
        display: none;
    }

    .DocSearch-Footer {
        flex-direction: row;
        border-top: 1px solid var(--color-border);
        background: var(--color-background);
        box-shadow: none;
    }

    .DocSearch-Label {
        color: var(--color-text-subtle);
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
    }

    .DocSearch-Commands-Key {
        border-radius: 4px;
        border: 1px solid var(--color-border);
        background: var(--color-background-subtle);
        box-shadow: none;
        g {
            stroke: var(--color-text-subtle);
        }
    }

    .DocSearch-Clear {
        color: var(--color-text-subtle);
    }

    .DocSearch-Form {
        border-radius: 6px;
        border-radius: var(--Radius-6, 6px);
        border: 1px solid var(--color-border);
        background: var(--color-background);
        box-shadow: none;
        height: 40px;
        padding: 8px 12px;
    }

    .DocSearch-Input {
        color: var(--color-text);
        font-size: 14px;
        line-height: 20px;
        padding: 0;
    }

    .DocSearch-Input::placeholder {
        color: var(--color-text-placeholder);
        font-style: italic;
    }

    .DocSearch-Search-Icon {
        width: 16px;
        height: 16px;
        path {
            stroke: var(--color-text-muted);
        }
    }

    .DocSearch-Reset {
        display: none;
    }

    .DocSearch-Help {
        color: var(--color-text-subtle);
    }

    .DocSearch-Hit-source {
        color: var(--color-text-subtle);
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        padding-bottom: 4px;
        padding-left: 12px;
        background: var(--color-card-background);
    }

    .DocSearch-Hit {
        background: transparent;
        a {
            background: transparent !important;
            padding: 0;
            box-shadow: none;
        }
        a:hover {
            background: var(--color-hover) !important;
        }
    }

    .DocSearch-Hit[aria-selected='true'] a {
        background: var(--color-hover) !important;
    }

    .DocSearch-Hit-Container {
        background: transparent;
        height: 50px;
    }

    .DocSearch-Screen-Icon {
        display: none;
    }

    .DocSearch-NoResults {
        margin: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 16px 8px;
        gap: 24px;

        .DocSearch-Title {
            color: var(--color-text);
            font-size: 16px;
            font-weight: 500;
            line-height: 24px;
            width: fit-content;
            margin: 0;
        }
    }

    .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-title,
    .DocSearch-Hit-title {
        color: var(--color-text) !important;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px; /* 150% */
    }

    .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-path,
    .DocSearch-Hit-path,
    .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-action,
    .DocSearch-Hit-action,
    .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-icon,
    .DocSearch-Hit-icon,
    .DocSearch-Hit[aria-selected='true'] .DocSearch-Hit-Tree,
    .DocSearch-Hit-Tree {
        color: var(--color-text-muted) !important;
    }

    .DocSearch-Hit[aria-selected='true'] mark,
    .DocSearch-Hit mark {
        color: var(--color-text-subtle) !important;
    }

    .DocSearch-Help {
        color: var(--color-text-subtle);
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
    }

    .DocSearch-NoResults-Prefill-List {
        padding: 0;
        li {
            list-style-type: none;
            margin-top: 4px;
        }
    }

    .DocSearch-Prefill {
        color: var(--color-text);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        &:hover {
            color: var(--color-text-subtle);
            text-decoration: none;
        }
    }

    .DocSearch-HitsFooter {
        color: var(--color-text-subtle);
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;

        a {
            border: none;
        }

        a:hover {
            color: var(--color-text);
        }
    }

    .DocSearch-Hit-icon {
        margin-left: 8px;
        width: auto;
        height: auto;
        svg {
            width: 16px;
            height: 16px;
        }
    }

    li[id*='recentSearches'] {
        .DocSearch-Hit-icon {
            display: none;
        }
    }

    .DocSearch-SearchBar {
        padding: 16px 16px 8px;
    }

    .DocSearch-Hit-Select-Icon {
        display: none !important;
    }

    .DocSearch-Dropdown {
        padding: 0 8px;
    }

    .DocSearch-Cancel {
        color: var(--color-text-subtle);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        &:hover {
            color: var(--color-text);
        }
    }

    .DocSearch-NoResults-Prefill-List ul {
        padding: 0;
    }
}
