/** SYSTEM UI **/

/* main loading spinner container in noshell mode */
body.noshell #Timesheets-loadingSpinnerMain {
	font-size: 25px;
	margin: 0px;
	width: 35px !important;
	height: 32px !important;
	padding: 7px 0px 0px 2px !important;
}

/* info or action button */
#CRUD-controls button.info,
#CRUD-controls button.action,
table.CRUD button.action {
	display: inline-block;
	margin: 0px 2px 0px 2px !important;
	padding: 4px 9px 4px 10px !important;
	background-color: rgba(255,255,255,.85) !important;
	border: 1px solid rgba(0,0,100,.75) !important;
}

	#CRUD-controls button.info.no-space,
	#CRUD-controls button.action.no-space,
	table.CRUD button.action.no-space {
		margin-left: 0px !important;
		margin-right: 0px !important;
	}

	/* hover on action button */
	#CRUD-controls button.action:hover,
	table.CRUD button.action:hover {
		cursor: pointer;
		background-color: rgba(255,255,255,1) !important;
	}
	/* click on action button */
	#CRUD-controls button.action:active,
	table.CRUD button.action:active {
		background-color: rgba(255,255,255,.5) !important;
	}

	/* message row */
	table.CRUD tr.message > :is(td,th) {
		font-size: 13px !important;
		padding: 10px !important;
		text-align: center;
	}


/* Timesheet Notes dialog */
#TimesheetsApp-dialog-NotesUI {

}

	#TimesheetsApp-dialog-NotesUI > form {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 0px !important;
		margin: 0px !important;
	}

		#TimesheetsApp-dialog-NotesUI > form > textarea {
			position: relative;
			width: 100%;
			padding: 10px;
			width: calc( 100% - 20px );
			height: calc( 100% - 20px );

			font-family: Roboto Mono, Courier New;
			font-size: 14px;
		}

/* loading spinner for templated dialog */
:is(.PDCFW3-dialog,.PDCFW3-dialogTemplated,.TimesheetsApp-dialogSidebar).loading {
	overflow: hidden !important;
}
	:is(.PDCFW3-dialog,.PDCFW3-dialogTemplated,.TimesheetsApp-dialogSidebar).loading .fa.fa-spin {
		display: block;
		margin-top: 15px;
		width: 100%;
		text-align: center;
		font-size: 50px;
		color: rgba(0,0,0,.35);
		overflow: hidden;
	}

/** LIBS **/

/* tippy container elements */
[id^="tippy"], [id^="tippy"] *, .tippy-content {
	font-family: Open Sans, Calibri, Arial !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	z-index: 201 !important;
	text-align: left;
}

	/* reset font-awesome elements */
	[id^="tippy"] .fa, [id^="tippy"] *.fa, .tippy-content .fa {
		font-family: 'FontAwesome' !important;
		width: 15px;
		text-align: center;
	}

		/* fa icon inline with text */
		[id^="tippy"] .fa.inline, [id^="tippy"] *.fa.inline, .tippy-content .fa.inline {
			margin: 0px 3px 0px 3px;
		}

	/* paragraphs directly inside tippy container */
	.tippy-content > p {
		margin: 7px 0px 7px 0px;
	}
		.tippy-content > p:last-child {
			margin-bottom: 0px;
		}
		.tippy-content > p:first-child {
			margin-top: 0px;
		}

	/* link inside interactive tippy */
	.tippy-content a {
		color: rgb(100,235,255);
		font-weight: bold;
		text-decoration: none;
		border-bottom: 1px dotted rgb(100,235,255);
		opacity: .8;
	}
		/* hover link inside interactive tippy */
		.tippy-content a:hover {
			color: rgb(100,235,255);
			font-weight: bold;
			text-decoration: none;
			border-bottom: 1px solid rgb(100,235,255);
			opacity: 1;
		}

	/* control icons inside tippy */
	.tippy-content .control-icons .fa {
		display: inline-block;
		width: 30px !important;
		height: 25px;
		text-align: center;

		font-family: 'FontAwesome' !important;
		color: white !important;
	}

	/* minor emphasis */
	.tippy-content em {
		display: inline-block;
		margin: auto 5px auto 5px;

		font-style: italic;
		font-weight: bold;
		color: rgba(255,255,255,.65);
		border-bottom: 1px dotted rgba(255,255,255,.5);
		text-shadow: 1px 1px 0px black;
	}

	/* tippy embedded HTML list */
	.tippy-content ul > li {
		list-style-type: disc;
		margin-left: 15px;
	}

	/* tippy embedded HTML example container */
	.tippy-content div.example {
		display: inline-block;
		margin-bottom: 10px;

		font-size: 12px;
		font-style: italic;
		border: 1px dashed rgba(255,255,255,.35);
		background-color: rgba(0,0,100,.25);
		border-radius: 2px;
	}
		.tippy-content div.example.block {
			display: block;
		}

		/* example header */
		.tippy-content div.example > h5 {
			display: block;
			padding: 5px 10px 3px 10px;

			background-color: black;
			border-bottom: 1px dashed rgba(255,255,255,.35);
		}

		/* example content */
		.tippy-content div.example > p {
			padding: 10px;
		}

		/* button */
		.tippy-content button {
			display: inline-block;
			padding: 5px 5px 2px 5px !important;
			margin-bottom: 2px !important;

			color: white !important;
			border: 1px solid rgba(255,255,255,.5) !important;
			background-color: rgba(200,235,255,.1) !important;
			cursor: pointer !important;
		}
			.tippy-content button:hover {
				border: 1px solid rgba(255,255,255,.75) !important;
				background-color: rgba(200,235,255,.15) !important;
			}


