/* taken from: https://github.com/select2/select2/issues/1951

.select2-container
  margin: 0 0 1rem 0
  position: relative
  vertical-align: middle
  font-family: inherit
  -webkit-appearance: none !important
  background: #fafafa url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg==") no-repeat
  background-position-x: 98%
  background-position-y: center
  font-size: 0.875rem
  &:hover
    background-color: #f2f2f2
    border-color: #999
  /*     
   *     Force border-box so that % widths fit the parent
   *     container without overlap because of margin/padding.
   * 
   *     More Info : http://www.quirksmode.org/css/box.html
  -webkit-box-sizing: border-box
  /* webkit
  -moz-box-sizing: border-box
  /* firefox
  box-sizing: border-box
  /* css3

.select2-drop
  /*     
   *     Force border-box so that % widths fit the parent
   *     container without overlap because of margin/padding.
   * 
   *     More Info : http://www.quirksmode.org/css/box.html
  -webkit-box-sizing: border-box
  /* webkit
  -moz-box-sizing: border-box
  /* firefox
  box-sizing: border-box
  /* css3

.select2-search
  /*     
   *     Force border-box so that % widths fit the parent
   *     container without overlap because of margin/padding.
   * 
   *     More Info : http://www.quirksmode.org/css/box.html
  -webkit-box-sizing: border-box
  /* webkit
  -moz-box-sizing: border-box
  /* firefox
  box-sizing: border-box
  /* css3
  input
    /*     
     *     Force border-box so that % widths fit the parent
     *     container without overlap because of margin/padding.
     * 
     *     More Info : http://www.quirksmode.org/css/box.html
    -webkit-box-sizing: border-box
    /* webkit
    -moz-box-sizing: border-box
    /* firefox
    box-sizing: border-box
    /* css3

.select2-container
  .select2-choice
    display: block
    overflow: hidden
    position: relative
    height: 2.315rem
    border: 1px solid #ccc
    padding: 0.5rem 1rem 0.5rem 0.5rem
    white-space: nowrap
    line-height: 1.3125rem
    color: inherit
    text-decoration: none
    -webkit-touch-callout: none
    -webkit-user-select: none
    -moz-user-select: none
    -ms-user-select: none
    user-select: none
  &.select2-allowclear .select2-choice .select2-chosen
    margin-right: 42px
  .select2-choice
    > .select2-chosen
      margin-right: 1rem
      display: block
      overflow: hidden
      white-space: nowrap
      text-overflow: ellipsis
    abbr
      display: none
      width: 12px
      height: 12px
      position: absolute
      right: 24px
      top: 8px
      font-size: 1px
      text-decoration: none
      border: 0
      background: asset-url("select2.png") right top no-repeat
      cursor: pointer
      outline: 0
  &.select2-allowclear .select2-choice abbr
    display: inline-block
  .select2-choice abbr:hover
    background-position: right -11px
    cursor: pointer

.select2-drop-mask
  border: 0
  margin: 0
  padding: 0
  position: fixed
  left: 0
  top: 0
  min-height: 100%
  min-width: 100%
  height: auto
  width: auto
  opacity: 0
  z-index: 9998
  /* styles required for IE to work
  background-color: #fff
  filter: alpha(opacity = 0)

.select2-drop
  width: 100%
  margin-top: -1px
  position: absolute
  z-index: 9999
  top: 100%
  background: #fafafa
  color: #000
  border: 1px solid #999
  border-top: 0
  outline: none
  -webkit-box-shadow: 0 0 5px #999999
  -moz-box-shadow: 0 0 5px #999999
  box-shadow: 0 0 5px #999999
  padding-top: 2.315rem
  margin-top: -2.315rem

.select2-drop-auto-width
  border-top: 1px solid #aaa
  width: auto
  .select2-search
    padding-top: 4px

.select2-drop.select2-drop-above
  padding-top: 0
  margin-top: 0
  margin-bottom: -4.630rem
  padding-bottom: 2.315rem

.select2-drop-active
  border: 1px solid #999
  border-top: none

.select2-drop.select2-drop-above.select2-drop-active
  border-top: 1px solid #999

.select2-container .select2-choice .select2-arrow
  display: none
  b
    display: block
    width: 100%
    height: 100%
    background: asset-url("select2.png") no-repeat 0 1px

.select2-search
  display: inline-block
  width: 100%
  min-height: 26px
  margin: 0
  padding-left: 4px
  padding-right: 4px
  position: relative
  z-index: 10000
  white-space: nowrap
  input
    width: 100%
    height: auto !important
    min-height: 26px
    padding: 4px 20px 4px 5px
    margin: 0
    outline: 0
    font-family: sans-serif
    border: 1px solid #aaa
    -webkit-box-shadow: none !important
    box-shadow: none !important
    background: #fff asset-url("select2.png") no-repeat 100% -22px

.select2-drop.select2-drop-above .select2-search input
  margin-top: 4px

.select2-search input.select2-active
  background: #fff asset-url("select2-spinner.gif") no-repeat 100%

.select2-container-active
  .select2-choice, .select2-choices
    border: 1px solid #999
    outline: none
    -webkit-box-shadow: 0 0 5px #999
    box-shadow: 0 0 5px #999

.select2-dropdown-open
  .select2-choice
    border-bottom-width: 0
    background: #fafafa
    z-index: 10000
    box-shadow: none
  &.select2-drop-above
    .select2-choice, .select2-choices
      border-top-color: #ccc
      border-bottom-width: 1px
  .select2-choice .select2-arrow
    background: transparent
    border-left: none
    filter: none
    b
      background-position: -18px 1px

/* results

.select2-results
  max-height: 200px
  padding: 0 0.25rem
  margin: 0.25rem 0
  position: relative
  overflow-x: hidden
  overflow-y: auto
  font-size: 0.875rem
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
  ul.select2-result-sub
    margin: 0
    padding-left: 0
    > li .select2-result-label
      padding-left: 20px
    ul.select2-result-sub
      > li .select2-result-label
        padding-left: 40px
      ul.select2-result-sub
        > li .select2-result-label
          padding-left: 60px
        ul.select2-result-sub
          > li .select2-result-label
            padding-left: 80px
          ul.select2-result-sub
            > li .select2-result-label
              padding-left: 100px
            ul.select2-result-sub
              > li .select2-result-label
                padding-left: 110px
              ul.select2-result-sub > li .select2-result-label
                padding-left: 120px
  li
    list-style: none
    display: list-item
    background-image: none
    &.select2-result-with-children > .select2-result-label
      font-weight: bold
  .select2-result-label
    padding: 0.25rem
    margin: 0
    cursor: pointer
    min-height: 1em
    -webkit-touch-callout: none
    -webkit-user-select: none
    -moz-user-select: none
    -ms-user-select: none
    user-select: none
  .select2-highlighted
    background: #3875d7
    color: #fff
  li em
    background: #feffde
    font-style: normal
  .select2-highlighted
    em
      background: transparent
    ul
      background: #fff
      color: #000
  .select2-no-results, .select2-searching, .select2-selection-limit
    background: transparent
    display: list-item
    padding: 0.25rem
    color: #999
    font-style: italic
  .select2-disabled
    &.select2-highlighted
      color: #666
      background: #f4f4f4
      display: list-item
      cursor: default
    background: #f4f4f4
    display: list-item
    cursor: default
  .select2-selected
    display: none

/*
 *disabled look for disabled choices in the results dropdown

.select2-more-results
  &.select2-active
    background: #f4f4f4 asset-url("select2-spinner.gif") no-repeat 100%
  background: #f4f4f4
  display: list-item

/* disabled styles

.select2-container.select2-container-disabled .select2-choice
  background-color: #f4f4f4
  background-image: none
  border: 1px solid #ddd
  cursor: default
  .select2-arrow
    background-color: #f4f4f4
    background-image: none
    border-left: 0
  abbr
    display: none

/* multiselect

.select2-container-multi .select2-choices
  height: auto !important
  height: 1%
  margin: 0
  padding: 0
  position: relative
  border: 1px solid #aaa
  cursor: text
  overflow: hidden
  background-color: #fff
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eee), color-stop(15%, #fff))
  background-image: -webkit-linear-gradient(top, #eee 1%, #fff 15%)
  background-image: -moz-linear-gradient(top, #eee 1%, #fff 15%)
  background-image: linear-gradient(top, #eee 1%, #fff 15%)

.select2-locked
  padding: 3px 5px 3px 5px !important

.select2-container-multi
  .select2-choices
    min-height: 26px
  &.select2-container-active .select2-choices
    border: 1px solid #999
    outline: none
    -webkit-box-shadow: 0 0 5px #999
    -moz-box-shadow: 0 0 5px #999
    box-shadow: 0 0 5px #999
  .select2-choices
    li
      float: left
      list-style: none
    .select2-search-field
      margin: 0
      padding: 0
      white-space: nowrap
      input
        padding: 5px
        margin: 1px 0
        font-family: sans-serif
        font-size: 100%
        color: #666
        outline: 0
        border: 0
        -webkit-box-shadow: none
        box-shadow: none
        background: transparent !important
        &.select2-active
          background: #fff asset-url("select2-spinner.gif") no-repeat 100% !important

.select2-default
  color: #999 !important

.select2-container-multi .select2-choices
  .select2-search-choice
    /* padding: 3px 5px 3px 18px;
    padding: 0.5rem 0.5rem 0.5rem 1rem
    margin: 3px 0 3px 5px
    position: relative
    line-height: 13px
    color: #333
    cursor: default
    border: 1px solid #aaaaaa
    -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05)
    box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05)
    background-clip: padding-box
    -webkit-touch-callout: none
    -webkit-user-select: none
    -moz-user-select: none
    -ms-user-select: none
    user-select: none
    background-color: #e4e4e4
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0)
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee))
    background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%)
    background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%)
    background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%)
    .select2-chosen
      cursor: default
  .select2-search-choice-focus
    background: #d4d4d4

.select2-search-choice-close
  display: block
  width: 12px
  height: 13px
  position: absolute
  right: 3px
  top: 4px
  font-size: 1px
  outline: none
  background: asset-url("select2.png") right top no-repeat

.select2-container-multi
  .select2-search-choice-close
    left: 3px
    top: 8px
  .select2-choices
    .select2-search-choice .select2-search-choice-close:hover, .select2-search-choice-focus .select2-search-choice-close
      background-position: right -11px
  &.select2-container-disabled .select2-choices
    background-color: #f4f4f4
    background-image: none
    border: 1px solid #ddd
    cursor: default
    .select2-search-choice
      padding: 3px 5px 3px 5px
      border: 1px solid #ddd
      background-image: none
      background-color: #f4f4f4
      .select2-search-choice-close
        display: none
        background: none

/* disabled styles

/* end multiselect

.select2-result-selectable .select2-match, .select2-result-unselectable .select2-match
  text-decoration: underline

.select2-offscreen
  clip: rect(0 0 0 0) !important
  width: 1px !important
  height: 1px !important
  border: 0 !important
  margin: 0 !important
  padding: 0 !important
  overflow: hidden !important
  position: absolute !important
  outline: 0 !important
  left: 0px !important
  top: 0px !important
  &:focus
    clip: rect(0 0 0 0) !important
    width: 1px !important
    height: 1px !important
    border: 0 !important
    margin: 0 !important
    padding: 0 !important
    overflow: hidden !important
    position: absolute !important
    outline: 0 !important
    left: 0px !important
    top: 0px !important

.select2-display-none
  display: none

.select2-measure-scrollbar
  position: absolute
  top: -10000px
  left: -10000px
  width: 100px
  height: 100px
  overflow: scroll

.select2-hidden-accessible
  display: none
  visibility: hidden

.select2-container--default
  .select2-selection--single
    border:
      radius: 0
      color: $silver
      width: 1px
    padding: .5em
    min-height: 2.5em

    .select2-selection__rendered
      line-height: 1.5
      padding: 0

  .select2-results > .select2-results__options
    border:
      top: 1px solid $silver

  .select2-results__option
    min-height: 2.5em

/* Retina-ize icons

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi)
  .select2-search input, .select2-search-choice-close
    background-image: asset-url("select2x2.png") !important
    background-repeat: no-repeat !important
    background-size: 60px 40px !important
  .select2-container .select2-choice
    abbr, .select2-arrow b
      background-image: asset-url("select2x2.png") !important
      background-repeat: no-repeat !important
      background-size: 60px 40px !important
  .select2-search input
    background-position: 100% -21px !important