/* --- 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:189px; cursor: pointer; font-weight: 200; float: left; -webkit-user-select: none; -moz-user-select: none; user-select: none; border:#bcbdbf solid 1px; }
.dropdown.open { z-index:100; }
.dropdown:hover { background: #FFFFFF; color:#0066cc; }
.dropdown:after { content: ''; position: absolute; right: 3px; bottom: 3px; top: 2px; width: 30px; }
.dropdown.focus:after { background:none; }
/* CARAT */

.dropdown .carat, .dropdown .carat:after { content: ''; position: absolute; right: 10px; top: 50%; margin-top: -4px; border: 8px solid transparent; border-top: 8px solid #bcbdbf; z-index: 1; -webkit-transform-origin: 50% 20%; -moz-transform-origin: 50% 20%; -ms-transform-origin: 50% 20%; transform-origin: 50% 20%; }
.dropdown .carat:after { margin-top: -9px; right: -8px; border-top-color: #FFFFFF; }
.dropdown:hover .carat:after {  }
.dropdown.focus .carat { border-top-color: #2a2e70; }
.dropdown.focus .carat:after { border-top-color: #FFFFFF; }
.dropdown.open .carat { border-top-color: #666; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); }
/* 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-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #000; padding:5px 12px 4px; overflow: hidden; white-space: nowrap; }
.dropdown .selected::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 60px; border-radius: 0 2px 2px 0; box-shadow: inset -55px 0 25px -20px #fff; }
.dropdown:hover .selected::after { 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; background: #FFFFFF; overflow: hidden; opacity: 0;  border:#bcbdbf solid 1px; border-top:0; }
.dropdown:hover div { background: #FFFFFF; }
/* 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 #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; }
.dropdown.scrollable.open ul { overflow-y: auto; }
/* DROP DOWN LIST ITEMS */

.dropdown li { list-style: none; padding: 4px 12px; }
/* .focus class is also added on hover */

.dropdown li.focus { background: #FFFFFF; position: relative; z-index: 3; color: #0066cc; }
.dropdown li.active { background: #FFFFFF; color: #0066cc; }