/*
.breadcrumb-arrow {
    direction: rtl !important;
    height: 40px;
    padding: 0;
    line-height: 40px;
    list-style: none;
    background-color: transparent;
}

    .breadcrumb-arrow li a {
        border-radius: 4px 0 0 4px;
        -webkit-border-radius: 4px 0 0 4px;
        -moz-border-radius: 4px 0 0 4px;
    }

    .breadcrumb-arrow li:first-child a {
        border-radius: 0 4px 4px 0;
        -webkit-border-radius: 0 4px 4px 0;
        -moz-border-radius: 0 4px 4px 0;
    }

    .breadcrumb-arrow li a:not(:first-child) {
        padding-right: 15px;
    }

    .breadcrumb-arrow li, 
    .breadcrumb-arrow li a, 
    .breadcrumb-arrow li span {
        display: inline-block;
        vertical-align: top;
    }

        .breadcrumb-arrow li:not(:first-child) {
            margin-left: -5px;
        }

        .breadcrumb-arrow li + li:before {
            padding: 0;
            content: "";
        }

        .breadcrumb-arrow li span {
            padding: 0 10px;
        }

        .breadcrumb-arrow li a, 
        .breadcrumb-arrow li:not(:first-child) span {
            height: 40px;
            padding: 0 25px 0 15px;
            line-height: 40px;
            margin-right: -3px;
        }

        .breadcrumb-arrow li:first-child a {
            padding: 0 10px;
        }

        .breadcrumb-arrow li a {
            position: relative;
            color: var(--breadcrumb-deep);
            text-decoration: none;
            background-color: var(--breadcrumb-light);
            border: 1px solid var(--breadcrumb-light);
        }

        .breadcrumb-arrow li:first-child a {
            padding-left: 10px;
        }

        .breadcrumb-arrow li a:after, 
        .breadcrumb-arrow li a:before {
            position: absolute;
            top: -1px;
            width: 0;
            height: 0;
            content: '';
            border-top: 20px solid transparent;
            border-bottom: 20px solid transparent;
        }

        .breadcrumb-arrow li a:before {
            left: -9px;
            z-index: 3;
            border-right-color: var(--breadcrumb-light);
            border-right-style: solid;
            border-right-width: 11px
        }

        .breadcrumb-arrow li a:after {
            left: -10px;
            z-index: 2;
            border-right: 11px solid var(--breadcrumb-deep);
        }

        .breadcrumb-arrow li a:focus, 
        .breadcrumb-arrow li a:hover {
            background-color: var(--breadcrumb-deep);
            border: 1px solid var(--breadcrumb-deep);
            color: var(--breadcrumb-light);
        }

            .breadcrumb-arrow li a:focus:before,
            .breadcrumb-arrow li a:hover:before {
                border-right-color: var(--breadcrumb-deep);
            }

        .breadcrumb-arrow li a:active {
            background-color: var(--breadcrumb-deep);
            border: 1px solid var(--breadcrumb-deep);
            color: white !important;
        }

            .breadcrumb-arrow li a:active:after, 
            .breadcrumb-arrow li a:active:before {
                border-left-color: var(--deep-gray);
            }

        .breadcrumb-arrow li span {
            background-color: var(--light-pink);
            color: var(--breadcrumb-active);
        }

        .breadcrumb-arrow li:last-child a, 
        .breadcrumb-arrow li:last-child span {
            border-radius: 4px 0 0 4px;
            -webkit-border-radius: 4px 0 0 4px;
            -moz-border-radius: 4px 0 0 4px;
        }
*/


/*.mybreadcrumb {
    padding: 2em 1em 0 0;
}

    .mybreadcrumb li {
        width: 0.6em;
        height: 0.6em;
        text-align: center;
        line-height: 0.6em;
        border-radius: 0.3em;
        background: var(--my-secondary-color);
        margin: 0 3.31em;
        display: inline-block;
        color: white;
        position: relative;
        z-index: 1;
    }

        .mybreadcrumb li::after {
            content: '';
            position: absolute;
            top: 0.26em;
            right: -6.91em;
            width: 7.5em;
            height: 0.1em;
            background: var(--my-secondary-color);
            z-index: 0;
        }

    .mybreadcrumb li:first-child {
        margin-right: 0;
    }

    .mybreadcrumb li:first-child::after {
        display: none;
    }

    .mybreadcrumb .active {
        background: var(--my-secondary-color);
    }

        .mybreadcrumb .active ~ li {
            --deep-grey: #5f656b;
            background: var(--deep-grey);
        }

            .mybreadcrumb .active ~ li::after {
                --deep-grey: #5f656b;
                background: var(--deep-grey);
            }


    .mybreadcrumb li a,
    .mybreadcrumb li span {
        text-decoration: none !important;
        color: var(--my-secondary-color);
        background-color: transparent;
        position: absolute;
        top: -1.5em;
        right: -400%;
        white-space: nowrap;
    }

        .mybreadcrumb li a:first-child {
            right: 0;
        }

    .mybreadcrumb li:last-child span {
        --light-grey: #8f9aa7;
        color: var(--light-grey);
    }*/


.breadcrumb a {
    text-decoration: none !important;
    color: #777;
    transition: all 300ms;
}

    .breadcrumb a:hover {
        background-color: var(--my-secondary-color);
        border-radius: 3rem;
        padding: 0 1rem;
        color: var(--my-light-color);
    }

.breadcrumb i {
    margin-left: 0.5em;
}

.breadcrumb .current {
    color: #c1c2c7;
}

.breadcrumb .active span {
    background-color: #3e3e3e;
    color: #f1f1f1;
    border-radius: 3rem;
    padding: 0 1em;
}
.breadcrumb .active:before {
    content: var(--bs-breadcrumb-divider, ":") !important;
}