/**
 * CSS for Timesheets CRUD indexes
 */

/* controls */
body#ViewWrapper-Timesheets > main > div#CRUDForm-controls {
	position: fixed;
	width: calc( 100% - 175px );
	height: 40px;
	top: 31px;
	right: 0px;
	text-align: left;

	background-color: rgb(4,90,163);

	font-size: 0px; /* collapse spacing */

	z-index: 2;

	transition: all 0.25s ease 0s;
}

	/* contols with header collapsed */
	body#ViewWrapper-Timesheets.header-collapsed > main > div#CRUDForm-controls {
		width: calc( 100% - 45px );
	}

	/* form buttons */
	body#ViewWrapper-Timesheets > main > div#CRUDForm-controls > button {
		width: 135px;
		height: 40px;
		text-align: center;
		vertical-align: middle;

		font-family: Open Sans, Calibri, Arial;
		color: white;
		font-weight: bold;
		text-transform: uppercase;

		border: 0px;
		cursor: pointer;
	}

		/* cancel button */
		body#ViewWrapper-Timesheets > main > div#CRUDForm-controls > button.cancel {
			background-color: rgba(150,150,150,.75);
		}

		/* save button */
		body#ViewWrapper-Timesheets > main > div#CRUDForm-controls > button.save {
			background: rgba(0,0,0,.15);
		}

		/* save+close button */
		body#ViewWrapper-Timesheets > main > div#CRUDForm-controls > button.save-close {
			background: rgba(0,0,0,.45);
		}

		/* hover on button */
		body#ViewWrapper-Timesheets > main > div#CRUDForm-controls > button:hover {
			background: rgba(255,255,255,.35);
		}

		/* click on button */
		body#ViewWrapper-Timesheets > main > div#CRUDForm-controls > button:active {
			background: rgba(0,0,0,.15);
		}

		/* icons in button */
		body#ViewWrapper-Timesheets > main > div#CRUDForm-controls > button > .fa {
			color: rgba(255,255,255,.75);
			margin: auto -10px auto 5px;
		}
			body#ViewWrapper-Timesheets > main > div#CRUDForm-controls > button:hover > .fa {
				color: white;
			}

		/* CRUD form title */
		body#ViewWrapper-Timesheets > main > div#CRUDForm-controls > h4 {
			display: inline-block;
			margin: 14px 0px 0px 25px;
			vertical-align: top;

			font-family: Open Sans, Calibri, Arial;
			font-size: 14px;
			font-weight: normal;
			color: rgba(255,255,255,.85) !important;
		}


