/* 
		adapated from jQuery UI - v1.12.1
    styles in order of appearance in DOM 
		
		basic HTML output for CSS styling purposes is...
		
		<ul id="" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" style="">
			<li class="ui-menu-item">
				<div id="" tabindex="-1" class="ui-menu-item-wrapper">DATA HERE</div>
			</li>
	  </ul>
		<div role="" aria-live="" aria-relevant="" class="ui-helper-hidden-accessible">
      <div>DATA HERE</div>
    </div>		
*/

.ui-menu { list-style:none;	padding:0; margin:0; display:block;	outline:0; }
/* customisable */ .ui-widget { font-family:"Calibri Light"; font-size:0.875em; /* 14px equivalent */ }
.ui-widget-content { background:#ffffff; color:#000000; }
.ui-autocomplete { position:absolute;	top:0; left:0; cursor:default; }
.ui-front {	z-index:100; }
.ui-menu .ui-menu-item { margin:0; cursor:pointer; /* support:IE10, see #8844 */ list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); }
/* customisable */ .ui-menu .ui-menu-item-wrapper { position:relative;	padding:0.375em; /* 6px equivalent */ }
.ui-helper-hidden-accessible { position:absolute; border:0; padding:0; /* clip:rect(0 0 0 0); overflow:hidden; */ height:1px; width:1px; margin:-1px; }
/* customisable */ .ui-menu-item-wrapper:hover, .ui-menu-item-wrapper.focus, .ui-menu-item-wrapper.selected.focus { background-color:#000000; color:#ffffff; }

@media only screen and (min-width:48em) { /* equivalent to 768px @ 1x pixel resolution */
		.ui-widget { font-size:0.938em; /* 15px equivalent */ } 
}

@media only screen and (min-width:80em) { /* equivalent to 1280px @ 1x pixel resolution */
		.ui-widget { font-size:1em; /* 16px equivalent */ }
}

@media only screen and (min-width:120em) { /* equivalent to 1920px @ 1x pixel resolution */		
		.ui-widget { font-size:1.063em; /* 17px equivalent */ }
}