:root {
    --max-article-rows: 5;
    --article-link-height: 28px;
    --article-link-padding: 4px;
    --article-link-row-height: var(--article-link-height) + 2 * var(--article-link-padding);
}

.article-nav-loader {
    height: fit-content;
    background-color: white;
    padding: 8px 0;
    box-shadow: 0px 2px 4px rgb(0 0 0 / 14%);
    border-radius: 6px;
    width: 300px !important;
}

/* @HOMEPAGE NAV */

.article-nav {
    margin: 20px 0;
    border-radius: 10px 10px 0px 0px;
}

.article-nav-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.article-nav-item:last-child {
    border-bottom: none;
}

.article-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 20px;
    cursor: pointer;
}

.article-nav-title {
    width: 80%;
    cursor: pointer;
    font-family: 'Avenir Next LT Pro';
}

.article-nav-title a {
    color: black;
}

.article-nav-contact-us {
    font-family: 'Avenir Next LT Pro';
    color: #2f3941 !important;
    text-decoration: none !important;
    width: 100%;
    display: inline-block;
}

.article-nav-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.article-nav-item:last-child {
    border-bottom: none;
}

.article-nav-header.active-header,
.article-nav-section-header.active-header,
.article-nav-subsection-header.active-header,
.article-nav-subsubsection-header.active-header {
    font-weight: 600;
}

.article-nav-title {
    width: 80%;
    cursor: pointer;
    font-family: 'Avenir Next LT Pro';
}

.article-nav-title a {
    color: black;
}

.article-nav-title p {
    margin: 0;
    font-family: 'Avenir Next LT Pro';
}

.article-nav-title-subtext {
    font-size: 12px;
    color: #9a9fa7;
    font-family: 'Avenir Next LT Pro';
}

.article-nav-section-list {
    padding: 0;
}

.article-nav-section-list {
    padding: 0;
}

.article-nav-section-item {
    font-family: 'Avenir Next Lt Pro';
}

.article-nav-section-item a {
    color: #6f6f6f;
}

.article-nav-section-item a p {
    margin: 0;
}

.article-nav-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 8px 20px;
}

.article-nav-header:hover,
.article-nav-section-header:hover,
.article-nav-subsection-header:hover,
.article-nav-subsubsection-header:hover {
    background: #efefef;
}

.article-nav-header.active-header,
.article-nav-section-header.active-header,
.article-nav-subsection-header.active-header,
.article-nav-subsubsection-header.active-header {
    font-weight: 600;
}

.article-nav-section-header p {
    margin: 0;
    color: black;
}

.article-nav-subsection-header,
.article-nav-subsubsection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 5px 20px 5px 30px;
}

.article-nav-subsection-header p,
.article-nav-subsubsection-header p {
    margin: 0;
}

.article-nav-section-article {
    padding: 5px 30px;
}

.article-section {
    background-color: #FFFFFF;
    box-shadow: var(--container-box-shadow);
    margin: 20px 0;
    padding: 10px;
    border-radius: 16px;
}

@media (max-width: 1025px) {
    .article-section {
        margin: 20px 16px;
    }
}

.article-wrapper {
    margin-top: 0;
    padding: 10px 16px;
}

@media (min-width: 768px) {
    .article-wrapper {
        padding: 16px 24px;
    }
}

.article-wrapper>.breadcrumbs {
    margin: 0;
}

.article-wrapper>.breadcrumbs>li:last-of-type::after {
    content: var(--icon-breadcrumbs-chevron);
    display: inline-block;
    vertical-align: middle;
    margin: 0 8px;
}

.article-header {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 0;
    margin-top: 10px;
    padding: 12px 0px;
}

.article-title .icon-lock {
    position: relative;
    left: -5px;
    vertical-align: baseline;
}

.article-title {
    color: #000;
    font-family: var(--font-family-primary);
    font-size: 28px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    margin: 0;
}

.article-info {
    max-width: 100%;
}

.article-content {
    line-height: 1.6;
    word-wrap: break-word;
}

.article-content {
    margin-top: 10px;
}

.article-body {
    font-family: var(--font-family-primary);
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #000;
    letter-spacing: 0.2px;
}

.article-body a,
.article-body a>span {
    color: var(--link-color) !important;
    text-decoration: underline;
}

.article-body a:visited,
.article-body a:visited>span {
    color: var(--link-color-visited) !important;
}

.article-body a:hover,
.article-body a:active,
.article-body a:focus {
    opacity: 80%;
}

.article-body img {
    height: auto;
    max-width: 100%;
}

