/**
 * CSS for timesheet reports
 */

/* main report selection filters container */
main > div#CRUD-controls.reports {

}

	/* main report selection filter buttons (labels) */
	main > div#CRUD-controls.reports > #filters label {

	}

		/* main report selection filter buttons (labels) */
		main > div#CRUD-controls.reports > #filters input ~ label {
			padding: 5px 10px 5px 10px !important;
		}

			/* main report selection filter buttons (labels) when not selected */
			main > div#CRUD-controls.reports > #filters input:not(:checked) ~ label {
				opacity: .75 !important;
				color: black;
			}
				/* label icon */
				main > div#CRUD-controls.reports > #filters input ~ label > .fa {
					margin-right: 10px;
				}

				/* label icon when not selected */
				main > div#CRUD-controls.reports > #filters input:not(:checked) ~ label > .fa {
					opacity: .25;
				}

	/* NotesUI icon when notes empty */
	main > div#CRUD-controls.reports .filter-group > input[type="hidden"][name="ReportModeViewNotes"][value=""] ~ button.NotesUI > .fa:before {
		/* fa-sticky-note-o */
		content: "\f24a";
	}
	/* NotesUI icon when notes entered */
	main > div#CRUD-controls.reports .filter-group > input[type="hidden"][name="ReportModeViewNotes"]:not([value=""]) ~ button.NotesUI > .fa:before {
		/* fa-sticky-note */
		content: "\f249";
	}

