/*
 * Copyright © 2021 TomTom NV. All rights reserved.
 *
 * This software is the proprietary copyright of TomTom NV and its subsidiaries and may be
 * used for internal evaluation purposes or commercial use strictly subject to separate
 * license agreement between you and TomTom NV. If you are the licensee, you are only permitted
 * to use this software in accordance with the terms of your license agreement. If you are
 * not the licensee, then you are not authorized to use this software in any manner and should
 * immediately return or destroy it.
 */
 
:root {
    --brand-red: #df1b12;
    --brand-blue: #1988cf;
    --brand-white: #ffffff;
    --brand-black: ##0a0e11;
    --gray-very-dark: #18212a;
    --gray-dark: #3c4956;
    --gray-neutral-strong: rgba(128, 128, 128, 0.4);
    --gray-neutral: rgba(128, 128, 128, 0.15);
    --gray-subtle: rgba(128, 128, 128, 0.05);
    --opacity-inactive: 0.7;
    --text: var(--gray-dark);
    --background: var(--brand-white);
    --spacing-small: 0.5rem;
    --spacing-medium: 1rem;
    --spacing-large: 2rem;
    --spacing-xlarge: 3rem;
    --size-header: 5rem;
    --size-button: 3rem;
    --size-font: 16px;
    --size-font-code: 14px;
    --size-max-width: 1200px;
    --size-radius: 0.5rem;
    --size-side-bar: 350px;
    --shadow-default: 0 0.5rem 1rem -0.5rem rgba(0, 0, 0, 0.1);
    --breadcrumb-font-color: var(--text);
    --hover-link-color: var(--brand-blue);
    --average-color: var(--text);
    --footer-height: var(--size-header);
    --footer-padding-top: var(--spacing-xlarge);
    --horizontal-spacing-for-content: var(--spacing-xlarge);
    --mobile-horizontal-spacing-for-content: 8px;
    --bottom-spacing: --spacing-medium;
    --color-scrollbar: var(--gray-neutral-strong);
    --color-scrollbar-track: var(--background);
    font-size: var(--size-font);
}
:root body {
    font-size: var(--size-font);
    color: var(--text);
    background: var(--background);
}
:root input {
    color: var(--text) !important;
}
:root .paragraph {
    margin: var(--spacing-small) 0 !important;
    line-height: 1.75em;
}
:root .paragraph a {
    color: var(--hover-link-color);
}
:root h1,
:root h2,
:root h3,
:root h4,
:root h5,
:root h6 {
    margin-top: 1em;
    color: var(--text);
    font-weight: bold;
}
:root h1 {
    font-size: 3rem;
    font-weight: normal !important;
}
:root h1.cover {
    border-bottom-color: var(--gray-neutral);
}
:root h2 {
    font-size: 2em;
}
:root #leftColumn {
    border: none;
    width: 30vw;
    min-width: var(--size-side-bar);
}

:root #leftColumn #paneSearch #navigation-pane-search {
    border-radius: 4rem;
    background: var(--gray-subtle);
    border-color: var(--gray-neutral);
    padding-right: var(--spacing-large);
    padding-left: var(--spacing-medium);
    font-size: 1rem;
}
:root #leftColumn #paneSearch .paneSearchInputClearIcon {
    margin-right: var(--spacing-small);
}
:root #leftColumn #paneSearch .paneSearchInputClearIcon svg {
    opacity: 0.3;
}
:root #leftColumn #paneSearch .paneSearchInputClearIcon svg * {
    fill: var(--text) !important;
}
:root #leftColumn .sideMenu > .sideMenuPart {
    border-bottom: 1px solid var(--gray-subtle);
    margin-bottom: var(--spacing-small);
}

:root #leftColumn .sideMenu .sideMenuPart .overview:before {
    left: -2rem;
    width: calc(100% + 2rem);
}