.article-body ul,
.article-body ol {
    padding-left: 20px;
    list-style-position: outside;
    margin: 20px 0 20px 20px;
}

[dir="rtl"] .article-body ul,
[dir="rtl"] .article-body ol {
    padding-right: 20px;
    padding-left: 0;
    margin-left: 0;
    margin-right: 20px;
}

.article-body ul>ul,
.article-body ol>ol,
.article-body ol>ul,
.article-body ul>ol,
.article-body li>ul,
.article-body li>ol {
    margin: 0;
}

.article-body ul {
    list-style-type: disc;
}

.article-body hr {
    border: 0.5px solid #EDEEEF;
}

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4,
.article-body .headline,
.article-body p,
.article-body .subheadline,
.article-body .caption {
    font-family: var(--font-family-primary);
}

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4 {
    margin: 0;
    padding-top: 12px;
}

.article-body h1 {
    font-size: 34px;
    font-weight: 600;
    line-height: 40px;
}

.article-body h2 {
    font-size: 28px;
    font-weight: 600;
    line-height: 32px;
}

.article-body h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
}

.article-body h4 {
    font-size: 18px;
    font-weight: 600;
    line-height: 20px;
}

.article-body h5 {
    font-size: 18px;
    font-weight: 600;
    line-height: 20px;
}

