.redcolor {
    background-color: red;
}

#scrollPosition {
    position: fixed;
    bottom: 10px;
    left: 10px;
    background-color: red;
    border: 1px solid black;
    padding: 5px;
    z-index: 1000;
}

.search-bar {
    position: relative;
    width: 100%;
}

.filterMenu label {
    font-size: 1rem !important
}

.search-bar input[type="text"] {
    width: 100%;
    padding: 10px 40px 10px 10px; /* Adjust padding to fit the search icon */
    border: 2px solid #ddd; /* Light gray border */
    border-radius: 20px; /* Rounded corners */
    font-size: 16px; /* Adjust based on your design */
}

.search-bar button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

.search-icon {
    height: 20px; /* Adjust based on your design */
    width: 20px;
    fill: #666; /* Icon color */
}

.search-bar button#clearSearch {
    right: 35px; /* Adjust based on your design, so it doesn't overlap with the search icon */
    display: none; /* Start hidden */
}

.clear-icon {
    height: 20px;
    width: 20px;
    fill: red; /* Red icon for visibility */
}


.hidden {
    display: none;
}

.visible {
    display: block; /* or 'flex', 'inline-block', etc., depending on your layout */
}


.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
}



@keyframes riseAndFallRotate {
    0%, 100% {
        transform: translateY(0) rotate(18deg);
    }

    50% {
        transform: translateY(-20px) rotate(-15deg);
    }
}

.gavel-animation #gavel {
    animation: riseAndFallRotate 1.5s ease-out infinite;
    transform-origin: bottom left; /* Adjusts the origin of rotation */
    width: 75px;
    color: rgb(26 40 72 / var(--tw-text-opacity));
}

.container {
    display: flex;
    align-items: center; /* Centers the items vertically */
}

.loading-text {
    flex-grow: 1; /* Allows this div to take up the remaining space */
    padding-right: 20px; /* Adds some spacing between the text and the gavel */
}

.gavel-animation {
    width: 100px; /* Width set as requested */
    padding-top: 10px;
}

    .gavel-animation svg {
        width: 100%;
        height: auto;
    }

.btn-live-sales {
    background-color: transparent !important;
    border: 2px solid #586276 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

@media (max-width: 768px) {
    .sticky-container {
        position: relative; /* Ensures the container is positioned to support sticky children */
        z-index: 49; /* Adjust as necessary to be higher than other page elements except modals/popups */

        display: flex;
        align-items: start;
    }

    #featured a {
        background-color: #fff;
        color: #333;
        position: absolute;
        width: 100%; /*or max-width as needed */
        top: 100%; /*Align directly below the Sort By button */
        left: 0;
        display: none; /*Initially hidden */

        border: 1px solid #ccc;
        z-index: 49; /*Higher than the button to ensure it overlays properly*/
    }

    .sticky-button-filter, .sticky-button-sortby {
        position: -webkit-sticky; /* For Safari */
        position: sticky;
        z-index: 49; /* Ensures it stays on top of other content */
        width: 100%;
    }
}

/*.sticky-button-filter {
                position:fixed;
                outline-color: red;
                width: 150px;*/ /* Maintain width but ensure it fits the screen */
/*display: inline-flex;
                height: 40px;
                align-items: start;
                padding-left: 1.5rem;
                padding-right: 1.5rem;
                position: fixed;
                top:1100px;*/ /* Keep this constant */
/*left: 35%;*/ /* Adjusted to move it slightly left */
/*z-index: 1000;
                background-color: red;
                
            }*/

/*.sticky-button-sortby {
                position:relative;
                width: 150px;*/ /* Consistent width */
/*display: inline-flex;
                height: 40px;
                align-items: start;
                padding-left: 1.5rem;
                padding-right: 1.5rem;
                top:900px;
                scroll-padding-top: 100px;*/ /* Same vertical position */
/*z-index: 1000;
                right:10px;
                background-color: red;
            }
        }*/

/* You may need to adjust this for smaller screens */
@media (max-width: 767px) {
    .sticky-button-filter {
        /* right: 50%;*/ /* More towards the center for smaller screens */
        padding: 8px 15px;
    }

    .sticky-button-sortby {
        right: 5%;
    }
}

#sortByList .sortByListAs {
    background-color: #fff;
    padding: 10px;
    border: none;
    margin: 0;
}

/* Add this to your CSS file or within a <style> tag */

@keyframes flashAnimation {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

#bidPaddle.flash {
    animation: flashAnimation 1s ease-in-out;
    animation-iteration-count: 3; /* Number of times to flash */
}