gzf/WebRoot/static/ui/assets/scss/_search.scss

/*--
    06. Search Css
-------------------------------*/
.search-wrap{
    padding: 50px 90px 45px;
    background-color: #fff;
    box-shadow: 0 0 25px rgba($theme-color, 0.25);
    margin-top: -120px;
    position: relative;
    &.mt__0 {
        margin-top: 0;
    }
    @media #{$large-mobile}{
        padding: 30px 30px 35px
    }
    & h2 {
        color: $theme-color-2;
        font-weight: 600;
        margin-bottom: 35px;
    }
    
    & form {
        
        /*& [class*="col-"] {
            display: flex;
            align-items: center;
        }*/
        
        & input {
            &[type="submit"] {
                height: 45px;
                border: none;
                line-height: 25px;
                padding: 10px 30px;
                border-radius: 50px;
                background-color: $theme-color;
                color: $white;
                font-size: 16px;
                font-weight: 700;
                letter-spacing: 0.25px;
                text-transform: uppercase;
                &:hover {
                    background-color: $theme-color-2;
                }
            }
        }
        
        & button {
            height: 45px;
            border: none;
            line-height: 25px;
            padding: 10px 30px;
            border-radius: 50px;
            background-color: $theme-color;
            color: $white;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 0.25px;
            text-transform: uppercase;
            &:hover {
                background-color: $theme-color-2;
            }
        }
        
        
        & .nice-select {
            width: 100%;
            height: 45px;
            border: 1px solid #ddd;
            background-color: transparent;
            padding: 10px 20px;
            border-radius: 50px;
            &::after {
                border-color: $theme-color-2;
                width: 7px;
                height: 7px;
                right: 20px;
            }
            
            & .current {
                line-height: 23px;
                display: block;
                color: $theme-color-2;
                font-size: 14px;
            }
            
            & .list {
                min-width: 100%;
                background-color: #fff;
                border: 1px solid #ddd;
                box-shadow: none;
                & li {
                    color: #333;
                    border-bottom: 1px solid #ddd;
                    &:last-child {
                        border-bottom: none;
                    }
                    &:hover {
                        background-color: transparent;
                    }
                    &.selected {
                        background-color: $theme-color;
                        color: $white;
                    }
                }
                &:hover {
                    & .selected:not(:hover) {
                        background-color: $theme-color !important;
                    }
                }
            }
        }
        

        & #price-range {
            height: 10px;
            background-color: #e7e7e7;
            border-radius: 50px;
            position: relative;
            margin-top: 25px;
            width: 100%;
            & .ui-slider-range {
                background-color: $theme-color-2;
                border-radius: 50px;
                height: 100%;
                position: absolute;
                top: 0;
            }
            & .ui-slider-handle {
                width: 18px;
                height: 18px;
                border-radius: 50px;
                background-color: $theme-color;
                display: block;
                position: absolute;
                top: -4px;
                transition: none;
                &:last-child {
                    margin-left: -18px;
                }

                & span {
                    position: absolute;
                    left: 50%;
                    top: -20px;
                    transform: translateX(-50%);
                    display: block;
                    line-height: 1;
                    font-size: 14px;
                    color: $theme-color-2;
                }
            }
        }
    }
    
    
    
    & .filter-wrapper {
        display: none;
        input {
            width: auto;
            margin-right: 10px;
        }
    }
    
}
.hero-search-wrap {
    max-width: 415px;
    & .search-wrap {
        padding: 50px 30px 35px;
        margin-top: 0;
        & .serche-input-box {
            margin-left: auto;
            margin-right: auto;
        }
    }
}

.sidebar-wigets-search {
    &.search-wrap {
        padding: 0;
        margin-top: 0;
        background-color: #fff;
        box-shadow: none; 
    }
}

.property-search-wrap {
    
    & label {
        display: block;
    } 
    
    & input {
        &[type="submit"] {
            height: 45px;
            border:  1px solid #ddd;
            line-height: 25px;
            padding: 10px 28px;
            border-radius: 50px;
            background-color: $theme-color;
            color: $white;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 0.25px;
            text-transform: uppercase;
            &:hover {
                background-color: $theme-color-2;
            }
        }
    }

    & .nice-select {
        width: 100%;
        height: 45px;
        border: 1px solid #f1f1f1;
        background-color: transparent;
        padding: 10px 20px;
        border-radius: 50px;
        &::after {
            border-color: $theme-color;
            width: 7px;
            height: 7px;
            right: 20px;
        }

        & .current {
            line-height: 23px;
            display: block;
            color: #333;
            font-size: 14px;
        }

        & .list {
            min-width: 100%;
            background-color: #fcfcfc;
            border: 1px solid #f1f1f1;
            box-shadow: none;
            & li {
                color: $theme-color;
                border-bottom: 1px solid #f1f1f1;
                &:last-child {
                    border-bottom: none;
                }
                &:hover {
                    background-color: transparent;
                }
                &.selected {
                    background-color: $theme-color;
                    color: $white;
                }
            }
            &:hover {
                & .selected:not(:hover) {
                    background-color: $theme-color !important;
                }
            }
        }
    }
}


.add-link-wrap {
    margin-top: 20px;
    & a {
        font-weight: 600;
    }
}