.selectize-control {

position: relative;
&.plugin-drag_drop {
  .ui-sortable-placeholder::after {
    content: '!';
    visibility: hidden;
  }
  .ui-sortable-helper {
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    //Instead of the line below you could use @includebox-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
}
&.plugin-remove_button {
  [data-value] {
    position: relative;
    padding-right: 24px !important;
    .remove {
      z-index: 1;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: 17px;
      text-align: center;
      font-weight: bold;
      font-size: 12px;
      color: inherit;
      text-decoration: none;
      vertical-align: middle;
      display: inline-block;
      padding: 2px 0 0;
      border-left: 1px solid #EB7F4C;
      -webkit-border-radius: 0 2px 2px 0;
      -moz-border-radius: 0 2px 2px 0;
      //Instead of the line below you could use @includeborder-radius($radius, $vertical-radius)
      border-radius: 0 2px 2px 0;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      //Instead of the line below you could use @includebox-sizing($bs)
      box-sizing: border-box;
      &:hover {
        background: rgba(0, 0, 0, 0.05);
      }
    }
  }
  .disabled [data-value] .remove {
    border-left-color: #aaaaaa;
    &:hover {
      background: none;
    }
  }
}
&.multi .selectize-input {
  [data-value] {
    text-shadow: 0 1px 0 rgba(0, 51, 83, 0.3);
    -webkit-border-radius: 3px;
    background-color: $orange;

    &.active {
      background-color: $dark-orange;
    }
  }
  > div {
    cursor: pointer;
    margin: 0 3px 3px 0;
    padding: 2px 6px;
    background: #cc6e42;
    color: #ffffff;
    border: 1px solid #EB7F4C;
    &.active {
      background: #EB7F4C;
      color: #ffffff;
      border: 1px solid #cc6e42;
    }
  }
}
&.single .selectize-input {
  cursor: pointer;
  background-color: #fff;
  padding: 15px;
  font-size: 1.125em;
  border: none;
  box-shadow: none;
  -webkit-appearance: none;

  input {
    cursor: pointer;
  }

  &:after {
    content: ' ';
    display: block;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -3px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    border-color: #808080 transparent transparent transparent;
  }
}
&.rtl .selectize-input > input {
  margin: 0 4px 0 -2px !important;
}
.selectize-input.disabled {
  opacity: 0.5;
  background-color: #fafafa;
}

} .selectize-dropdown-header {

position: relative;
padding: 5px 8px;
border-bottom: 1px solid #d0d0d0;
background: #f8f8f8;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
//Instead of the line below you could use @includeborder-radius($radius, $vertical-radius)
border-radius: 3px 3px 0 0;

} .selectize-dropdown-header-close {

position: absolute;
right: 8px;
top: 50%;
color: #303030;
opacity: 0.4;
margin-top: -12px;
line-height: 20px;
font-size: 20px !important;
&:hover {
  color: #000000;
}

} .selectize-dropdown {

color: #303030;
font-family: inherit;
font-size: 13px;
line-height: 25px;
-webkit-font-smoothing: inherit;
position: absolute;
z-index: 10;
border: 1px solid #d0d0d0;
background: #ffffff;
margin: -1px 0 0;
border-top: 0 none;

&.plugin-optgroup_columns {
  .optgroup {
    border-right: 1px solid #f2f2f2;
    border-top: 0 none;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    &:last-child {
      border-right: 0 none;
    }
    &:before {
      display: none;
    }
  }
  .optgroup-header {
    border-top: 0 none;
  }
}
[data-selectable] {
  cursor: pointer;
  overflow: hidden;
  padding: 10px;

  .highlight {
    background: rgba(233, 127, 82, 0.2);
  }
}
.optgroup-header {
  padding: 5px 8px;
  color: #303030;
  background: #ffffff;
  cursor: default;
  padding-top: 7px;
  font-weight: bold;
  font-size: 0.85em;
}
.optgroup {
  border-top: 1px solid #f0f0f0;
  &:first-child {
    border-top: 0 none;
    .optgroup-header {
      border-top: 0 none;
    }
  }
}
.active {
  background-color: #FEF8F6;
}
.create {
  color: rgba(48, 48, 48, 0.5);
}
&.single {
  border-color: #b8b8b8;
}

} .selectize-input {

color: #303030;
font-family: inherit;
font-size: 13px;
line-height: 18px;
-webkit-font-smoothing: inherit;
background: #ffffff;
cursor: text;
display: inline-block;
padding: 15px;
width: 100%;
overflow: hidden;
position: relative;
z-index: 1;
box-shadow: none;
background: transparent;
background-image: none;
-webkit-appearance: none;

input {
  color: #303030;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
  -webkit-font-smoothing: inherit;
}
&.full {
  background-color: #ffffff;
}
&.disabled {
  cursor: default !important;
  * {
    cursor: default !important;
  }
}
&.focus {
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
  //Instead of the line below you could use @includebox-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
&.dropdown-active {
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  //Instead of the line below you could use @includeborder-radius($radius, $vertical-radius)
  border-radius: 3px 3px 0 0;
}
> {
  * {
    vertical-align: baseline;
    display: inline-block;
    zoom: 1;
    *display: inline;
  }
  input {
    display: inline-block !important;
    padding: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    max-width: 100% !important;
    margin: 0 1px !important;
    text-indent: 0 !important;
    border: 0 none !important;
    background: none !important;
    line-height: inherit !important;
    -webkit-user-select: auto !important;
    -webkit-box-shadow: none !important;
    //Instead of the line below you could use @includebox-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
    box-shadow: none !important;
    &:focus {
      outline: none !important;
    }
  }
  input::-ms-clear {
    display: none;
  }
}
&.dropdown-active::before {
  content: ' ';
  display: block;
  position: absolute;
  background: #f0f0f0;
  height: 1px;
  bottom: 0;
  left: 0;
  right: 0;
}

} .selectize-input::after {

content: ' ';
display: block;
clear: left;

} .selectize-dropdown-content {

overflow-y: auto;
overflow-x: hidden;
max-height: 200px;

} .selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {

visibility: visible !important;
background: rgba(0, 0, 0, 0.06) !important;
border: 0 none !important;
-webkit-box-shadow: inset 0 0 12px 4px #ffffff;
//Instead of the line below you could use @includebox-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
box-shadow: inset 0 0 12px 4px #ffffff;

} .selectize-control.plugin-remove_button [data-value].active .remove {

border-left-color: #cc6e42;

} .selectize-control.single .selectize-input {

&.input-active {
  background: #ffffff;
  cursor: text;
  display: inline-block;
  cursor: text;
  input {
    cursor: text;
  }
}
&.dropdown-active:after {
  margin-top: -4px;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent #808080 transparent;
}

} .selectize-control.multi .selectize-input {

&.has-items {
  padding: 15px 15px 6px 15px;
}
&.disabled {
  [data-value] {
    color: #999;
    text-shadow: none;
    background: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: #e6e6e6;
    .remove {
      border-color: #e6e6e6;
      background: none;
    }
  }
  > div {
    color: #ffffff;
    background: #d2d2d2;
    border: 1px solid #aaaaaa;
    &.active {
      color: #ffffff;
      background: #d2d2d2;
      border: 1px solid #aaaaaa;
    }
  }
}

} .selectize-control.rtl.single .selectize-input:after {

left: 15px;
right: auto;

}