/* reports filter form */
main > form#report-filters {
	padding: 0px;
	position: fixed;
	z-index: 1;
	top: 72px;
	margin-top: 0px;
	width: calc( 100% - 175px );
	height: calc( 100% - 132px );

	font-size: 0px; /* collapse spacing */
	vertical-align: top;
	text-align: center;

	background: rgb(235,235,245);
	transition: top 0.2s ease 0s, width 0.25s ease 0s;
}

	/* with header collapsed */
	body#ViewWrapper-Timesheets.header-collapsed > main > form#report-filters {
		width: calc( 100% - 45px );
	}

	/* form when collapsed */
	main > form#report-filters.collapsed {
		top: calc( -100% + 224px )
	}

	/* reports filter section */
	main > form#report-filters > section {
		display: inline-block;
		position: relative;
		width: calc( 33.3% - 42px );
		height: calc( 100% - 98px );
		vertical-align: top;
		padding-bottom: 20px;
		background: transparent;
	}
		/* section when hidden */
		main > form#report-filters > section.hide {
			display: none;
		}

		/* last filter section (fill gap) */
		main > form#report-filters > section:last-of-type {
			width: calc( 33.4% - 42px );
			border-right: none;
		}

		/* section headers */
		main > form#report-filters > section > h3 {
			display: block;
			width: auto;
			padding: 10px;
			text-align: center;

			font-family: Open Sans, Calibri, Arial;
			font-size: 14px;
			font-weight: bold;
			color: black;

			background: rgb(7,207,226);
		}
			/* section header icon */
			main > form#report-filters > section > h3 > .fa {
				width: 35px;
				vertical-align: text-bottom;
				text-align: center;
				font-size: 19px;
				color: rgba(0,0,0,.75);
			}

		/* section filters container */
		main > form#report-filters > section > div.filters-container {
			position: relative;
			height: calc( 100% - 150px );
			width: 90%;
			margin: auto;
			text-align: left;
		}

			/* scroll container */
			main > form#report-filters > section > div.filters-container > div.scroll {
				position: relative;
				overflow-x: hidden;
				overflow-y: auto;
			}

				/* scroll container for cost classes */
				main > form#report-filters > section#CostClasses > div.filters-container > div.scroll {
					height: calc( 100% - 50px );
				}
				/* scroll container for staff selection */
				main > form#report-filters > section[id*="Staff"] > div.filters-container > div.scroll {
					height: calc( 100% - 135px );
				}

					/* employee numbers */
					main > form#report-filters > section[id*="Staff"] > div.filters-container > div > label > data.EmployeeNumber {
						display: inline-block;
						width: 50px;
						text-align: right;
						padding: 1px 3px 1px 1px;
						margin-right: 0px;

						color: rgba(0,0,0,.5);
						background: rgba(0,0,0,.1);
						border: 1px solid rgba(0,0,0,.1);
					}

				/* separator inside scroll container */
				main > form#report-filters > section > div.filters-container hr {
					width: 90%;
					margin: 10px auto 10px auto;
					color: rgba(0,0,0,.25);
					margin-inline-start: 0;
				}

			/* section subheader */
			main > form#report-filters > section > div.filters-container > h4 {
				display: block;
				width: auto;
				margin-top: 20px;
				padding: 10px;
				text-align: center;

				font-family: Open Sans, Calibri, Arial;
				font-size: 14px;
				font-weight: normal;
				color: rgba(0,0,0,.75);

				background: rgba(7,207,226,.5);
			}

			/* checkbox-list sections */
			main > form#report-filters > section.checkbox-list {

			}

				/* fieldset for group control elements */
				main > form#report-filters > section.checkbox-list fieldset {
					display: block;
					border: 1px solid rgba(0,0,0,.25);
					margin: 10px 0px 10px 0px;
					padding: 10px;
				}

					/* checkbox labels inside fieldset */
					main > form#report-filters > section.checkbox-list fieldset legend > label {
						font-weight: bold !important;
					}

					/* checkbox labels inside fieldset */
					main > form#report-filters > section.checkbox-list fieldset label {
						font-weight: normal !important;
					}

				/* checi list filter text input */
				main > form#report-filters > section.checkbox-list input[type="text"][name="filter"] {
					display: block;
					position: relative;
					padding: 5px;
					width: calc( 100% - 12px );
					margin: 20px auto 10px auto;
					border: 1px solid rgba(0,0,0,.35);
				}

				/* checkbox labels */
				main > form#report-filters > section.checkbox-list label {
					display: block;
					padding: 2px !important;
					/* min-width: calc( 50% - 45px );
					margin-right: 35px; */
					white-space: nowrap;
					height: auto;

					font-family: Roboto Mono, Courier New;
					text-align: left;
					font-size: 14px;
					color: rgba(0,0,0,.75);
					line-height: 1;
					text-transform: none;

					background: transparent;
				}

					/* auth hilited label (authed) */
					main > form#report-filters > section.checkbox-list label.auth-hilite.authed {
						font-weight: bold;
						color: rgb(7,100,150);
					}

					/* auth hilited label (not authed) */
					main > form#report-filters > section.checkbox-list label.auth-hilite:not(.authed) {
						color: rgba(100,0,0,.65);
					}

					/* labels for "all" type checkboxes */
					main > form#report-filters > section.checkbox-list label.control {
						display: block;
						width: auto;
						font-weight: bold;
					}

					/* label hidden by search filter */
					main > form#report-filters > section.checkbox-list label.hide {
						display: none;
					}

		/* date section */
		main > form#report-filters > section.dates {

		}

			/* predefined options */
			main > form#report-filters > section.dates .predefined {
				margin-bottom: 20px;
			}

				/* predefined <select> */
				main > form#report-filters > section.dates .predefined > select {
					position: relative;
					display: block;
					width: calc( 100% );
				}

			/* date fields label */
			main > form#report-filters > section.dates > .filters-container > label {
				position: relative;
				display: inline-block;
				width: auto;
				height: auto;
				padding: 5px;
				margin-right: 25px;
				text-align: left;
				vertical-align: top;

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

				background: transparent;
			}

				/* datepicker input */
				main > form#report-filters > section.dates > .filters-container > label > input.datepicker {
					width: 100px;
				}

			/* independent checkbox in any group type */
			main > form#report-filters > section > .filters-container > label.check {
				display: block;
				margin-top: 10px;
				text-transform: none;
				width: auto;
			}

			/* subheaders inside filter group */
			main > form#report-filters > section > .filters-container h6 {
				margin: 10px 0px 10px 0px;
				/* padding-bottom: 5px; */
				font-family: Roboto Mono, Courier New;
				font-size: 14px;
				font-weight: bold;
				/* border-bottom: 1px solid rgba(0,0,0,.25); */
			}

	/* toggle button */
	main > form#report-filters > button#toggle {
		display: block;
		border: 0px;
		vertical-align: top;
		width: 100%;
		height: 20px;

		text-align: center;
		background: rgb(0,155,170);

		transition: margin 0.05s linear 0s, height 0.05s linear 0s;
	}

		/* hover button */
		main > form#report-filters > button#toggle:hover {
			background: rgb(0,176,193);
			cursor: pointer;
		}

		/* icon */
		main > form#report-filters > button#toggle::before {
			font-family: 'FontAwesome';
			font-style: normal;
			font-size: 55px;
			color: white;
			vertical-align: top;
			display: inline-block;
			height: 50px;
		}

		/* icon with form expanded */
		main > form#report-filters:not(.collapsed) > button#toggle::before {
			/* caret-up */
			content: "\f0d8";
			margin-top: -23px;
		}
			/* adjustment for Chrome */
			body.is-browser-chrome > main > form#report-filters:not(.collapsed) > button#toggle::before {
				margin-top: -18px;
			}

		/* icon with form collapsed */
		main > form#report-filters.collapsed > button#toggle::before {
			/* fa-caret-down */
			content: "\f0d7";
			margin-top: -28px;
		}
			/* adjustment for Chrome */
			body.is-browser-chrome > main > form#report-filters.collapsed > button#toggle::before {
				margin-top: -23px;
			}


