.flexdatalist-results { position: absolute; top: 0; left: 0; border: 1px solid #444; border-top: none; background: #fff; z-index: 100000; max-height: 300px; overflow-y: auto; box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); color: #333; list-style: none; margin: 0; padding: 0; } .flexdatalist-results li { border-bottom: 1px solid #ccc; padding: 0 15px; font-size: 14px; line-height: 35px; } .flexdatalist-results li span.highlight { font-weight: 700; text-decoration: underline; } .flexdatalist-results li.active { background: #2B82C9; color: #fff; cursor: pointer; } /** * Grouped items */ .flexdatalist-results li.group { background: #F3F3F4; color: #666; padding: 0 8px; } .flexdatalist-results li .group-name { font-weight: 700; } .flexdatalist-results li .group-item-count { font-size: 85%; color: #777; display: inline-block; padding-left: 10px; } /** * Multiple items */ .flexdatalist-multiple:before { content: ''; display: block; clear: both; } .flexdatalist-multiple { width: 100%; margin: 0; padding: 0 0 0 10px; list-style: none; text-align: left; cursor: text; } .flexdatalist-multiple:after { content: ''; display: block; clear: both; } .flexdatalist-multiple li { display: inline-block; position: relative; margin: 5px 5px 5px 0; float: left; } .flexdatalist-multiple li.input-container, .flexdatalist-multiple li.input-container input { border: none; width: 280px; height: auto; padding: 0; line-height: 25px; } .flexdatalist-multiple li.value { display: inline-block; padding: 2px 25px 2px 5px; background: #efefef; border-radius: 3px; } .flexdatalist-multiple li.toggle { cursor: pointer; transition: opacity ease-in-out 300ms; } .flexdatalist-multiple li.toggle.disabled { text-decoration: line-through; opacity: 0.80; } .flexdatalist-multiple li.value span.fdl-remove { font-weight: 700; padding: 0 5px; font-size: 20px; line-height: 25px; cursor: pointer; position: absolute; top: 0; right: 0; opacity: 0.70; } .flexdatalist-multiple li.value span.fdl-remove:hover { opacity: 1; }