﻿.hia-breadcrumb {
    display: flex;
    overflow: hidden;
    width: 90vw; /* the intent is width: 100%, but this doesn't seem to work in this context */
}

.hia-breadcrumb > :last-child {
    font-weight: bold;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    overflow: hidden;
    min-width: 20px;
}

.breadcrumb-item > * {
    display: flex;
}

.breadcrumb-item * {
    text-wrap: nowrap;
}

.breadcrumb-separator {
    height: 100%;
    color: lightgrey;
    transform: scaleY(2); /* previously this chevron was a background img, this will mimic previous look */
    display:flex;
    justify-content: center;
    width: 14px;
}

.hia-breadcrumb span.breadcrumb-separator {
    font-size: 21px;
}

.hia-hierarchy-breadcrumb .collapsed {
    width: 21px; /* ensure this matches the script that decides collapse state */
}

.hia-hierarchy-breadcrumb .collapsed:hover {
    width: auto;
}