/* results container */
body#ViewWrapper-Timesheets > main > div.report-view {
	font-size: 0px; /* collapse spacing */
	padding: 15px;
	margin-top: 175px;
	margin-bottom: 50px;
}

	/* criteria summary */
	main > div.container.report-view > div#criteria-summary {
		display: block;
		position: fixed;
		z-index: 0;
		top: 92px;
		left: 175px;
		width: calc( 100% - 175px );

		border-top: 1px solid white;
		background: rgb(235,235,245);
		transition: all 0.25s ease 0s;
	}

	/* summary when header collapsed */
	body#ViewWrapper-Timesheets.header-collapsed > main > div.container.report-view > div#criteria-summary {
		left: 45px;
		width: calc( 100% - 45px );
	}

		/* table view options (show in summary element) */
		main > div.container.report-view > div#criteria-summary > div.report-view-options {
			float: right;
			margin-left: 15px;
		}
			/* icon in view mode button */
			main > div.container.report-view > div#criteria-summary > div.report-view-options > button > .fa {
				margin-left: 5px;
			}
			/* select menu in report view option wrapper */
			main > div.container.report-view > div#criteria-summary > div.report-view-options > select,
			main > div.container.report-view > div#criteria-summary > div.report-view-options > select > option,
			main > div.container.report-view > div#criteria-summary > div.report-view-options > select > optgroup > option {
				padding: 6px !important;

				font-family: Open Sans, Calibri, Arial;
				color: white;
				font-size: 13px;
				line-height: 1;
				text-shadow: 1px 1px 0px black;

				background: #034d8b !important;
			}

		/* summary blocks */
		main > div.container.report-view > div#criteria-summary > div {
			white-space: nowrap;
			padding: 5px;
			position: relative;
			width: auto;

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

			overflow: hidden;
			text-overflow: ellipsis;
		}

		/* summary block icons */
		main > div.container.report-view > div#criteria-summary > div > .fa {
			font-size: 15px;
			width: 35px;
			text-align: center;
			color: rgba(0,0,0,.5);
		}

			/* summary line note */
			main > div.container.report-view > div#criteria-summary > div > span.note {
				display: inline-block;
				margin-left: 15px;
				color: rgba(0,0,0,.5);
				font-style: italic;
			}

	/* results table */
	main > div.container.report-view > table {
		margin-top: 25px;
		width: 100%;
	}

		main > div.container.report-view > table:not(:first-of-type) {
			page-break-before: always;
		}

		/* visually separated table */
		main > div.container.report-view > table.separate:not(:first-of-type) {
			margin-top: 25px;
		}

		/* all cells */
		main > div.container.report-view > table tr > * {
			font-family: Roboto Mono, Courier New !important;
			padding: 8px 5px 8px 0px;

			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;

			border: 1px solid rgba(0,0,0,.2);
		}

			/* field header */
			main > div.container.report-view > table tr.field-headers > * {
				font-weight: bold;
				background-color: rgba(200,200,255,.35) !important;
			}
				/* sort headers */
				main > div.container.report-view > table tr.field-headers > *[sort]:hover {
					cursor: pointer;
					background-color: rgba(150,150,255,.35) !important;
				}
				/* sort headers */
				main > div.container.report-view > table tr.field-headers > *[sort]:active {
					background-color: rgba(100,100,255,.45) !important;
				}

				/* sort icons */
				main > div.container.report-view > table tr.field-headers > *[direction="asc"]::after {
					/* caret-up */
					font-family: 'FontAwesome';
					content: "\f0d8";
					margin-left: 10px;
					font-size: 10px;
					color: rgba(0,0,0,.5);
					vertical-align: top;
				}

				/* sort icons */
				main > div.container.report-view > table tr.field-headers > *[direction="desc"]::after {
					/* fa-caret-down */
					font-family: 'FontAwesome';
					content: "\f0d7";
					margin-left: 10px;
					font-size: 10px;
					color: rgba(0,0,0,.5);
					vertical-align: top;
				}

			/* note in header cell */
			main > div.container.report-view > table tr > th > span.note {
				display: inline-block;
				margin-left: 25px;

				font-family: Open Sans;
				font-size: 13px;
				color: rgba(125,125,125);
				font-weight: normal;
				font-style: italic;
			}
				main > div.container.report-view > table tr > th > span.note.hard-left {
					margin-left: 0px;
				}

		/* subheaders inside th cells */
		main > div.container.report-view > table tr > th > h6 {
			display: block;
			margin-top: 5px;

			font-size: 12px;
			font-weight: normal;
		}

		/* dim01 header cells */
		main > div.container.report-view > table tr.dim01 > th {
			text-align: left;

			/* font-size: 13px; */
			font-size: 18px;
			font-weight: bold;

			background-color: rgba(0,0,50,.25);
		}

			main > div.container.report-view > table tr.dim01.small > th {
				background-color: rgba(0,0,50,.15);
				font-size: 13px;
			}

			/* first dim01 cell in row */
			main > div.container.report-view > table tr.dim01 > *:first-child {
				padding-left: 5px;
			}

			/* visually separated header row */
			main > div.container.report-view > table tr.dim01.separate:not(:first-of-type) {
				border-top: 25px solid white;
			}

		/* dimension 02 cells */
		main > div.container.report-view > table tr.dim02 > th {
			padding-left: 10px;
			text-align: left;

			font-size: 13px;
			font-weight: bold;
			color: black;

			background-color: rgba(0,0,50,.05);
		}

			/* label row */
			main > div.container.report-view > table tr.dim02:not(.field-headers) > th {
				font-size: 16px;
				color: rgba(0,0,0,.75);
			}

			/* first dim-02 cell */
			main > div.container.report-view > table tr.dim02:not(.flat) > *:first-child {
				padding-left: 20px;
			}

			/* dim02 cells for flat layout */
			main > div.container.report-view > table tr.dim02.flat > * {
				padding-left: 10px;
				padding-right: 10px;
			}

			/* dim02 total */
			main > div.container.report-view > table tr.dim02.totals > th {
				margin: 10px;
				font-size: 18px;
			}

		/* all cells */
		main > div.container.report-view > table tr > * {
			font-size: 12px;
			font-weight: normal;
			color: black;
		}
			main > div.container.report-view > table tr > *.fade {
				color: rgb(175,175,175);
			}

			/* cell for notes */
			main > div.container.report-view > table tr > *.Notes {
				text-align: left;
				color: rgba(0,0,0,.75);
			}
				main > div.container.report-view > table tr > *.Notes > p {
					white-space: normal;
					line-height: 1.5;
				}

			/* faded cell contents */
			main > div.container.report-view > table tr > *.fade {
				color: rgba(0,0,0.35);
			}

			/* cell indicating approved */
			main > div.container.report-view > table tr > *.approved,
			main > div.container.report-view > table tr:hover > td.approved {
				background-color: yellow !important;
			}

			/* cell indicating approved */
			main > div.container.report-view > table tr > *.denied,
			main > div.container.report-view > table tr:hover > td.denied {
				background-color: red !important;
				color: white;
			}

			/* faded cells (lower priority data) */
			main > div.container.report-view > table tr > *.fade {
				color: rgba(0,0,0,.35);
			}

			/* timesheet icon in cell */
			main > div.container.report-view > table tr > * > .fa {
				/* position: absolute; */
				margin: -10px 10px -7px 10px;
			}

			/* dim03 cell */
			main > div.container.report-view > table tr.dim03 > :is(td,th) {
				padding-left: 10px;
				padding-right: 10px;
			}
				main > div.container.report-view > table tr.dim03 > th {
					font-weight: bold;
				}

				/* first dim03 cell */
				main > div.container.report-view > table tr.dim03:not(.flat) > td:first-child {
					padding-left: 35px;
				}

			/* hover on dim-03 row */
			main > div.container.report-view > table tr.dim03:hover > td {
				background-color: rgb(225,225,235);
			}

			/* warning color dim-03 */
			main > div.container.report-view > table tr > .color-warn {
				color: rgb(255,128,0) !important;
				font-weight: bold;
			}

			/* warning color dim-03 */
			main > div.container.report-view > table tr > .color-warn-more {
				color: rgb(255,0,0) !important;
				font-weight: bold;
			}

			/* positive color dim-03 */
			main > div.container.report-view > table tr > .color-positive {
				color: rgb(0,128,255) !important;
				font-weight: bold;
			}

			/* positive color dim-03 */
			main > div.container.report-view > table tr > .color-neutral {
				color: rgb(128,128,128) !important;
				font-weight: bold;
			}

			/* warning hilite dim-03 */
			main > div.container.report-view > table tr > .hilite-warn {
				background-color: rgba(255,128,0,.5) !important;
			}

			/* warning hilite dim-03 */
			main > div.container.report-view > table tr > .hilite-warn-more {
				background-color: rgba(255,128,0,.75) !important;
			}

			/* positive hilite dim-03 */
			main > div.container.report-view > table tr > .hilite-positive {
				background-color: rgba(0,128,255,.35) !important;
			}

		/* dimension 03 total cells */
		main > div.container.report-view > table tr.dim03.total > td {
			font-weight: bold;
			/* font-size: 15px;
			/* color: rgba(75,75,75); */
			/* border-top: 1px solid rgb(150,150,150);
			border-bottom: 1px solid rgb(150,150,150); */
		}

		/* tables with centered headers */
		main > div.container.report-view > table.headers-centered tr > th:not(:first-of-type):not([width="auto"]) {
			text-align: center;
		}



	/* employee number in any cell */
	main > div.container.report-view > table tr data.EmployeeNumber {
		display: inline-block;

		text-align: center;
		color: black;
		font-weight: normal;

		border: 1px solid rgba(0,0,50,.35);
		box-shadow: 2px 2px 0px rgba(0,0,0,.05);
	}

	/* employee number in dim01 header cell */
	main > div.container.report-view > table tr.dim01 > th > data.EmployeeNumber {
		margin: 0px 0px 0px 5px;
		padding: 5px;
		width: 100px;

		font-size: 15px;
		background: rgba(255, 255, 255, .5);
	}

	/* employee number in dim03 cell */
	/* main > div.container.report-view > table tr.dim03 > td > data.EmployeeNumber {
		margin: 0px 5px 0px 5px;
		width: 35px;
		padding: 3px;

		font-size: 12px;
		background: rgba(0, 0, 0, .15);
	} */


	/* report-specific cell styling */

	/* overtime table */
	main > div.container.report-view.Overtime > table {
		/* width: 500px !important; */
	}

	/* WorkHistory container */
	main > div.container.report-view.WorkHistory {
		/* column-count: 2; */
	}

		/* WorkHistory table */
		main > div.container.report-view.WorkHistory > table {
			/* width: 600px !important; */
			/* margin: auto;
			break-inside: avoid; */
		}

	/* Budget table */
	main > div.container.report-view.Budget > table {
		/* width: 800px; */
	}
		main > div.container.report-view.Budget > table .number-label {
			width: 125px;
			text-align: right;
		}
		main > div.container.report-view.Budget > table .number {
			width: 75px;
		}

	/* Vacancy table */
	main > div.container.report-view.Vacancy > table {
		/* width: 600px; */
	}

	/* Workzones table dim-03 cells */
	main > div.container.report-view.Workzones > table tr.dim03 > td:not(:first-of-type) {
		padding: 0px 5px 0px 5px;
	}

	/* BankedTime table */
	main > div.container.report-view.BankedTime > table {
		/* width: 800px; */
	}

		/* BankedTime table dim-03 Banked action cells */
		main > div.container.report-view.BankedTime > table tr.dim03 > td.Banked {
			width: 75px;
		}

	/* SIL table */
	main > div.container.report-view.SIL > table {
		/* width: 800px; */
	}


	/* field-specific cell styling */

	/* staff names */
	main > div.container.report-view > table tr > .Staff {
		width: 200px;
	}

	/* numbers */
	main > div.container.report-view > table tr > .number {
		text-align: right !important;
	}

	/* display icons */
	main > div.container.report-view > table tr > .td.control-icons {

	}
		/* display icons */
		main > div.container.report-view > table tr > *.control-icons > .fa.stateful:not(.state-true) {
			opacity: 0.5;
		}

		main > div.container.report-view > table tr > td.control-icons > .fa.fa-external-link {
			vertical-align: bottom !important;
			margin-bottom: -4px !important;
		}

	/* time range */
	main > div.container.report-view > table tr > .time-range {
		width: 125px;
		text-align: center;
	}

	/* time bars */
	main > div.container.report-view > table tr > .time-bar {
		font-size: 0px !important; /* collapse spacing */
	}

		/* blocks in time bar */
		main > div.container.report-view > table tr > .time-bar > .block {
			display: inline-block;
			width: 25px;
			padding: 8px 3px 8px 3px;

			text-align: center;
			font-size: 12px;

			background-color: rgb(235,235,235);
		}
			/* blocks when in time range */
			main > div.container.report-view > table tr > .time-bar > .block.in-range {
				display: inline-block;
				background-color: rgb(150,150,150);
				color: white;
				cursor: default;
			}

				/* dynamic adjacent hilighting */
				main > div.container.report-view > table tr > .time-bar > .block.in-range.hilite-adjacent {
					background-color: rgb(50,100,100);
				}

	/* notes */
	main > div.container.report-view > table tr > .Notes {
		width: 100%;
		text-align: center;
	}