/*** MULTILIST ***/

/*** COLORS AND IMAGES ***/


div.multilist { background: #fafafa; }

div.multilist:hover,
div.multilist.opened { background: #e8e8e8; }

div.multilist .holder.label a.remove {
  background-color: #06c;
  color: #fff;
}

div.multilist .holder.label a.remove:hover { background-color: #049; }

div.multilist .holder.search input {
  border: 1px solid #eee;
  background: #fff url(../img/multilist.search.png) no-repeat 5px 50%;
}

div.multilist .holder.items > ul > li > a { background-color: #f2f2f2; }

div.multilist .holder.items > ul > li > a:hover {
  background-color: #33aaff;
  color: #000000;
}

div.multilist .holder.items > ul > li > a.selected {
  background-color: #F0AB00;
  color: #ffffff;
}

div.multilist .holder.items > ul li a {
  background-color: #ffffff;
  color: #525259;
}

div.multilist .holder.items > ul li a:hover {
  background-color: #33aaff;
  color: #ffffff;
}

div.multilist .holder.items > ul li a.selected {
  background-color: #F0AB00;
  color: #000000;
}

div.multilist .holder.items > ul li a.selected:hover { background-color: #ff3333; }

div.multilist .ui-sprite {
  background: url(../img/multilist.sprites.png);
  background-repeat: no-repeat;
}
 @media screen and (min-width: 480px) and (max-width: 759px) {

div.multilist > .holder > ul li a:hover {
  background-color: #f2f2f2;
  color: #000000;
}

div.multilist > .holder > ul li a.selected:hover {
  background-color: #F0AB00;
  color: #000000;
}

div.multilist > .holder > ul li a:hover {
  background-color: #f2f2f2;
  color: #000000;
}

div.multilist > .holder > ul li a.selected:hover {
  background-color: #F0AB00;
  color: #000000;
}
}
 @media screen and (min-width: 0px) and (max-width: 479px) {

div.multilist {
  width: 100%;
  margin: 0;
}

div.multilist input.search { width: 100%; }

div.multilist > .holder > ul li a:hover {
  background-color: #f2f2f2;
  color: #000000;
}

div.multilist > .holder > ul li a.selected:hover {
  background-color: #F0AB00;
  color: #000000;
}

div.multilist > .holder > ul li a:hover {
  background-color: #ffffff;
  color: #000000;
}

div.multilist > .holder > ul li a.selected:hover {
  background-color: #F0AB00;
  color: #000000;
}
}

/*** LAYOUT ***/


div.multilist {
  display: none;
  width: 240px;
  height: 45px;
  position: relative;
  float: center;
  font-size: 18px;
  box-shadow: 0px 0px 1px rgba(0,0,0,.2);
  margin: 0 10px 10px 0;
  border: none;
  text-align: center;
}

div.multilist a { text-decoration: none; }

div.multilist .holder { min-width: 200px; }

div.multilist .holder.label a.remove {
  position: absolute;
  right: 5px;
}

div.multilist .holder.label span.add {
  display: block;
  position: absolute;
  left: 3px;
  top: 8px;
  width: 18px;
  height: 18px;
  text-indent: -10000px;
  cursor: pointer;
  text-align: center;
}

div.multilist .holder.label a.label {
  border: none;
  display: block;
  height: 2em;
  line-height: 2em;
  padding : 5px 5px 5px 25px;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  text-align: center;
}

div.multilist .holder.label a.label > span.labeltext { padding-right: 10px; }

div.multilist .holder.label a.remove {
  display: block;
  position: absolute;
  right: 0px;
  top: 0px;
  width: 25px;
  height: 34px;
  text-transform: uppercase;
  font-size: 10px;
  line-height: 34px;
  text-align: center;
}

div.multilist .holder.search { display: none; }

div.multilist .holder.search input {
  line-height: 2em;
  padding: 2px 5px 2px 25px;
  font-size: 13px;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  text-align: center;
  -moz-box-sizing: border-box;
}

div.multilist .holder.search input:focus { outline: none; }

div.multilist .holder.items {
  width: 100%;
  min-width: 200px;
  position: absolute;
  overflow: hidden;
  z-index: 50;
  display: none;
  box-shadow: 0px 0px 1px rgba(0,0,0,.2);
}

div.multilist .holder.items > ul {
  width: 100%;
  list-style-type: none;
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: 250px;
  padding-bottom: 1px;
}

div.multilist .holder.items > ul > li {
  padding: 0;
  margin: 0;
}

div.multilist .holder.items > ul > li > a {
  text-decoration: none;
  display: block;
  line-height: 1.5em;
  margin: 0;
  padding: 5px;
}

div.multilist .holder.items > ul > li > a.filtered { display: none; }

div.multilist .holder.items > ul > li > a.selected:hover { cursor: normal; }

div.multilist .holder.items > ul > li > a .checkbox {
  float: center;
  height: 18px;
  width: 18px;
  margin-right: 5px;
}

div.multilist .holder.items > ul > li:last-child > a { border-bottom: none; }

div.multilist .holder.items > ul li a {
  display: block;
  text-decoration: none;
}

div.multilist .holder.items > ul > li > a.filtered { display: none; }

div.multilist .holder.items > ul li a.selected:hover { cursor: pointer; }

div.multilist .ui-sprite.remove { background-position: 0px 0px; }

div.multilist .ui-sprite.remove:hover { background-position: 0px -18px; }

div.multilist li a .checkbox { background-position: 0px -36px; }

div.multilist li a.selected .checkbox { background-position: 0px -54px; }

div.multilist .ui-sprite.arrow { background-position: 0px -72px; }

div.multilist.opened .ui-sprite.arrow { background-position: 0px -90px; }

div.multilist .ui-sprite.add { background-position: 0px -108px; }

div.multilist .ui-sprite.glass { background-position: 0px -126px; }