/*
INDEX
	- TOOLS
	- UI-AUTOCOMPLETE
	- BUSINESS GROUPS
	- BUSINESS CARDS
*/

/*--------------------------------------------  ADD YOUR BUSINESS  --------------------------------*/

/*-----------------  TOOLS   -----------------*/

/*div#tools {
	display: table;
	width: 100%;
	margin-bottom: 30px;
}*/

#tools > div:last-child { width: inherit; }

@media screen and (min-width:1180px) {
	.busines_Search {
		width: 100% !important;
		float: none !important;
		margin-right: 10px;
	}
	
	.busines_index {
		width: 100%;
		/*max-width: 580px;*/
		/*float: left;*/
	}
	
	.add_Business dl {
		float: right;
	}
}

@media screen and (min-width:500px) and (max-width:1179px) {
	.busines_Search {
		width: 100%;
		margin-bottom: 30px;
	}
	
	.busines_index {
	width: calc(100% - 170px);
	float: left;}
	
	.busines_index {
		margin-bottom: 10px;
	}
	
	.add_Business dl {
		float: right;
	}
}

@media screen and (max-width:499px) {

	.add_Business { float: none !important; margin: 0 auto; }
	
	.add_Business dl {
		float: none;
		margin: 0 auto;
	}
}


#tools form.default fieldset input, form.default fieldset select {
	width: calc(100% - 165px);
}

#tools form.default label {
	width: 149px;
}

.add_Business a {
	color: #FFF;
	text-align: center;
}

.add_Business dl {
	background: var(--color_pd2);
	transition: all ease-in-out 250ms;
	max-width: 153px;

}

.add_Business a:hover dl{
	background: var(--color_pl3);
	transition: all ease-in-out 250ms;
}

.add_Business dt {
	position: relative;
}

.add_Business dd{
	padding: 14px 0;
	font-size: 13px;
}

.add_Business span {
	background: var(--color_pl3);
	width: 30px;
	height: 30px;
	font-size: 23px;
	display: block;
	margin: 0 auto;
	position: absolute;
	border-radius: 100%;
	left: calc(50% - 15px);
	bottom: -10px;
	transition: transform .7s ease-in-out;
}

div#business_groups {
	margin-bottom: 33px;
}

.add_Business a:hover span{
	transform: rotate(90deg);
	background: var(--color_pd2);
	transition: transform .7s ease-in-out;
}

#tools input[type="submit"] {
	margin-right: 13px;
}

div#tools {
	margin-bottom: 40px;
}

/*-----------------  UI-AUTOCOMPLETE   ---------------*/
.ui-autocomplete-loading {
	background: url("../../../../images/ui-autocomplete.gif") center no-repeat;
	background-position-x: 99%;
	transition: none;
}

.ui-autocomplete {
	max-height: 400px;
	overflow-y: auto;
	/* prevent horizontal scrollbar */
	overflow-x: hidden;
}

* html .ui-autocomplete {
	 height: 400px;
}


/*-----------------  BUSINESS GROUPS  ----------------*/
#business_groups {
	display: flex;
}

#business_groups a {
	display: block;
	white-space: nowrap;
	border: 1px solid var(--gray3);
	padding: 5px 4px;
	font-size: 14px;
	overflow-x: hidden;
	text-overflow: ellipsis;
	margin-bottom: 5px;
	text-align: center;
	transition: all ease-in-out 250ms;
}

#business_groups a:hover {
	background: var(--color_p);
	color: #FFF;
	border: var(--color_p);
}

/*-----------------  BUSINESS CARDS  -----------------*/

@media screen and (min-width:1180px) {
	#business_cards dt img {
		max-height: 110px;
	}
}
@media screen and (min-width:500px) and (max-width:1179px) {
	#business_cards dt img {
		max-height: 110px;
	}
}
@media screen and (max-width:499px) {

	#business_cards dt img {
		width: 100%;
	}
}

#business_cards dl {
	border: 1px solid var(--gray3);
	overflow: hidden;
	margin-bottom: 32px;
	box-shadow: var(--gray3) 5px 5px 8px;
}

