select {
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
}


.custom-filters-wrapper {
   position: sticky;
   top: 0;
   z-index: 999;
   background-color: rgba(0, 0, 0, 0.8);
}

.custom-filters {
   display: flex;
   flex-direction: column;
   width: 700px;
   max-width: 90vw;
   margin: 0 auto;
   padding-top: 50px;
}

#reset {
   align-self: flex-end;
   transition: all ease 0.5s;
}

#reset:hover svg g path {
   fill: #fff;
   transition: fill ease 0.5s;
}

#reset:hover svg {
   stroke: #fff !important;
   transition: stroke ease 0.5s;
}

.custom-filters form {
   display: flex;
   flex-direction: column;
   gap: 10px;
   /* Adjust the gap as needed */
   color: #fff;
}

.extra-fields {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 10px;
   opacity: 0;
   max-height: 0;
   overflow: hidden;
   transition: opacity .3s ease, max-height .6s ease;
}

.extra-fields.expanded {
   opacity: 1;
   max-height: 120px;
}

.rotate180 {
   transform: rotate(180deg);
}

.expand-fields {
	bottom: -35px;
	position: relative;
}

.expand-fields a {
   padding: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
   margin: 5px auto 0;
}

.search-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border: 1px solid #b7b7b7;
   border-radius: 5px;
   padding: 5px 10px;
   height: 36px;
}

.search-container input{
   flex: 1;
   background-color: transparent;
   outline: none;
   box-shadow: none;
   border: none;
   color: #fff;
   font-size: 14px;
}

.custom-filters select {
   width: 100%;
   background-color: transparent;
   color: #ccc;
   padding: 5px 10px;
   border-radius: 5px;
   border-color: #b7b7b7;
   outline: none;
   height: 33px;
   font-size: 14px;
}

.custom-filters select option {
   background-color: #b7b7b7;
   color: #000;
}

.custom-filters form label {
   display: none;
}

.custom-filters input::-webkit-input-placeholder {
   color: #ccc;
   font-size: 14px;
}

.custom-filters input::-moz-placeholder {
   color: #ccc;
   font-size: 14px;
}

.custom-filters input:-ms-input-placeholder {
   color: #ccc;
   font-size: 14px;
}

.custom-filters input:-moz-placeholder {
   color: #ccc;
   font-size: 14px;
}

#results {
   color: #fff;
}

.select_wrapper {
	position: relative;
}

.select_wrapper:after {
	content: "";
    background-image: url('../../../../uploads/2023/09/arrow_single.svg');
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 60%;
    right: 10px;
    width: 15px;  /* Adjust width as needed */
    height: 15px; /* Adjust height as needed */
    transform: translateY(-50%);
    pointer-events: none; /* Makes click event pass through to the select */
}


/* Hide the default select arrow in Webkit browsers */
select::-webkit-inner-spin-button,
select::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide the default select arrow in Firefox */
select {
    -moz-appearance: none;
    appearance: none;
}


select:disabled {
	opacity: 0.5;	
}

.search-container input {
	max-width: 15ch;
}

.search-container .fa-search {
	display: none;
}

@media (max-width: 767px) {
    .extra-fields {
        grid-template-columns: repeat(2, 1fr);
    }
	
	.custom-filters select {
		font-size: 11px;
	}
}