/* jquery: autocomplete */
.ui-autocomplete {
	z-index: 201;
	max-height: 35vh;
	min-width: 200px !important;
	overflow-y: auto;
}
	/* autocompletes for staff selection */
	.ui-autocomplete[class*="StaffID"] {
		width: 400px !important;
	}
	/* shift type and deviation selections */
	.ui-autocomplete:is([class*="ShiftTypeID"],[class*="Deviation"]):not([class*="StaffID"]) {
		width: 300px !important;
	}

	/* reset jquery ui hover styling */
	.ui-menu-item, .ui-menu-item:hover,
	.ui-menu-item-wrapper, .ui-menu-item-wrapper:hover {
		display: block !important;
		background: transparent !important;
		border: none !important;
		cursor: default !important;
		color: transparent !important;
		border: 0px !important;
		padding: 0px !important;
		margin: 0px !important;
		font-size: 13px !important;
	}

	/* autocomplete subwrapper */
	.autocomplete-line {
		display: block;
		padding: 5px;

		font-family: Roboto Mono, Courier New;
		font-size: 13px !important;
		color: black;
		cursor: default;
	}

		/* group header */
		.autocomplete-line.autocomplete-group-header,
		.autocomplete-line.autocomplete-group-header:hover {
			font-weight: bold;
			background: transparent;
		}

		/* group item */
		.autocomplete-line.autocomplete-group-line {

		}
			/* hover group item */
			.autocomplete-line.autocomplete-group-line:hover {
				color: white;
				background-color: rgb(4,90,163);
			}

			/* group line when lighter due to special status */
			.autocomplete-line.autocomplete-group-line.light {
				color: rgba(0,0,0,.75);
			}
				.autocomplete-line.autocomplete-group-line.light:hover {
					color: rgba(255,255,255,.75);
					background-color: rgba(4,90,163,.5);
				}

			/* status container */
			.autocomplete-line.autocomplete-group-line > span.status {
				float: right;
				font-style: italic;
				color: rgba(0,0,0,.75);
			}
				.autocomplete-line.autocomplete-group-line:hover > span.status {
					color: rgba(255,255,255,.75);
				}

	/* I have no idea why a set of these show at the bottom of autocomplete dropdowns */
	/* .ui-menu-divider.ui-widget-content {
		display: none;
		visibility: hidden;
		z-index: -9999;
	} */

/* menu container in tippy */
body#ViewWrapper-Timesheets .tippy-content > .tippy-menu {
	margin: 7px auto 7px auto !important;
	font-size: 0px !important; /* collapse spacing */
}

	/* input containers and buttons */
	body#ViewWrapper-Timesheets .tippy-content > .tippy-menu > span.input-container {
		font-size: 0px !important; /* collapse spacing */
	}

		/* buttons in block menu mode */
		body#ViewWrapper-Timesheets .tippy-content > .tippy-menu.block > button {
			display: block;
			positoin: relative;
			width: 100%;
			padding: 5px 25px 5px 5px !important;

			font-family: Open Sans;
		}
			/* icon in button */
			body#ViewWrapper-Timesheets .tippy-content > .tippy-menu.block > button > .fa {
				float: right;
				font-family: 'FontAwesome' !important;
				margin-left: 15px;
				text-align: center;
				width: 15px;
			}

		/* hide inputs */
		body#ViewWrapper-Timesheets .tippy-content > .tippy-menu > span.input-container > input {
			display: none;
		}

		/* labels and/or buttons */
		body#ViewWrapper-Timesheets .tippy-content > .tippy-menu > span.input-container > label,
		body#ViewWrapper-Timesheets .tippy-content > .tippy-menu.block > button {
			padding: 5px 10px 5px 10px !important;
			text-align: center !important;

			font-family: Roboto Mono, Courier New !important;
			font-size: 13px;
			color: black !important;

			opacity: .7 !important;
			text-align: center !important;
			text-shadow: none !important;
			background-color: rgba(200,235,255,.75) !important;
			word-spacing: -5px;
		}

			/* hover on labels */
			body#ViewWrapper-Timesheets .tippy-content > .tippy-menu > span.input-container > label:hover,
			body#ViewWrapper-Timesheets .tippy-content > .tippy-menu.block > button:hover {
				background-color: rgba(255,255,255,.85) !important;
			}

			/* checked labels */
			body#ViewWrapper-Timesheets .tippy-content > .tippy-menu > span.input-container > input:checked ~ label {
				color: black !important;
				opacity: 1 !important;
				background-color: rgb(50,50,50);
			}

/* icon with embedded icon (yo dawg) */
.fa.subicon-embed > .fa {
	position: absolute !important;
	margin: 3px 0px 0px -18px !important;
	font-size: 10px !important;
}

/* jquery: autocomplete */
ul.ui-autocomplete {
	z-index: 201;
	max-height: 35vh;
	overflow-y: auto;
}
	/* a/c item */
	ul.ui-autocomplete > li {
		font-family: 'Roboto Mono';
		font-size: 15px;
		padding: 7px 5px 7px 5px;
		color: black !important;
	}

	/* autocomplete item adjustments */
	.ui-menu .ui-menu-item-wrapper {
		color: black !important;
	}

	/* autocomplete item adjustments */
	.ui-menu .ui-menu-item-wrapper,
	.ui-menu .ui-menu-item-wrapper:hover {
		padding: 5px !important;
		margin: 0px;
		border: 0px;
	}
		.ui-menu .ui-menu-item:hover,
		.ui-menu .ui-menu-item .ui-menu-item-wrapper:hover {
			color: white !important;
			background: rgb(4,90,163) !important;
		}