// Candidate
.candidate-search {
	// todo media breakpoints!
	width: calc(100% - #{$margin-y-general * 2});

	margin: ($margin-x-general * 2) $margin-y-general;
	display: inline-block;

	legend {
		width: calc(75% - #{$margin-y-general});
		border-bottom: $input-btn-border-width solid $input-border-color;
		margin-bottom: (2 * $margin-x-general); // todo form-group--break!!
		font-size: $h4-font-size;
	}

	.form-group {
		display: flex;
		flex-direction: row;

		label {
			flex-grow: 0;
			width: calc(33% - #{$margin-y-general});
			text-align: right;
			margin-right: $margin-y-general;
		}

		div {
			flex-grow: 0;
			width: calc(42% - #{$margin-y-general});
		}
	}

	.btn {
		margin-left: 33%;
		width: calc(42% - #{$margin-y-general});
	}
}

.candidate-search__title {
	font-weight: $text-weight-light;
	padding: ($margin-y-general * 2) 0 0 ($margin-y-general * 2);

}
.candidate-search__form {
	width: calc(75% - #{$margin-y-general*2});

	padding: ($margin-y-general*2);

	.btn {
		width: 100%;
	}
}

@media screen and (max-width: 767px) {
	.candidate-search {
		width: calc(100% - #{$margin-y-narrow * 2});

		margin: $margin-x-narrow $margin-y-narrow;

		legend {
			width: 100%;
		}

		.form-group {
			display: flex;
			flex-direction: column;

			label {
				flex-grow: 1;
				width: 100%;
				text-align: left;
				margin-right: 0;
			}

			div {
				flex-grow: 1;
				width: 100%;
			}
		}

		.btn {
			margin-left: 0;
			width: 100%;

			&.btn-lg {
				font-weight: $btn-font-weight;
				line-height: $input-btn-line-height;
				@include button-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $input-btn-line-height, $btn-border-radius);
			}
		}
	}

	.candidate-search__title {
		font-weight: 400;
		font-size: $h4-font-size;
		text-align: center;
		padding: 1rem;
	}

	.candidate-search__form {
		width: 100%;

		padding: 0 ($grid-gutter-width / 2) 1rem ($grid-gutter-width / 2);
	}
}