//
// Tags Input
// --------------------------------------------------

.tagsinput {
  background: white;
  border: 2px solid @brand-secondary;
  border-radius: @border-radius-large;
  height: 100px;
  margin-bottom: 18px;
  padding: 6px 1px 1px 6px;
  overflow-y: auto;
  text-align: left;

  .tag {  	
    border-radius: @border-radius-base;
    background-color: @brand-secondary;
    color: @inverse;
    font-size: ceil(@component-font-size-base * 0.933); // ~14px
    cursor: pointer;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    overflow: hidden;
    line-height: 15px;
    padding: 6px 13px 8px 19px;
    position: relative;
    vertical-align: middle;
    .transition(.25s linear);

    &:hover {
      background-color: mix(@brand-secondary, black, 85%);
      color: @inverse;
      padding-left: 12px;
      padding-right: 20px;
      
      .tagsinput-remove-link {
        color: @inverse;
        opacity: 1;
        // Opacity fallback for IE
        display: block\9;
      }
    }
  }

  input {
    background: transparent;
    border: none;
    color: @brand-primary;
    font-family: @font-family-base;
    font-size: ceil(@component-font-size-base * 0.933); // ~14px
    margin: 0px;
    padding: 0 0 0 5px;
    outline: none !important;
    margin: 6px 5px 0 0;
    vertical-align: top;
    width: 12px;
  }
}

.tagsinput-remove-link {
  bottom: 0;
  color: @inverse;
  cursor: pointer;
  font-size: 12px;
  opacity: 0;
  padding: 7px 7px 5px 0;
  position: absolute;
  right: 0;
  text-align: right;
  text-decoration: none;
  top: 0;
  width: 100%;
  z-index: 2;
  // Opacity fallback for IE
  display: none\9;
  
  &:before {
    color: @inverse;
    content: "\e00b";
    font-family: "Flat-UI-Icons";
  }
}

.tagsinput-add-container {
  vertical-align: middle;
  display: inline-block;
}

.tagsinput-add {	
  background-color: mix(@inverse, @brand-primary, 80%);
  border-radius: @border-radius-small;
  color: @inverse;
  cursor: pointer;
  display: inline-block;
  font-size: ceil(@component-font-size-base * 0.933); // ~14px
  line-height: 1;
  margin-bottom: 5px;
  padding: 7px 9px;
  vertical-align: top;
  .transition(.25s linear);
  
  &:hover {
    background-color: @brand-secondary;
  }
  &:before {
    content: "\e009";
    font-family: "Flat-UI-Icons";
  }
}

.tags_clear {
  clear: both;
  width: 100%;
  height: 0px;
}
.not_valid {
  background: #fbd8db !important;
  color: #90111a !important;
  margin-left: 5px !important;
}