/* "Guider" in the main menu: a content link, set apart from the product menu. */
.horizontal-list > .np-menu-guides > a.level-top {
    color: #396177 !important;
}

.horizontal-list > .np-menu-guides .np-menu-guides__icon {
    margin-right: 7px;
    vertical-align: -3px;
}

@media (min-width: 1200px) {
    .horizontal-list > .np-menu-guides {
        border-left: 1px solid #e3e3e3;
        margin-left: 10px;
        padding-left: 10px;
    }

    /* Same text baseline as the other items. */
    .horizontal-list > .np-menu-guides > a.level-top {
        display: inline-block;
        line-height: 38px !important;
        padding: 0 16px !important;
        transition: color .2s ease;
    }

    /* Flat in every state, like the rest of the menu: the theme and the
       jQuery UI menu would add a grey background and a coloured bottom
       border on hover, focus and click. The thin line under the text
       (theme 1.0.39) marks hover and focus instead. */
    .horizontal-list > .np-menu-guides > a.level-top,
    .horizontal-list > .np-menu-guides:hover > a.level-top,
    .horizontal-list > .np-menu-guides > a.level-top:hover,
    .horizontal-list > .np-menu-guides > a.level-top:focus,
    .horizontal-list > .np-menu-guides > a.level-top:active,
    .horizontal-list > .np-menu-guides > a.level-top.ui-state-hover,
    .horizontal-list > .np-menu-guides > a.level-top.ui-state-focus,
    .horizontal-list > .np-menu-guides > a.level-top.ui-state-active {
        background: transparent !important;
        border-color: transparent !important;
        box-shadow: none !important;
        outline: none;
        text-decoration: none !important;
        transform: none !important;
    }

    .horizontal-list > .np-menu-guides:hover > a.level-top,
    .horizontal-list > .np-menu-guides > a.level-top:active,
    .horizontal-list > .np-menu-guides > a.level-top:focus-visible {
        color: #2c4d5f !important;
    }

    .horizontal-list > .np-menu-guides > a.level-top:focus-visible {
        outline: 2px solid #396177;
        outline-offset: 2px;
    }
}

@media (max-width: 1199px) {
    .horizontal-list > .np-menu-guides {
        border-top: 1px solid #e6e8eb;
    }

    .horizontal-list > .np-menu-guides > a.level-top,
    .horizontal-list > .np-menu-guides > a.level-top:focus,
    .horizontal-list > .np-menu-guides > a.level-top:active,
    .horizontal-list > .np-menu-guides > a.level-top.ui-state-focus,
    .horizontal-list > .np-menu-guides > a.level-top.ui-state-active {
        background: transparent !important;
        box-shadow: none !important;
    }
}