/* Styling for the suggestions used on the index page as the user starts to type the name of an ISP */
    /* Ensure the suggestions box takes up the full width of the modal */
    #page-suggestions {
        display: none;
        width: 100%; /* Full width of the modal */
        max-width: 100%; /* Ensure no overflow beyond the modal */
        max-height: 300px; /* Limit the height to avoid excessive overflow */
        overflow-y: auto; /* Allow scrolling if results exceed the max-height */
        border: none; /* Optional: Add a border for better visibility */
        background-color: #fff; /* Ensure the background is white */
        padding: 1px; /* Add padding inside the suggestions box */
        box-sizing: border-box; /* Ensure padding doesn’t affect the overall width */
        z-index: 1000; /* Ensure it appears above other elements */
        list-style-type: none;
    }

    /* Style each list item */
    #page-suggestions li {
        padding: 8px 10px; /* Padding for list items */
        border-bottom: 1px solid #eee; /* Optional: Add a separator between items */
    }

    /* Remove border for the last item */
    #page-suggestions li:last-child {
        border-bottom: none;
    }

    /* Highlight list item on hover */
    #page-suggestions a:hover {
        font-weight: bold;
        text-decoration: underline;
    }

    /* Optional: style for no results found */
    #page-suggestions li.disabled {
        color: #999;
        background-color: #f9f9f9; /* Slightly different background for disabled items */
    }

    /* center the text inside the input, including the placeholder */
    #search {
        text-align: center; /* center the text inside the input field */
    }

    /* for older browsers that need specific placeholder styling */
    #search::placeholder {
        text-align: center; /* center the placeholder text */
        color: #999; /* optional: style the placeholder color */
    }

    /* webkit-based browsers (chrome, safari) */
    #search::-webkit-input-placeholder {
        text-align: center; /* center placeholder for webkit browsers */
        color: #999; /* optional: style the placeholder color */
    }

    /* mozilla/firefox */
    #search:-moz-placeholder {
        text-align: center; /* center placeholder for firefox */
        color: #999; /* optional: style the placeholder color */
    }

    /* internet explorer */
    #search:-ms-input-placeholder {
        text-align: center; /* center placeholder for ie */
        color: #999; /* optional: style the placeholder color */
    }