.breadcrumb,
.coursefilesbreadcrumb,
.adminpagepath {
  display: flex;
  flex-wrap: wrap;

  padding: 0;
  margin: 0 0 1.5rem 0;

  list-style: none;

  font-size: 0.75rem;
  color: $body-color-light;
}

  .adminpagepath {
    width: 100%;
    padding: 5px 1.5rem;

    background-color: $gray-100;
    border-radius: $border-radius;

    .adminpagepath-item + .adminpagepath-item {
      &:before {
        display: inline-block; // Suppress underlining of the separator in modern browsers
        padding-right: 0.4375rem;
        padding-left: 0.4375rem;

        content: "-";
      }
    }
  }

  #page-navbar, .page-title {
    @include media-breakpoint-only(sm) {
      div {
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
      }
    }
  }

.breadcrumb-item,
.coursefilesbreadcrumb {
  // The separator between breadcrumbs (by default, a forward-slash: "/")
  + .breadcrumb-item::before {
    display: inline-block; // Suppress underlining of the separator in modern browsers
    padding-right: 0.4375rem;
    padding-left: 0.4375rem;

    content: "-";
  }

  &.dimmed_text {
    &:before {
      background-color: transparent;
    }
  }

  a {
    color: $body-color-light;

    &:hover {
      color: $link-color!important;
    }

    @include media-breakpoint-between(sm,md) {
      font-size: $font-size-xs;
    }
  }

  &.active,
  &:hover {
    color: $body-color;
  }

  &:last-child {
    font-weight: $font-weight-sm-bold;

    a { color: rgba($body-color-light, 0.8); }

    @include media-breakpoint-between(sm,md) {
      font-size: $font-size-xs;
    }
  }

}