/* Variables */
/* ## Fonts ## */
/* ## Colors ## */
/* ## Transition ## */
/* Functions */
/* 12-Column Grid System */
/* 	For 3 columns add: "width: grid-width(4);" For 4 add: "width: grid-width(3);" */
/* rem Sizing */
/* Font Sizing */
/* Mixins */
/*********************
BREAKPOINTS

Usage:

	@include breakpoint(breakPointName) {
		 Styles 
	}

*********************/
/* //////////////////
FLEXBOX
////////////////// */
/* Search Section 
////////////////////////////// */

/*
AgenciesList refers to the div that encompasses all agency listings
formsResults refers to the div that encompasses all service listings
*/
#agenciesList, #formsResults{
	
		margin-left:5px;
	margin-top:5px;

}
/*
each listing is encompassed in class agencyItem or serviceItem depending on the list type.
*/
.agencyItem::first-line{
 font-weight:bold
}
.serviceItem::first-line{
 font-weight:bold

}
#search-banner input::-ms-clear{
   display:none;
}
#search-banner {position:absolute;width: 100%; height: auto; margin: 0;margin-top:50px; padding: 0; background-repeat: no-repeat;/* / */ /* /#searchResults */ }


#search-banner.fade::after { opacity: 1; }



.search-panel-active a {
	font-size:1em!important;
}
.agencyItem hr,
.serviceItem hr {
	width:100%!important;
}
#search-banner  p { padding: 0; transition: top .4s;width: auto;  margin: 0 auto;margin-right:30px; margin-left:0px; }

#search-banner p.search-ajax-active { }

#search-banner p.search-ajax-active label {  }

#search-banner p.search-ajax-active button.clear-search { display: block; }

#search-banner label { position: relative; top: -1.5em; left: 0; color: white; font-size: 2em; font-weight: 400;   font-family:'Century Gothic', Arial, Helvetica, sans-serif; 
  font-weight: normal;
  line-height: 1.1;
  color:black; font-style:normal; padding-bottom:7px;
 }


#search-banner input {position:absolute; width: 100%; height: 3rem; margin: 0 auto; left:0; padding: 0 1rem; border: 1px solid #eae8e8; font-size: 1.3em; color: #58595b; background: rgba(255, 255, 255, 0.8); text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8); border-radius: 0.25rem; }



#search-banner button[type=button] { position: relative; float:right; right: 0; width: 3rem; margin-top:-8px; z-index:9999!important; height: 4rem; padding: 0; background: transparent url("/images/2022/search.png") center no-repeat; background-size: 32px; text-indent: 100%; overflow: hidden; white-space: nowrap; background-color:transparent; border:0px none; margin-right:-20px}


#results {
	
	
	display:none;
}


#search-banner button.clear-search { display: none; position: absolute; top: 0; right: 3rem; width: 3rem; height: 3rem; text-indent: -999em; background: transparent url(/images/clear.svg) center no-repeat; border-radius: 2px; border-right:0px none; border-left:0px none;}



#search-banner #searchResults {position:absolute;top: 0;width: 300%;opacity: 0;margin: 0 auto;margin-top:50px;margin-left:-200%;margin-right:0px;background: white;transition: height, opacity .4s .5s;border:1px solid #cccccc; /* /#searchTabs */ /* /#results */ /* /#relatedResults */}

#search-banner #searchResults.search-ajax-active { opacity: 1; z-index: 1!important; margin-bottom:20px;}

#search-banner #searchResults #searchTabs {  display:none; }

#search-banner div#searchResults.clearfix.search-ajax-active {
	z-index:9999!important;
}

#search-banner #searchResults #searchTabs li { float: left; width: 25%; height: 4vh; }

 #search-banner #searchResults #searchTabs li { width: 32.33%; margin:1% .5% 1% .5%; }
  
#search-banner button#searchButton:hover, #search-banner button#searchButton:active, #search-banner button#searchButton {
	border:0px none!important;
}

#search-banner #searchResults #searchTabs li a {text-transform:uppercase;padding:10px; color:white;display: block; text-align: center; text-decoration: none; background-color:#0054a6; }

#search-banner #searchResults #searchTabs li a.active { background:#f4ad2c; color:black;}

#search-banner #searchResults #searchTabs li a:hover { background: #f4ad2c; color:black;}

#search-banner #searchResults #results { position: relative; width: 100%; height: 76vh;}