/* form and container */
body#ViewWrapper-Timesheets form[id^="CRUDForm"],
body#ViewWrapper-Timesheets > main > .container {
	font-family: Open Sans, Calibri, Arial;
	font-size: 0px; /* collapse spacing */
}

	/* CRUD forms inside dialogs */
	body#ViewWrapper-Timesheets .ui-dialog form[id^="CRUDForm"] {
		margin-top: 10px;
	}

	body#ViewWrapper-Timesheets form[id^="CRUDForm"]:first-of-type,
	body#ViewWrapper-Timesheets > main > .container {
		padding-top: 10px;
		margin-top: 59px;
	}

	/* form and container with noshell */
	body#ViewWrapper-Timesheets.noshell form[id^="CRUDForm"]:first-of-type,
	body#ViewWrapper-Timesheets.noshell > main > .container {
		padding: 0px !important;
		margin: 39px 0px 0px 0px !important;
	}

	/* add room for jump tabs on desktop */
	body#ViewWrapper-Timesheets:not(.is-mobile) form[id^="CRUDForm"]:not(.no-jumptabs) section:first-of-type {
		margin-top: 45px;
	}

	/* jump tab container styling */
	body#ViewWrapper-Timesheets:not(.is-mobile) form[id^="CRUDForm"]:not(.no-jumptabs) > div#sectionJumpTabs {
		position: fixed;
		top: 71px;
		width: calc( 100% - 175px );
		right: 0px;

		background: rgb(7,207,226);
		white-space: nowrap;

		transition: all 0.25s ease 0s;
		z-index: 9;
	}
		/* jump tab when header collapsed */
		body#ViewWrapper-Timesheets.header-collapsed:not(.is-mobile) form[id^="CRUDForm"]:not(.no-jumptabs) > div#sectionJumpTabs {
			width: calc( 100% - 45px );
		}

		/* jump tab buttons */
		body#ViewWrapper-Timesheets:not(.is-mobile) form[id^="CRUDForm"]:not(.no-jumptabs) > div#sectionJumpTabs > button {
			display: inline-block;
			padding: 8px;

			border: 0px;
			background: transparent;
			font-family: Open Sans, Calibri, Arial;
			font-size: 13px;
			color: rgba(0,0,100,.75);
			border-right: 1px solid rgba(255,255,255,.5);
		}
			/* jump tab button hover */
			body#ViewWrapper-Timesheets:not(.is-mobile) form[id^="CRUDForm"]:not(.no-jumptabs) > div#sectionJumpTabs > button:hover,
			body#ViewWrapper-Timesheets:not(.is-mobile) form[id^="CRUDForm"]:not(.no-jumptabs) > div#sectionJumpTabs > button.in-scroll-range {
				background: white;
				cursor: pointer;
				color: rgba(0,0,50,1);
			}
				body#ViewWrapper-Timesheets:not(.is-mobile) form[id^="CRUDForm"]:not(.no-jumptabs) > div#sectionJumpTabs > button:active {
					background: rgba(0,0,0,.15);
				}

			/* jump tab button icons */
			body#ViewWrapper-Timesheets:not(.is-mobile) form[id^="CRUDForm"]:not(.no-jumptabs) > div#sectionJumpTabs > button > .fa {
				width: 18px;
				text-align: center;
				font-size: 14px;
				color: rgba(0,0,100,.35);
				vertical-align: top;
			}

		/* subcontainer inwide section */
		body#ViewWrapper-Timesheets form > section > div.subcontainer {
			padding: 5px;
			margin: 10px;
			margin-bottom: 35px;

			border: 1px solid rgb(75,200,235);
			background-color: rgba(200,235,235);
		}

			body#ViewWrapper-Timesheets form > section > div.subcontainer.no-space {
				border-bottom: 0px;
				margin-bottom: 0px;
			}

			/* filtering text input inside subcontainer */
			body#ViewWrapper-Timesheets form > section > div.subcontainer:not(.flexrows) > input[type="text"][name^="filter-list"] {
				display: inline-block;
				width: 450px;
			}

			/* subcontainer inwide section that scrolls */
			body#ViewWrapper-Timesheets form > section > div.subcontainer.scroll {
				max-height: 200px;
				overflow-y: scroll;
				overflow-x: hidden;
			}
				body#ViewWrapper-Timesheets form > section > div.subcontainer.flexrows.scroll {
					max-height: 300px;
				}

			/* check labels nested inside subcontainer */
			body#ViewWrapper-Timesheets form > section > div.subcontainer:not(.flexrows) label {
				display: inline-block;
				position: relative;
				margin-right: 20px;
				padding: 3px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;

				font-family: Roboto Mono;
				font-size: 13px;
			}

				/* labels directly beneath subcontainer */
				body#ViewWrapper-Timesheets form > section > div.subcontainer:not(.flexrows) > label {
					margin-bottom: -6px;
					margin-left: 20px;
				}

	/* error containers */
	body#ViewWrapper-Timesheets form[id^="CRUDForm"] .entryError {
		display: block;
		padding: 22px 10px 10px 10px;
		text-align: left;

		font-size: 15px;
		font-weight: bold;
		color: red;
		line-height: 1.5;
	}
		/* error containers inside CRUD form[id^="CRUDForm"] spanned header notice */
		body#ViewWrapper-Timesheets > main th.notice .entryError {
			margin-top: -37px;
			position: absolute;
			width: calc( 100vw - 175px - 20px );

			text-align: center;
			background: white;
		}

	/* checkbox group container */
	body#ViewWrapper-Timesheets .check-group {
		/* vertical-align: top !important; */
		text-align: center;
	}

		/* check group labels default */
		body#ViewWrapper-Timesheets .check-group > label {
			opacity: 0.35;
			transition: none;
		}
			body#ViewWrapper-Timesheets .check-group > label:not(:disabled,[disabled],[readonly]) {
				cursor: pointer;
			}

		/* check group labels */
		body#ViewWrapper-Timesheets .check-group > label:not(.check-group-no-styles) {
			display: inline-block;
			margin: 0px 3px 0px 3px;
			padding: 5px;
			min-width: 20px;

			font-family: 'Roboto Mono';
			font-size: 13px;
			text-shadow: 1px 1px 0px white;
			text-align: center;

			cursor: pointer;
			opacity: 0.5;
			background-color: rgba(0,0,100,.15);
			border: 1px solid rgba(0,0,0,.5);
		}

			/* check group label when it contains a material symbol to align with fa icons in same container */
			body#ViewWrapper-Timesheets .check-group > label:not(.check-group-no-styles).has-material-symbol {
				padding: 3px 4px 1px 4px;
			}
				/* material symbol */
				body#ViewWrapper-Timesheets .check-group > label:not(.check-group-no-styles).has-material-symbol > .material-symbols-outlined {
					font-size: 21px;
					vertical-align: middle;
					margin-top: -2px;
				}

			/* when checked */
			body#ViewWrapper-Timesheets .check-group > label.checked,
			body#ViewWrapper-Timesheets .check-group input:checked ~ label {
				opacity: 1 !important;
			}

			/* when disabled */
			body#ViewWrapper-Timesheets .check-group > label.disabled {
				opacity: 1;
				color: rgba(0,0,0,.2);
				background-color: transparent;
				background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAFUlEQVQImWNgQAOrzpz5T3UBBgYGAFQ/EEbxg55OAAAAAElFTkSuQmCC) !important;
			}

			/* show check or radio */
			body#ViewWrapper-Timesheets .check-group > label.show-input > input[type="checkbox"],
			body#ViewWrapper-Timesheets .check-group > label.show-input > input[type="radio"] {
				display: inline !important;
				margin: 3px 10px 3px 10px;
				padding: 3px 10px 3px 5px;
				vertical-align: text-top;
			}

			/* hide check or radio */
			body#ViewWrapper-Timesheets .check-group input[type="checkbox"],
			body#ViewWrapper-Timesheets .check-group input[type="radio"] {
				display: none !important;
			}

	/* checkbox group container (no js) */
	body#ViewWrapper-Timesheets .check-group-cssonly {
		/* vertical-align: top !important; */
	}
		/* check group labels */
		body#ViewWrapper-Timesheets .check-group-cssonly > label {
			display: inline-block;

			cursor: pointer;
		}

			/* label icon */
			body#ViewWrapper-Timesheets .check-group-cssonly > label > .fa {
				margin: 0px 5px 0px 5px;

				font-size: 18px;
				color: black;
				/* opacity: .25; */
			}

			/* hide check or radio */
			body#ViewWrapper-Timesheets .check-group-cssonly > label > input[type="checkbox"],
			body#ViewWrapper-Timesheets .check-group-cssonly > label > input[type="radio"] {
				display: none;
			}

			body#ViewWrapper-Timesheets .check-group-cssonly > label > input:not(:checked) ~.fa {
				opacity: .35;
			}

			body#ViewWrapper-Timesheets .check-group-cssonly > label > input:checked ~.fa {
				opacity: 1;
			}

	/* form section */
	body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section {
		display: block;
		width: auto;
		/* padding: 10px; */
		margin: 15px 10px 25px 10px;

		background-color: rgb(225,245,245);
		border: 1px solid rgb(75,200,235);
		box-shadow: 4px 4px 0px rgba(0,0,0,.075);

		transition: all 0.2s linear 0s;

		max-height: 1000vh;
	}

		/* section when displayed */
		body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section:not(.collapse) {
			padding-bottom: 10px;
		}

		/* section when collapsed */
		body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section.collapse {
			margin-top: 0px !important;
			margin-bottom: 5px !important;
			max-height: 26px;
			opacity: .65;
			box-shadow: none;
		}
			body#ViewWrapper-Timesheets form[id^="CRUDForm"]:first-of-type > section.collapse:first-of-type {
				margin-top: 48px !important;
			}
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section.collapse :is(.input-tip,.section-header-notice) {
				display: none;
			}
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section.collapse > h2 {
				font-size: 13px;
				padding: 6px;
			}
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section.collapse > h2 > .fa {
				font-size: 11px !important;
				vertical-align: initial !important;
				margin-top: 0px !important;
			}

		/* special instructions */
		body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div.instructions-special {
			display: block;
			width: 400px;
			padding: 15px;

			font-size: 12px;

			background: rgba(7,207,226,.15);
			border: 1px solid rgb(7,207,226);
			border-radius: 4px;
		}
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div.instructions-special > p {
				line-height: 1.5;
				margin-bottom: 15px;
			}
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div.instructions-special > p:last-of-type {
				margin-bottom: 0px;
			}

		/* action buttons */
		body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section button.action {
			display: inline-block;
			padding: 8px 15px 6px 15px;

			font-family: Open Sans, Calibri, Arial;
			color: white;

			cursor: pointer;
			border: 1px solid rgb(180,200,225);
			border-radius: 3px;
		}
			/* affirmative action (lol) button */
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section button.action.run {
				background-color: rgb(4,90,163);
			}
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section button.action.run:hover {
					background-color: rgb(31,120,195);
				}
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section button.action.run:active {
					background-color: rgb(6,42,73);
				}

			/* non-affirmative action button */
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section button.action:not(.run) {
				background-color: rgb(100,110,110);
			}
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section button.action:not(.run):hover {
					background-color: rgb(130,140,140);
				}
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section button.action:not(.run):active {
					background-color: rgb(75,85,85);
				}

		/* transparent section (hide when empty or blank) */
		body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section.transparent:empty,
		body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section.hide,
		body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section div.hide {
			display: none !important;
		}

		/* form section header */
		body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > h2 {
			display: block;
			/* margin: 5px 0px 10px 0px; */
			padding: 10px;
			text-align: left;

			font-family: Open Sans, Calibri, Arial;
			font-size: 16px;
			color: rgba(0,0,0,.65);
			font-weight: normal;
			text-transform: uppercase;
			text-shadow: 1px 1px 0px white;

			background: rgba(7,207,226,.25);
		}
		
			/* detail box inside header */
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > h2 > div.section-header-detail {
				display: inline-block;
				margin: -3px 0px -3px 10px;
				padding: 5px 8px 5px 5px;

				font-family: Open Sans, Calibri, Arial;
				font-size: 12px;

				background-color: rgba(255,255,255,.35);
				border: 1px solid rgba(0,0,0,.35);
				border-radius: 2px;
				
				cursor: help;
			}
				/* icon in detail box */
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > h2 > div.section-header-detail > :is(.fa,.fa:hover,.fa:active) {
					margin: 0px 3px 0px 5px !important;
					vertical-align: baseline;
					
					font-size: 15px;
				}
					
				/* hide detail box when section collasped */
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section.collapse > h2 > div.section-header-detail {
					display: none;
				}
		
			/* checkbox label inside header */
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > h2 > label.check {
				margin-left: 10px;
				text-transform: none;
				font-size: 13px;
				color: rgba(0,0,0,.85);
			}
		
			/* adjustments for input tip inside header */
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > h2 > .fa.input-tip {
				margin-top: -3px;
  				margin-bottom: -4px;
			}

			/* hover on section header */
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > h2:first-of-type:hover {
				background: rgba(7,207,226,.5);
				cursor: pointer;
			}

			/* click on section header */
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > h2:first-of-type:active {
				background: rgb(7,207,226);
				color: white;
				text-shadow: none;
			}

			/* section header when section not collapsed */
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > h2:first-of-type:not(.collapse) {
				margin-bottom: 10px;
				border-bottom: 1px solid rgb(75,200,235);
			}

			/* alter styling for non-first section header */
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > h2:not(:first-of-type) {
				margin: 20px 0px 10px 0px;
				border-top: 1px solid rgb(75,200,235);
				border-bottom: 1px solid rgb(75,200,235);
			}

			/* section header icon */
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > h2 > .fa {
				font-size: 18px;
				color: rgba(0,0,50,.35);
				width: 25px;
				text-align: center;
			}

			/* special instruction notice */
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > h2 > span.section-header-notice {
				position: absolute;
				display: inline-block;
				padding: 5px;
				margin: -4px 0px 0px 15px;
				vertical-align: top;

				font-family: Open Sans, Calibri, Arial;
				font-size: 12px;
				color: white;
				text-transform: none;
				text-shadow: none;

				background-color: rgb(125,100,0);
				border: 1px solid white;
				border-radius: 1px;
				box-shadow: 1px 1px 0px rgba(0,0,0,.5);
				opacity: .75;

				cursor: help;
			}
				/* notice in header */
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > h2 > span.section-header-notice:hover {
					opacity: 1;
				}
				/* low emphasis button inside header */
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > h2 > button.general.emph-less {
					margin: -10px 0px -7px 10px !important;
					padding: 6px !important;
					height: 27px !important;
				}
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > h2 > button.general.emph-less:not(:first-of-type) {
					margin: -10px 0px -7px 5px !important;
				}
				/* body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > h2 > span.section-header-notice:active {
					text-shadow: -1px -1px 0px black;
					background-color: rgb(75,50,0);
					box-shadow: -1px -1px 0px rgba(0,0,0,.5);
				} */

				/* hide notice when section collapsed */
				/* body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section.collapse > h2 > span.section-header-notice {
					display: none;
				} */

		/* hide all section contents when collapsed, except for header */
		body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section.collapse > *:not(h2:first-of-type) {
			display: none !important;
		}

		/* force header restyling on collapse */
		body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section.collapse > h2:first-of-type {
			margin: 0px !important;
		}

		/* section subheader */
		body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > h3 {
			/* margin-bottom: 20px; */
			padding: 10px;

			font-family: Open Sans, Calibri, Arial;
			font-size: 13px;
			color: rgba(0,0,0,.9);
			font-weight: normal;
			line-height: 1.75;
		}
			/* h3 with fixed-width font */
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > h3.fixed-width {
				font-family: Roboto Mono, Courier New;
			}

		/* form line */
		body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div {
			display: block;
		}

			/* data text container inline with field */
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div > span.text-data {
				display: inline-block;
				margin-left: 10px;

				font-family: 'Roboto Mono';
				font-size: 15px;
				color: black;
			}

			/* div when containing a check-style input */
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div.check {
				font-family: Roboto Mono, Courier New;
				font-size: 13px;
			}

			/* visually separated form[id^="CRUDForm"] line */
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div.separate:not(:first-of-type) {
				margin-top: 15px;
			}

			/* form line for textarea */
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div.textarea > label {
				height: 147px !import4ant;
			}

			/* labels */
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div > label {
				margin-left: 10px;
				font-size: 13px;
			}

			/* general input prompt labels */
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div > label:not(.no-default-style) {
				position: relative;
				width: 250px;
				height: 15px;
				padding: 7px 10px 9px 0px;
				display: inline-block;
				text-align: right;
				vertical-align: top;

				font-family: 'Roboto Mono';
				font-size: 15px;
				font-weight: normal;
				color: rgba(0,0,0,.75);
				text-transform: uppercase;

				background: rgb(7,207,226);
			}

				/* label for spacing only */
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div > label.spacer {
					background: none;
				}

				/* psuedo separation using background */
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div:not(:last-of-type) > label:not(.spacer):not(.no-default-style) {
					background: -moz-linear-gradient(top, rgb(7,207,226) 0px, rgb(7,207,226) calc(100% - 1px), white calc(100% - 1px), white);
				}
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div:not(:last-of-type) > label:not(.spacer):not(.no-default-style).special {
					background: -moz-linear-gradient(top, rgb(226,100,7) 0px, rgb(226,100,7) calc(100% - 1px), white calc(100% - 1px), white);
					color: white;
				}

				/* label for check or radio group */
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div > label.check:not(.no-default-style) {
					width: 251px;
				}

			/* text inputs */
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section input:not([type="checkbox"]):not([type="radio"]),
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section select,
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section textarea {
				position: relative;
				width: calc( 100% - 295px );
				padding: 5px;

				font-family: 'Roboto Mono';
				font-size: 15px;
				color: black;
				background-color: rgba(255,255,255,.5);

				border: 0px;
				border-left: 1px solid rgba(0,0,0,.25);
				border-bottom: 1px solid rgba(0,0,0,.25);

				resize: vertical;
			}

				/* inputs: medium width */
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section input.width-medium:not([type="checkbox"]):not([type="radio"]),
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section textarea.width-medium {
					width: 400px;
				}
					body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section select.width-medium {
						width: 410px !important;
					}

				/* inputs: small width */
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section input.width-small:not([type="checkbox"]):not([type="radio"]),
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section textarea.width-small {
					width: 150px;
				}
					body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section select.width-small {
						width: 160px;
					}
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section input.number {
					text-align: right;
					padding-right: 5px;
				}

				/* datepickers */
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section input.datepicker:not(.picker-no-default),
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section input.datetimepicker:not(.picker-no-default),
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section input.timepicker:not(.picker-no-default) {
					min-width: 200px;
				}

				/* inputs when focused */
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section input:not([type="checkbox"]):not([type="radio"]):not([readonly]):focus,
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section select:not([readonly]):focus,
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section textarea:not([readonly]):focus {
					border-left: 1px solid black;
					border-bottom: 1px solid black;
					background-color: rgba(0,0,50,0.065);
				}
				
				/* inputs when disabled */
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section :is(input,select):is(:disabled,[disabled],[readonly]) {
					color: rgba(0,0,0,.5) !important;
					background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAFUlEQVQImWNgQAOrzpz5T3UBBgYGAFQ/EEbxg55OAAAAAElFTkSuQmCC) !important;
				}

				/* because <select>'s are goofy */
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div > select {
					width: calc( 100% - 290px );
				}

				/* textareas */
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div > textarea {
					height: 150px;
				}

				/* checks/radios directly inside field/input container */
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div > input[type="checkbox"],
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div > input[type="radio"]:first-of-type {
					display: inline-block;
					margin: 9px 10px 0px 10px;
				}
				
				/* read-only data container */
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div > data {
					display: inline-block;
					padding: 7px;
					margin-left: 10px;
					
					font-family: 'Roboto Mono';
					font-size: 15px;
					color: black;
				}

				/* check group inside field/input container */
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div > .checks-container {
					display: inline-block;
				}
					/* checks container label */
					body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div > .checks-container > label {
						display: block;
						padding: 9px 0px 0px 5px;

						font-family: 'Roboto Mono';
						font-size: 15px;
						color: black;
						background: transparent;
					}

					/* last label inside checks */
					body#ViewWra-pper-Timesheets form[id^="CRUDForm"] > section > div > .checks-container > label:last-of-type {
						margin-bottom: 25px;
					}
					
					/* note in place of input */
					body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div > div.note-no-input {
						display: inline-block;
						padding: 7px;
						
						font-size: 14px;
						font-style: italic;
						color: rgba(0,0,0,.75);
					}

			/* input tip (font-awesome icon) */
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section .fa.input-tip {
				margin: 5px 0px 0px 15px;
				vertical-align: top;
				font-size: 22px;
				color: rgba(0,128,200,.75);
			}
				/* hover on input tip */
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section .fa.input-tip:hover {
					color: rgba(0,128,200,1);
					cursor: help;
				}

				/* position adjustment for input tip in header */
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > h2 > .fa.input-tip {
					margin-top: -3px;
				}

			/* field note*/
			body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div > .note {
				display: block;
				width: calc( 100% - 315px );
				padding: 0px 0px 10px 265px;

				font-size: 12px;
				color: rgba(0,0,0,.75);
			}
				/* field note icon */
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div > .note > .fa {
					margin-top: 5px;
					margin-right: 5px;
					vertical-align: sub;
					font-size: 18px;

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

				/* jam to the left */
				body#ViewWrapper-Timesheets form[id^="CRUDForm"] > section > div > .note.left {
					padding-left: 5px;
				}