ul.nav-wizard li {
    background: #f8f8f8;
}

    ul.nav-wizard li button {
        color: #000;
    }

    ul.nav-wizard li.completed {
        background: #d1e7dd;
    }

    ul.nav-wizard li.active {
        background: #e7e7e7;
    }

.navbar {
    padding-top: 0px;
    padding-bottom: 0px;
}

.navbar-header {
    background-color: #e7e7e7;
    width: 100%;
    padding-left: 16px;
}

.nav-item {
    position: relative;
}

.navbar-default .navbar-nav > .active > button, .navbar-default .navbar-nav > .active > button:focus, .navbar-default .navbar-nav > .active > button:hover {
    background-color: #e7e7e7;
}

.navbar-nav > li > button {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
}

.navbar-collapsed-button {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
    background: none;
    border: 0;
    text-align: left;
    color: #000;
}

    .navbar-collapsed-button:disabled {
        opacity: 0.45;
    }

.navbar-nav > li > button {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
    background: none;
    border: 0;
    width: 100%;
    text-align: left;
}

.nav > li > button {
    position: relative;
    display: block;
    padding: 10px 15px;
}

    .nav > li > button:focus {
        outline: 0;
    }

@media only screen and (min-width: 768px) {

    .container-fluid {
        padding-left: 0px;
        padding-right: 0px;
    }

    .navbar-collapse {
        padding-left: 0px;
        padding-right: 0px;
        width: 100%;
    }

    .navbar {
        border: none;
        border-radius: 0;
        margin-bottom: 15px;
    }

    .navbar-nav > li > button {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    ul.nav-wizard {
        width: 100%;
        display: flex;
        display: -ms-flexbox;
        flex-flow: nowrap;
        -ms-flex-flow: nowrap;
        -webkit-flex-flow: nowrap;
    }

        ul.nav-wizard li {
            padding-left: 15px;
            margin-bottom: 5px;
            min-width: 0%;
            flex: 1 1 auto;
            -ms-flex: 1 1 auto;
            -webkit-flex: 1 1 auto;
        }

            ul.nav-wizard li:last-child {
                padding-right: 10px;
            }

            ul.nav-wizard li button {
                padding-right: 5px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            ul.nav-wizard li:not(:last-child):before {
                position: absolute;
                display: block;
                border: 25px solid transparent;
                border-left: 16px solid #bbbbbb;
                border-right: 0;
                top: 0px;
                z-index: 10;
                content: '';
                right: -16px;
            }

            ul.nav-wizard li:not(:last-child):after {
                position: absolute;
                display: block;
                border: 25px solid transparent;
                border-left: 16px solid #f8f8f8;
                border-right: 0;
                top: 0px;
                z-index: 10;
                content: '';
                right: -15px;
            }

            ul.nav-wizard li.completed:after {
                border-left: 16px solid #d1e7dd;
            }

            ul.nav-wizard li.active {
                flex: 1 0 auto !important;
                -ms-flex: 1 0 auto !important;
                -webkit-flex: 1 0 auto !important;
            }

                ul.nav-wizard li.active:after {
                    border-left: 16px solid #e7e7e7;
                }
}