/**
 * CSS for ContractConnect Staff contract form
 */

/* section control buttons container */
header > nav {
	display: block;
	text-align: left;
	white-space: nowrap;
	text-align: center;
	
	scroll-behavior: smooth;
}

	/* section control buttons */
	header > nav > a {
		display: inline-block;
		height: 16px;
		padding: 15px 15px 15px 15px;
		
		font-family: 'Exo 2', sans-serif, Impact, Calibri, Arial;
		font-size: 18px;
		color: rgba(255,255,255,.5);
		font-weight: bold;
		
		text-transform: uppercase;
		text-decoration:none;
		
		background: transparent;
		border-right: 1px solid rgba(0,0,0,.8);
	}
		/* when section is selected */
		header > nav > a.selected {
			color: white;
			background: rgba(100,100,100,.95);
		}
	
		/* hover */
		header > nav > a:hover {
			color: white;
			/* background: rgba(120,120,120,.95); */
		}
		
		/* no border on last one */
		header > nav > a:last-of-type {
			border-right: 0px;
		}




/* GLOBAL: CONTRACTS FORM */
main > form#Staff-Contracts {
	font-family: 'Exo 2', sans-serif, Impact, Calibri, Arial;
	font-weight: bold;
	
	font-size: 0px; /* collapse spacing */
}

	
	
	/* GLOBAL: SECTIONS */
	main > form#Staff-Contracts > section {
		margin-top: 50px;
		text-align: center;
	}
		
		/* desktops and wider displays */
		@media only screen and (min-device-width: 400px) {
			main > form#Staff-Contracts > section {
				text-align: left;
			}
		}
	
		/* section header */
		main > form#Staff-Contracts > section > h3 {
			/* hide for now */
			display: none;
			
			/* display: block; */
			padding: 5px 5px 7px 5px;
			text-align: left;
			
			font-family: 'Exo 2', sans-serif, Impact, Calibri, Arial;
			font-size: 16px;
			color: white;
			font-weight: bold;
			
			text-transform: uppercase;
			text-decoration:none;
			
			background: rgb(135,135,145);
			border-top: 2px solid black;
			border-bottom: 2px solid black;
		}
		
		/* form field row */
		main > form#Staff-Contracts > section > div {
			display: block;
			padding: 0px 0px 5px 0px;
			text-align: left;
		}

			/* field labels */
			main > form#Staff-Contracts > section > div > label {
				display: block;
				text-align: left;
				
				font-size: 24px;
				padding: 7px 0px 5px 5px;
				font-weight: bold;
				color: rgba(0,0,0,.5);
			}
			
			/* field containers */
			main > form#Staff-Contracts > section > div > span {
				display: block;
				text-align: left;
			}
				
				/* standard inputs */
				main > form#Staff-Contracts > section > div span > input[type="text"],
				main > form#Staff-Contracts > section > div span > select,
				main > form#Staff-Contracts > section > div span > textarea,
				
				/* mobile optimized inputs */
				main > form#Staff-Contracts > section > div span > input[type="number"],
				main > form#Staff-Contracts > section > div span > input[type="date"],
				main > form#Staff-Contracts > section > div span > input[type="time"],
				main > form#Staff-Contracts > section > div span > input[type="datetime"],
				main > form#Staff-Contracts > section > div span > input[type="month"],
				main > form#Staff-Contracts > section > div span > input[type="email"],
				main > form#Staff-Contracts > section > div span > input[type="url"],
				main > form#Staff-Contracts > section > div span > input[type="tel"] {
					display: inline-block;
					width: 100%;
					padding: 10px;
					
					font-size: 20px;
					
					background: rgba(0,0,0,.1);
					border: 0px;
					border-bottom: 1px solid rgba(0,0,0,.65);
					border-right: 1px solid rgba(0,0,0,.65);
				}
					/* inputs when focused */
					main > form#Staff-Contracts > section div > span > input[type="text"]:focus,
					main > form#Staff-Contracts > section div > span > select:focus,
					main > form#Staff-Contracts > section div > span > textarea:focus,
					
					/* mobile optimized inputs */
					main > form#Staff-Contracts > section div > span > input[type="number"]:focus,
					main > form#Staff-Contracts > section div > span > input[type="date"]:focus,
					main > form#Staff-Contracts > section div > span > input[type="time"]:focus,
					main > form#Staff-Contracts > section div > span > input[type="datetime"]:focus,
					main > form#Staff-Contracts > section div > span > input[type="month"]:focus,
					main > form#Staff-Contracts > section div > span > input[type="email"]:focus,
					main > form#Staff-Contracts > section div > span > input[type="url"]:focus,
					main > form#Staff-Contracts > section div > span > input[type="tel"]:focus {
						background: rgba(0,0,0,.15);
						border-bottom: 1px solid black;
					}
					
					
			
				/* non-edit data output */
				main > form#Staff-Contracts > section > div > span.no-edit > h4 {
					display: block;
					margin-left: 10px;
					
					font-family: Calibri, Segoe UI, Tahoma, Arial;
					font-size: 22px;
					font-weight: bold;
					margin-top: 7px;
					padding: 5px 0px 5px 0px
				}
					main > form#Staff-Contracts > section > div > span.no-edit > h4:empty {
						display: none;
					}
				
				main > form#Staff-Contracts > section > div > span.no-edit > div {
					display: block;
					margin-left: 5px;
					padding: 5px;
					
					font-family: Calibri, Segoe UI, Tahoma, Arial;
					font-size: 20px;
					font-weight: normal;
				}
				
	/* checklist type of label */
	main > form#Staff-Contracts > section label.check {
		display: inline-block;
		width: 100%;
		margin: 0px 0px 1px 0px;
		padding: 5px;
		
		border-bottom: 1px solid rgba(0,0,0,.5);
		background: rgba(0,0,0,.1);
		
		cursor: pointer;
	}
	
	
	/* visual block separatation for subsections */
	main > form#Staff-Contracts > section > div.separate {
		display: inline-block;
		text-align: left;
		
		border: 1px solid rgba(0,0,0,.35);
		margin: 5px;
		padding-right: 10px;
		background: rgba(0,0,0,.05);
		box-shadow: 3px 3px 3px rgba(0,0,0,.1);
	}
		/* on click/tap */
		main > form#Staff-Contracts > section label.check:active {
			border-bottom: 1px solid rgba(0,0,0,.5);
			background: rgba(0,0,0,.2);
		}
		
		/* label adjustment for mobile */
		main > form#Staff-Contracts > section label.check.is-mobile {
			padding: 10px 5px 10px 5px;
		}
			/* checkbox adjustment for mobile */
			main > form#Staff-Contracts > section label.check.is-mobile > input[type="checkbox"] {
				transform: scale(1.75);
			}
	
	
	
	
	
	/* JOBSITE */
	main > form#Staff-Contracts > section#jobsite {
		
	}
		/* hide empty links */
		main > form#Staff-Contracts > section#jobsite a:empty {
			display: none;
		}
	
	
	
	
	
	/* CHECKLIST */
	main > form#Staff-Contracts > section#checklist {
		width: 377px;
		margin: auto;
		text-align: left;
	}
	
		/* desktops and wider displays */
		@media only screen and (min-device-width: 400px) {
			main > form#Staff-Contracts > section#checklist {
				width: 100%;
			}
		}
	
		/* checklist labels are black */
		main > form#Staff-Contracts > section#checklist > div > label {
			font-family: Calibri, Segoe UI, Tahoma, Arial;
			font-size: 22px;
			color: rgba(0,0,0,.8);
			font-weight: normal;
		}
	
	
	
	
	
	
	/* PROGRESS SECTION */
	main > form#Staff-Contracts > section#progress {
		
	}
	
		/* day container */
		main > form#Staff-Contracts > section#progress > div.separate {
			width: 355px;
		}
	
			/* progress section input containers */
			main > form#Staff-Contracts > section#progress > div > span {
				display: inline-block;
				width: auto;
				/* height: 35px; */
				
				/* border: 1px solid blue; */
			}
			
				/* date input container adjustments (quirky positioning on mobile) */
				main > form#Staff-Contracts > section#progress > div > span:first-of-type {
					width: 171px;
				}
					/* floating label in first input container */
					main > form#Staff-Contracts > section#progress > div > span:first-of-type > span.floating-label {
						width: 166px;
					}
						/* adjustment for android */
						main > form#Staff-Contracts > section#progress > div > span:first-of-type > span.floating-label.is-mobile-android {
							margin-top: -27px;
						}
						/* adjustment for crapple */
						main > form#Staff-Contracts > section#progress > div > span:first-of-type > span.floating-label.is-mobile-apple {
							margin-top: -30px;
							width: 147px;
							z-index: 2;
						}
					
					/* date input in first container */
					main > form#Staff-Contracts > section#progress > div > span:first-of-type > input[type="date"] {
						position: absolute;
						margin-top: -29px;
					}
						/* adjustment for android */
						main > form#Staff-Contracts > section#progress > div > span:first-of-type > input[type="date"].is-mobile-android {
							height: 24px;
						}
						/* adjustment for crapple */
						main > form#Staff-Contracts > section#progress > div > span:first-of-type > input[type="date"].is-mobile-apple {
							height: 45px;
						}
			
				/* DateCompleted */
				main > form#Staff-Contracts > section#progress > div span > input[name*="DateCompleted"] {
					width: 150px;
				}
				
				/* progress section, other text inputs */
				main > form#Staff-Contracts > section#progress > div > span > input[mobile-type="number"] {
					width: 70px;
				}
					
					/* label embedded */
					main > form#Staff-Contracts > section#progress > div > span > span.floating-label {
						position: absolute;
						margin-top: 1px;
						width: 87px;
						text-align: right;
						
						font-weight: normal;
						font-size: 12px;
						color: rgba(0,0,0,.4);
					}
					
						/* date label adjustment for crapple */
						main > form#Staff-Contracts > section#progress > div > span:first-of-type > floating-label.is-mobile-apple {
							margin-top: 6px;
							z-index: 2;
						}
					
						/* date label adjustment for crapple */
						main > form#Staff-Contracts > section#progress > div > span > floating-label.is-mobile-apple {
							margin-top: 4px;
						}
					
					/* unit label embedded */
					main > form#Staff-Contracts > section#progress > div > span > span.units {
						position: absolute;
						margin: 16px 0px 0px 68px;
						color: rgba(0,0,0,.4);
						
						font-size: 20px;
						font-weight: normal;
					}
			
			/* tracking entries */
			main > form#Staff-Contracts > section div.tracking {
				display: inline-block;
			}
				
				/* individual tracking entry */
				main > form#Staff-Contracts > section div.tracking > div {
					display: inline-block;
					width: 350px;
				}
			
					/* label in tracking entry */
					main > form#Staff-Contracts > section div.tracking > div > label {
						display: inline-block;
						width: 166px;
						padding: 0px 5px 9px 0px;
						
						vertical-align: bottom;
						text-align: right;
						
						font-size: 0px; /* collapse spacing */
					}
						/* product name */
						main > form#Staff-Contracts > section div.tracking > div > label > span.product {
							display: inline-block;
							width: auto;
							font-weight: bold;
						
							font-size: 15px;
							color: rgba(0,0,0,.8);
						}
						
						/* product option */
						main > form#Staff-Contracts > section div.tracking > div > label > span.option {
							display: inline-block;
							width: auto;
							font-weight: normal;
							text-transform: lowercase;
						
							font-size: 14px;
							color: rgba(0,0,0,.8);
						}
						
							/* adjustment when no option */
							main > form#Staff-Contracts > section div.tracking > div > label > span.option {
								margin-top: 5px;
							}
			
					/* tracking entry inputs container */
					main > form#Staff-Contracts > section div.tracking > div span {
						display: inline-block !important;
						width: 170px;
					}
				
						/* qty input in tracking */
						main > form#Staff-Contracts > section div.tracking > div input[name*="QtyUsed"] {
							width: 70px;
						}
						
						/* units output */
						main > form#Staff-Contracts > section div.tracking > div span.units {
							max-width: 80px;
							
							position: relative !important;
							display: inline !important;
							margin: 0px 0px 0px 5px !important;
							
							color: rgba(0,0,0,.4);
							font-size: 16px;
							font-weight: normal;
							
							overflow: hidden;
							text-overflow: ellipsis;
						}
					
		
		
		
		
	/* SUPPLIES SECTION */
	main > form#Staff-Contracts > section#supplies {
		
	}
		/* supplies row */
		main > form#Staff-Contracts > section#supplies > div.separate {
			width: 355px;
		}
			
			/* supplies tracking label */
			main > form#Staff-Contracts > section#supplies > div.separate > div > label {
				width: 135px;
			}
					
					
		
		
		
		
		
	/* SUBDIVISION SECTION */
	main > form#Staff-Contracts > section#subdivisions {
		
	}
	
		/* subdivision row */
		main > form#Staff-Contracts > section#subdivisions > div.separate {
			width: 355px;
		}
		
			/* subdivision inputs container */
			main > form#Staff-Contracts > section#subdivisions > div > span {
				text-align: right;
				
				font-family: Calibri, Segoe UI, Tahoma, Arial;
				font-size: 22px;
				color: rgba(0,0,0,.8);
				font-weight: normal;
			}
			
				/* subdivision product checkbox label */
				main > form#Staff-Contracts > section#subdivisions > div > span > label.check {
					display: block;
					width: 346px;
					text-align: left;
				}
				
					/* top margin for non-first checkboxes */
					main > form#Staff-Contracts > section#subdivisions > div > span > label.check:not(.first-of-type) {
						margin-top: 10px;
					}
				
				/* product specifics */
				main > form#Staff-Contracts > section#subdivisions > div > span > label > span.product-specs {
					display: block;
					font-size: 18px;
					margin: 3px 5px 0px 26px;
					color: rgba(0,0,0,.6);
				}
					/* hide specs when empty */
					main > form#Staff-Contracts > section#subdivisions > div > span > label > span.product-specs:empty {
						display: none;
					}
					
					/* adjustment for mobile chrome */
					main > form#Staff-Contracts > section#subdivisions > div > span > label > span.product-specs.is-mobile.is-browser-chrome {
						margin-left: 29px;
					}
				
				/* product entry field label */
				main > form#Staff-Contracts > section#subdivisions > div > span > label:not(.check) {
					display: inline-block;
					width: 100px;
					text-align: right;
					padding: 0px;
				
					font-size: 15px;
					color: rgba(0,0,0,.8);
					font-weight: bold;
				}
				
				/* product entry field */
				main > form#Staff-Contracts > section#subdivisions > div > span > input[type="text"] {
					text-align: left;
					
					width: 225px;
					padding: 3px 5px 3px 5px;
					font-size: 17px;
				}