.article-body h6 {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.article-body h6.emphasis {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.article-body p.body {
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    margin-top: 0;
}

.article-body p.emphasis {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    margin-top: 0;
}

.article-body small {
    display: block;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.article-body small.emphasis {
    display: block;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

.article-body code {
    background: darken(#F7F8F9, 3%);
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 0 5px;
    margin: 0 2px;
}

.article-body pre {
    background: darken(#F7F8F9, 3%);
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 10px 15px;
    overflow: auto;
    white-space: pre;
}

.article-body blockquote {
    border-left: 1px solid #ddd;
    color: lighten(#2F3941, 20%);
    font-style: italic;
    padding: 0 15px;
}

.article-body strong {
    font-weight: 500;
}

.article-body>p {
    margin: 12px 0;
}

.article-body:last-child {
    margin-bottom: 0;
}

.article-body details:not(:last-of-type) {
    border-bottom: 1px solid var(--border-color);
}

.article-body details>summary {
    background-color: #FFFFFF !important;
    padding: 12px 0 !important;
    color: #131414;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    list-style: none;
}

.article-body details>summary::-webkit-details-marker {
    display: none;
}

.article-body details[open]>summary+p {
    border-top: 1px solid var(--border-color);
}

.article-body details[open]>summary~p {
    margin: 0 16px;
    padding: 16px 0;
}

.article-body details[open]>summary~p[style*="background-color"] {
    margin: 0 16px;
    padding: 16px;
}

.article-body details>summary:hover {
    background-color: #F7F8F9 !important;
}

.article-body details>summary:before {
    content: var(--icon-chevron-right);
    border: 1px solid #C8CACF;
    background-color: #FFFFFF;
    border-radius: 50%;
    height: 16px;
    width: 16px;
    margin-right: 12px;
    padding: 12px;
    text-align: center;
    transform: scale(0.8);
}

[dir="rtl"] .article-body details>summary:before {
    content: var(--icon-chevron-right);
    transform: rotate(180deg) scale(0.8);
}

.article-body details[open]>summary:before {
    content: var(--icon-chevron-right);
    transform: rotate(90deg) scale(0.8);
}

.article-body details>summary>strong,
.article-body details>summary>span {
    font-weight: 500;
    font-size: 14px;
}

@media (max-width: 998px) {
    .article-body iframe {
        width: 100% !important;
    }
}

/* Custom Tabs Component */
.article-body .tabs {
    margin-right: 0;
    margin-left: 0;
    padding: 0;
}

.article-csat button:hover {
    text-decoration: underline;
}

.article-csat .article-button-csat-form {
    display: flex;
    margin: 0 auto;
}

.article-go-to-app>div {
    text-align: center;
}

.article-go-to-app>div>h3 {
    font-family: var(--font-family-primary);
    color: #000000;
    padding: 0;
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 25px;
}

.articles-in-section {
    padding: 6px 6px 0 6px;
}

.articles-in-section>h2 {
    font-family: var(--font-family-primary);
    color: #000000;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    padding-bottom: 16px;
    margin-bottom: 0;
}

.articles-list {
    max-height: fit-content;
    overflow-y: hidden;
    padding-left: 8px;
    position: relative;
    transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
}

.articles-in-section:has(.show-more-articles-btn) .articles-list {
    max-height: calc(var(--max-article-rows) * calc(var(--article-link-row-height)))
}

.articles-in-section:has(.show-more-articles-btn) .articles-list::after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 90%);
    width: 100%;
    height: 2.5em;
}

.articles-in-section:has(.show-more-articles-btn) .articles-list-expanded {
    max-height: 1000px;
    transition: max-height 1s ease-in-out;
}

.articles-in-section:has(.show-more-articles-btn) .articles-list-expanded::after {
    content: "";
    height: 0;
}

.show-more-articles-btn {
    display: block;
    padding: 6px 12px;
    min-width: 150px;
    margin: 0 auto;
    min-height: 32px;
    position: relative;
    font-size: 14px;
    line-height: 16px;
    font-family: var(--font-family-primary);
    font-weight: 600;
    color: #444546;
    background-color: #FFF;
    border: 1px solid #D1D3D5;
    cursor: pointer;
    border-radius: 100px;
}

@media (max-width: 450px) {
    .show-more-articles-btn {
        width: 100%;
    }
}

.show-more-articles-btn-hidden {
    display: none;
}

.articles-list>li {
    min-height: var(--article-link-height);
    padding: var(--article-link-padding) 10px var(--article-link-padding) 0;
}

.articles-list>li>a {
    font-family: var(--font-family-primary);
    font-size: 14px;
    line-height: 18px;
    color: #0894FA;
    text-decoration: underline;
}

.articles-list>li>a:hover {
    font-weight: 600;
}

.articles-list-spinner {
    height: calc(var(--max-article-rows) * var(--article-link-row-height));
    display: flex;
    justify-content: center;
    align-items: center;
}

.related-articles {
    padding: 0 6px 6px 6px;
}

.related-articles-title {
    font-family: var(--font-family-primary);
    font-style: normal;
    color: #000000;
    font-size: 16px;
    line-height: 25px;
    font-weight: 500;
    padding: 16px 0;
    margin-bottom: 0;
}

.related-articles ul {
    padding-left: 8px;
}

.related-articles ul>li {
    padding: var(--article-link-padding) 10px var(--article-link-padding) 0;
}

.related-articles ul>li>a {
    font-family: var(--font-family-primary);
    font-size: 14px;
    line-height: 18px;
    color: #0894FA;
    text-decoration: underline;
}

.related-articles ul>li>a:hover {
    font-weight: 600;
}

.geo-banner-article>.geo-banner-root {
    margin-bottom: 20px;
}

@media (min-width: 1070px) {
    .article-nav {
        grid-area: nav;
        height: fit-content;
        background-color: white;
        box-shadow: var(--container-box-shadow);
        border-radius: 6px;
        width: 300px !important;
    }

    .categories {
        grid-area: shortcuts;
        background-color: white;
        border-radius: 6px;
        height: fit-content;
        box-shadow: 0px 2px 4px rgb(0 0 0 / 14%);
    }

    .article-nav-icon-bg {
        display: none;
    }

    .article-nav-header {
        border: unset;
    }

    .article-nav {
        margin-top: unset;
    }

    #showMoreOrLess {
        display: none;
    }

    .article-more-questions {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px 0;
        gap: 40px;
    }

    .article-more-questions h4 {
        margin: 0;
    }

    .contact-us-btn-article {
        background-color: #343a40;
        color: white !important;
        padding: 10px 20px;
    }

    .article-nav-header,
    .article-nav-section-header {
        flex-flow: row;
        justify-content: unset;
        gap: 10px;
    }

    .article-nav-section-header {
        justify-content: unset;
    }

    .icon-chevron-right {
        order: 3;
    }

    .icon-flag,
    .icon-ghost,
    .icon-lock,
    .icon-person,
    .icon-question {
        order: 1;
        width: 15px;
        height: 15px;
        margin-top: -3px;
    }

    .article-nav-title,
    .article-nav-section-header p,
    .article-nav-subsection-header p,
    .article-nav-subsubsection-header p {
        order: 2;
        flex: 1;
    }

    .article-nav-subsection-header,
    .article-nav-subsubsection-header {
        justify-content: unset;
        gap: 8px;
    }
}

@media (max-width: 1070px) {
    #v-article-nav {
        display: none;
    }

    .article-container {
        justify-content: center;
        width: 100%;
    }

    .article {
        max-width: unset;
    }

    .geo-banner-article {
        margin-right: 16px;
        margin-left: 16px;
    }
}