#breadcrumb-region .breadcrumb,
.single-app-view .breadcrumb,
.breadcrumb-form-container .breadcrumb {
  background-color: $primary;
  color: white;
  text-transform: uppercase;
  margin: 0;
  padding: 0 10px;
  line-height: 30px;
  font-size: 11px;

  .breadcrumb-item:before, .breadcrumb-item > a {
    color: white;
  }
  .breadcrumb-item:before {
    font-family: "FontAwesome";  // supports bsbreadcrumb-divider: \f054
  }

  // Show only the first and last breadcrumb item
  li {
    display: none;
  }
  li:first-child {
    display: inline-block;
    white-space: nowrap;
  }
  li:last-child {
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

#breadcrumb-region {
  overflow: hidden;
  max-height: 30px;
  width: 100%;
}

.breadcrumb-form {
  width: 100%;
  box-shadow: none;

  li {
    padding-top: 1px;
  }
}

.breadcrumb-form-container {
  position: fixed;
  z-index: 10;
  width: 100%;
  height: $webforms-breadcrumb-height;
  box-shadow: 0 0 5px 2px rgba(0,0,0,.3);
}

.webforms-nav-single-question {
  height: $webforms-nav-height;
}