#business_cards dt {
	padding: 10px 0px;
	height: 150px;
}

#business_cards dt img {
	display: block;
	margin: 0 auto;
	padding: 16px;
}

#business_cards dl dd.business_name {
	text-align: center;
	font-weight: bold;
	padding: 8px 15px 0;
	font-size: 16px;
	white-space: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;
}

#business_cards dd.categories {
	text-align: center;
	font-style: italic;
	white-space: nowrap;
	overflow-x: hidden;
	text-overflow: ellipsis;
	padding: 0 5px 30px;
	color: var(--color_pd1);
	cursor: help;
}

#business_cards dd.buttons {
	display: flex;
	justify-content: center;
	cursor: pointer;
}

#business_cards dd.buttons a {
	display: block;
	padding: 3px 10px;
	border: 1px solid var(--gray3);
	margin: 0 2px;
	border-radius: 15px;
	font-size: 12px;
}

#business_cards dd.buttons a.selected {
	background-color: var(--gray2);
}

#business_cards dl dd.description,
#business_cards dl dd.contact {
	padding: 11px 30px;
	height: 130px;
	margin: 20px 10px 30px 10px;
}

#business_cards dl dd.description {
	overflow-y: auto;
}

#business_cards dd.contact p {
	font-size: 14px;
	margin-bottom: 3px;
}

#business_cards .sm a {
	display: inline-block;
	height: 20px;
	width: 20px;
	margin-right: 5px;
	cursor: pointer;
}

#business_cards .sm a::before {
	font-family: 'Font Awesome 5 Brands';
	font-weight: 400;
	position: absolute;
	left: 0;
	font-size: 19px;
	top: 1px;
}

#business_cards .sm a.bd_Facebook:before  { content: "\f082"; }
#business_cards .sm a.bd_Instagram:before { content: "\f16d"; }
#business_cards .sm a.bd_YouTube:before   { content: "\f167"; }
#business_cards .sm a.bd_Twitter:before   { content: "\f081"; }

/* Google Chrome e Safari */
dd.description::-webkit-scrollbar {
	width: 8px;
	background-color: white;
	border: solid 0.5px var(--color_a);

}

dd.description::-webkit-scrollbar-thumb {
	background-color: var(--color_a);
	transition: 0.5s;
}

dd.description::-webkit-scrollbar-thumb:hover {
	background-color: var(--color_p);
	transition: 0.5s;
}

dd.description::-webkit-scrollbar-corner {
	background-color: #f1f1f1;
}

/* Mozilla Firefox */
dd.description {
	scrollbar-width: thin;
	scrollbar-color: var(--color_a) white;
}

dd.description:hover {
	scrollbar-color: var(--color_p) white;
}

dd.description:corner-present {
	scrollbar-color: #f1f1f1 white;
}

a[data-this_dd=".reviews"] {
	display: none !important;
}





/*--------------------------------------------  SEARCH YOUR BUSINESS  --------------------------------*/

.ui-autocomplete-loading {
	background: url("images/ui-autocomplete.gif") center no-repeat;
	background-position-x: 99%;
	transition: none;
}

.ui-autocomplete {
	max-height: 400px;
	overflow-y: auto;
	/* prevent horizontal scrollbar */
	overflow-x: hidden;
}

/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall */

* html .ui-autocomplete {
	height: 400px;
}

div#bussiness_are h2 {
	display:none;
}

.add_Business dl {
	float: none;
	margin: 0 auto;
	display: block;
}

section.has_aside{ background: none !important; }


/*--------------------------------------------  GENERAL SETTINGS  --------------------------------*/
.busines_Search form.default fieldset,
#business_new form.default fieldset {
	border: 1px solid var(--color_pd2);
	padding: 10px;
	margin-bottom: 10px;
}

.busines_Search form.default fieldset legend,
#business_new form.default fieldset legend {
	position: relative;
	top: 0;
	background: var(--color_pd2);
	max-width: 220px;
	text-align: center;
	color: white;
	font-size: 14px;
}