@import "libs/bootstrap.css.less";

/* Example tokeninput style #1: Token vertical list*/
@width: 400px;
@baseLineHeight:    13px;
ul.token-input-list {
    overflow: hidden; 
    height: auto !important; 
    height: 1%;
    width: @width;
    border: 1px solid #999;
    cursor: text;
    z-index: 999;
    margin: 0;
    background-color: #fff;
    list-style-type: none;
    clear: left;
		display: inline-block;
		
		padding: 4px;
	  font-size: @baseFontSize;
	  line-height: @baseLineHeight;
	  color: @gray;
	  border: 1px solid #ccc;
	  .border-radius(3px);
		
		@transition: border linear .2s, box-shadow linear .2s;
	  .transition(@transition);
		#font > .sans-serif(normal,13px,normal);
		.box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
		
		&.token-input-list-focused {
			border-color: lighten(#b9a0e4, 5);
		  /*@shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);*/
			@shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 6px rgba(94, 26, 139, 0.25);
		  .box-shadow(@shadow);
		}
}

ul.token-input-list li {
    list-style-type: none;
}

ul.token-input-list li.token-input-input-token {
	display: inline-block;
	vertical-align: top;
}

ul.token-input-list li input {
    border: 0;
    margin: 0;
    padding: 3px 8px;
    background-color: #fff;
    -webkit-appearance: caret;
		display: inline-block;
		.box-shadow(none);
}

li.token-input-token {
    overflow: hidden; 
    height: auto !important; 
    height: 1%;
    margin: 3px;
    padding: 3px 5px;
		background: #ccc;
		#gradient > .vertical(#eee, #e4e4e4);
		border-left: 1px solid #aaa;
		color: #333;
	  border: 1px solid #b4b4b4;
	  padding: 3px 15px 3px 6px;
    cursor: default;
    display: inline-block;
		.border-radius(3px);
		-moz-background-clip   : padding;
	  -webkit-background-clip: padding-box;
	  background-clip        : padding-box;
		position: relative;
}

li.token-input-token p {
    float: left;
    padding: 0;
    margin: 0px 7px 0px 0px;
}

li.token-input-token span {
    color: #777;
    cursor: pointer;
		text-shadow: #fff 0px 1px 0px;
		font-weight: bold;
		font-size: 14px;
		position: absolute;
		top: 1px;
}

li.token-input-selected-token {
/*     background-color: #08844e; */
	#gradient > .vertical(lighten(@purple, 10%),  darken(@purple, 15%));
	text-shadow: 0 1px 0 rgba(0,0,0,.25);
/*   border-color: darken(@purple, 15%) darken(@purple, 15%) darken(darken(@purple, 15%), 15%); */
	.border-radius(3px);
  border: 1px solid darken(@purple, 15%);
	color: #fff;
}

li.token-input-selected-token span {
		color: #fff;
		text-shadow: #000 0px 1px 0px;
}

div.token-input-dropdown {
    position: absolute;
   	width: @width;
    background-color: #fff;
    overflow: hidden;
    cursor: default;
    z-index: 900;

		padding: 4px;
	  font-size: @baseFontSize;
	  line-height: @baseLineHeight;
	  color: @gray;
	
	  border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
	  .border-radius(0px 0px 3px 3px);
		
		#font > .sans-serif(normal,13px,normal);
		.box-shadow(inset 0 1px 3px rgba(0,0,0,.1));
}

div.token-input-dropdown p {
    margin: 0;
    padding: 5px;
/*     font-weight: bold; */
    color: #777;
}

div.token-input-dropdown ul {
    margin: 0;
    padding: 0;
}

div.token-input-dropdown ul li {
    background-color: #fff;
    padding: 3px;
    list-style-type: none;
  	border: 1px solid transparent;
	  padding: 3px 6px 3px 6px;
}

div.token-input-dropdown ul li.token-input-dropdown-item {
    background-color: #fafafa;
}

div.token-input-dropdown ul li.token-input-dropdown-item2 {
    background-color: #fff;
}

div.token-input-dropdown ul li em {
    font-weight: bold;
    font-style: normal;
}

div.token-input-dropdown ul li.token-input-selected-dropdown-item {
/*     background-color: #d0efa0; */
	#gradient > .vertical(#eee, #e4e4e4);
	.border-radius(3px);
	-moz-background-clip   : padding;
  -webkit-background-clip: padding-box;
  background-clip        : padding-box;
	color: #333;
  border: 1px solid #b4b4b4;
}

