div.fancy-select {
    position: relative;
    display: inline-block;
    top: 3px;
}

div.fancy-select.disabled {
    opacity: 0.5;
}

div.fancy-select select:focus + div.trigger {
    
}

div.fancy-select select:focus + div.trigger.open {
    box-shadow: none;
}

div.fancy-select div.trigger {  
    cursor: pointer;
           padding: 10px 8px 9px 45px;
        width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    color:#aaa;
    background-color:#e6e6e6;
    border: none;
    height:39px;

    transition: all 240ms ease-out;
    -webkit-transition: all 140ms ease-out;
    -moz-transition: all 140ms ease-out;
    -ms-transition: all 140ms ease-out;
    -o-transition: all 140ms ease-out;
}

div.fancy-select:not(.disabled):hover div.trigger {  
    border-color:#1775c9;
}

div.fancy-select.disabled div.trigger { 
    cursor:default;
}

div.fancy-select div.trigger:after {
    content: "";
    display: block;
    position: absolute;
    width: 39px;
    height: 39px;
    top: 0px;
    left: 0px;
    background-color:#1775c9;
    border-right:2px solid #e6e6e6;
    background-image:url('../images/arrow_down_combo.png');
    background-position: center;
}

/*
div.fancy-select:not(.disabled) div.trigger:hover {
    background-color: rgb(132,213,247);
}
*/

div.fancy-select:not(.disabled) div.trigger:hover:after {
    background-image:url('../images/arrow_down_combo_2.png');
}

div.fancy-select div.trigger.open {
    
}

div.fancy-select div.trigger.open:after {
    transform:scaleY(-1);
    -ms-transform:scaleY(-1); /* IE 9 */
    -webkit-transform:scaleY(-1); /* Safari and Chrome */
}

    
    
div.fancy-select ul.options {
    list-style: none;
    margin: 0;
    position: absolute;
    top: 39px;
    right: 0px;
    visibility: hidden;
    opacity: 0;
    z-index: 50;
    max-height: 256px;
    overflow: auto;
    color: #fff;
    min-width: 235px;
    width: 100%;
    margin:0px;
    padding:0px;
    overflow-x:hidden;
    transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
    -webkit-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
    -moz-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
    -ms-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
    -o-transition: opacity 300ms ease-out, top 300ms ease-out, visibility 300ms ease-out;
}

div.fancy-select ul.options.open {
    visibility: visible;
    opacity: 1;

    /* have to use a non-visibility transition to prevent this iOS issue (bug?): */
    /*http://stackoverflow.com/questions/10736478/css-animation-visibility-visible-works-on-chrome-and-safari-but-not-on-ios*/
    transition: opacity 300ms ease-out, top 300ms ease-out;
    -webkit-transition: opacity 300ms ease-out, top 300ms ease-out;
    -moz-transition: opacity 300ms ease-out, top 300ms ease-out;
    -ms-transition: opacity 300ms ease-out, top 300ms ease-out;
    -o-transition: opacity 300ms ease-out, top 300ms ease-out;
}
/*
div.fancy-select ul.options.overflowing {
    top: auto;
    bottom: 40px;

    transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
    -webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
    -moz-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
    -ms-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
    -o-transition: opacity 300ms ease-out, bottom 300ms ease-out, visibility 300ms ease-out;
}

div.fancy-select ul.options.overflowing.open {
    top: auto;
    bottom: 50px;

    transition: opacity 300ms ease-out, bottom 300ms ease-out;
    -webkit-transition: opacity 300ms ease-out, bottom 300ms ease-out;
    -moz-transition: opacity 300ms ease-out, bottom 300ms ease-out;
    -ms-transition: opacity 300ms ease-out, bottom 300ms ease-out;
    -o-transition: opacity 300ms ease-out, bottom 300ms ease-out;
}
*/
div.fancy-select ul.options li {
    padding: 2px 12px 6px;
    color: #848487;
    background:#f1f1f1;
    border-top:1px solid rgba(220,220,220,0.2);
    width: 266px;
    cursor: pointer;

    margin:0px;
    width: 100%;
    box-sizing: border-box;
    /*white-space: nowrap;*/
    transition: all 150ms ease-out;
    -webkit-transition: all 150ms ease-out;
    -moz-transition: all 150ms ease-out;
    -ms-transition: all 150ms ease-out;
    -o-transition: all 150ms ease-out;
}



div.fancy-select ul.options li.selected {
    background:#d3d3d3;
}

div.fancy-select ul.options li.selected.hover,
div.fancy-select ul.options li.hover {
    background:#d3d3d3;
}