#page-navbar {
    .page-header-headings h1 {
        font-size: 1.34375rem;
    }
    .breadcrumb {
        padding: 0.5em 1em;
        background-color: $body-bg;
        border-radius: .25em;

        &:after {
            content: "";
            display: table;
            clear: both;
        }

        li {
            display: inline-block;
            float: left;
            margin: 0.5em 0;

            &:after {
                /* this is the separator between items */
                display: inline-block;
                content: '\00bb';
                margin: 0 .6em;
                color: #959fa5;
            }
            &:before {
                content: '';
                padding: 0;
            }

            .no-link {
                background-color: #f7f7f7;
                border-color: #f7f7f7;
            }
        }
    }
    .breadcrumb li:last-of-type::after {
        /* hide separator after the last item */
        display: none;
    }
    .breadcrumb li > * {
        /* single step */
        display: inline-block;
        color: #2c3f4c;
    }
    .breadcrumb li.current > * {
        /* selected step */
        color: #96c03d;
    }
    .no-touch .breadcrumb a:hover {
        /* steps already visited */
        color: #96c03d;
    }

    .breadcrumb {
        padding: 0;
        background-color: transparent;
    }
    .breadcrumb li {
        position: relative;
        padding: 0;
        margin: 4px 4px 4px 0;
    }
    .breadcrumb li::after {
        margin: 0 1em;
    }
    .breadcrumb li > * {
        position: relative;
        padding: .4em .8em .4em 1.5em;
        color: #2c3f4c;
        background-color: $body-bg;
        /* the border color is used to style its ::after pseudo-element */
        border-color: $body-bg;
    }

    .breadcrumb li:last-of-type {
        margin-right: 0;
    }

    .breadcrumb li.current > * {
        /* selected step */
        color: #fff;
        background-color: #96c03d;
        border-color: #96c03d;
    }

    .breadcrumb li:first-of-type > * {
        padding-left: 1.6em;
        border-radius: .25em 0 0 .25em;
    }

    .breadcrumb li:last-of-type > * {
        padding-right: 1.6em;
        border-radius: 0 .25em .25em 0;
    }

    .no-touch .breadcrumb a:hover {
        /* steps already visited */
        color: #fff;
        background-color: #2c3f4c;
        border-color: #2c3f4c;
    }

    .breadcrumb li::after,
    .breadcrumb li > *::after {
        content: '';
        position: absolute;
        top: 0;
        left: 100%;
        height: 0;
        width: 0;
        border: 17px solid transparent;
        border-right-width: 0;
        border-left-width: 10px;
    }

    .breadcrumb li::after {
        /* this is the white separator between two items */
        z-index: 1;
        -webkit-transform: translateX(4px);
        -moz-transform: translateX(4px);
        -ms-transform: translateX(4px);
        -o-transform: translateX(4px);
        transform: translateX(4px);
        border-left-color: #fff;
        margin: 0;
    }

    .breadcrumb li > *::after {
        /* this is the colored triangle after each element */
        z-index: 2;
        border-left-color: inherit;
    }

    .breadcrumb li:last-of-type::after,
    .breadcrumb li:last-of-type > *::after {
        /* hide the triangle after the last step */
        display: none;
    }

    @-moz-document url-prefix() {
        .breadcrumb li::after,
        .breadcrumb li > *::after {
            /* fix a bug on Firefix - tooth edge on css triangle */
            border-left-style: dashed;
        }
    }
}

.dir-rtl #page-navbar .breadcrumb li::after {
    -webkit-transform: translateX(-4px);
    -moz-transform: translateX(-4px);
    -ms-transform: translateX(-4px);
    -o-transform: translateX(-4px);
    transform: translateX(-4px);
    border-right-color: #fff;
}

.dir-rtl #page-navbar .breadcrumb li::after,
.dir-rtl #page-navbar .breadcrumb li>*::after {
    left: 95%;
    border-right-width: 12px;
    border-left-width: 0px;
}