:root #leftColumn .sideMenu .sideMenuPart .sideMenuPart .overview:before {
    background: var(--gray-subtle);
}

:root #leftColumn .sideMenu .sideMenuPart .overview {
    display: flex;
    align-items: center;
}

:root #leftColumn .sideMenu .sideMenuPart .overview a {
    color: var(--text);
    /* opacity: var(--opacity-inactive); */
    flex: 1;
    text-overflow: wrap;
    overflow-wrap: break-word;
}

:root #leftColumn .sideMenu .sideMenuPart .overview:hover:before {
    background-color: var(--gray-neutral);
}

:root #leftColumn .sideMenu .sideMenuPart .overview .navButton {
    margin-right: 0;
    width: 1.5rem;
}

:root #leftColumn .sideMenu .sideMenuPart[data-active] > .overview:before {
    background: var(--brand-blue);
    opacity: 0.1;
}

:root #leftColumn .sideMenu .sideMenuPart[data-active] > .overview a {
    opacity: 1;
    font-weight: bold;
}

:root .navigation-wrapper {
    border-bottom: 1px solid var(--gray-neutral);
    height: var(--size-header);
    background: var(--background);
    padding-left: var(--spacing-medium);
    padding-right: var(--spacing-medium);
    box-sizing: border-box;
    align-items: center;
}

:root .navigation-wrapper .search-content {
    background: none;
}
:root .navigation-wrapper .search button {
    background: none;
    width: var(--size-button);
    height: 100%;
}
:root .navigation-wrapper .search button svg {
    opacity: var(--opacity-inactive);
}
:root .navigation-wrapper .search button svg * {
    fill: var(--text);
}

/* LOGO */

:root .library-name a {
    content: " ";
    background-image: url("../images/tomtom-light.svg") !important;
    height: 100%;
    width: 300px;
    background-repeat: no-repeat;
    display: block;
    color: transparent;
    background-size: contain;
    padding: 1rem;
    background-position: left center;
    box-sizing: border-box;
}

@media screen and (max-width: 759px) {
    #leftToggler {
        color: var(--text);
    }

    #leftColumn {
        background: var(--background);
        margin-left: -350px;
    }
}

/* SEARCH */

:root div[data-test="ring-popup"] {
    background-color: var(--gray-very-dark) !important;
    color: var(--brand-white) !important;
    top: var(--size-header) !important;
    margin-top: var(--spacing-medium);
    left: 50% !important;
    transform: translate(-50%, 0);
    border-radius: var(--size-radius);
    box-shadow: 0 2rem 10rem -0.3rem rgba(0, 0, 0, 0.5);
}

:root div[data-test="ring-popup"] input {
    height: var(--size-header);
    color: currentColor !important;
}
:root div[data-test="ring-popup"] div[data-test="ring-select-popup-filter"] {
    display: flex;
    align-items: center;
}

:root div[data-test="ring-popup"] span[data-test-custom="ring-select-popup-filter-icon"] {
    top: initial !important;
}

/* BREADCRUMBS */

:root .breadcrumbs {
    color: currentColor;
}

:root .breadcrumbs a {
    border-bottom: 0 !important;
    margin: var(--spacing-medium);
    opacity: var(--opacity-inactive);
}

:root .breadcrumbs a:first-child {
    margin-left: 0;
}

:root .breadcrumbs a:last-child {
    font-weight: bold;
    opacity: 1;
    margin-right: 0;
}

/* CODE */

:root code {
    color: var(--text);
    font-size: var(--size-font-code);
    background: var(--gray-subtle);
    border-radius: 0.25rem;
    padding: var(--spacing-small);
    margin: var(--spacing-medium) 0;
}
:root code pre {
    color: var(--text);
}
:root .sample-container code {
    border-radius: var(--size-radius);
    padding: var(--spacing-small) var(--spacing-medium);
    border: 1px solid var(--gray-subtle);
}

