/* --- EASYDROPDOWN METRO THEME --- */

/* PREFIXED CSS */

.dropdown,
.dropdown div,
.dropdown li,
.dropdown div::after,
.dropdown .carat,
.dropdown .carat:after,
.dropdown .selected::after,
.dropdown: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: auto; cursor: pointer; font-weight: 400; background: #fff; border: 1px solid #dddddd; -webkit-user-select: none; -moz-user-select: none; user-select: none;}
.form-branco .dropdown 	{ border-color: #dddddd; height: 50px;}
.dropdown.open			{ z-index: 998;}
.dropdown:hover			{ background: #fefefe;}
.dropdown:after 		{ content: ''; position: absolute; right: 3px; bottom: 3px; top: 2px; width: 30px; background: transparent;}
.dropdown.focus:after 	{ background: none transparent;}

/* CARAT */
.dropdown .carat 		{  position: absolute; right: 0px; top: 50%; margin-top: -4px; z-index: 2;}

.dropdown .carat:before { font-family: FontAwesome; content: '\f106'; position: absolute; right: 10px; top: 50%; margin-top: -10px; z-index: 2; color: #e54e13; }
.dropdown .carat:after  { font-family: FontAwesome; content: '\f107'; position: absolute; right: 10px; top: 50%; margin-top: -2px; z-index: 2; color: #e54e13;}


/* 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 			{ display: block; font-size: 1em; line-height: 1; color: #464646; padding: 15px 10px; overflow: hidden; white-space: nowrap;}
.form-branco .dropdown .selected {color: #555555;}
.dropdown li 					{ display: block; font-size: 1em; line-height: 1; color: #464646; padding: 15px 10px; overflow: hidden; white-space: nowrap;}
.form-branco .dropdown li 		{ color: #555555;}
.dropdown .selected  			{ width: 90%;}
.dropdown .selected::after 		{ content: ''; position: absolute; right: 0; top: 0; bottom: 0;	width: 60px; border-radius: 0 2px 2px 0;}
.dropdown:hover .selected::after{}

/* DROP DOWN WRAPPER */

.dropdown div 					{ position: absolute; height: 0; left: 0; right: 0; top: 100%; margin-top: -1px; background: #ffffff; overflow: hidden; opacity: 0; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.19);}
.dropdown:hover div 			{ background: #ffffff;}
.form-branco .dropdown div 					{ background: #F4F4F4; }
.form-branco .dropdown:hover div 			{ background: #F4F4F4; }

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

/* 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 #f8f8f8;}
.dropdown.scrollable:hover div::after 	{ box-shadow: inset 0 -50px 30px -35px #f4f4f4;}
.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; padding-left: 0;}
.dropdown.scrollable.open ul 			{ overflow-y: auto;}

/* DROP DOWN LIST ITEMS */

.dropdown li 							{ list-style: none; padding: 8px 12px;}

/* .focus class is also added on hover */

.dropdown li.focus 					{ background: #fafafa; color: #464646; position: relative; z-index: 3;}
.dropdown li.active 				{ background: #fafafa; color: #464646;}
.form-branco .dropdown li.focus 	{ background: #ffffff; color: #464646; }
.form-branco .dropdown li.active 	{ background: #ffffff; color: #464646;}