.ui-multiselect li {font-size: 10px;}
.ui-multiselect li a {font-size: 10px;}

.multiselect {
    width: 600px;
    height: 151px;
    margin-bottom: 5px;
}

.ui-multiselect {
    margin: auto;
    text-align: left;
    border: 1px solid @xivo-light-gray;
}

.ui-multiselect .selected {
    width: 50%;
    margin: -10px;
    top: 0px;
    border: 2px solid @xivo-danger;
}
.ui-multiselect div.available {
  border-left: 1px solid @xivo-light-gray;
}
.ui-multiselect .available {
  width: 50%;
}
.ui-multiselect .ui-widget-header {
    border-bottom: 1px solid @xivo-light-gray;
    background: @xivo-gradient-dark-gray;
    color: #777777;
    font-size: 10px;
}

.ui-multiselect .ui-widget-header a {
    color: @xivo-primary;
    font-size: 10px;
}

.ui-multiselect .ui-state-default {
    color: @xivo-dark;
}

.ui-menu .ui-menu-item a.ui-state-hover, .ui-menu .ui-menu-item a.ui-state-active {
    background: none;
    background-color: @xivo-primary;
    border: 1px solid @xivo-primary;
    color: @xivo-light;
}

/** ui-select single & multiple **/

.ui-select-bootstrap {

  &.ui-select-container{
    width: @large-input-witdth !important;
  }

  .ui-select-search {
    width: @large-input-witdth;
    height: 27px;
  }

  .ui-select-match {
    &.btn-default-focus {
      background-color: @xivo-light;
      outline: none;
      box-shadow: none;
    }
  }

  .ui-select-toggle {
    width: @large-input-witdth;
    height: 27px;
    background-color: transparent;
    color: @color-normal;
    text-transform: none;
    font-weight: normal;

    & > a.btn {
      padding: 0;
      border: 0;
      font-size: inherit;
      border: 0;
      margin-top: 0 !important;
      right: 15px !important;
      color: @xivo-light-gray;
    }

    &:hover {
      border-color: @xivo-light-gray;
    }

    &:focus {
      color: @xivo-dark;
      background-color: @xivo-light;
    }
  }

  .ui-select-placeholder {
    color: @input-color-placeholder;
  }

  .dropdown {
    width: @large-input-witdth;
  }

  .ui-select-choices-row.active>span {
    background-color: @xivo-primary !important;
  }

  &.ui-select-multiple {
    width: @large-input-witdth;

    input.ui-select-search::-webkit-input-placeholder {
      color: @input-color-placeholder;
      padding-left: 6px;
    }

    &.open {
      border-color: @xivo-primary;
      outline: 0;
      -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(230, 125, 57, .6);
              box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(230, 125, 57, .6);
    }

    .ui-select-highlight {
      text-decoration: underline;
    }

    .ui-select-match-item {
      padding: 5px 10px 5px 10px;
      border-radius: 3px;
      color: @color-normal;
      text-transform: none;
      font-weight: normal;

      &:focus {
        color: @xivo-dark;
        background-color: @xivo-gradient-light-gray;
      }

      &:hover {
        color: @xivo-light;
        background-color: @xivo-primary ;
      }
     }

    .ui-select-match-close {
      padding-right: 0px;
      padding-left: 5px;
    }
  }
}

/* multiple select sortable */
.multiple-select-sortable {

  a:hover, a:focus {
    text-decoration: none;
  }

  &.has-error {
    table th, table td {
      border-color: @xivo-danger !important;
    }
  }

  table {
    min-width: 450px;
    border-collapse: inherit;

    th {
      background-color:  @xivo-gradient-light-gray;
    }

    th, td {
      border: 1px solid @xivo-light-gray;
    }

    tr:last-child td:first-child {
      border-bottom-left-radius: 3px;
      border-right: none;
      border-top: none;
      vertical-align: top;
    }

    tr:last-child td:last-child {
      border-bottom-right-radius: 3px;
      border-top: none;
      vertical-align: top;
    }

    tr:first-child th:first-child {
      border-top-left-radius: 3px;
      border-right: none;
    }

    tr:first-child th:last-child {
      border-top-right-radius: 3px;
    }
  }

  .table-title {
    margin-top: 10px;
    margin-bottom: 10px;
    color: @table-title;
    font-size: 10px;
  }

  .badge {
    font-size: 10px;
    background-color: @input-border;
    margin-left: 5px;
    margin-top: -2px;
  }

  .delete-add-link{
    float: right;
    margin-right: 10px;
  }

  .add-route-arrow-icon {
    color: @color-normal;
    font-size: 15px;
    float: left;
    margin-top: 2px;
  }

  .add-route-plus-icon {
    float: right;
    margin-top: 4px;
    font-size: 12px;
    color: @xivo-primary;
    cursor: pointer;
  }


  .section-sortable {
    min-height: 50px;
  	margin-bottom: 5px;

    .section-ph {
    	width: auto;
    	padding: 10px 10px;
    	margin: 10px 0;
    }

    .list-sortable {
    	list-style: none outside none;
      min-height: 30px;
      padding: 5px;
      margin-bottom: 0px;
    }

    .item-sortable {
    	padding: 5px 10px;
      height: 32px !important;
    	margin: 6px 0;
    	border: 1px solid @xivo-light-gray;
    	border-radius: 3px;
    	background-color: @xivo-gradient-light-gray;
    	text-align: center;
      cursor: move;

      &.available {
        background-color: @xivo-light;
      }
    }
  }
}
