.elespare-search-wrapper {
	.elespare-search-icon--toggle {
	  color: #000;
	  border: none;
	  background: none;
	  padding: 0;
	  cursor: pointer;
	}
	.elespare-search--toggle {
	  position: fixed;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  background-color: rgba(0, 0, 0, 0.85);
	  z-index: 99999999;
	  align-items: center;
	  display: flex !important;
	  justify-content: center;
	  transform: scale(0);
	  transition: transform 0.2s;
  
	  &.show {
		transition: transform 0.3s;
		transform: scale(1);
	  }
	  .btn-elespare-search-form {
		width: auto;
		min-width: 30px;
		flex-shrink: 0;
		border: none;
		border-radius: 0;
		color: #fff;
		background-color: #bb1919;
		height: unset;
		padding: 0 1.2em;
		white-space: nowrap;
	  }
	  .elespare-search-toggle--wrapper {
		width: 80%;
		.elespare--search-sidebar-wrapper {
		  padding: 0;
		  overflow: hidden;
		  .search-form {
			display: flex;
			overflow: hidden;
			.search-field {
			  height: 50px;
			  background: rgba(241, 241, 241, 0.5);
			  border-radius: 0;
			}
		  }
		}
		input[type='search']::-webkit-search-decoration,
		input[type='search']::-webkit-search-cancel-button,
		input[type='search']::-webkit-search-results-button,
		input[type='search']::-webkit-search-results-decoration {
		  -webkit-appearance: none;
		}
	  }
	  .elespare--site-search-close {
		position: absolute;
		color: #ffffff;
		top: 50px;
		right: 10%;
		background: none;
		border: none;
		font-size: 36px;
		line-height: normal;
		padding: 0;
		transition: all 0.3s;
		&:hover {
		  transform: rotate(180deg);
		  transition: all 0.3s;
		}
	  }
	}
	.elespare-search-form-header {
	  .elespare--search-sidebar-wrapper {
		padding: 0;
		.site-search-form {
		  overflow: hidden;
		  display: flex;
		  .search-field {
			// border: none;
			border-radius: 0;
			width: 100%;
			background: rgba(241, 241, 241, 0.5);
		  }
		}
		.btn-elespare-search-form {
		  width: auto;
		  min-width: 30px;
		  flex-shrink: 0;
		  border: none;
		  border-radius: 0;
		  color: #fff;
		  background-color: #bb1919;
		  height: unset;
		  padding: 0 1.2em;
		  white-space: nowrap;
		}
	  }
	}
	.elespare-search-dropdown-toggle {
	  .elespare--search-sidebar-wrapper {
		.btn-elespare-search-form {
		  border: none;
		  border-radius: 0;
		  line-height: 1;
		  height: unset;
		  padding: 0.9em 1.2em 0.8em;
		  color: #fff;
		  opacity: 1;
		  background-color: #bb1919;
		  white-space: nowrap;
		}
	  }
	  .elespare-search--toggle-dropdown {
		position: absolute;
		top: 120%;
		width: 300px;
		text-align: left;
		visibility: hidden;
		filter: alpha(opacity=0);
		opacity: 0;
		margin: 0 auto;
		margin-top: 1px;
		z-index: 99;
		border-radius: 0px;
		transition: opacity 0.2s, top 0.4s, visibility 0s linear 0.4s;
  
		.elespare--search-sidebar-wrapper {
		  .search-form {
			display: flex;
			width: 100%;
			justify-content: space-between;
			overflow: hidden;
			box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.15);
			input.search-field {
			  border-radius: 0;
			  padding: 10px 15px;
			  width: 100%;
			  background: rgba(241, 241, 241, 0.5);
			  height: unset;
			}
		  }
		}
	  }
	  &.show {
		.elespare-search--toggle-dropdown {
		  visibility: visible;
		  filter: alpha(opacity=1);
		  opacity: 1;
		  z-index: 999;
		  top: 100%;
		  transition: opacity 0.4s, top 0.4s;
		}
	  }
	}
	.site-search-form {
	  .site-search-field {
		&:focus,
		&:focus-within {
		  outline: none;
		}
	  }
	}
  }
  
  .elespare-icons-search {
	.screen-reader-text {
	  display: none;
	}
  }
  
  // different aligns
  .elementor-widget-search-from {
	position: relative;
	&.elespare-grid-left {
	  .elespare-site-search-toggle,
	  .elespare-search-dropdown-toggle {
		text-align: left;
	  }
	  .elespare-search--toggle-dropdown {
		right: auto;
		left: 10px;
	  }
	  .elespare-search-form-header {
		.site-search-form {
		  flex-direction: row;
		}
	  }
	}
	&.elespare-grid-center {
	  .elespare-site-search-toggle,
	  .elespare-search-dropdown-toggle {
		text-align: center;
	  }
	  .elespare-search--toggle-dropdown {
		right: auto;
		left: 50%;
		transform: translateX(-50%);
	  }
	  .elespare-search-form-header {
		.site-search-form {
		  flex-direction: column;
		  .site-search-field {
			text-align: center;
		  }
		}
	  }
	}
	&.elespare-grid-right {
	  .elespare-site-search-toggle,
	  .elespare-search-dropdown-toggle {
		text-align: right;
	  }
	  .elespare-search--toggle-dropdown {
		right: 10px;
		left: auto;
	  }
	  .elespare-search-form-header {
		.site-search-form {
		  flex-direction: row-reverse;
		  .site-search-field {
			text-align: right;
		  }
		}
	  }
	}
  }
  
  ////////////////////////////////////////
  // button focus
  
  .elespare-search-wrapper {
	button {
	  &:focus {
		outline: none;
		box-shadow: none;
	  }
	  &:focus-visible {
		outline: 1px dotted;
	  }
	}
  }
  
  @media (max-width: 1024px) {
	.elementor-widget-search-from {
	  &.elespare-grid-tablet-left {
		.elespare-site-search-toggle,
		.elespare-search-dropdown-toggle {
		  text-align: left;
		}
		.elespare-search--toggle-dropdown {
		  right: auto;
		  left: 10px;
		}
		.elespare-search-form-header {
		  .site-search-form {
			flex-direction: row;
		  }
		}
	  }
	  &.elespare-grid-tablet-center {
		.elespare-site-search-toggle,
		.elespare-search-dropdown-toggle {
		  text-align: center;
		}
		.elespare-search--toggle-dropdown {
		  right: auto;
		  left: 50%;
		  transform: translateX(-50%);
		}
		.elespare-search-form-header {
		  .site-search-form {
			flex-direction: column;
			.site-search-field {
			  text-align: center;
			}
		  }
		}
	  }
	  &.elespare-grid-tablet-right {
		.elespare-site-search-toggle,
		.elespare-search-dropdown-toggle {
		  text-align: right;
		}
		.elespare-search--toggle-dropdown {
		  right: 10px;
		  left: auto;
		}
		.elespare-search-form-header {
		  .site-search-form {
			flex-direction: row-reverse;
			.site-search-field {
			  text-align: right;
			}
		  }
		}
	  }
	}
  }
  @media (max-width: 767px) {
	.elementor-widget-search-from {
	  &.elespare-grid-mobile-left {
		.elespare-site-search-toggle,
		.elespare-search-dropdown-toggle {
		  text-align: left;
		}
		.elespare-search--toggle-dropdown {
		  right: auto;
		  left: 10px;
		}
		.elespare-search-form-header {
		  .site-search-form {
			flex-direction: row;
		  }
		}
	  }
	  &.elespare-grid-mobile-center {
		.elespare-site-search-toggle,
		.elespare-search-dropdown-toggle {
		  text-align: center;
		}
		.elespare-search--toggle-dropdown {
		  right: auto;
		  left: 50%;
		  transform: translateX(-50%);
		}
		.elespare-search-form-header {
		  .site-search-form {
			flex-direction: column;
			.site-search-field {
			  text-align: center;
			}
		  }
		}
	  }
	  &.elespare-grid-mobile-right {
		.elespare-site-search-toggle,
		.elespare-search-dropdown-toggle {
		  text-align: right;
		}
		.elespare-search--toggle-dropdown {
		  right: 10px;
		  left: auto;
		}
		.elespare-search-form-header {
		  .site-search-form {
			flex-direction: row-reverse;
			.site-search-field {
			  text-align: right;
			}
		  }
		}
	  }
	}
  }
  
  body.rtl {
	.elementor-widget-search-from {
	  &.elespare-grid-right {
		.elespare-search-form-header {
		  .site-search-form {
			.site-search-field {
			  text-align: left;
			}
		  }
		}
	  }
	}
  }