.search-form {
	position: relative;
	margin: 0;
	padding: 0;

	.widget-title + & {
		@include media-breakpoint-up(lg) {
			margin-top: 35px;
			margin-bottom: 50px;
		}
	}

	.top-panel & {
		display: inline-block;
		vertical-align: top;

		@include media-breakpoint-up(md) {
			display: block;
		}
	}

	&:after {
		display: block;
		clear: both;
		width: 100%;
		content: '';
	}

	&__field[type='search'] {
		float: left;
		box-sizing: border-box;
		width: 100%;
		padding-right: 35px;
		padding-bottom: 11px;
		
		.top-panel & {
			width: 150px;
			height: 40px;
			padding: 5px 10px;
			line-height: 30px;
			border: none;
			background: none;
			font-weight: 400;

			&:focus {
				box-shadow: none;
			}
		}
	}

	&__submit {
		width: 30px;
		padding-right: 0;
		padding-left: 0;
		border: none;
		position: absolute;

		.site-footer &.btn.btn-primary,
		.site-content &.btn.btn-primary {
			top: -3px;
			right: 13px;
			box-shadow: none;
			background: none;
			color: $black;
			&:hover {
				opacity: 0.5;
			}
		}

		&:after {
			content: "\f002";
			@include font-awesome-icon();
			@include font-size(1);
			font-size: 14px;
			line-height: 25px;
			padding-left: 5px;
		}

		i.material-icons {
			line-height: 20px;
			display: block;
			height: 20px;
			margin: 0 auto;

			@include font-size(1.5);
		}

		.top-panel & {
			width: 30px;
			padding: 5px 0;
			background-color: transparent;

			&:hover {
				background: none;
			}

			&:active,
			&:focus,
			&:hover {
				box-shadow: none;
			}
		}
	}

	.error404 & {
		margin-top: 30px;
		margin-bottom: 60px;

		@include media-breakpoint-up(md) {
			width: 365px;
			margin: 33px auto 60px;
		}
	}
}