#search-banner #searchResults #results iframe { width: 100%; height: 76vh; }

#search-banner #searchResults #results #agenciesList, #search-banner #searchResults #results #formsResults, #search-banner #searchResults #results #googleResults, #search-banner #searchResults #results #sharepointResults { display: none; width: 100%; height: 100%;  top: 11vh; }

/*#search-banner #searchResults #results #agenciesList.search-panel-active, #search-banner #searchResults #results #formsResults.search-panel-active, #search-banner #searchResults #results #googleResults.search-panel-active { display: block; padding-left:1%; padding-right:1%; }*/


#search-banner #searchResults #results #agenciesList { overflow-x: hidden; overflow-y: auto; /* /.item */ }

#search-banner #searchResults #results #agenciesList .item { border-bottom: 1px solid #e0dede; background: white; }

#search-banner #searchResults #results #agenciesList .item a { display: block; position: absolute; padding: .5rem; }



#search-banner #searchResults #results #agenciesList .item a h4.title { font-size: 16px; font-size: 1rem; font-weight: 700; line-height: 1.2; width: 60%; }


#search-banner #searchResults #results #agenciesList .item a .agency, #search-banner #searchResults #results #agenciesList .item a .description { display: block; color: #676767; font-size: 11px; font-size: 0.6875rem; line-height: 1; }

#search-banner #searchResults #results #agenciesList .item a .description { width: 76%; }

#search-banner #searchResults #results #agenciesList .item a .agency { position: absolute; top: .5rem; right: .5rem; width: 20%; font-style: italic; }


#search-banner #searchResults #results #agenciesList .item a:hover { text-decoration: none; }

#search-banner #searchResults #results #formsResults, #search-banner #searchResults #results #googleResults, #search-banner #searchResults #results #sharepointResults { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;  }

#search-banner #searchResults #results #formsResults iframe, #search-banner #searchResults #results #googleResults iframe { position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 100%; }


.search-nav.nav.nav-pills {
    display: flex;
    align-items: stretch;
}
#sharepointResults{
	font-family:Arial, Helvetica, sans-serif;
}
#sharepointResultList{
	padding: 1%;
}
#sharepointSearchInfo{
	padding: .5em;
	border-bottom:1px solid #e9e9e9;
}
#sharepointResultList > li{
	padding: 1% 0;
	border-bottom:1px solid #e9e9e9;
}
#sharepointResultList > li > a{
	font-size:16px !important;
}
#sharepointResultList > li > span{
	font-size:14px !important;
}

.search-nav.nav.nav-pills > li {
    background-color: #2b5a3f;
    color: white;
    flex-grow: 12;
    text-align: center;
}

.search-nav.nav.nav-pills > li > a {
    background-color: #2b5a3f;
    color: white;
}

.search-nav.nav.nav-pills > li.active > a {
    background-color: #ffcf35;
    color: black;
}

.search-nav.nav.nav-pills > li.active {
    background-color: #ffcf35;
    color: black;
}






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

#search-banner #searchResults {position:absolute;top: 0;width: 320%;opacity: 0;margin: 0 auto;margin-top:50px;margin-left:-220%;margin-right:0px;background: white;transition: height, opacity .4s .5s;border:1px solid #cccccc; /* /#searchTabs */ /* /#results */ /* /#relatedResults */}

#search-banner {
	width:90%;
}
}

@media screen and (max-width: 768px){
#search-banner #searchResults { width: 100%; margin-left:0%; }
#search {
	margin-bottom:30px;
}
.nav-pills > li + li {
	margin-left:0px;
}
/*search*/
#search-banner {
	width:100%;
}
#search-banner #searchResults #results {
	width:100%; margin-left:0%;
}
.search-nav.nav.nav-pills {
    display: grid;
}

}


@keyframes spinner {
	0% {
	  transform: translate3d(-50%, -50%, 0) rotate(0deg);
	}
	100% {
	  transform: translate3d(-50%, -50%, 0) rotate(360deg);
	}
}
.spin::before {
    animation: 1.5s linear infinite spinner;
    animation-play-state: inherit;
    border: solid 5px #cfd0d1;
    border-bottom-color: #1c87c9;
    border-radius: 50%;
    content: "";
    height: 40px;
    width: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    /* text-align: center; */
    /* margin: auto; */
    will-change: transform;}