/* --- 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; font-size: 16px; text-align: left; width: 100%; padding: 12px 20px 12px 15px; color: #666666; cursor: pointer; font-weight: normal; background: #ffffff; border: 1px solid #dddddd; -webkit-user-select: none; -moz-user-select: none; user-select: none; box-shadow: none;}
.dropdown.open			{ z-index: 998;}
.dropdown:hover			{ background: #fff;}
.dropdown:after 		{ content: ''; position: absolute; right: 3px; bottom: 3px; top: 2px; width: 30px; background: transparent;}
.dropdown.focus:after 	{ background: none transparent;}

.ordenar .dropdown 		{ background: #fff; font-size: 14px; color: #777777; border: 1px solid #dddddd; border-radius: 0px; padding: 8px 5px;}
.ordenar label 			{ font-size: 14px; margin-top: 12px; font-weight: 400;  text-align: right;}
.form-modal .dropdown 	{ background: #fff; color: #999999; border: 1px solid #eeeeee; }
/* CARAT */
.dropdown .carat 		{ position: absolute; right: 0px; top: 50%; margin-top: -10px; z-index: 2; font-size: 20px;}

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

.ordenar .dropdown .carat:after  { color: #9d0a0e; }

.form-modal .dropdown .carat:after  { color: #9d0a0e; }

/* 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: 1em; line-height: 1; color: #565656; padding: 15px 10px; overflow: hidden; white-space: nowrap;}
.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{}

.ordenar .dropdown .selected 	{ color: #777777;  }
.ordenar .dropdown li 			{ color: #565656;}

.form-modal .dropdown .selected 	{ color: #999999;  }
.form-modal .dropdown li 			{ color: #565656;}
/* 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;}

.ordenar .dropdown div 		 { background: #eeeeee;}
.ordenar .dropdown:hover div { background: #f3f3f3;}

.form-modal .dropdown div 		 { background: #eeeeee;}
.form-modal .dropdown:hover div { background: #f3f3f3;}

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

/* 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: #f3f3f3; color: #565656; position: relative; z-index: 3;}
.dropdown li.active 			{ background: #f3f3f3;}

.ordenar .dropdown li.focus 			{ background: #eeeeee; color: #565656;;}
.ordenar .dropdown li.active 			{ background: #eeeeee;}

.form-modal .dropdown li.focus 			{ background: #eeeeee; color: #565656;;}
.form-modal .dropdown li.active 			{ background: #eeeeee;}