vanillaSelectChooser.css

.hide{
	display:none !important;
}

.arrow {
  border: solid #888;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  vertical-align:3px;
}

.arrow-sml {
  border: solid #888;;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 2px;
  margin-top:6px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.vanilla-main{
	font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
	position: relative;
	display: inline-block;
	vertical-align: middle;
}

/* scroll bars by Kushagra Agarwal*/
.vanilla-main ::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

.vanilla-main ::-webkit-scrollbar
{
	width: 12px;
	background-color: #E3E3E3;
}

.vanilla-main ::-webkit-scrollbar-thumb
{
	border-radius: 6px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #B7B7B7;
}

.vanilla-main > div:not(.vanilla-center){
  cursor:pointer;
  border:1px solid #B2B2B2;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0,0,0,.15);
  border-radius:4px;
  border-right: 1px solid #808080;
  border-bottom: 1px solid #808080;
}

.vanilla-main > div:not(.vanilla-center){
	  border-right: 1px solid #808080;
	  border-bottom: 1px solid #808080;
}

.vanilla-main li{
	display: list-item;
	font-size: 12px;
	background-color: #fff;
	min-height:1.4em;
	padding: 6px 12px 6px 12px;
	border: 1px solid rgba(0,0,0,.15);
	margin-bottom:2px;
}

.vanilla-close{
	user-select:none;
	cursor:pointer;
	float:right;
	font-size: 15px;
    font-weight: 700;
    line-height: 1;
	padding:1px;
    color: #888;
    text-shadow: 0 1px 0 #fff;
}

.vanilla-add{
	user-select:none;
	cursor:pointer;
	float:right;
}

.vanilla-close:hover{
	color:#2e44b9;
}

.vanilla-add:hover{
	border-color:#2e44b9;
}



.vanilla-center{
	border:none;
	background-color:transparent;
}

.vanilla-center .vanilla-btn{
	font-size: 24px;
	color:#3366aa;
	background-color:transparent;
	padding-bottom:2px;
}

.vanilla-center .arrow:hover{
	border-color:#2e44b9;
}

.vanilla-right li{
	cursor: move;
}

.vanilla-main li:not(.chosen):hover {
	background: linear-gradient(#f5f5f5, #e8e8e8);
}

.vanilla-main ul{
  -ms-user-select: none;
  user-select:none;
  list-style:none;
  white-space: nowrap;
  margin:0px;
  margin-top:4px;
  padding-left:10px;
  padding-right:10px;
  padding-bottom:3px;
  color: #333;
  cursor:pointer;
  overflow-y:auto;
}
/*Code pen by Marty*/
/*https://codepen.io/okra/pen/mAtJF?editors=1100 */
.icon-trash {
	margin-right:5px;
	width: 24px;
	height: 24px;
	position: relative;
	overflow: hidden;
	margin-left: 13px;
	margin-bottom: 13px;
  }
  
  .icon-trash .trash-lid {
	width: 62%;
	height: 10%;
	position: absolute;
	left: 50%;
	margin-left: -31%;
	top: 10.5%;
	background-color: #000;
	border-top-left-radius: 80%;
	border-top-right-radius: 80%;
	-webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-ms-transform: rotate(-5deg);
	transform: rotate(-5deg); 
  }
  
  .icon-trash .trash-lid:after {
	content: "";
	width: 26%;
	height: 100%;
	position: absolute;
	left: 50%;
	margin-left: -13%;
	margin-top: -10%;
	background-color: inherit;
	border-top-left-radius: 30%;
	border-top-right-radius: 30%;
	-webkit-transform: rotate(-1deg);
	-moz-transform: rotate(-1deg);
	-ms-transform: rotate(-1deg);
	transform: rotate(-1deg); 
  }
  
  .icon-trash .trash-container {
	width: 56%;
	height: 65%;
	position: absolute;
	left: 50%;
	margin-left: -28%;
	bottom: 10%;
	background-color: #000;
	border-bottom-left-radius: 15%;
	border-bottom-right-radius: 15%;
  }
  
  .icon-trash .trash-container:after {
	content: "";
	width: 110%;
	height: 12%;
	position: absolute;
	left: 50%;
	margin-left: -55%;
	top: 0;
	background-color: inherit;
	border-bottom-left-radius: 45%;
	border-bottom-right-radius: 45%;
  }

  .icon-trash .trash-line {
	width: 4%;
	height: 50%;
	position: absolute;
	margin-left: -2%;
	bottom: 17%;
	background-color: #393995;
  }
  
  .icon-trash .trash-line.line-1 {
	left: 38%;
  }

  .icon-trash .trash-line.line-2 {
	left: 50%;
}

.icon-trash .trash-line.line-3 {
	left: 62%;
}

@media screen and (max-width: 600px) {
	.vanilla-center{
		display:none !important;
	}
	.vanilla-left li.chosen {
		background: inherit;
		color:inherit;
	}
	.vanilla-right{
		margin-left:10px !important;
	}
}

.vanilla-left li.chosen {
	background: linear-gradient(#486084, #5D769A); /* #4Ec0FF, #1E90FF 2e44b9*/
	color:#fff;
}

.vanilla-left li.chosen:hover {
	background: linear-gradient(#284064, #5D769A); /* #4Ec0FF, #1E90FF 2e44b9*/
	color:#fff;
}


.vanilla-right li.vanilla-dropped{
	/*background: linear-gradient(#1B7C7A, #2B8C8A); */
	color:#2B8C8A;
	font-weight:bold;
}

.vanilla-right li.vanilla-dropped .vanilla-close{
	color:#2B8C8A;
}