/* See Bootstrap's @screen-sm-min */
@media (min-width: 768px) {
  .navbar-nav > li.dropdown-split > a {
    /**
     * We have two anchors in the same menu entry: one has the label and the caret for extra small screens (phones,
     * where the menu is displayed vertically) and the other has the caret for larger screens (where the menu is
     * displayed horizontally).
     */
    display: inline-block;
  }
  .navbar-nav > li.dropdown-split > a.dropdown-split-left {
    border: 0 none;
    border-right: 1px solid transparent;
    padding-right: 5px;
  }
  .navbar-nav > li.dropdown-split:hover > a.dropdown-split-left {
    border-color: #777; /* fallback in case linear-gradient is not supported */
    border-image: linear-gradient(to bottom, transparent, #777, transparent) 0 1 0 0;
  }
  .navbar-nav > li.dropdown-split > a.dropdown-split-left > .caret {
    /* Hide the caret used for extra small screens. */
    display: none;
  }
  .navbar-nav > li.dropdown-split > a.dropdown-split-right {
    padding-left: 5px;
  }
}
