/* Search form container */
.searchbar {
    display: block; /* Use flexbox for layout */
    white-space: nowrap !important; /* Prevents text from breaking */
    width: auto !important;
    padding: 0px 30px 0px 10px;
  margin: 0px 0px 0px 0px;

}



/* Search form container */
.search-form {
    display: block; /* Use flexbox for layout */
    white-space: nowrap !important; /* Prevents text from breaking */
    width: auto !important;
    padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;

}

/* Style the search input field */
.search-form .search-field {
    flex: 1; /* Allow input to grow if needed */
    font-family: "Roboto Slab", "Roboto Mono", "Courier New", Courier, monospace;
    width: 150 !important;
    margi: 0; /* Remove unnecessary auto margins */
    paddin: 0; /* Remove unnecessary auto margins */
    font-weight: bold;
    height: 32px;
    font-size: 15px;
    color: white;
    background-color: black !important;
    border: 1px solid whitesmoke !important;
    border-radius: 5px;
    outline: none;
  white-space: nowrap !important; /* Prevents text from breaking */

}


form.search-form .search-field:hover {
    background-color: white !important; /* Hover background color */
    color: black !important; /* Hover text color */
}



/* Placeholder styling */
.search-form .search-field::placeholder {
    color: white;
    font-family: "Roboto Slab", monospace !important;
    font-size: 15px;
    font-weight: bold;
}

/* Change placeholder color when hovering over the input */
.search-field:hover::placeholder {
    background-color: white !important; /* Hover background color */
    color: black; /* Hover placeholder color */
}





/* Style the search button */
#searchsubmit {
    font-family: "Roboto Slab", "Roboto Mono", "Courier New", Courier, monospace;
    text-transform: capitalize;
   width: auto;
    padding: 0px 10px 0px 10px;
    margin: 0px 0px 0px 0px;
    font-weight: bold;
    height: 32px;
    background-color: black; /* Button background color */
    color: white; /* Text color */
    border: 1px solid whitesmoke; /* Add border */
    border-radius: 5px; /* Rounded corners */
    font-size: 15px; /* Font size */
    cursor: pointer; /* Show pointer cursor on hover */
    white-space: nowrap; /* Prevents text from breaking */
}

/* Hover effect for the search button */
#searchsubmit:hover {
    background-color: white; /* Hover background color */
    color: black; /* Hover text color */
}

/* Active state for the search button */
#searchsubmit:active {
    background-color: darkgray; /* Active state background */
}

/* Additional adjustments for input and cancel button */
input[type="search"] {
    color: white !important;
}

.search-form input[type="search"] {
    width: auto;
}

input[type="search"]::-webkit-search-cancel-button {
    display: none; /* Hide default clear button */
}

/* Customize the clear "X" button */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    background-color: red;
    width: auto;
    height: 32px;
    border-radius: 50%;
}