/********************************************** 
partsearchbar-1
**********************************************/

/* config */
.partSearchBar                      {height: 36px; margin-bottom: 30px;}
	.searchBarInput                   {padding-right: 36px; padding-left: 10px; font-family: inherit; font-size: 16px; border-top-left-radius: 4px; border-bottom-left-radius: 4px;}
	.searchBarButton, .searchBarReset {width: 36px;} 

	.searchBarInput                   {border:solid 1px #999; background-color:#fff; color: #000;}
	.searchBarInput::placeholder      {color:#999;}

	.searchBarReset                   {border:none; background-color:transparent;}
		.searchBarReset svg               {width: 10px; height: 10px; fill: #000; transition: fill 0.3s;}

	.searchBarButton                  {border:none; background-color: #89C539; border-top-right-radius: 4px; border-bottom-right-radius: 4px;}  
		.searchBarButton svg              {width: 18px; height: 18px; fill: #fff;}

/* fundementals */
.partSearchBar                      {display:flex;} 
	.searchBarContainer                {flex: 1 1 auto; position: relative; display:flex;}

		.searchBarInput                 {width:100%; height:100%; background-color: transparent;}
		
		.searchBarButton 				{transition: box-shadow .15s ease-in-out;}
		.searchBarInput					{transition: box-shadow .15s ease-in-out;}
		.searchBarInput:focus, .searchBarButton:focus	{box-shadow: 0 0 0 0.2rem rgba(0,0,0,.1);}

		.partSearchBar .searchBarReset                   		{position:absolute; top:0; right:0; height: 100%; display: flex; align-items: center; justify-content: center; visibility: hidden; opacity: 0; transition: opacity 0.15s ease-in-out; cursor:pointer;}  
		.searchBarReset:hover svg, .searchBarReset:focus svg	{fill:#E74B3B;}
		.searchBarReset.active            	{visibility: visible; opacity: 1;}

		.searchBarButton                  	{flex: 0 0 auto; height:100%; display: flex; align-items: center; justify-content: center; cursor:pointer;}

/* form reset */
.partSearchBar input[type=search], .partSearchBar button            {-webkit-appearance: none; border-radius:0; outline: none;}
.partSearchBar input[type=search]::-ms-clear                        {display: none;}
.partSearchBar input[type=search]::-webkit-search-cancel-button    	{-webkit-appearance: none;}