/* Search Box CSS */
.ansarel-search-wrapper {
	display: block;
	overflow: hidden;
	cursor: pointer;
	text-align: right;

	input[type=search] {
		padding: 10px;
		cursor: pointer;
		border-radius: 0;
		transition: all .5s;
		box-sizing: border-box;
		outline: none;
		border: 2px solid rgba(225, 225, 225, 0.9);

		&:focus, &:hover {
			cursor: auto;
			border-color: #5751E1;
			box-shadow: none;
		}
	}
	button {
		border: none;
		border-radius: 0;
		padding: 0;
	}
	
	input[type="search"]{
		&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration { 
			display: none; 
		}
	}
	.ansarel-search-icon-toggle .ansarel_search_input {
		position: absolute;
		width: 0;
		right: 0;
		background-color: transparent;
	}
	&.ansarel-input-focus .ansarel-search-icon-toggle .ansarel_search_input{
		position: absolute;
		width: 250px;
		right: 0;
	}
	.ansarel_search_container,	.ansarel-search-icon-toggle, .ansarel-search-icon-toggle i, .ansarel-search-icon-toggle i:before {
		position: relative;
	}
	&:has(.ansarel-search-btn){
		position: relative;
		overflow: visible;
	}
	.ansarel-search-btn + .ansarel-search-from{
		display: none;
		position: absolute;
		right: 0px;
		z-index: 100;
		top: 100%;
		animation-duration: 0.8s;
		&.show-search{
			display: block;
			animation-name: fadeIn;
		}
	}
	.ansarel-search-btn{
		width: 40px;
		height: 40px;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		color: #fff;
		border-radius: 50%;
		background-color: #5751E1;
		&:hover,:focus{
			background-color: #676ced;
		}
	}
}
// search-AJAX STYLE
.ansarel-search-from{
	max-width: 400px;
	width: 100%;
	border: none;
	.ansarel-search-icon {
		text-align: start;
		margin-top: 20px;
		margin-bottom: 0;
		.ansarel-search-results{
			list-style: none;
			padding: 0;
			margin: 20px 0 0 0;
			display: flex;
			flex-direction: column;
			gap: 20px;
			.ansarel-search-link { 
				display: flex;
				align-items: center;
				gap: 20px;
				img{ 
					width: 55px;
					height: 55px;
					object-fit: cover;
					border-radius: 0;
				}
				.ansarel-search-title{
					text-align: start;
					color: #000;
					line-clamp: 2;
					-webkit-line-clamp: 2;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					&:hover{
						color: #888;
					}
				}
			}
		}
	}
}
.ansarel-search-align-center{ 
	.ansarel-search-btn + .ansarel-search-from{
		left: 0;
		margin: 0 auto;
	}
	.ansarel-search-wrapper{
		&.icon_text, &.text_title {
			.ansarel-search-from{
				margin: 0 auto;
			}
		}
	}
}
.ansarel-search-align-start{
	.ansarel-search-btn + .ansarel-search-from{
		left: 0;
		right: inherit;
	}
	.ansarel-search-wrapper{
		&.icon_text, &.text_title {
			.ansarel-search-from{
				margin-right: auto;
			}
		}
	}
}
.ansarel-search-align-end{
	.ansarel-search-wrapper{
		&.icon_text, &.text_title {
			.ansarel-search-from{
				margin-left: auto;
			}
		}
	}
}
.ansarel_search_container {
	display: inline-flex;
	overflow: hidden;
	box-shadow: none ;
	width: 100%;
}
.ansarel_search_input {
	flex-basis: 100%;
	box-shadow: none ;
	&::placeholder{
		color: #bdbdbd;
	}
}
.ansarel-search-icon-toggle i.fa-search {
	display: inline-block;
	position: absolute;
	width: 20px;
	box-sizing: content-box;
	padding: 10px;
}
.ansarel-search-icon-toggle i:before {
	vertical-align: middle;
}
/*search icon toggle css*/
.ansarel-search-icon-toggle input{
	&:-moz-placeholder, &::-webkit-input-placeholder {
		color: transparent;
	}
}
.ansarel-search-layout-icon .ansarel-search-icon-toggle .ansarel_search_input {
	background-color: unset;
	height: 100%;
}
.ansarel_search_container{

	.ansarel-search-submit {
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 3%;
		position:relative;
		width: 100px;
		cursor: pointer;
		background: #5751E1;
		color: #fff;
		&:hover{
			background: #676ced;
		}
	}
	button#clear-with-button{
		visibility: hidden;
		position: absolute;
		line-height: 0;
		top: 0;
		padding: 0 8px;
		font-style: normal;
		font-size: 1.2em;
		user-select: none;
		cursor: pointer;
		bottom:0;
		background-color: transparent;
		box-shadow: none;
	}
}
.ansarel_search_container button#clear,
.ansarel-search-icon-toggle button#clear {
  	visibility: hidden;
	position: absolute;
	right:0; 
	top:0;
	padding: 0 8px;
	font-style: normal;
	user-select: none;
	cursor: pointer;
	bottom:0;
	margin-right:10px;
	background-color: transparent;
}
.ansarel-search-icon-toggle {
	width: 100%!important;
}
.ansarel-search-layout-text_title .ansarel_search_container,
.ansarel-search-layout-icon_text .ansarel_search_container,
.ansarel-search-layout-text_title .ansarel_search_container .ansarel_search_input,
.ansarel-search-layout-icon_text .ansarel_search_container .ansarel_search_input {
	width: 100%;
}
.ansarel-search-icon-toggle {
	line-height: 1.5;
}
.search-btn {
	color: #1abc9c;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: 0.5s;
}
.search-box:hover .search-btn {
	background: #fff;   
}