/* breadcrumb3.css */
/* by Mark.Pelf@Codeproject.com, 
   using partly code from Graeme_Grant@codeproject.com  */

.breadcrumb3-lg {
    /* colors taken from bootstrap.css Bootstrap v5.1.0 */
    


    --bs-dark: #212529;
    /* --bs-gray: #6c757d; */
    --bs-gray:#c1c8ce;
    --bs-white: white;
    --bs-black: black;
    /* changeable colors */
    --_color: var(--bs-black);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-gray);
    --_hover-color: var(--bs-white);
    padding-left: 0px;
}

/*@media (max-width: 767px) {*/
    /* making it responsive, using CSS Flexbox with column (vertical) direction*/
    /*.breadcrumb3-lg, .breadcrumb3-md, .breadcrumb3-sm {
        display: flex;
        flex-direction: column;
    }

        .breadcrumb3-lg .breadcrumb3-item {
            width: 80%;
            border-radius: 4px 0 0 4px;
            padding-left: 25px;
        }

        .breadcrumb3-md .breadcrumb3-item {
            width: 80%;
            border-radius: 3px 0 0 3px;
            padding-left: 20px;
        }

        .breadcrumb3-sm .breadcrumb3-item {
            width: 80%;
            border-radius: 3px 0 0 3px;
            padding-left: 18px;
        }
}*/

/* large size breadcrumb3-item -----------------------------------*/
.breadcrumb3-item {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    color: var(--_color);
    background-color: #f8f9fa;
    height: 40px;
    line-height: 18px;
    font-size: 14px;
    text-align: center;
    padding-right: 10px;
    padding-left: 25px;
    text-decoration: none;
}

.breadcrumb3-text {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.breadcrumb3-icon {
    display: table-cell;
    text-align: center;
    line-height: 25px;
    font-size: 25px;
    padding-right: 10px;
    vertical-align: middle;
}

.breadcrumb3-item:first-child {
    border-radius: 4px 0 0 4px;
    padding-left: 25px;
}

.breadcrumb3-item:before,
.breadcrumb3-item:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    position: absolute;
    margin-top: -20px;
    border-bottom: 20px solid transparent;
    left: 100%;
    top: 50%;
}
/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-item:after {
    border-left: 15px solid var(--_arrowbordercolor);
    margin-left: 1px;
    z-index: 2;
}

/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-item:before {
    border-left: 15px solid #f8f9fa;
    margin-left: 0px;
    z-index: 3;
}

.breadcrumb3-item:hover:not(.no-hover-effect),
.breadcrumb3-item:focus:not(.no-hover-effect) {
    background-color: var(--_hover-bgcolor);
    color: var(--_hover-color);
}

    .breadcrumb3-item:hover:not(.no-hover-effect):before,
    .breadcrumb3-item:focus:not(.no-hover-effect):before {
        border-left-color: var(--_hover-bgcolor);
    }

/* remove keyboard navigation focus rectangle */
.breadcrumb3-item:focus-visible {
    outline: none;
}

/* all this to create edge on arrow, creating gray arrow in background */
.breadcrumb3-sm .breadcrumb3-item:after {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 8px solid var(--_arrowbordercolor);
    margin-top: -12px;
    margin-left: 1px;
}

/* this is arrow itself, overwriting gray arrow */
.breadcrumb3-sm .breadcrumb3-item:before {
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 8px solid #f8f9fa;
    margin-top: -12px;
}

.breadcrumb3-lg .secondary, .breadcrumb3-md .secondary, .breadcrumb3-sm .secondary {
    --_color: var(--bs-white);
    #f8f9fa: var(--bs-secondary);
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(0088cc);
    --_hover-color: var(--bs-white);
}

.breadcrumb3-lg .light, .breadcrumb3-md .light, .breadcrumb3-sm .light {
    --_color: var(--bs-black);
   
    --_arrowbordercolor: var(--bs-gray);
    --_hover-bgcolor: var(--bs-gray);
    --_hover-color: var(--bs-white);
}


.breadcrumb3-lg .last-item {
    background-color: var(--_hover-bgcolor);
    color: var(--_hover-color);
}

.breadcrumb3-lg .last-item:before{border-left-color: var(--_hover-bgcolor);}
.breadcrumb3-lg .last-item:after {
    border-left: 15px solid var(--_arrowbordercolor);
    margin-left: 1px;
    z-index: 2;
}