.typeahead__container { /** * Restore the font weight unset by the previous rule. */ /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. * 2. Correct the inability to style clickable types in iOS and Safari. */ /** * Remove the inner border and padding in Firefox. */ /** * Restore the focus styles unset by the previous rule. */ /** * Change the border, margin, and padding in all browsers (opinionated). */ /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ /** * Remove the default vertical scrollbar in IE. */ /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. */ /** * Correct the cursor style of increment and decrement buttons in Chrome. */ /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ /** * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ /** * Correct the text style of placeholders in Chrome, Edge, and Safari. */ /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ } .typeahead__container button, .typeahead__container input, .typeahead__container optgroup, .typeahead__container select, .typeahead__container textarea { font: inherit; /* 1 */ margin: 0; /* 2 */ } .typeahead__container optgroup { font-weight: bold; } .typeahead__container button, .typeahead__container input { /* 1 */ overflow: visible; } .typeahead__container button, .typeahead__container select { /* 1 */ text-transform: none; } .typeahead__container button, .typeahead__container html [type="button"], .typeahead__container [type="reset"], .typeahead__container [type="submit"] { -webkit-appearance: button; /* 2 */ } .typeahead__container button::-moz-focus-inner, .typeahead__container [type="button"]::-moz-focus-inner, .typeahead__container [type="reset"]::-moz-focus-inner, .typeahead__container [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } .typeahead__container button:-moz-focusring, .typeahead__container [type="button"]:-moz-focusring, .typeahead__container [type="reset"]:-moz-focusring, .typeahead__container [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } .typeahead__container fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } .typeahead__container legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } .typeahead__container textarea { overflow: auto; } .typeahead__container [type="checkbox"], .typeahead__container [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } .typeahead__container [type="number"]::-webkit-inner-spin-button, .typeahead__container [type="number"]::-webkit-outer-spin-button { height: auto; } .typeahead__container [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } .typeahead__container [type="search"]::-webkit-search-cancel-button, .typeahead__container [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } .typeahead__container ::-webkit-input-placeholder { color: inherit; opacity: 0.54; } .typeahead__container ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } .typeahead__container { position: relative; font: 14px Lato, "Helvetica Neue", Arial, Helvetica, sans-serif; } .typeahead__container * { box-sizing: border-box; outline: 0; } .typeahead__query { position: relative; z-index: 2; width: 100%; } .typeahead__filter { position: relative; } .typeahead__filter button { min-width: 100%; white-space: nowrap; } .typeahead__filter button:after { display: inline-block; margin-left: 4px; width: 0; height: 0; vertical-align: -2px; content: ""; border: 4px solid; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; } .typeahead__field { font-size: 0; position: relative; display: table; border-collapse: collapse; width: 100%; } .typeahead__field > * { display: table-cell; vertical-align: top; } .typeahead__query, .typeahead__filter, .typeahead__button { font-size: 14px; } .typeahead__button { position: relative; font-size: 0; width: 1%; vertical-align: middle; } .typeahead__button button { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } .typeahead__field { color: #555; } .typeahead__field input { display: block; width: 100%; height: 31px; padding: 6px 12px; background: #fff; border: 1px solid #ccc; border-radius: 2px 0 0 2px; transition: all ease-in-out .15s; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; } .typeahead__field input:focus, .typeahead__field input:active { border-color: #66afe9; } .typeahead__field input[type="search"], .typeahead__field input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .typeahead__field input[type="search"]::-ms-clear { display: none; width: 0; height: 0; } .typeahead__container.hint .typeahead__field input { background: transparent; } .typeahead__container.hint .typeahead__field input:last-child, .typeahead__hint { background: #fff; } .typeahead__container button { display: inline-block; margin-bottom: 0; text-align: center; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; background-color: #fff; border: 1px solid #ccc; height: 32px; padding: 6px 12px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #555; } .typeahead__container button:hover, .typeahead__container button:focus { color: #3c3c3c; background-color: #f5f5f5; border-color: #b3b3b3; } .typeahead__container button:active, .typeahead__container button.active { background-image: none; } .typeahead__container button:focus, .typeahead__container button:active { border-color: #66afe9; } .typeahead__container input.disabled, .typeahead__container input[disabled], .typeahead__container button.disabled, .typeahead__container button[disabled] { cursor: not-allowed; pointer-events: none; opacity: 0.65; box-shadow: none; background-color: #fff; border-color: #ccc; } .typeahead__filter, .typeahead__button { z-index: 1; } .typeahead__filter button, .typeahead__button button { margin-left: -1px; border-bottom-left-radius: 0; border-top-left-radius: 0; } .typeahead__filter:hover, .typeahead__filter:active, .typeahead__filter:focus, .typeahead__button:hover, .typeahead__button:active, .typeahead__button:focus { z-index: 1001; } .typeahead__filter:hover button:focus, .typeahead__filter:hover button:active, .typeahead__filter:active button:focus, .typeahead__filter:active button:active, .typeahead__filter:focus button:focus, .typeahead__filter:focus button:active, .typeahead__button:hover button:focus, .typeahead__button:hover button:active, .typeahead__button:active button:focus, .typeahead__button:active button:active, .typeahead__button:focus button:focus, .typeahead__button:focus button:active { z-index: 1001; } .typeahead__filter + .typeahead__button button { margin-left: -2px; } .typeahead__container.filter .typeahead__filter { z-index: 1001; } .typeahead__list, .typeahead__dropdown { position: absolute; top: 100%; left: 0; z-index: 1000; width: 100%; min-width: 160px; padding: 5px 0; margin: 2px 0 0; list-style: none; text-align: left; background-color: #fff; border: 1px solid #ccc; border-radius: 2px; background-clip: padding-box; } .typeahead__result.detached .typeahead__list { position: relative; z-index: 1041; top: initial; left: initial; } .typeahead__dropdown { right: 0; left: initial; z-index: 1001; } .typeahead__list > li { position: relative; } .typeahead__list > li:first-child { border-top: none; } .typeahead__list > li > a, .typeahead__dropdown > li > a { display: block; padding: 6px 12px; clear: both; color: #333333; text-decoration: none; } .typeahead__list > li > a:hover, .typeahead__list > li > a:focus, .typeahead__list > li.active > a, .typeahead__dropdown > li > a:hover, .typeahead__dropdown > li > a:focus, .typeahead__dropdown > li.active > a { background-color: #f5f5f5; color: #3c3c3c; } .typeahead__list.empty > li > a { cursor: default; } .typeahead__list.empty > li > a:hover, .typeahead__list.empty > li > a:focus, .typeahead__list.empty > li.active > a { background-color: transparent; } .typeahead__list > li.typeahead__group { border-color: #bfdef6; font-weight: bold; } .typeahead__list > li.typeahead__group:first-child { border-top: solid 1px #bfdef6; } .typeahead__list > li.typeahead__group > a, .typeahead__list > li.typeahead__group > a:hover, .typeahead__list > li.typeahead__group > a:focus, .typeahead__list > li.typeahead__group.active > a { cursor: default; color: #17639f; background: #ecf5fc; } .typeahead__list > li.typeahead__group + li.typeahead__item { border-color: #bfdef6; } .typeahead__container.result .typeahead__list, .typeahead__container.filter .typeahead__dropdown, .typeahead__container.hint .typeahead__hint, .typeahead__container.backdrop + .typeahead__backdrop { display: block !important; } .typeahead__container .typeahead__list, .typeahead__container .typeahead__dropdown, .typeahead__container .typeahead__hint, .typeahead__container + .typeahead__backdrop { display: none !important; } .typeahead__dropdown li:last-child { margin-top: 5px; padding-top: 5px; border-top: solid 1px #ccc; } .typeahead__cancel-button { visibility: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-radius: 50%; width: 16px; height: 30px; position: absolute; top: 1px; right: .8em; cursor: pointer; background: url(data:image/svg+xml;charset=utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDQzOC41MzMgNDM4LjUzMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDM4LjUzMyA0MzguNTMzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTQwOS4xMzMsMTA5LjIwM2MtMTkuNjA4LTMzLjU5Mi00Ni4yMDUtNjAuMTg5LTc5Ljc5OC03OS43OTZDMjk1LjczNiw5LjgwMSwyNTkuMDU4LDAsMjE5LjI3MywwICAgYy0zOS43ODEsMC03Ni40Nyw5LjgwMS0xMTAuMDYzLDI5LjQwN2MtMzMuNTk1LDE5LjYwNC02MC4xOTIsNDYuMjAxLTc5LjgsNzkuNzk2QzkuODAxLDE0Mi44LDAsMTc5LjQ4OSwwLDIxOS4yNjcgICBjMCwzOS43OCw5LjgwNCw3Ni40NjMsMjkuNDA3LDExMC4wNjJjMTkuNjA3LDMzLjU5Miw0Ni4yMDQsNjAuMTg5LDc5Ljc5OSw3OS43OThjMzMuNTk3LDE5LjYwNSw3MC4yODMsMjkuNDA3LDExMC4wNjMsMjkuNDA3ICAgczc2LjQ3LTkuODAyLDExMC4wNjUtMjkuNDA3YzMzLjU5My0xOS42MDIsNjAuMTg5LTQ2LjIwNiw3OS43OTUtNzkuNzk4YzE5LjYwMy0zMy41OTYsMjkuNDAzLTcwLjI4NCwyOS40MDMtMTEwLjA2MiAgIEM0MzguNTMzLDE3OS40ODUsNDI4LjczMiwxNDIuNzk1LDQwOS4xMzMsMTA5LjIwM3ogTTMyMi42MjEsMjcwLjkzOWMzLjYxNywzLjYxMyw1LjQyOCw3LjkwNSw1LjQyOCwxMi44NTQgICBjMCw1LjEzMy0xLjgxMSw5LjUxNC01LjQyOCwxMy4xMjdsLTI1LjY5MywyNS43MDFjLTMuNjE0LDMuNjEzLTcuOTk0LDUuNDItMTMuMTM1LDUuNDJjLTQuOTQ4LDAtOS4yMzYtMS44MDctMTIuODQ3LTUuNDIgICBsLTUxLjY3Ni01MS42ODJsLTUxLjY3OCw1MS42ODJjLTMuNjE2LDMuNjEzLTcuODk4LDUuNDItMTIuODQ3LDUuNDJjLTUuMTQsMC05LjUxNy0xLjgwNy0xMy4xMzQtNS40MmwtMjUuNjk3LTI1LjcwMSAgIGMtMy42MTYtMy42MTMtNS40MjQtNy45OTQtNS40MjQtMTMuMTI3YzAtNC45NDgsMS44MDktOS4yNCw1LjQyNC0xMi44NTRsNTEuNjc4LTUxLjY3M2wtNTEuNjc4LTUxLjY3OCAgIGMtMy42MTYtMy42MTItNS40MjQtNy44OTgtNS40MjQtMTIuODQ3YzAtNS4xNCwxLjgwOS05LjUxNyw1LjQyNC0xMy4xMzRsMjUuNjk3LTI1LjY5M2MzLjYxNy0zLjYxNiw3Ljk5NC01LjQyNCwxMy4xMzQtNS40MjQgICBjNC45NDksMCw5LjIzMSwxLjgwOSwxMi44NDcsNS40MjRsNTEuNjc4LDUxLjY3NGw1MS42NzYtNTEuNjc0YzMuNjEtMy42MTYsNy44OTgtNS40MjQsMTIuODQ3LTUuNDI0ICAgYzUuMTQxLDAsOS41MjEsMS44MDksMTMuMTM1LDUuNDI0bDI1LjY5MywyNS42OTNjMy42MTcsMy42MTcsNS40MjgsNy45OTQsNS40MjgsMTMuMTM0YzAsNC45NDgtMS44MTEsOS4yMzUtNS40MjgsMTIuODQ3ICAgbC01MS42NzUsNTEuNjc4TDMyMi42MjEsMjcwLjkzOXoiIGZpbGw9IiM1NTU1NTUiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K) no-repeat scroll center center transparent; } .typeahead__container.cancel:not(.loading) .typeahead__cancel-button { visibility: visible; opacity: .25; z-index: 9; } .typeahead__container.cancel:not(.loading) .typeahead__cancel-button:hover { opacity: .4; } .typeahead__search-icon { padding: 0 1.25rem; width: 16px; height: 16px; display: block; background: url(data:image/svg+xml;charset=utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI1MC4zMTMgMjUwLjMxMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjUwLjMxMyAyNTAuMzEzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnIGlkPSJTZWFyY2giPgoJPHBhdGggc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkOyIgZD0iTTI0NC4xODYsMjE0LjYwNGwtNTQuMzc5LTU0LjM3OGMtMC4yODktMC4yODktMC42MjgtMC40OTEtMC45My0wLjc2ICAgYzEwLjctMTYuMjMxLDE2Ljk0NS0zNS42NiwxNi45NDUtNTYuNTU0QzIwNS44MjIsNDYuMDc1LDE1OS43NDcsMCwxMDIuOTExLDBTMCw0Ni4wNzUsMCwxMDIuOTExICAgYzAsNTYuODM1LDQ2LjA3NCwxMDIuOTExLDEwMi45MSwxMDIuOTExYzIwLjg5NSwwLDQwLjMyMy02LjI0NSw1Ni41NTQtMTYuOTQ1YzAuMjY5LDAuMzAxLDAuNDcsMC42NCwwLjc1OSwwLjkyOWw1NC4zOCw1NC4zOCAgIGM4LjE2OSw4LjE2OCwyMS40MTMsOC4xNjgsMjkuNTgzLDBDMjUyLjM1NCwyMzYuMDE3LDI1Mi4zNTQsMjIyLjc3MywyNDQuMTg2LDIxNC42MDR6IE0xMDIuOTExLDE3MC4xNDYgICBjLTM3LjEzNCwwLTY3LjIzNi0zMC4xMDItNjcuMjM2LTY3LjIzNWMwLTM3LjEzNCwzMC4xMDMtNjcuMjM2LDY3LjIzNi02Ny4yMzZjMzcuMTMyLDAsNjcuMjM1LDMwLjEwMyw2Ny4yMzUsNjcuMjM2ICAgQzE3MC4xNDYsMTQwLjA0NCwxNDAuMDQzLDE3MC4xNDYsMTAyLjkxMSwxNzAuMTQ2eiIgZmlsbD0iIzU1NTU1NSIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat scroll center center transparent; } .typeahead__container.loading .typeahead__query:before, .typeahead__container.loading .typeahead__query:after { transition: all 0s linear, opacity 0.2s ease; position: absolute; z-index: 3; content: ''; top: 50%; right: .55em; margin-top: -10.5px; width: 21px; height: 21px; box-sizing: border-box; border-radius: 500rem; border-style: solid; border-width: .1em; } .typeahead__container.loading .typeahead__query:before { border-color: rgba(0, 0, 0, 0.35); } .typeahead__container.loading .typeahead__query:after { -webkit-animation: button-spin 0.6s linear; animation: button-spin 0.6s linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; border-color: #fff transparent transparent; box-shadow: 0 0 0 1px transparent; } @-webkit-keyframes button-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes button-spin { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }