@charset "utf-8";

/* ============= dropdown ==================== */   
/* PREFIXED CSS */

.dropdown,
.dropdown div,
.dropdown li,
.dropdown div::after{
	-webkit-transition: all 150ms ease-in-out; -moz-transition: all 150ms ease-in-out; -ms-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; }

.dropdown .selected::after,
.dropdown.scrollable div::after{
	-webkit-pointer-events: none;-moz-pointer-events: none;-ms-pointer-events: none;pointer-events: none;
}

/* WRAPPER */
.dropdown{
	position: relative; width: 100%;   cursor: pointer;  
	-webkit-user-select: none; -moz-user-select: none; user-select: none;
}

.dropdown.open{ z-index: 2; }
.dropdown:hover,
.dropdown.focus{
	box-shadow: none;  
}

/* CARAT */
.dropdown .carat{ position: absolute; right: 12px; top: 50%; margin-top: -2px; border: 3px solid transparent; border-top: 5px solid #000; }
.dropdown.open .carat{ margin-top: -5px; border-top: 3px solid transparent; border-bottom: 5px solid #000; }

/* OLD SELECT (HIDDEN) */
.dropdown .old{ position: absolute;left: 0;top: 0;height: 0;width: 0;overflow: hidden;}
.dropdown select{position: absolute;left: 0px;top: 0px;}
.dropdown.touch .old{width: 100%;height: 100%;}
.dropdown.touch select{width: 100%;height: 100%;opacity: 0;}

/* SELECTED FEEDBACK ITEM */ 

.dropdown .selected,
.dropdown li{
	display: block; /*font-size: inherit;*/ line-height: 1; color: #111; padding: 12px 12px;overflow: hidden; white-space: nowrap; 
}

.dropdown .selected::after{
	content: '';position: absolute;right: 0;top: 0;bottom: 0; width: 30px;  /*box-shadow: inset -55px 0 25px -20px #fff;*/
}

/* DROP DOWN WRAPPER */
.dropdown div{
	position: absolute; height: 0;left: -1px;right: -1px;top: 100%;margin-top: -1px; border: 1px solid #aaa; overflow: hidden;opacity: 0;	}

/* Height is adjusted by JS on open */
.dropdown.open div{ opacity: 1; z-index: 2;}

/* FADE OVERLAY FOR SCROLLING LISTS */
.dropdown.scrollable div::after{
	content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 50px;	
	box-shadow: inset 0 -50px 30px -35px #000;
}

.dropdown.scrollable.bottom div::after{ opacity: 0; }

/* DROP DOWN LIST */
.dropdown ul{ position: absolute; left: 0; top: 0; height: 100%; width: 100%; list-style: none; overflow: hidden; background: #fff; color: #000;  }
.dropdown.scrollable.open ul{ overflow-y: auto; }

/* DROP DOWN LIST ITEMS */
.dropdown li{ list-style: none; padding: 8px 12px; width:100%; color: #000; }

/* .focus class is also added on hover */
.dropdown li.focus{ background: #000; color: #ffd500; position: relative; z-index: 3; }
.dropdown li.active{ font-weight: 700;  }


.dropdown.focus.open span.selected{  color: #ffd500; }