.chosen-container + .help-inline
  vertical-align: middle

/** chosen select boxes -- replace sprite icons with FontAwesome icons

.chosen-select
  display: inline !important
  /* for validation plugin to work it must be displayed
  visibility: hidden
  opacity: 0
  position: absolute
  z-index: -1

.chosen-container, [class*="chosen-container"]
  vertical-align: middle

.chosen-container > .chosen-single, [class*="chosen-container"] > .chosen-single
  line-height: 26px
  height: 26px
  box-shadow: none
  background: #eee

.chosen-choices
  box-shadow: none !important

.chosen-container-single
  .chosen-single abbr
    background: none
    &:after
      content: "\f00d"
      display: inline-block
      color: #888
      font-family: FontAwesome
      font-size: 13px
      position: absolute
      right: 0
      top: -7px
    &:hover:after
      color: #464646
  &.chosen-disabled .chosen-single abbr:hover:after
    color: #464646

.chosen-single div b
  background: none !important
  &:before
    content: "\f0d7"
    display: inline-block
    color: #888
    font-family: FontAwesome
    font-size: 12px
    position: relative
    top: -1px
    left: 1px

.chosen-container-active.chosen-with-drop .chosen-single div b:before
  content: "\f0d8"

.chosen-container-single .chosen-search
  position: relative
  input
    background: none
    border-radius: 0
    line-height: 28px
    height: 28px

.chosen-container-multi .chosen-choices
  .search-choice .search-choice-close
    background: none
    &:before
      content: "\f00d"
      display: inline-block
      color: #888
      font-family: FontAwesome
      font-size: 13px
      position: absolute
      right: 2px
      top: -1px
    &:hover
      text-decoration: none
      &:before
        color: #464646
  .search-choice-focus .search-choice-close:before
    color: #464646

.chosen-container
  .chosen-results-scroll-down span, .chosen-results-scroll-up span
    background: none
  .chosen-results-scroll-down span:before
    content: "\f0d7"
    display: inline-block
    color: #888
    font-family: FontAwesome
    font-size: 12px
    position: relative
    top: -1px
    left: 1px
  .chosen-results-scroll-up span:before
    content: "\f0d7"
    display: inline-block
    color: #888
    font-family: FontAwesome
    font-size: 12px
    position: relative
    top: -1px
    left: 1px
    content: "\f0d8"

.chosen-container-active .chosen-single-with-drop div b:before
  content: "\f0d8"

.chosen-rtl .chosen-search
  input
    background: none
  &:after
    content: ""
    display: none
  &:before
    content: "\f002"
    display: inline-block
    color: #888
    font-family: FontAwesome
    font-size: 14px
    position: absolute
    top: 9px
    left: 12px

/** chosen - etc

.chosen-container-single .chosen-single
  border-radius: 0

.chosen-container .chosen-results .highlighted
  @include chzn-container-background-color
  color: #FFF

.chosen-container-single .chosen-drop
  @include chzn-container-border-color
  border-bottom: 3px solid color-gradient($SECONDARY_SLATE_BLUE, 120)
  border-radius: 0

.chosen-single.chosen-single-with-drop, .chosen-container-active .chosen-single
  @include chzn-container-border-color

.control-group
  &.error .chosen-single
    border-color: #f09784 !important
  &.info .chosen-single
    border-color: #64a6bc !important
  &.warning .chosen-single
    border-color: #e0c43a !important
  &.success .chosen-single
    border-color: #92bf65 !important

.chosen-rtl
  .chosen-container-single-nosearch .chosen-search, .chosen-drop
    left: -9999px

.chosen-container-active.chosen-with-drop .chosen-single
  @include chzn-container-border-color

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 144dpi)
  .chosen-rtl .chosen-search input
    background-image: none !important
    background-repeat: no-repeat !important
    background-size: auto !important
  .chosen-container-single
    .chosen-single
      abbr, div b
        background-image: none !important
        background-repeat: no-repeat !important
        background-size: auto !important
    .chosen-search input
      background-image: none !important
      background-repeat: no-repeat !important
      background-size: auto !important
  .chosen-container-multi .chosen-choices .search-choice .search-choice-close
    background-image: none !important
    background-repeat: no-repeat !important
    background-size: auto !important
  .chosen-container
    .chosen-results-scroll-down span, .chosen-results-scroll-up span
      background-image: none !important
      background-repeat: no-repeat !important
      background-size: auto !important
