#content-area {
	#search-heading {
		color: #000;
		font-size: 1.2rem;
		margin-left: 15px;
	}

	.search-form.horizontal {
		flex-direction: row;
		align-items: flex-start !important;
		max-width: 1000px;
		margin-inline: auto;

		#main {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
		}

		#options {
			display: block;
			text-align: right;
			margin-block: 25px;
			
			#adv-search-toggle {
				cursor: pointer;
				user-select: none;

				 .btn-primary {
				 	font-family: 'Menlo', 'Lucida Console', 'Monaco', 'Consolas', monospace;
				 	line-height: 17px;
				 	display: inline-block;
					padding: 4px 6px 0;
					border-radius: 5px;
					width: 25px;
					height: 25px;
					text-align: center;
					margin-left: 15px;
				}
			}
		}
				
		.form-select, .form-control {
			border-radius: 0;
			border-bottom: 2px solid var(--primary-colour);
		}

		.order {
			display: block;
			text-align: right;

			.select-holder {
				width: 120px;
				display: inline-block;
			}
		}

		.search-param {
			display: flex;
			flex-direction: column;
			justify-content: center;

			label {
				&:first-child {
					color: var(--primary-colour);
					margin-bottom: 1em;
				}
			}
			input[type="checkbox"] {
				margin-right: 5px;
			}
		}

		#advanced {
			display: flex;
			flex-wrap: wrap;
			gap: 30px;
			padding: 15px 0 45px;

			.search-param {
				flex: 1 1 calc(20% - 30px);
				display: flex;

				#price-range {
					height: 10px;
					position: relative;
					top: 12px;

					.noUi-connect {
						background: var(--primary-colour);
					}

					.noUi-handle {
						height: 18px;
						width: 18px;
						top: -5px;
						right: -9px;
						border-radius: 9px;
						background: var(--quaternary-colour);
						box-shadow: none;
						border: 0;
					}

					.noUi-handle:before,
					.noUi-handle:after {
						display: none;
					}
				}

				#price-display {
					position: relative;
					top: 20px;
				}
			}
		}

		#advanced.hidden {
			display: none;
		}
	}

	.search-form.vertical {
		flex-direction: column;
		align-items: flex-start !important;

		#main {
			flex-direction: column;
			background: var(--primary-colour);
			border-radius: 5px;
			color: #fff;
			padding: 30px 20px;

			select, input {
				width: 100%;
				border-radius: 5px;
				background: #fff;
				color: #000;
				font-size: 1rem;
				padding: 7px 10px;
				margin-bottom: 20px;
				border: none;
				appearance: none;
				background-repeat: no-repeat;
				background-position-x: calc(100% - 10px);
				background-position-y: 11px;
			}

			select:focus, input:focus {
				outline: none;
				box-shadow: none;
			}

			.search-section {
				width: 100%;
				margin-bottom: 20px;

				label {
					display: inline-block;
					width: unset;
					position: relative;
					top: -4px;
				}

				input {
					display: inline-block;
					width: 20px;
					height: 20px;
					border-radius: 10px;
					margin: 5px 20px 0 0;
					border: none;
				}

				input:after {
					content: '';
					position: relative;
					display: block;
					left: -7px;
					top: -4px;
					width: 20px;
					height: 20px;
					background: transparent;
					background-repeat: no-repeat;
				}

				input:checked:after {
					background-image: url("data:image/svg+xml;utf8,<svg fill='black' width='16' height='16' viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg'><path d='M32.3,80.3C32.3,80.3,32.3,80.3,32.3,80.3c-1.8,0-3.4-0.8-4.5-2.1L1.5,47.6c-2.2-2.5-1.9-6.3,0.6-8.5 c2.5-2.2,6.3-1.9,8.5,0.6l21.8,25.3l47.2-53.3c2.2-2.5,6-2.7,8.5-0.5c2.5,2.2,2.7,6,0.5,8.5L36.8,78.2C35.6,79.5,34,80.3,32.3,80.3 z'/></svg>");
				}

				.fa-star {
					color: var(--quaternary-colour);
				}
			}

			#search-general {
				background-image: url("data:image/svg+xml;utf8,<svg fill='black' width='16' height='16' viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg'><path d='M88.5,81.5L65.8,58.8c10.9-14.4,9.8-35-3.3-48C55.6,3.8,46.4,0,36.6,0s-19,3.8-25.9,10.7S0,26.9,0,36.6 c0,9.8,3.8,19,10.7,25.9c7.1,7.1,16.5,10.7,25.9,10.7c7.8,0,15.6-2.5,22.1-7.4l22.7,22.7c1,1,2.3,1.5,3.5,1.5s2.6-0.5,3.5-1.5 C90.5,86.6,90.5,83.4,88.5,81.5z M17.8,55.5c-5-5-7.8-11.7-7.8-18.8s2.8-13.8,7.8-18.8c5-5,11.7-7.8,18.8-7.8s13.8,2.8,18.8,7.8 c10.4,10.4,10.4,27.3,0,37.7C45.1,65.9,28.2,65.9,17.8,55.5z'/></svg>");
			}

			#search-destination {
				background-image: url("data:image/svg+xml;utf8,<svg fill='black' width='16' height='16' viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg'><path d='M45,0C25.5,0,9.6,15.8,9.6,35.4c0,8.7,3.2,16.7,8.4,22.9L45,90l27-31.8c5.2-6.2,8.4-14.1,8.4-22.9C80.4,15.8,64.5,0,45,0z M45,48.7c-8,0-14.5-6.5-14.5-14.5S37,19.6,45,19.6s14.5,6.5,14.5,14.5S53,48.7,45,48.7z'/></svg>");
			}

			.search-info {
				width: 100%;
				margin-bottom: 15px;

				.clear-x {
					cursor: pointer;
					position: relative;
					margin-right: 16px;

					i {
						position: absolute;
						font-style: normal;
						font-size: 1.6rem;
						top: -10px;
						right: -18px;
					}
				}

				.toggler {
					cursor: pointer;
					position: relative;
					top: 6px;

					i {
						font-style: normal;
						font-size: 1.6rem;
					}
				}
			}

			.search-info.hidden,
			.search-section.hidden {
				height: 0;

				* {
					display:none;
				}
			}

			#price-range-display,
			#duration-display {
				width: 100%;
				border-radius: 5px;
				background: #fff;
				color: #000;
				font-size: 1rem;
				padding: 7px 10px;
				margin-bottom: 20px;
			}

			#price-range,
			#duration {
				height: 10px;
				margin: 10px 0 30px;
				width: 100%;

				.noUi-connect {
					background: var(--secondary-colour);
				}

				.noUi-handle {
					height: 36px;
					width: 14px;
					top: -14px;
					right: -9px;
					border-radius: 9px;
					background: var(--quaternary-colour);
					box-shadow: none;
					border: 0;
					cursor: pointer;
				}

				.noUi-handle:before,
				.noUi-handle:after {
					display: none;
				}
			}
		}
	}

	#order {
		display: block;
		text-align: right;

		.button-holder {
			display: inline-block;

			input[type="radio"] {
				appearance: none;
				display: inline-block;
			}

			input[type="radio"]:checked + label {
				border-bottom: 2px solid var(--primary-colour);
			}

			label {
				padding: 5px 10px;
				cursor: pointer;
				border-bottom: 2px solid transparent;
				user-select: none;
			}
		}
	}
}