/* Style the search bar container */
.search-container {
	position: relative;
    display: flex;
    align-items: center; /* Vertically center items */
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 90%;
	z-index: 999; /* Ensure it appears on top of other elements */
}

/* Style the input field */
.search-container input[type=text] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    flex: 1; /* Take up remaining space */
    max-width: 300px;
}

/* Style the search button */
.search-container button {
    padding: 10px;
    background-color: #f0f0f0;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width: 40px; /* Adjust width */
    height: 40px; /* Adjust height */
    background-image: url('search4.png'); /* Replace with your image path */
    background-size: cover;
    background-repeat: no-repeat;
    margin-left: -1px;
    box-sizing: border-box;
}

#searchButton {
    text-indent: -9999px; /* Move text content off-screen */
    overflow: hidden; /* Hide any overflow */
    width: 40px; /* Adjust width to accommodate the image */
    height: 40px; /* Adjust height to accommodate the image */
    background-image: url('search4.png'); /* Replace 'magnifying_glass_image.png' with the path to your image */
    background-size: cover; /* Ensure the image covers the button */
    background-repeat: no-repeat; /* Prevent the image from repeating */
    border: none; /* Remove border */
    cursor: pointer; /* Show pointer cursor on hover */
}

/* Style the autocomplete dropdown */
.autocomplete {
	position: absolute;
	top: calc(100% + 5px);
	left: 0;
	z-index: 999;
	background-color: #f9f9f9;
	border: 1px solid #ccc;
	border-top: none;
	border-radius: 4px;
	max-height: 150px;
	overflow-y: auto;
}

.autocomplete-item {
	padding: 10px;
	cursor: pointer;
}

.autocomplete-item:hover {
	background-color: #ddd;
}

/* Define shake animation */
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}

/* Apply shake animation to the search container */
.shake {
    animation: shake 0.5s ease-in-out; /* Adjust duration and timing function as needed */
}