body { font-family: sans-serif; font-size: 10pt }
td { padding-right: 1em }
select { width: 154px }

@media screen {
	.wide { width: 320px }
	section {
		padding: 8px; margin: 8px;
		border-color: black; background-color: #c4c4c0;
		border-radius: 4px;
	}
	input { border-radius: 2px;  border: none }
	[slot=header] { cursor: pointer }
	.note:hover { color: blue; }
	.action { cursor:pointer; float:right; margin-right: 16px }
	.action:hover { font-weight: bold; color:blue;} 
}
@media print {
	body {
		color: #000;
		background-color: #fff;
		width: 100%; 
		margin: 0; 
		float: none;
	}
	section {
		page-break-inside : avoid;
		padding: 8px; margin: 8px;
		border-color: black; background-color: white;
	}
	wc-input {float: right}
	.footer { display: none }
	.end { display: none }
	[slot=header] { display: none }
	.search { display: none }
	select { 
		border-color: white; 
		background-color: white; 
		appearance: none; 
	}
	.action { display:none }
}
@supports (grid-area: auto) {
	.title { grid-area: title }
	.wellinfo { grid-area: wellinfo }
	.tubing { grid-area: tubing }
	.rodstring { grid-area: rodstring }
	.stroke { grid-area: stroke }
	.operation { grid-area: operation }
	.search { grid-area: search }
	.audit { grid-area: audit }
	.footer { grid-area: footer }
	.end { grid-area: end }
	/* 1em = 15px approx */
	@media screen and (max-width: 62em) {
		article {
			max-width: 40em;
			  margin-left: auto;
			  margin-right: auto;

			display: grid;
			grid-template-columns: 1fr;
			grid-template-areas:
				"title" "wellinfo" "tubing" "rodstring"
				"stroke" "operation" "search" "audit" 
				"footer" "end";
		}
	}
	@media screen and (min-width: 62em) {
		article {
			max-width: 80em;
			  margin-left: auto;
			  margin-right: auto;

			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-template-areas:
				"title title"
				"wellinfo wellinfo"
				"tubing   rodstring"
				"stroke   operation"
				"search   audit"
				"footer footer"
				"end end";
		}
	}
	@media screen and (min-width: 100em) {
		article {
			max-width: 120em;
			  margin-left: auto;
			  margin-right: auto;

			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			grid-template-areas:
				"title title title"
				"wellinfo tubing    rodstring"
				"stroke   operation search"
				"audit audit audit"
				"footer footer footer"
				"end end end";
		}
	}
}