.component_breadcrumb {
    position: relative;
    z-index: 5;
}
.component_breadcrumb .breadcrumb {
    margin: 0 0 0px 0;
    z-index: 1000;
}
.component_breadcrumb .breadcrumb .ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 2px 0;
}
.component_breadcrumb .breadcrumb .ul > span {
    display: block;
    flex-grow: 1;
    padding: 7px 7px 7px 0;
}
.component_breadcrumb .breadcrumb .ul div, .component_breadcrumb .breadcrumb .ul .li {
    display: inline-block;
}
.component_breadcrumb .breadcrumb [alt="sidebar-open"] {
    margin-left: -21px;
    margin-right: 5px;
    cursor: pointer;
    display: none;
}
@media screen and (min-width: 1100px) {
    .component_breadcrumb .breadcrumb [alt="sidebar-open"] { display: block; }
}
.component_breadcrumb .component_logout {
    align-self: center;
    padding-right: 10px;
}
.component_breadcrumb .component_logout .component_icon {
    height: 20px;
}
.component_breadcrumb .component_saving {
    padding-left: 1px;
}
.component_breadcrumb .component_path-element {
    display: inline-block;
}
.component_breadcrumb .component_path-element .label {
    color: rgba(0, 0, 0, 0.75);
    padding: 2px 5px;
}
.component_breadcrumb .component_path-element .label:focus-visible .title {
    display: none;
}
.touch-yes .component_breadcrumb .component_path-element .label {
    padding-top: 5px;
    padding-bottom: 5px;
}
.component_breadcrumb .component_path-element .label span { display: inline-block; }
.component_breadcrumb .component_path-element a.label {
    position: relative;
    color: rgba(0, 0, 0, 0.5);
}
.component_breadcrumb .component_path-element a.label span.title {
    position: absolute;
    left: 0;
    background: var(--color);
    color: var(--bg-color);
    font-size: 0.8em;
    opacity: 0;
    transform: translateY(5px);
    border-radius: 3px;
    white-space: nowrap;
    padding: 3px 10px !important;
    margin: 25px 0px 5px 0px;
}
.component_breadcrumb .component_path-element .component_path-element-wrapper {
    font-size: 18px;
    display: inline-block;
}
.component_breadcrumb .component_path-element .component_path-element-wrapper a {
    border-radius: 3px;
    letter-spacing: -0.5px;
}
.component_breadcrumb .component_path-element.highlight .component_path-element-wrapper a {
    color: var(--bg-color);
    background: var(--dark);
    border-radius: 3px;
}
.component_breadcrumb .component_separator img {
    vertical-align: middle;
}

/* Phone like devices */
body.touch-yes component-breadcrumb .ul span {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    white-space: nowrap;
}
body.touch-yes component-breadcrumb .ul span::-webkit-scrollbar {
    height: 0px;
}
body.touch-yes component-breadcrumb .ul span::-webkit-scrollbar-track {
    background: var(--super-light);
}
body.touch-yes component-breadcrumb .ul span::-webkit-scrollbar-thumb {
    background: #d2d2d2;
    border-radius: 1px;
}

/* Dark Mode */
.dark-mode .component_breadcrumb .component_separator img {
    filter: brightness(0.5) invert(1);
}

body.touch-no .component_path-element-wrapper a.label:hover {
    background: var(--border);
}
body.touch-no .component_breadcrumb img[alt="sidebar-open"]:hover {
    filter: drop-shadow(0px 0px 4px #e2e2e2);
}
body.touch-no .component_path-element-wrapper a.label:hover span.title {
    opacity: 1;
    transform: translateY(0px);
    transition: all 0.15s ease-out;
}
body.dark-mode.touch-no .component_path-element-wrapper a.label:hover {
    background: rgba(255, 255, 255, 0.05);
}
.dark-mode .component_breadcrumb .component_path-element .label {
    color: #f1f1f1;
    opacity: 0.7;
}
.dark-mode .component_breadcrumb .component_path-element a.label {
    opacity: 1;
}

/* ANIMATION */
.component_breadcrumb .breadcrumb-enter {
    transform: translateX(10px);
    opacity: 0;
    display: inline-block;
}
.component_breadcrumb .breadcrumb-enter.breadcrumb-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.2s ease-out;
}
.component_breadcrumb .saving_indicator-leave {
    opacity: 1;
}
.component_breadcrumb .saving_indicator-leave.saving_indicator-leave-active {
    opacity: 0;
    transition: all 0.2s ease-out;
}
.component_breadcrumb .saving_indicator-enter, .component_breadcrumb .saving_indicator-appear {
    transform-origin: center;
    animation-name: bounce;
    animation-duration: 0.5s;
}
@keyframes bounce {
    0% {
        transform: scale(0);
    }
    30% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}
