/* =============
   Form Advanced
============= */

/* bootstrap tag input */
.bootstrap-tagsinput {
  box-shadow: none;
  padding: 3px 7px;
  border: 1px solid $light3;

  .label-info {
    background-color: $primary !important;
    display: inline-block;
    padding: 2px 10px;
    border-radius: 3px;
    font-size: 14px;
    margin: 2px;
  }
}

/* Multiple select*/
.ms-container {
  background: transparent url('../images/multiple-arrow.png') no-repeat 50% 50%;

  .ms-list {
    box-shadow: none;
    border: 1px solid $light3;
  }
  .ms-list.ms-focus {
    box-shadow: none;
    border: 1px solid #aaaaaa;
  }
  .ms-selectable {
    li.ms-elem-selectable {
      border: none;
      padding: 5px 10px;
    }
  }
  .ms-selection {
    li.ms-elem-selection {
      border: none;
      padding: 5px 10px;
    }
  }
}

.search-input {
  margin-bottom: 10px;
}

.ms-selectable {
  box-shadow: none;
  outline: none !important;
}

.ms-container {
  .ms-list.ms-focus {
    box-shadow: none;
  }
  .ms-selectable {
    li.ms-hover {
      background-color: $primary;
    }
  }
  .ms-selection {
    li.ms-hover {
      background-color: $primary;
    }
  }
}

/* Select 2*/
.select2-container {
  .select2-choice {
    background-image: none !important;
    border: none !important;
    height: auto !important;
    padding: 0 !important;
    line-height: 22px !important;
    background-color: transparent !important;
    box-shadow: none !important;

    .select2-arrow {
      background-image: none !important;
      background: transparent;
      border: none;
      width: 14px;
      top: -2px;
    }
  }
  .select2-container-multi.form-control {
    height: auto;
  }
}

.select2-results .select2-highlighted {
  color: $white;
  background-color: $primary;
}

.select2-drop-active {
  border: 1px solid $light3 !important;
  padding-top: 5px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, .15);
}

.select2-search {
  input {
    border: 1px solid $light3;
  }
}

.select2-container-multi {
  width: 100%;

  .select2-choices {
    border: 1px solid $light3 !important;
    box-shadow: none !important;
    background-image: none !important;
    border-radius: 4px !important;
    min-height: 38px;

    .select2-search-choice {
      padding: 4px 7px 4px 18px;
      margin: 5px 0 3px 5px;
      color: #555555;
      background: $light5;
      border-color: #e5e5e5;
      -webkit-box-shadow: none;
      box-shadow: none;
    }
    .select2-search-field {
      input {
        padding: 7px 7px 7px 10px;
        font-family: inherit;
      }
    }
  }
}

/* Datepicker */
.datepicker {
  padding: 8px;
  th {
    font-size: 14px !important;
  }
}

.datepicker table tr td.today, .datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover,
.datepicker table tr td.selected, .datepicker table tr td.selected:hover,
.datepicker table tr td.selected.disabled, .datepicker table tr td.selected.disabled:hover,
.datepicker table tr td span.active, .datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled:hover {
  background-image: none;
}

.datepicker table tr td span.active:hover, .datepicker table tr td span.active:hover:hover,
.datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active.disabled:hover:hover,
.datepicker table tr td span.active:active, .datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active, .datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled, .datepicker table tr td span.active:hover.disabled,
.datepicker table tr td span.active.disabled.disabled, .datepicker table tr td span.active.disabled:hover.disabled,
.datepicker table tr td span.active[disabled], .datepicker table tr td span.active:hover[disabled],
.datepicker table tr td span.active.disabled[disabled], .datepicker table tr td span.active.disabled:hover[disabled] {
  background-color: $primary;
}

.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover {
  background-color: $primary !important;
  background-image: none;
  box-shadow: none;
  text-shadow: none;
}

.datepicker thead tr:first-child th:hover, .datepicker tfoot tr th:hover {
  background-color: $light-alt;
}

.datepicker-inline {
  border: 2px solid $light;
}

.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover {
  background-color: $primary !important;
  background-image: none;
  box-shadow: none;
}

/* Date Range Picker */
.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: $primary;
  border-color: $primary;
}

.daterangepicker .input-mini.active {
  border: 1px solid #AAAAAA;
}

.daterangepicker .ranges li {
  border-radius: 2px;
  color: $lightdark7;
  font-weight: 600;
  font-size: 12px;
}

.daterangepicker select.hourselect, .daterangepicker select.minuteselect,
.daterangepicker select.secondselect, .daterangepicker select.ampmselect {
  border: 1px solid #e3e3e3;
  padding: 2px;
  width: 60px;
}

.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
  background-color: $primary;
  border: 1px solid $primary;
}
