/* Fixing Barrio jumping search bug */
#block-bf-barrio-search .form-row>fieldset,
#block-bf-barrio-search .form-row>div {
	padding-right: 0px !important;
	padding-left: 0px!important;
}

/* Search button and field should remain in one row */
#search-block-form {
	display: flex;
	flex-wrap: nowrap !important;
}

/* Removing search input border - now the parent div is bordered */
#search-block-form>.js-form-type-search>.form-search {
	border: none;
	outline: none !important;
	border-radius: 5px 0 0 5px;
}

/* Parent div bordering */
#search-block-form {
	border-radius: 5px;
	height: auto;
	padding: 0 !important;
	margin: .25rem 0 .25em .75em;
}

/* Removing search imput glow so the parent div would glow instead */
#search-block-form>.js-form-type-search>.form-search:focus {
	box-shadow: inset 0 0px 0px, 0 0 0px;
}


/* Making search button work */

#search-block-form>.form-actions>.form-submit {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	border: none;
	margin-top: auto;
	margin-bottom: auto;
	height: auto;
	width: 40px;
}


/* xs+sm ruleset */
@media (min-width:0px) and (max-width:767px) {
	
	/* This is when the search form stops shrinking */
	.form-type-search {
		min-width: 100px;
	}
	

}

/* xs ruleset */
@media (min-width:0px) and (max-width:575px) {
	 
	 /* Prevent search form from becoming too tall */
	.form-group {
		margin-bottom: 0 !important;
	}
	
	/* Prevent search iput on search result page from becoming too wide */
	.main-content .form-search {
		width: auto;
	}
	
	/* Prevent button on search result page from sticking to the input */
	.main-content .js-form-submit {
		margin-top: 10px;
		margin-bottom: 10px;
	}
}



/* The Magnificent Sliding Search */


/* Workaround to hide menu when search form gets big */
#navbar-main {
	flex-direction: row-reverse;
}

/* sm+ ruleset */
@media (min-width:576px) {
	
	/* Setting starting width & making the form slide back instantly */
	fieldset.form-type-search>input.form-control {
		width: 170px;
		transition-property: width;
		transition-duration: 0s;
	}
	
	/* Transition for sliding out */
	form.search-form>fieldset.form-type-search>input.form-control:focus {
		transition: width 0.3s ease-in-out;
	}
	
	/* Hiding main menu when search form gets big */
	div.navbar-form:focus-within~div#CollapsingNavbar {
		display: none !important;
	}
}

/* xs ruleset */
@media (max-width:576px) {
	
	/* Setting starting width */
	form.search-form>fieldset.form-type-search>input.form-control {
		width: 120px;
	}
}

/* sm ruleset */
@media (min-width:576px) and (max-width:767px) {
	
	/* Max width of unfolded search bar */
	form.search-form>fieldset.form-type-search>input.form-control:focus {
		width: 327px;
	}
}

/* md ruleset */
@media (min-width:768px) and (max-width:991px) {
	
	/* Max width of unfolded search bar */
	form.search-form>fieldset.form-type-search>input.form-control:focus {
		width: 577px;
	}
	
	/* Setting starting width */
	form.search-form>fieldset.form-type-search>input.form-control {
		width: 100px;
	}
	
	/* On md we need all the space we can acquire */
	#block-bf-barrio-main-menu {
		padding-left: 0px;
		padding-right: 0px;
	}
}

/* lg ruleset */
@media (min-width:992px) and (max-width:1200px) {
	
	/* Max width of unfolded search bar */
	form.search-form>fieldset.form-type-search>input.form-control:focus {
		width: 817px;
	}
	
	/* Setting starting width */
	form.search-form>fieldset.form-type-search>input.form-control {
		width: 120px;
	}
}

/* xl ruleset */
@media (min-width:1201px) {
	
	/* Max width of unfolded search bar */
	form.search-form>fieldset.form-type-search>input.form-control:focus {
		width: 995px;
	}
}