.search-form {
	display: block;

	.modal-content {
		background-color: #636974;
		color: @white;
	}

	form {
		position: relative;
		display: flex;
		flex: 1;
		flex-direction: column;
		position: absolute;
		top: 30px;
		right: 0;
		bottom: 0;
		left: 0;
		overflow: auto;

		@media @bp_768 {
			top: 60px;
		}

		@media @bp_1024 {
			top: 90px;
		}
	}

	.btn-close {
		width: 20px;
		height: 20px;
		background-size: 20px;
		top: 10px;
		right: 20px;

		@media @bp_768 {
			width: 30px;
			height: 30px;
			background-size: 30px;
			top: 30px;
			right: 30px;
		}
	}

	.modal-header {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 2;
		padding: 0;

		.logo {
			width: 30px;
			height: 30px;
			position: absolute;
			left: 0;
			top: 0;
			display: inline-block;
			display: none;

			@media @bp_768 {
				display: block;
				width: 65px;
				height: 65px;
			}
		}
	}

	.search-content {
		
		@media @bp_768 {
			display: flex;
			flex: 1;
			width: 100%;
			position: relative;
			min-height: 0;
		}
	}

	.searcher {
		padding: 0 0 30px 0;

		@media @bp_768 {
			padding-top: 30px;
		}

		@media @bp_1024 {
			padding: 50px 0;
		}

		@media @bp_1200 {
			padding: 100px 0;
		}

		@media @bp_700_height_max {
			padding-top: 0;
			padding-bottom: 30px;
		}

		@media @bp_800_height_max {
			padding-top: 50px;
			padding-bottom: 50px;
		}

		@media @bp_900_height_max {
			padding-top: 50px;
			padding-bottom: 50px;
		}
	}
	
	.page {
		display: flex;
		flex: 1;
		flex-direction: column;
		padding-bottom: 0;
		max-width: 1440px;
	}

	.search-results {
		display: none;

		&.active,
		&.loading {
			display: flex;
			flex: 1;
			flex-direction: column;

			@media @bp_1024 {
				flex-direction: row;
			}
		}
	}

	.search-results-filter {
		.clearfix;
		padding-bottom: 30px;
		text-align: left;

		@media @bp_1024 {
			.box-sizing;
			max-width: 260px;
			width: 33.33%;
			padding-bottom: 0;
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			padding-right: 30px;
		}

		@media @bp_1440 {
			max-width: 300px;
		}

		.btn-side-filter {
			.font-size(18);
			color: @black;
			margin-right: 15px;
			margin-top: 5px;

			&:first-child {
				margin-top: 0;
			}

			&:last-child {
				margin-right: 0;
			}

			&.active {
				color: @white;
			}

			@media @bp_768 {
				.font-size(26);
				line-height: 30px;
				margin-right: 30px;
				margin-top: 0;
			}
			
			@media @bp_1024 {
				.font-size(32);
				line-height: 40px;
				margin-right: 0;
				float: left;
				clear: both;
				margin-top: 20px;
			}

			sup {
				.font-size(10);
				top: 0;

				@media @bp_1024 {
					.font-size(12);
					top: 0;
				}
			}
		}
	}

	.search-results-inline {
		width: 100%;
		min-height: min-content;
		display: flex;
		flex-direction: column;
		flex: 1;

		@media @bp_1024 {
			//left: 330px;
		}

		.card-entity {
			width: 100%;
		}

		.grid {
			.clearfix;
			.box-sizing();
			padding-left: 0;
			margin: 0 -15px;

			.grid-item {
				.box-sizing();
				float: left;
				width: 100%;
				padding: 15px;
				max-width: 320px;
				clear: both;

				@media @bp_768 {
					clear: none;
					width: 50%;
				}

				@media @bp_1400 {
					width: 33.33%;
				}

				&:nth-child(3n+1) {
					
					@media @bp_768 {
						clear: none;
					}

					@media @bp_1400 {
						clear: both;
					}
				}

				&:nth-child(2n+1) {

					@media @bp_768 {
						clear: both;
					}
					
					@media @bp_1400 {
						clear: none;
					}
				}
			}
		}
	}

	.search-results-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		overflow-y: auto;
		margin: 0 -@page_spacer_mobile;
		padding: 0 @page_spacer_mobile;;

		@media @bp_768 {
			margin: 0;
			padding: 0;
		}

		.btn-show-all {
			clear: both;
			float: left;
			display: block;
			width: auto;

			@media @bp_768 {
				.font-size(14);
				letter-spacing: 3px;
				font-weight: 600;
			}
		}

		.grid + h3 {
			padding-top: 40px;
		}
	}

	.entity-group {
		padding-bottom: 40px;

		@media @bp_768 {
			width: 610px;
		}

		@media @bp_1400 {
			width: 930px;
		}

		&.zero-state {

			p {
				.font-size(24);
				line-height: 30px;
				padding-top: 0;
				margin-top: 0;
				color: @black;
			}

			.grid {
				max-width: 610px;

				@media @bp_768 {
					padding-top: 30px;
				}

				.grid-item {

					@media @bp_1400 {
						width: 50%;
					}

					&:nth-child(3n+1) {
						clear: none;
					}

					&:nth-child(2n+1) {

						@media @bp_768 {
							clear: both;
						}
					}
				}
			}
		}

		> h3 {
			.font-size(12);
			line-height: 16px;
			font-weight: 500;
			color: @white;
			letter-spacing: 2px;
			text-transform: uppercase;
			padding-bottom: 5px;
		}
	}

	.entity-name-wrapper {

		@media @bp_768 {
			padding-right: 22px;
		}

		.entity-name-input {
			.font-size(30);
			line-height: 30px;
			caret-color: @white;
			background-color: transparent;
			font-weight: 500;
			padding: 0;
			color: @white;
			border-color: @white;
			height: 50px;

			@media @bp_768 {
				.font-size(60);
				line-height: 50px;
				height: 90px;
			}
		}
	}

	.custom-input {

		label {
			.font-size(60);
			color: @white;
			line-height: 60px;
			font-weight: 500;
		}

		input[type="text"]:not(:placeholder-shown) + label,
		input[type="text"]:focus + label {
			.font-size(12);
			line-height: 16px;
			top: -20px;
			text-transform: uppercase;
			letter-spacing: 2px;
		}
	}

	.bottom-bar {
		.transition(transform, 250ms, ease-out);
		background-color: #727882;
		padding: 30px 0;
		margin: 0 -@page_spacer_mobile;

		@media @bp_768 {
			.translate(0,400px);
			margin: 0;
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 3;
		}

		&.active {
			.translate(0, 0);
		}

		.page {
			padding-top: 0;
			align-items: flex-end;

			@media @bp_768 {
				
			}
		}

		.grid {
			margin: -15px;
			display: inline-block;

			@media @bp_768 {
				padding-right: 10px;
			}

			.grid-item {
				.box-sizing();
				max-width: 320px;
				padding: 15px;
				float: left;
				width: 50%;

				&:only-child {

					@media @bp_480 {
						min-width: 320px;
					}
				}

				@media @bp_768 {
					width: 25%;
					//min-width: 320px;
				}

				@media @bp_1024 {
					clear: none;
					width: 25%;
				}

				&:nth-child(2n+1) {
					clear: both;

					@media @bp_768 {
						clear: none;
					}
				}
			}
		}

		.btn-card-add {
			max-width: 290px;
		}
	}

	.results-description {
		.font-size(24);
		position: relative;
		line-height: 30px;
		font-weight: 500;
		padding-left: 40px;
		color: @black;
		max-width: 290px;
			
		@media @bp_1200 {
			padding-left: 60px;
		}

		span {
			.font-size(52);
			font-weight: normal;
			letter-spacing: -1px;
			position: absolute;
			right: calc(~'100% + 5px');
			left: 0;
			top: 0;
			line-height: 1;
			font-family: @suiss-int-mono;

			@media @bp_1200 {
				.font-size(72);
			}
		}
	}

	h3 + .results-description  {
		.box-sizing();
		margin-top: 10px;
		float: left;
		padding-bottom: 20px;
	}

	.results-description + .btn-card-add {
		width: 290px;

		@media @bp_768 {
			margin-top: 15px;
			float: right;
		}
	}

	.pagination {
		margin-top: 20px;

		@media @bp_768 {
			margin-top: 40px;
		}

		@media @bp_1200 {
			margin-top: 60px;
		}
	}
}