/**
 * RecExcite MHRD public and customer-facing forms
 */

/* all inputs with default value */
input[value-default]:not(.has-value) {
	color: rgba(0,0,0,.5);
}

/* all inputs default styling */

/* search input */
input, select, select > option {
	border: 0px;
	border-bottom: 2px solid #299926;

	font-family: Lato;
	font-size: 15px;
	white-space: nowrap;
	text-overflow: ellipsis;

	background-color: transparent;
}
	/* hover */
	input:hover {
		border-bottom: 2px solid rgba(70,10,90,.75);
	}

	/* focused */
	input:active,
	select:active {
		border-bottom: 2px solid rgba(70,10,90,1);
	}

	/* any input disabled */
	input[disabled],
	textarea[disabled],
	select[disabled] {

		color: rgba(0,0,0,.5);

		/* http://www.patternify.com/ */
		background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAGklEQVQYlWNgYGAwZkAAXGyCCoypp2DIWgcAeP8FYr3XZ0oAAAAASUVORK5CYII=) !important;

		border-bottom: 2px solid #299926 !important;
	}


/* all entry errors default styling */

/* all entry errors */
form .entry_errors {
	display: none;
	padding: 10px;
	margin: 15px auto 5px auto;

	font-family: Lato;
	font-size: 15px;
	color: red;
	font-weight: normal;

	border: 2px solid red;
	background-color: white;
}

	/* h5 in entry error */
	form .entry_errors h5 {
		margin-top: 0px;
	}

	/* indicator icon (templated) */
	main > form.content .entry_error > .fa,
	form .entry_errors > .fa {
		float: right;
		margin: 0px 5px;

		font-size: 100px;
		color: rgba(255,0,0,.1);
	}

	/* paragraphs in entry errors (templated) */
	form .entry_errors > p:not(:last-child) {
		margin-bottom: 10px;
	}

	/* paragraphs in entry errors (templated) */
	form .entry_errors > p {
		line-height: 1.2;
	}

	/* single display of entry errors */
	form .entry_errors {
		/* margin: 35px 0px -25px 10px; */
	}

	/* single display of errors when shown */
	form .entry_errors.show {
		display: block;
	}

	/* error list items container */
	form .entry_errors > ul {
		margin: 10px auto 15px 25px;
	}

		/* error list list */
		form .entry_errors > ul > li {
			list-style-type: disc;

			font-size: 15px;
			line-height: 1.25;
		}


