/* jQuery UI widget chrome (autocomplete dropdown, datepicker, a11y helper)
   #BY_HOME_CLUB - split out of optimized/common/{styles,mobile,1024}.css so that page types which cannot
   render these elements never download the rules. Rule order inside this file is the
   order the rules had in the origin file; the registration slot in Head.cshtml keeps
   the cascade position identical. Do not reorder. */


.ui-helper-hidden-accessible {
	display: none;
}
.ui-autocomplete {
	position: absolute;
	padding: 5px 0;
	max-width: 100%;
	border-radius: 0 0 3px 3px;
	overflow: hidden;
	background-color: #fff;
	box-shadow: 0 0 13px rgba(0,0,0,.1);
	z-index: 1070;
}
.ui-autocomplete li:first-child {
	border-top: none;
}
.ui-autocomplete a {
	display: block;
	padding: 5px 10px;
	text-align: left;
	font-size: 14px;
	color: #444444;
}
.ui-autocomplete a.ui-state-focus {
	background-color: #f6f6f6;
}
.ui-autocomplete img {
	display: inline-block;
	width: 50px;
	margin-right: 10px;
	border: 1px solid #eeeeee;
	border-radius: 2px;
	vertical-align: middle;
}
.ui-autocomplete span {
	display: inline-block;
	vertical-align: middle;
	max-width: calc(100% - 60px);
}

/* 
   #BY_HOME_CLUB - split out of mobile.css so that page types which cannot
   render these elements never download the rules. Rule order inside this file is the
   order the rules had in the origin file; the registration slot in Head.cshtml keeps
   the cascade position identical. Do not reorder. */

@media all and (max-width: 1024px) {
    .ui-autocomplete {
    	width: calc(100% - 40px) !important;
    }
}

/* 
   #BY_HOME_CLUB - split out of 1024.css so that page types which cannot
   render these elements never download the rules. Rule order inside this file is the
   order the rules had in the origin file; the registration slot in Head.cshtml keeps
   the cascade position identical. Do not reorder. */

@media all and (min-width: 1025px) {
    .ui-autocomplete {
    	width: calc(100% - 47px) !important;
    	z-index: 1015; /*should be lower than header but equal or higher than header-menu*/
    }
    .ui-autocomplete {
    	padding: 8px 0;
    }
    .ui-autocomplete a {
    	padding: 5px 15px;
    }
    .ui-autocomplete img {
    	width: 77px;
    }
    .ui-autocomplete span {
    	max-width: calc(100% - 90px);
    }
}