searchBox.scss

@mixin smallerThan($width) {
	@media screen and (max-width:$width) {
		@content;
	}
}
@mixin largerThan($width) {
	@media screen and (min-width:$width) {
		@content;
	}
}
@mixin between($smallW, $largeW) {
	@media screen and (min-width: $smallW) and (max-width: $largeW) {
		@content;
	}
}

$blue: #52B4DB;
$orange: #fed736;
$green: #70bb24;
$xSmallBp: 768px;
$smallBp: 991px;
$mediumBp: 1170px;

@import './components/Header/header';
@import './components/Slider/slider';
@import './components/Search/search';
@import './components/ReviewsSummary/reviewsSummary';
@import './components/Facilities/facilities';
@import './components/Map/map';
@import '/node_modules/react-day-picker/lib/style.css';

body {
	background: #FBFBFB;
	padding-bottom: 30px;
}

.searchContainer {
	background: #fff;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 1px 3px #828282;
	
	@include smallerThan($xSmallBp) {
		margin-top: 20px;
	}
	
	&__left {
		padding: 0;
		position: relative;
		overflow: hidden;
	}
	
	&__right {
		padding: 20px 20px 0;
	}
}

.rating {
	font-size: 0;
	text-align: left;
	display: inline-block;
	padding-left: 5px;

	li {
		display: inline-block;

		i {
			font-size: 14px;
			color: #FBCA4C;
		}
	}
}

.customField {
	background: #fff;
	border-radius: 4px;
	position: relative;
	padding: 0 22px 0 36px;
    border: 1px solid transparent;
    
    &--error {
        border-color: red;
    }
	
	&.select {
		padding-right: 0;
	}
	
	select {
		-webkit-appearance: none;
		-moz-appearance: none;
		text-indent: 1px;
		text-overflow: '';
		
		&::-ms-expand {
			display: none;
		}
	}
	
	.fa-calendar, .fa-users {
		position: absolute;
		left: 10px;
		top: 50%;
		font-size: 20px;
		margin-top: -10px;
	}
	
	.fa-sort {
		position: absolute;
		right: 8px;
		top: 50%;
		font-size: 16px;
		margin-top: -8px;
		background: #fff;
	}
}

.modal {
    img {
        max-width: 100%;
    }
}

.searchResults {
    margin-top: 30px;
}