.divBreadCrumb {
    padding-left: 0px;
    text-align: left;
    width: 100%;
    padding-top: 10px;
    padding-bottom:20px;
}

.cd-breadcrumb, .cd-multi-steps {
    width: 100%;
    padding: 0.5em 1em;
    margin: 0em auto;
    background-color: #edeff0;
    border-radius: .25em;
    font-size: 1rem;
    color: #2c3f4c;
    background-color: #ffffff;
}

    .cd-breadcrumb:after, .cd-multi-steps:after {
        content: "";
        display: table;
        clear: both;
    }

    .cd-breadcrumb li, .cd-multi-steps li {
        display: inline-block;
        float: left;
        margin: 0.5em 0;
    }

        .cd-breadcrumb li::after, .cd-multi-steps li::after {
            /* this is the separator between items */
            display: inline-block;
            content: '\00bb';
            margin: 0 .6em;
            color: #959fa5;
        }

        .cd-breadcrumb li:last-of-type::after, .cd-multi-steps li:last-of-type::after {
            /* hide separator after the last item */
            display: none;
        }

        .cd-breadcrumb li > *, .cd-multi-steps li > * {
            /* single step */
            display: inline-block;
            font-size: 1rem;
            color: #2c3f4c;
        }

        .cd-breadcrumb li.current > *, .cd-multi-steps li.current > * {
            /* selected step */
            color: #96c03d;
        }

        .cd-breadcrumb li.enabled > *, .cd-multi-steps li.enabled > * {
            /* selected step */
            color: #96c03d;
        }

.no-touch .cd-breadcrumb a:hover, .no-touch .cd-multi-steps a:hover {
    /* steps already visited */
    color: #96c03d;
}

.cd-breadcrumb.custom-separator li::after, .cd-multi-steps.custom-separator li::after {
    /* replace the default arrow separator with a custom icon */
    content: '';
    height: 16px;
    width: 16px;
    background: url(../img/cd-custom-separator.svg) no-repeat center center;
    vertical-align: middle;
}

.cd-breadcrumb.custom-icons li > *::before, .cd-multi-steps.custom-icons li > *::before {
    /* add a custom icon before each item */
    content: '';
    display: inline-block;
    height: 20px;
    width: 20px;
    margin-right: .4em;
    margin-top: -2px;
    background: url(../img/cd-custom-icons-01.svg) no-repeat 0 0;
    vertical-align: middle;
}

.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(2) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(2) > *::before {
    /* change custom icon using image sprites */
    background-position: -20px 0;
}

.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(3) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(3) > *::before {
    background-position: -40px 0;
}

.cd-breadcrumb.custom-icons li:not(.current):nth-of-type(4) > *::before, .cd-multi-steps.custom-icons li:not(.current):nth-of-type(4) > *::before {
    background-position: -60px 0;
}

.cd-breadcrumb.custom-icons li.current:first-of-type > *::before, .cd-multi-steps.custom-icons li.current:first-of-type > *::before {
    /* change custom icon for the current item */
    background-position: 0 -20px;
}

.cd-breadcrumb.custom-icons li.current:nth-of-type(2) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(2) > *::before {
    background-position: -20px -20px;
}

.cd-breadcrumb.custom-icons li.current:nth-of-type(3) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(3) > *::before {
    background-position: -40px -20px;
}

.cd-breadcrumb.custom-icons li.current:nth-of-type(4) > *::before, .cd-multi-steps.custom-icons li.current:nth-of-type(4) > *::before {
    background-position: -60px -20px;
}

.cd-breadcrumb, .cd-multi-steps {
    padding: 0 1.2em;
}

    .cd-breadcrumb li, .cd-multi-steps li {
        margin: 1.2em 0;
    }

        .cd-breadcrumb li::after, .cd-multi-steps li::after {
            margin: 0 1em;
        }

        .cd-breadcrumb li > *, .cd-multi-steps li > * {
            font-size: 1rem;
        }

    .cd-breadcrumb.triangle {
        /* reset basic style */
        background-color: transparent;
        padding: 0;
    }

        .cd-breadcrumb.triangle li {
            position: relative;
            padding: 0;
            margin: 4px 4px 4px 0;
        }

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

            .cd-breadcrumb.triangle li > * {
                position: relative;
                padding: 0.5em .8em 0.5em 2.5em;
                color: #2c3f4c;
                background-color: #edeff0;
                /* the border color is used to style its ::after pseudo-element */
                border-color: #edeff0;
            }

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

            .cd-breadcrumb.triangle li.enabled > * {
                /* selected step */
                color: #ffffff;
                background-color: #0E8E78;
                border-color: #0E8E78;
            }


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

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

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

.cd-breadcrumb.triangle li::after, .cd-breadcrumb.triangle li > *::after {
    /* 
    	li > *::after is the colored triangle after each item
    	li::after is the white separator between two items
    */
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    content: '';
    height: 0;
    width: 0;
    /* 48px is the height of the <a> element */
    border: 18px solid transparent;
    border-right-width: 0;
    border-left-width: 20px;
}

.cd-breadcrumb.triangle 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: #ffffff;
    /* reset style */
    margin: 0;
}

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

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

.cd-breadcrumb.triangle.custom-separator li::after {
    /* reset style */
    background-image: none;
}

.cd-breadcrumb.triangle.custom-icons li::after, .cd-breadcrumb.triangle.custom-icons li > *::after {
    /* 50px is the height of the <a> element */
    border-top-width: 25px;
    border-bottom-width: 25px;
}

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

.no-touch .cd-breadcrumb.triangle.custom-icons li:first-of-type a:hover::before, .cd-breadcrumb.triangle.custom-icons li.current:first-of-type em::before, .no-touch .cd-multi-steps.text-center.custom-icons li:first-of-type a:hover::before, .cd-multi-steps.text-center.custom-icons li.current:first-of-type em::before {
    /* change custom icon using image sprites - hover effect or current item */
    background-position: 0 -40px;
}

.no-touch .cd-breadcrumb.triangle.custom-icons li:nth-of-type(2) a:hover::before, .cd-breadcrumb.triangle.custom-icons li.current:nth-of-type(2) em::before, .no-touch .cd-multi-steps.text-center.custom-icons li:nth-of-type(2) a:hover::before, .cd-multi-steps.text-center.custom-icons li.current:nth-of-type(2) em::before {
    background-position: -20px -40px;
}

.no-touch .cd-breadcrumb.triangle.custom-icons li:nth-of-type(3) a:hover::before, .cd-breadcrumb.triangle.custom-icons li.current:nth-of-type(3) em::before, .no-touch .cd-multi-steps.text-center.custom-icons li:nth-of-type(3) a:hover::before, .cd-multi-steps.text-center.custom-icons li.current:nth-of-type(3) em::before {
    background-position: -40px -40px;
}

.no-touch .cd-breadcrumb.triangle.custom-icons li:nth-of-type(4) a:hover::before, .cd-breadcrumb.triangle.custom-icons li.current:nth-of-type(4) em::before, .no-touch .cd-multi-steps.text-center.custom-icons li:nth-of-type(4) a:hover::before, .cd-multi-steps.text-center.custom-icons li.current:nth-of-type(4) em::before {
    background-position: -60px -40px;
}

.bactive {
    background-color: #96C03D !important;
    color: #2c3f4c !important;
}