:root {
    --breadcrumb-color-1: #006400;
    --breadcrumb-color-2: #228B22;
    --breadcrumb-color-3: #24AD24;
    --breadcrumb-color-4: #3CB371; /* Max 4 levels breadcrumb */
    --breadcrumb-hover-color: #004400;
}
/* https://css-tricks.com/triangle-breadcrumbs/ */
.breadcrumb { 
    list-style: none; 
    overflow: hidden; 
    font: 18px Sans-Serif;
}
.breadcrumb li { 
    float: left; 
}
.breadcrumb li {
    color: white;
    text-decoration: none; 
    padding: 10px 0 10px 65px;
    background: var(--breadcrumb-color-1);
    background: var(--breadcrumb-color-1); 
    position: relative; 
    display: block;
    float: left;
}
.breadcrumb li a {
    color: white;
    text-decoration: none; 
}

.breadcrumb li::after { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
    border-bottom: 50px solid transparent;
    border-left: 30px solid var(--breadcrumb-color-1);
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    left: 100%;
    z-index: 2; 
}

.breadcrumb li::before { 
    content: " "; 
    display: block; 
    width: 0; 
    height: 0;
    border-top: 50px solid transparent;       
    border-bottom: 50px solid transparent;
    position: absolute;
    top: 50%;
    margin-top: -50px; 
    margin-left: 1px;
    left: 100%;
    z-index: 1; 
}

.breadcrumb li:first-child {
    padding-left: 40px;
}
.breadcrumb li:nth-child(2)       { background:        var(--breadcrumb-color-2); }
.breadcrumb li:nth-child(2):after { border-left-color: var(--breadcrumb-color-2); }
.breadcrumb li:nth-child(3)       { background:        var(--breadcrumb-color-3); }
.breadcrumb li:nth-child(3):after { border-left-color: var(--breadcrumb-color-3); }
.breadcrumb li:nth-child(4)       { background:        var(--breadcrumb-color-4); }
.breadcrumb li:nth-child(4):after { border-left-color: var(--breadcrumb-color-4); }

.breadcrumb li:hover { 
    background: var(--breadcrumb-hover-color); 
}
.breadcrumb li:hover:after { 
    border-left-color: var(--breadcrumb-hover-color) !important; 
}

.breadcrumbs {
    width: 100%;
    background-color: var(--breadcrumb-color-1);
}
.breadcrumbs:has(li:nth-child(2)) {
    background-color: var(--breadcrumb-color-2);
}
.breadcrumbs:has(li:nth-child(3)) {
    background-color: var(--breadcrumb-color-3);
}
.breadcrumbs:has(li:nth-child(4)) {
    background-color: var(--breadcrumb-color-4);
}
.breadcrumbs ul {
    padding-inline-start: 0;
}