/**
 * Responsive CSS for Northern Greenhouse forms
 */


 /* controls (captcha and submit) */
 main .centering form .form-controls {
 	text-align: center !important;
 }

 	main .centering form .form-controls .g-recaptcha {
 		display: block !important;
 		width: 304px !important;
 		margin: 25px auto 0px auto !important;
 	}
	
/* credit card payment note */
main form label.CC_note {
	display: block !important;
	width: auto !important;
	height: auto !important;
}
	main form label.CC_note > div {
		display: block !important;
		width: auto !important;
		height: auto !important;
		text-align: center;
		color: red;
	}

/* large screens */
@media screen AND (min-width: 900px) {
	
	/* labels when labels beside fields */
	main .centering form.labels-beside label {
		display: block;
		position: relative;
		width: 100%;
		margin: 0px;
		
		vertical-align: top;
		color: rgba(0,0,0,.75);
		
		background-color: rgba(84,187,194,.15);
		border-bottom: 1px solid rgb(8,84,46);
		
		font-size: 0px; /* collapse spacing */
	}
	
		/* spacing/alignment divider for label */
		main .centering form.labels-beside label > div:nth-of-type(1) {
			display: inline-block;
			width: calc( 40% - 20px );
			vertical-align: top;
			height: 17px;
			padding: 12px 0px 10px 20px;
			
			font-size: 17px;
		}
		
		/* spacing/alignment divider for input(s) */
		main .centering form.labels-beside label > div:nth-of-type(2) {
			display: inline-block;
			width: calc( 60% - 20px );
			vertical-align: top;
			
			font-size: 17px;
		}
		
		/* spacing/alignment divider with no input(s) */
		main .centering form.labels-beside label > div.no-input:nth-of-type(2) {
			height: 17px;
			padding: 12px 0px 10px 10px;
			
			font-weight: bold;
			color: rgba(0,0,0,.65);
		}
		
			/* inputs when labels beside fields */
			main .centering form.labels-beside input:not([type="submit"]),
			main .centering form.labels-beside textarea,
			main .centering form.labels-beside select {
				position: relative;
				display: inline-block;
				width: 100%;
				margin: 0px;
				
				border-bottom: none;
			}
			
				/* adjustment for checks & radios */
				main .centering form.labels-beside input[type="checkbox"],
				main .centering form.labels-beside input[type="radio"] {
					width: auto;
					margin: 12px 10px 10px 10px;
					background-color: transparent;
				}
				
					/* labels to wrap around multiple fields (radios, checks, etc) */
					main .centering form.labels-beside label > div > label,
					main .centering form.labels-beside label > div > label {
						/* margin-left: 10px; */
						display: inline-block;
						width: auto;
						
						vertical-align: top;
						color: rgba(0,0,0,.75);
						
						background-color: transparent;
						border-bottom: none;
						
						font-size: 17px; /* collapse spacing */
					}
				
						/* checks and radios */
						main .centering form.labels-beside label > div > label:first-of-type > input[type="checkbox"],
						main .centering form.labels-beside label > div > label:first-of-type > input[type="radio"] {
							margin-left: 0px;
						}
				
				/* adjustment for <select> */
				main .centering form.labels-beside select {
					padding: 9px;
				}
			
				/* browser-specific adjustments for <select> */
				main.is-browser-mozilla .centering form.labels-beside select	{ width: calc( 100% + 20px ); }
				main.is-browser-chrome .centering form.labels-beside select		{ width: calc( 100% + 16px ); }
				main.is-browser-msie .centering form.labels-beside select		{ width: calc( 100% + 17px ); }
				
				/* custom adjustment: CC number */
				main .centering form.labels-beside input[name*="Card_Number"] {
					display: inline-block;
					width: 50%;
					position: relative;
					margin-right: 25px
				}
				
				/* custom adjustment: CC number */
				main .centering form.labels-beside input[name*="CCV"] {
					display: inline-block;
					width: 35px;
				}
				
				/* custom adjustment: CC exp */
				main .centering form.labels-beside select[name*="Card_Expiry_Date"] {
					width: 85px;
				}
			
		/* submit button */
		main .centering form.labels-beside input[type="submit"] {
			display: inline-block;
			margin: 25px auto 25px auto;
		}
}

/* small screens */
@media screen AND (max-width: 900px) {
	
	main .centering form {
		width: 100%;
	}
	
		/* labels when labels beside fields */
		main .centering form.labels-beside label {
			margin: 0px 0px 10px 0px;
			padding: 0px;
		}
		
			/* label and input containers */
			main .centering form.labels-beside label > div {
				display: block;
			}
			
			/* spacing/alignment divider for input(s) */
			main .centering form.labels-beside label > div.no-input:nth-of-type(2) {
				width: auto;
				margin: 10px 0px 20px 0px;
				padding: 12px 0px 10px 10px;
				
				font-size: 17px;
				font-weight: bold;
				color: rgba(0,0,0,.65);
				
				background-color: rgba(84,187,194,.15);
				border-bottom: 1px solid rgb(8,84,46);
			}
		
		/* inputs when labels beside fields */
		main .centering form.labels-beside input:not([type="submit"]),
		main .centering form.labels-beside textarea,
		main .centering form.labels-beside select {
			width: calc( 100% - 20px );
			margin-bottom: 20px;
		}
		
			/* adjustment for checks & radios */
			main .centering form.labels-beside input[type="checkbox"],
			main .centering form.labels-beside input[type="radio"] {
				width: auto;
				margin: 20px 5px 20px 20px;
			}

			/* adjustment for <select> */
			main .centering form.labels-beside select {
				width: 100%;
				padding: 9px;
			}
			
			/* custom adjustment: CC exp */
			main .centering form.labels-beside select[name^="Card_Expiry_Date"] {
				display: inline-block;
				width: auto;
			}
			
		/* submit button */
		main .centering form.labels-beside input[type="submit"] {
			margin-top: 25px;
		}
}