/* Style overrides for the Hubspot Knowledge Base */

:root {
    --primary-body-line-height: 1.6;
    --pm-light-background-color: #EBF6F7;
    --pm-text-size-small: 0.9rem;
}



/* Header */

body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.header__bottom {
    padding: 0 1.5rem 1.1rem !important;
}

.header__logo {
    height: 40px;
}

.header__container--left .header__wrapper--bottom {
    gap: 0.5rem !important;
}

#hs_cos_wrapper_knowledgebase_header .header__nav-link {
    position: absolute;
    top: 1.5rem;
}



/* Search */

.hs-kb-search-input-wrapper .hs-search-field__bar {
    min-height: inherit !important;
}

#hs_cos_wrapper_hs_kb-search-input-module .hs-search-field__bar>form>label {
    display: none;
}

.hs-kb-search-input-wrapper {
    padding: 30px;
}

.hs-search-field__suggestions .results-for {
    display: none;
}

.hs-search-field__suggestions a {
    display: block;
    line-height: inherit;
    padding: 0.5rem 1rem;
}

.hs-search-field__suggestions a:focus,
.hs-search-field__suggestions a:hover {
    background-color: var(--pm-light-background-color);
    color: var(--a-primary-body-font-color);
    text-decoration: none;
}

.hs-search-field__input {
    padding: 0.75rem 0.9rem;
    border-radius: 0.25rem 0 0 0.25rem;
}

.hs-search-field__input:focus {
    outline-style: none;
}

.hs-search-field__button {
    border-radius: 0 0.25rem 0.25rem 0;
}

.hs-search-field__button:hover {
    background-color: var(--pm-light-background-color);
    cursor: pointer;
}

.hs-search-results__title {
    font-size: var(--h4-secondary-header-font-size);
}

.hs-search-field--open .hs-search-field__suggestions,
.inpage-editor-active-field .hs-search-field__suggestions {
    top: -0.25rem;
    padding: 0.25rem 0 0.5rem;
    border: 0;
    border-radius: 0 0 0.25rem 0.25rem;
    box-shadow: 0 15px 25px -15px hsla(0, 0, 50%, 0.75);
}



/* Homepage */

#hs_cos_wrapper_hs_kb-search-input-module .hs-search-field__bar>form>label {
    display: none;
}

.hs-knowledge-listing-page #hs_cos_wrapper_hs_kb-search-input-module .hs-search-field__bar>form>label {
    display: block !important;
}

.hs-knowledge-listing-page .hs-kb-search-input-wrapper .hs-search-field__bar {
    min-height: 280px !important;
}

.hs-kb-category-article-list__link,
.hs-kb-home-list__text__category-link {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0;
    line-height: inherit;
}

.hs-kb-home-list__category h3 {
    margin-bottom: 0.9rem;
}

.hs-kb-home-list__category p {
    margin-bottom: 1rem !important;
    font-size: var(--pm-text-size-small);
    display: none;
}

.hs-kb-home-list__text__category-link {
    margin-top: 0.5rem;
    font-size: var(--pm-text-size-small);
    color: var(--search-field-text-font-color);
}

.hs-kb-home-list__text__category-link:hover {
    color: var(--search-field-text-font-color);
}

.hs-kb-home-list {
    --hs-kb-home-list-gap: 3rem;
}



/* Breadcrumbs */

.hs-kb-breadcrumbs {
    margin-top: 0.5rem !important;
    font-size: var(--pm-text-size-small) !important;
    color: var(--search-field-text-font-color) !important;
}

.hs-kb-breadcrumb_item a,
.hs-kb-breadcrumb_item span {
    color: var(--search-field-text-font-color) !important;
    padding: 0;
}

.hs-kb-breadcrumb_item a:hover {
    text-decoration: underline;
}



/* Sidebar */

.hs-kb-sidebar {
    border-width: 0;
    font-size: var(--pm-text-size-small);
}

.hs-kb-anchor_toggle--active>.hs-kb-category-accordion_link {
    font-weight: normal;
}

.hs-kb-category-accordion_link {
    flex-grow: 1 !important;
    padding: 0.6rem 0.1rem 0.6rem 0.7rem !important;
    color: inherit !important;
}

.hs-kb-category-accordion_link:hover,
.hs-kb-category_accordion_nav_list_item--has-children>.hs-kb-anchor_toggle:hover,
.hs-kb-anchor_toggle--active, .hs-kb-category-accordion_link--active, .hs-kb-category-accordion_link--active:hover,
.hs-kb-category-accordion_link--active .hs-kb-category-accordion_link--active:hover {
    background-color: var(--pm-light-background-color);
    text-decoration: none;
}

.hs-kb-category-accordion_link--active .hs-kb-category_accordion_nav_list {
    background-color: white;
}

.hs-kb-category-accordion_link--active .hs-kb-category-accordion_link--active {
    background-color: inherit;
    font-weight: bold;
}

.hs-kb-category_accordion_nav_list_item--has-children {
    padding: 0;
}

.hs-kb-category_accordion_nav_list_item--has-children input[type=checkbox] {
    top: 0;
    height: 2.5rem;
}

.hs-kb-category_accordion_nav_list_item--has-children .hs-kb-category_accordion_nav_list .hs-kb-category-accordion_link {
    padding: 0.35rem 0.35rem 0.35rem 1.8rem !important;
    text-decoration: none !important;
    font-size: 0.8rem;
}



/* Footer */

.footer hr {
    color: #d9e5f0;
}

.footer p {
    margin-bottom: 0;
}

.footer .widget-type-logo img {
    margin-bottom: 0.25rem;
}

.footer .footer__bottom .footer__bottom--right .hs-kb-social_follow {
    margin-bottom: 0.5rem;
}

.footer .footer__bottom .footer__bottom--left,
.footer .footer__bottom .footer__bottom--right,
.footer .footer__bottom .footer__bottom--right a,
.footer .footer__bottom .footer__bottom--right a:hover {
    color: var(--search-field-text-font-color);
}



/* Article list */

.hs-kb-category-article-list--bordered {
    border-width: 0 !important;
}

.hs-kb-category-listing,
.hs-kb-subcategory-listing {
    border: 0;
}

.hs-kb-category-listing {
    margin-bottom: 0;
}

.hs-kb-category-article-list__toggle {
    color: var(--search-field-text-font-color);
    margin-top: 0.5rem;
}

.hs-kb-category-article-list__toggle:hover {
    color: var(--search-field-text-font-color);
}

.hs-kb-category-article-list__toggle:hover .hs-kb-category-article-list__toggle-text {
    text-decoration: underline;
}

.hs-kb-category-article-list__toggle[aria-expanded=true] {
    display: none;
}



/* Article content */

.hs-kb-content {
    margin-top: 0;
    flex: 2.8;
}

#kb-related-articles h6 {
    margin-top: 0;
}

#kb-related-articles ul li {
    margin: 0;
    font-size: var(--primary-body-font-size);
    line-height: 2;
}