/* general form styling */
main > form.content {
	display: block;
	position: relative;
	width: auto;
	margin: 35px auto 35px auto;

	font-family: Lato;
}

	/* description and gallery */
	main > form.content > aside.screen-wide {
		display: block;
		float: right;
		width: 35%;
		margin-bottom: 35px;
	}
		/* full details button */
		main > form.content > aside.screen-wide > .button.register {
			float: right;
			margin-bottom: 10px;
		}

		/* description text */
		main > form.content > aside.screen-wide > article,
		main > form.content > aside.screen-wide > article p {
			clear: both;
			line-height: 1.35;
		}

		/* hide header for gallery */
		main > form.content > aside.screen-wide > .Programs_PhotoSelections > h5 {
			display: none;
		}

	/* form sections */
	main > form.content section {
		display: block;
		padding-left: 10px;
		width: 70%;
		margin: 25px auto auto auto;
	}

		/* form section headers */
		main > form.content section > h5 {
			margin: 35px 0px 10px 0px !important;
			font-size: 23px !important;
			font-weight: normal;

		}

			/* section header icon */
			main > form.content section > h5 > .fa {
				width: 25px;
				margin-right: 5px;

				vertical-align: middle;
				text-align: center;
				font-size: 18px;
				color: rgba(100,50,110,.35);
			}

			/* control buttons */
			main > form.content section > h5 > button,
			main > form.content section > span > button {
				display: inline-block;
				margin: 0px 0px 0px 25px;
				padding: 5px;

				background-color: white;
				border: 2px solid #56D451;
			}
				/* adjust when in field container */
				main > form.content section > span > button {
					position: absolute;
					right: 10px;
					top: -5px;
					z-index: 2;

					white-space: nowrap;
				}


				main > form.content section > h5 > button:not(.is-mobile):hover,
				main > form.content section > span > button:not(.is-mobile):hover {
					background-color: #56D451 !important;
					border: 2px solid #56D451;
					cursor: pointer;
				}
				main > form.content section > h5 > button:active,
				main > form.content section > span > button:active {
					background-color: #56D451 !important;
					border: 2px solid #299926;
				}

				/* button icon */
				main > form.content section > h5 > button > .fa,
				main > form.content section > span > button > .fa {
					font-size: 16px;
				}

				/* button label */
				main > form.content section > h5 > button > label,
				main > form.content section > span > button > label {
					margin-left: 5px;
					font-family: Lato;
					font-size: 16px;
				}

				/* section detailed article */
				main > form.content section > article,
				main > form.content section > article > p {
					display: block;
					margin-bottom: 15px;

					font-family: Lato;
					font-size: 15px;
					font-weight: normal;
					color: rgba(0,0,0,.85);
					line-height: 1.25;
				}

		/* field label */
		main > form.content section > label {
			display: inline-block;
			position: relative;
			width: calc( 25% - 10px );
			height: 35px;
			padding-right: 10px;

			text-align: left;
			font-size: 16px;
			font-weight: bold;
		}
			/* error dummy label */
			main > form.content section > label.error_dummy {
				height: 0px;
				margin: 0px;
				padding: 0px;
			}

			/* required field or section */
			main > form.content section > h5.required::after,
			main > form.content section > label.required::after {
				display: inline-block;
				padding: 3px;

				font-family: Lato;
				font-size: 11px;
				color: #299926;

				background-color: white;
				border: 1px solid rgba(41,153,38,.5);
				border-radius: 2px;

				opacity: .75;

				content: '* required';
			}
				main > form.content section > h5.required::after {
					margin-left: 10px;
				}
				main > form.content section > label.required::after {
					float: right;
				}

			/* label for checkbox */
			main > form.content section > label.check {
				display: block;
				width: auto !important;
				height: auto;
				padding-top: 5px;
				text-align: left;
				line-height: 1.5;
			}
				/* checkbox */
				main > form.content section > label.check > input[type="checkbox"] {
					margin: 0px 10px 0px 0px;
				}

				/* detailed description */
				main > form.content section > label.check > article.details {
					display: block;
					margin: 5px 0px 20px 0px;

					font-family: Lato;
					font-size: 13px;
					font-weight: normal;
					color: rgba(0,0,0,.75);
				}

		/* field input container */
		main > form.content section > span {
			display: inline-block;
			position: relative;
			width: 75%;
			height: 35px;
		}

			/* standard inputs */
			main > form.content section > span > input:not([type="checkbox"]):not([type="radio"]),
			main > form.content section > span > select {
				position: relative;
				width: calc( 100% - 10px );
				padding: 5px;
				font-size: 16px;
			}

				/* adjustment for date inputs on iOS */
				main > form.content section > span > input.is-mobile-os-ios {
					height: 32px;
				}

				/* narrower input */
				main > form.content section > span > input.small:not([type="checkbox"]):not([type="radio"]),
				main > form.content section > span > select.small {
					max-width: 200px;
				}

			/* checkbox/radio label */
			main > form.content section > span > label {
				font-size: 16px;
				font-weight: normal;
			}

				/* checks/radios */
				main > form.content section > span input[type="checkbox"] {
					margin-top: -2px;
					vertical-align: middle;
				}



	/* login button */
	form button#submit {
		display: block;
		position: relative;
		width: 275px;
		margin: 35px auto 0px auto;
		padding: 10px;

		text-align: center;
		color: white;
		font-size: 18px;
		font-weight: bold;

		background-color: rgb(100,150,175);
		border: 2px solid transparent;

		cursor: pointer;
	}
		form button:not(.is-mobile):hover {
			background-color: #56D451 !important;
		}
		form button:active {
			border: 2px solid #299926 !important;
		}

		/* icon button icon */
		form button#submit > .fa {
			margin-left: 25px;
		}

/* jquery ui */
body.is-mobile ul.ui-autocomplete li.ui-menu-item > a.ui-menu-item-wrapper {
	padding-top: 5px;
	padding-bottom: 5px;
	font-family: Lato;
	font-size: 18px;
}