:root .paragraph {
    color: var(--text) !important;
}

:root .paragraph a {
    color: var(--brand-blue) !important;
    font-size: inherit;
}
:root .symbol {
    background-color: var(--gray-subtle);
    border-radius: var(--size-radius);
    padding: var(--spacing-medium);
    border: 1px solid var(--gray-neutral);
    margin-bottom: var(--spacing-medium);
}
:root .symbol.strikethrough {
    text-decoration: initial;
    position: relative;
    opacity: 0.6;
}
:root .symbol.strikethrough a {
    color: currentColor;
}
:root .symbol.strikethrough::after {
    content: "DEPRECATED";
    position: absolute;
    right: 50px;
    background: var(--brand-red);
    color: white;
    font-size: 0.8em;
    padding: 1px 0.5rem;
    border-radius: 4px;
}
:root .symbol span.copy-icon {
    opacity: var(--opacity-inactive);
}
:root .symbol span.copy-icon:hover {
    opacity: 1;
}
:root .symbol span.copy-icon:hover::before {
    background-color: var(--text);
}
:root .copy-popup-wrapper {
    background: var(--background);
    border-radius: var(--size-radius);
    border: 1px solid var(--gray-neutral);
    padding: var(--spacing-small);
}

:root .main-content > *:not(.navigation-wrapper) {
    max-width: var(--size-max-width);
    margin: var(--spacing-large) auto;
    padding-left: var(--spacing-medium);
    padding-right: var(--spacing-medium);
}
:root .main-content > *:not(.navigation-wrapper):nth-child(2) {
    margin-top: 0;
}
:root .tabs-section .section-tab {
    font-size: var(--size-font);
    opacity: var(--opacity-inactive);
    border-bottom: 2px solid var(--gray-neutral);
}
:root .tabs-section .section-tab[data-active=""] {
    color: var(--text);
    opacity: 1;
    border-bottom: 2px solid var(--brand-blue);
}
:root .tabs-section-body,
:root .divergent-group {
    background-color: transparent;
}
:root .table {
    background: none;
}
:root .table .table-row {
    margin-bottom: var(--spacing-medium);
    background: var(--background);
    color: var(--text);
    border: 1px solid var(--gray-neutral);
    box-shadow: var(--shadow-default);
    border-radius: var(--size-radius);
    padding: var(--spacing-medium);
}
:root .table .table-row .main-subrow {
    grid-template-columns: 30% 70%;
}
:root .table .table-row .main-subrow .inline-flex a {
    color: inherit;
    font-weight: bold;
    border-bottom: none !important;
    word-break: break-word;
}

:root .page-summary {
    background: var(--background);
    border: 1px solid var(--gray-neutral);
    border-right: none;
    border-top-left-radius: var(--size-radius);
    border-bottom-left-radius: var(--size-radius);
}
:root .page-summary:not(.hidden) {
    padding-top: var(--spacing-small);
}
:root .page-summary:not(.hidden) ul li a {
    color: var(--text);
    opacity: var(--opacity-inactive);
}
:root .page-summary:not(.hidden) ul li:hover {
    background: var(--gray-subtle);
}
:root .page-summary:not(.hidden) ul li.selected {
    border-right: 4px solid var(--brand-blue);
    border-left: none;
}
:root .page-summary:not(.hidden) ul li.selected a {
    opacity: 1;
}
:root .footer {
    border-top: 1px solid var(--gray-neutral);
}
:root .footer span.go-to-top-icon {
    background: var(--gray-subtle);
}

/* DARK THEME */
:root #theme-toggle-button {
    background: #18212aaa;
}

:root.theme-dark {
    --text: var(--brand-white);
    --background: var(--gray-very-dark);
    --brand-blue: #3f9cd9;
}

:root.theme-dark .library-name a {
    background-image: url("../images/tomtom-dark.svg") !important;
}

/*# sourceMappingURL=logo-styles.css.map */