#headerMapper {
	height: 100%;
	margin-left: 3%;
}

	#headerMapper .headingSelectorHolder {
		display: flex;
		align-items: center;
		padding: 20px 40px;
		margin: 5px 0;
	}

		#headerMapper .headingSelectorHolder .checkboxHolder {
			margin: 5px 0;
		}

		#headerMapper .headingSelectorHolder label {
			cursor: pointer;
		}

	#headerMapper .ddlHeadingSelector {
		float: left;
		font-size: 16px;
		max-width: 210px;
	}

	#headerMapper .selectorHeading {
		font-weight: bold;
		font-size: 16px;
		width: 250px;
	}

		#headerMapper .selectorHeading.required::after {
			content: "*";
			display: inline-block;
			color: red;
		}

	#headerMapper #submitButtonHolder {
		position: fixed;
		left: 48%;
		background: rgba(255,255,255,0.8);
		border-radius: 0 0 20px 20px;
		border: solid 1px #aaa;
		top: 69px;
		padding: 4px 12px 12px;
		border-top-color: #fff;
	}

	#headerMapper #submitButton {
		width: 120px;
		height: 50px;
	}

	#headerMapper .flex33 {
		border-bottom: 1px solid lightgray;
	}

	#headerMapper #checkboxContainer {
		height: 145px;
		overflow-x: hidden;
		border-left: 1px solid #EAEAEA;
		border-top: 1px solid #EAEAEA;
		border-bottom: 1px solid #EAEAEA;
		max-width: 210px;
	}

	#headerMapper #additionalDataWrapper {
		margin-top: 30px;
	}

		#headerMapper #additionalDataWrapper .selectorHeading {
			font-size: 20px;
		}

		#headerMapper #additionalDataWrapper input {
			margin-right: 30px;
			padding: 10px;
			font-size: 16px;
		}

		#headerMapper #additionalDataWrapper .layout-row {
			margin-top: 30px;
			display: flex;
			align-items: center;
		}

			#headerMapper #additionalDataWrapper .layout-row .iconButton {
				background: #EF3030;
				height: 35px;
				width: 35px;
				margin-left: 20px;
			}

			#headerMapper #additionalDataWrapper .layout-row .additionalDataRow {
				display: flex;
				align-items: center;
				padding: 20px 40px;
				margin: 5px 0;
			}

		#headerMapper #additionalDataWrapper .labelButton {
			margin-top: 20px;
		}

@media screen and (max-width: 1550px) {
	#templateBuilder .layout-row {
		display: flex;
		width: 80%;
		flex-direction: column;
		-webkit-flex-direction: column;
	}

	#headerMapper .headingSelectorHolder {
		padding: 20px 0;
	}
}

@media screen and (max-width: 750px) {
	#templateBuilder .layout-row {
		display: flex;
		flex-direction: column;
		-webkit-flex-direction: column;
	}
}

@media screen and (max-width: 550px) {
	#headerMapper {
		width: 100%;
	}
}