/* Global Settings */

	.ddsi .main a:hover { color:#ff0000; background-color:transparent; text-decoration:none;} /* Used for Add buttons */
	.ddsi .main a:visited,a:link,a:active  { color:black; background-color:transparent; text-decoration:none;}  

	.hidden { display:none; }
	.transparent { opacity: 0.5; }
	.wide { margin:auto; width:68%; }
	.narrow { margin:auto; width:40%; }
	.fullwidth { width:98%; }
	.halfheight { height:50%; }
	.right {float:right; }
	.resize { resize:both; }
	.bold {font-weight:bold; }
	.hcenter { position:relative; margin-left: auto; margin-right: auto; }
	.vcenter { position:relative; margin-top:auto;margin-bottom:auto; }
	.scroll { overflow:auto; }
	.hiding:hover { opacity:0.8; }
	.hiding {opacity:0.1; -webkit-transition:opacity 0.5s linear;}
	.green { background-color:green; }
	
/* Main Body */

	body { background-color:transparent }
	
	body.ddsi { 
		position:fixed;
		background-color:#808080;
		left:0;right:0;bottom:0;top:0;
		padding:0;margin:0;
		background-color:white;
	}	
	
	/* Rotating Circle used to show user something is happening */
	
	.loading {
		background-image:url('../image/loading.gif');
		background-color:transparent;
		background-repeat:no-repeat;
		background-position:center center;
		position:fixed;
		top: 50%;
		left:50%;
		width:100px;
		height:100px;
		margin:auto;
		z-index:99999;
		pointer-events:none;
	}
	
	
	/*
	
		Small animated loader for DIVs
	
	*/
	
	.loadmap {
		background-image:url('../image/loading_small.gif');
		background-color:transparent;
		background-repeat:no-repeat;
		background-position:center center;
		width:16px;
		height:16px;
		margin:auto;
		z-index:99999;
		pointer-events:none;
		position:relative;
		top:3px;
		left:8px;
	}
	
	
	/*  Save text to show user the data had been successfully saved */
	
	.pgmessage {
		position:fixed;
		top:50%;
		left:50%;
		width:100px;
		height:100px;
		margin:auto;
		z-index:99999;
		font-family:'Lucida Grande', Verdana; font-size:2em;
		font-weight:bold;
		color:green;
		pointer-events:none;
	}
	
	/* Main Window */
	
	.main {
		position:absolute;
		top: 0;
		right:0;
		bottom:0;
		left:0;
		width:100%;
		margin:auto;
		font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em; 
		height:100%;
	}
	
	/* Title bar inside container */
	
	.header {
		position:relative;
		height:2em;
		line-height:2em;
		font-size:1.2em; 
		color:white;
		background-color:#424242;
		background-image: -webkit-gradient(
								linear,
								left bottom,
								left top,
								color-stop(0.36, rgb(35,38,34)),
								color-stop(0.64, rgb(99,99,99))
							);
		border-bottom:0px solid #eee;  
		font-family:arial;
		font-weight:bold;
		z-index:10;
		padding-left:1em;
		overflow:visible;
		width:100%;
	}
	
	/* Styling for content inside main container */
	
	.content { 
		position:absolute;
		color:#000;
		top:2em;
		left:0px;
		right:0px;
		bottom:0px;
		padding-left:15px;
		padding-right:15px;
		padding-bottom:15px;
		padding-top:2.5em;
		margin:0px;
		xmargin-top:15px;
		overflow-y:auto; 
		resize:none;
		z-index:0;
		xbackground-color:white;
	} 
	
	/* Toolbar */
	
	#submenu { position:relative;overflow:visible;z-index:9; }
	.toolbar {
		background-color:#a0a0a0;
		width:100%;
		height:2em;
		position:relative;
		display:inline-block;
		overflow:visible;
		vertical-align:middle;
		line-height:2em;
	}
	
	.toolbar .tb_title {
		margin:0px;
		padding:0px;
		border-top-left-radius:7px;
		border-bottom-left-radius:7px;
		float:left;
		width:1em;
		background-color:rgba(0,0,0,0.25);
		height:100%;
	}
	
	.toolbar .tbbutton {
		border-radius:3px;
		border:0px solid rgba(0,0,0,0.25);
		background-color:#626262;
		white-space:nowrap;
		margin-right:0.8em;
		margin-left:0.8em;
		color:white;
		position:relative;
		display:inline-block;
		float:left;
		overflow:visible;
		padding-right:0.5em;
		padding-left:0.5em;
		cursor:default;
		line-height:2em;
		font-weight:bold;
		-webkit-transition:background-color 0.25s linear;
	}
	.toolbar .tbbutton:hover {background:#6262e2;}
	
	.toolbar .tbicon {
		float:left;
		background-color:transparent;
		width:2em;
		height:2em;
		margin-right:0.5em;
		margin-left:0.5em;
		padding:0px;
		border:0px solid rgba(0,0,0,.25);
		xborder-radius:3px;
		cursor:pointer;
		x-webkit-transition:background-color 0.25s linear;
	}
	
	.toolbar .tbicon:hover {	background-color:#e0e0e0;}
	
	/* Tabs inside the content area */
	
	.content .tabs {	top:0px; border:0px; } 
	
	/* 	Menu bar container   */
	
	.menu { position:relative; font:1.0em arial; font-weight:bold; height:100%;z-index:99;padding-right:2em; padding-left:2em;line-height:inherit;overflow:visible;z-index:99;}
	
	/*  Menu header */
	
	.navmenu { 
		color:white;
		position:relative;
		display:inline-block;
		float:left;
		height:100%;
		overflow:visible;
		padding-right:0.5em;
		padding-left:0.5em;
		cursor:default;
		line-height:inherit;
	}
	.navmenu:hover {
		color:white;
		background-color:#626262; 
		xbackground-image: -webkit-gradient(
			linear,
			left bottom,
			left top,
			color-stop(0.36, rgb(35,38,34)),
			color-stop(0.64, rgb(99,99,99))
		);
	}
	
	.navmenu:hover div { 
		left:auto;
		right:0px;  /* Align dropdown's right edge to parent's right edge */
	}
	
	/*  Actual drop part of the menu */
	
	.dropmenu { 
		position:absolute;
		left:-9999px;  /* Hide the menu offscreen until hover */
		display:inline-block;
		background-color:#626262;
		xbackground-image: -webkit-gradient(
								linear,
								left top,
								left bottom,
								color-stop(0.36, rgb(35,38,34)),
								color-stop(0.64, rgb(99,99,99))
							);
		border-bottom-left-radius:4px;
		border-bottom-right-radius:4px;
		margin-left:0px;
		margin-top:2em;
		right:auto;
		line-height:inherit;
		padding-top:1px;
		padding-bottom:1px;
		padding-left:0.75em;
		padding-right:0.75em;
		text-align:left;
		white-space:nowrap;
		min-width:5em;
		box-shadow:2px 2px 2px #000; 
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-o-user-select: none;
		user-select: none;
		ms-user-select:none;
		cursor:default;
		z-index:99;
		
	}
	
	/*  Items inside the drop menu */
	
	.dropmenu div {
		line-height:inherit;
		padding-left:5px;
		padding-top:2px;
		padding-bottom:2px;
		padding-right:5px;
		cursor:pointer;
	}
	.dropmenu div:hover {
		background-color:#1C1C1C; 
		background-image: -webkit-gradient(
							linear,
							left bottom,
							left top,
							color-stop(0.42, rgb(133,133,133)),
							color-stop(0, rgb(0,0,0))
						);
		border-radius:4px;
	}
	
	div.dropmenu iframe { 
		pointer-events:none;
		position:absolute;
		display:inline-block;
		border-bottom-left-radius:4px;
		border-bottom-right-radius:4px;
		border-top-right-radius:4px;
		box-shadow:2px 2px 2px #000; 
		border:0px;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		z-index:99;
		
	}
	
	div iframe.xmap_iframe { 
		pointer-events:none;
		position:absolute;
		display:inline-block;
		border:0px;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		xborder-bottom-left-radius:10px;
		xborder-bottom-right-radius:10px;
		xborder-top-right-radius:10px;
		xborder-top-left-radius:10px;
		xbox-shadow:2px 2px 2px #000;
	}
	
	.navmenu img { width:16px;height:16px; padding-top:5px; }
	
	
	div.xui-dialog {outline-width:1px;outline-color:#fff;}
	.ui-dialog { background-color:#ffffff; }
	
	/* Form Entry */
	
	.subform { 
		xposition:relative;
		display:block;
		width:100%;
		min-height:15px;
		background: linear-gradient(to bottom, #4a4a4a 0%, #424242 100%);
		color:white;
		font-weight:bold;
		margin-bottom:10px;
		padding: 10px 15px 10px 35px;
		margin-top:10px;
		overflow:hidden;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0,0,0,0.2);
		cursor: pointer;
		transition: all 0.2s ease;
		position: relative;
	}
	
	/* Ensure subform containers maintain position during animation */
	/* Only target divs that contain a hidingfunc header (subform containers) */
	/* Do NOT target page containers - they have their own styling */
	div:has(> .hidingfunc) {
		width: 100% !important;
		box-sizing: border-box !important;
		max-width: 100% !important;
		min-width: 100% !important;
		display: block !important;
		position: relative !important;
		margin-top: 10px !important;
		margin-bottom: 10px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		vertical-align: top !important;
		/* Prevent layout shifts during animation */
		contain: layout style;
	}
	
	/* Ensure the hidingfunc header maintains its width for consistent right spacing */
	.hidingfunc.subform {
		width: 100% !important;
		box-sizing: border-box !important;
	}
	
	/* Fallback for browsers that don't support :has() */
	/* Use JavaScript to apply styles instead - see primary-jq.js */
	@supports not selector(:has(*)) {
		/* Styles applied via JavaScript for browsers without :has() support */
	}
	
	.subform::before {
		content: '';
		position: absolute;
		left: 12px;
		top: 50%;
		transform: translateY(-50%);
		width: 0;
		height: 0;
		border-left: 6px solid #ffffff;
		border-top: 5px solid transparent;
		border-bottom: 5px solid transparent;
		transition: transform 0.2s ease;
	}
	
	.subform.expanded::before {
		transform: translateY(-50%) rotate(90deg);
	}
	
	.subform:hover {
		background: linear-gradient(to bottom, #505050 0%, #484848 100%);
		box-shadow: 0 3px 6px rgba(0,0,0,0.3);
	}
	
	.border  { border:1px solid #808080;	border-radius:1.4em; margin-top:10px; min-height:4em; padding-bottom:5px; }
	
	.ddsi form { display:inline; position:relative; font-size:inherit; font-weight:bold;}
	.ddsi form input,form select,form textarea  {
		margin-top:2.1em;
		-webkit-appearance: none;
		-moz-appearance:none;
		appearance:none;
		color:black;
		background-color:white;
		outline:none;
		padding:2px 8px 2px 8px;
		border-radius:20px;
		border:1px solid gray;
		box-shadow:2px 2px 2px #606060;
		font-size:inherit;
	}
	.ddsi form textarea { border-top-right-radius:0px; border-bottom-right-radius:0px; }
	
	.ddsi form input[date] { width: 9em; }
	
	.ddsi form input[type=checkbox] {
		border:0px;
		width:16px;
		height:16px;
		margin-top:1.5em;
		
	}
	.ddsi form input[type=checkbox]:checked {
		border:0px;
		margin-top:1.5em;
		width:16px;
		height:16px;
		background: #30a030 url(../css/images/ui-icons_222222_256x240.png) no-repeat -64px -144px;  
	}
	.ddsi form input[type=submit],input[value=Cancel] { 
		background-color:#a0f0a0;
		font-weight:bold; 
		padding:4px 8px 4px 8px;
		-webkit-transition:background-color 0.25s linear;
		transition:background-color 0.25s linear;

	}
	
	.ddsi div.fileinput {
		width:20px;
		height:20px;
		background:transparent url(../css/images/ui-icons_222222_256x240.png) no-repeat 0px -96px;
		border-radius:10px;
		box-shadow:2px 2px 2px #606060;
		cursor:pointer;
	}
	.ddsi form input[type=submit]:hover,input[value=Cancel]:hover { background-color: #f0a0a0;  -webkit-transition:background-color 0.25s linear;transition:background-color 0.25s linear;}
	.ddsi form select { padding:2px 18px 2px 8px; background-color:white;}
	.ddsi form textarea { 
		clear:both;
		border-top-right-radius:8px; 
		border-bottom-right-radius:8px;
		border-top-left-radius:8px;
		border-bottom-left-radius:8px;
		font-family:inherit; 
		font-size:inherit	
	}
	.ddsi select::-ms-expand { display:none; }
	/* .ddsi div.main label.top { color:;white-space:nowrap;display:inline-block;position:relative;width:0px;margin:0;padding:0;right:-10px;top:0.6em; vertical-align:top;}
	.ddsi div.phone label.top { white-space:nowrap;display:inline-block;position:relative;width:0px;margin:0;padding:0;right:-10px;top:0.6em; vertical-align:top;} */
	label.top { white-space:nowrap;display:inline-block;position:relative;width:0px;margin:0;padding:0;right:-10px;top:0.6em; vertical-align:top;}
	/* proj_entry DMX: same label-to-control gap as .ddsi form input/select (margin-top: 2.1em) */
	.ddsi form label.top.dmx-proj-label,
	.ddsi form label.top.proj-loc-label {
		color: #000;
		position: relative;
		z-index: 1;
	}
	.ddsi form .dmx-vs-ele {
		display: inline-block !important;
		vertical-align: top !important;
		margin-top: 2.1em !important;
		margin-bottom: 0 !important;
		min-width: 14em;
		max-width: min(100%, 36em);
	}
	.ddsi form .proj-loc-vs.dmx-vs-ele {
		min-width: 11em;
		max-width: min(100%, 20em);
	}
	/* Gap between County and City virtual selects (same row) */
	.ddsi form label.top.proj-loc-label[for="proj-loc-city-vs"],
	.ddsi form #proj-loc-city-vs.proj-loc-vs {
		margin-left: 0.65em;
	}
	.ddsi form #dmx-project-vs.dmx-vs-ele,
	.ddsi form #proj-client-vs.dmx-vs-ele {
		min-width: 14em;
		max-width: min(100%, 36em);
	}
	.ddsi form .dmx-vs-ele .vscomp-ele-wrapper {
		margin-bottom: 0 !important;
		max-width: 100%;
	}
	/* Match native form inputs (rounded “pill”, shadow, border) */
	.ddsi form .dmx-vs-ele .vscomp-wrapper {
		font-family: inherit !important;
		font-size: inherit !important;
		max-width: 100%;
	}
	.ddsi form .dmx-vs-ele .vscomp-toggle-button {
		border-radius: 20px !important;
		border: 1px solid gray !important;
		box-shadow: 2px 2px 2px #606060 !important;
		padding: 2px 30px 2px 8px !important;
		min-height: calc(1em + 8px);
	}
	.ddsi form .dmx-project-proxy-msg {
		display: inline-block;
		vertical-align: top;
		margin-top: 2.1em;
		margin-left: 0.35em;
		max-width: 20em;
		font-size: 0.9em;
		color: #a04040;
	}
	.ddsi form .dmx-project-proxy-msg:empty {
		display: none;
	}
	.ddsi form label.left { width:110px; white-space:nowrap;display:inline-block;position:relative;top:-0.4em;left:5px;padding-right:5px; xvertical-align:16px;}
	.ddsi label.comments { white-space:nowrap;display:inline-block;position:relative;width:0px;margin:0;padding:0;right:-10px;top:0.6em; vertical-align:top;}
	.ddsi label.field { white-space:nowrap;display:inline-block;position:relative;width:0px;margin:0;padding:0;right:-10px;top:1.4em; vertical-align:top;}
	.ddsi form div.combobox { position:relative; display:inline-block; }
	.ddsi form *[readonly],*[disabled] { color: #505050; background-color: #d0d0d0; }
	
	#errlist { color:red; font-weight:bold; }
	#errlist .pto-err-banner-outer {
		list-style: none;
		margin: 8px 0;
		padding: 0;
	}
	.pto-err-banner {
		display: flex;
		align-items: flex-start;
		gap: 12px;
		flex-wrap: wrap;
		padding: 10px 12px;
		background: #fff5f5;
		border: 1px solid #e8b4b4;
		border-radius: 6px;
		color: #8b1a1a;
		font-weight: 600;
		max-width: 100%;
		box-sizing: border-box;
		line-height: 1.4;
	}
	.pto-err-banner__text {
		flex: 1 1 200px;
		min-width: 0;
	}
	.pto-err-banner__dismiss {
		flex: 0 0 auto;
		cursor: pointer;
		padding: 6px 14px;
		font: inherit;
		font-weight: 600;
		color: #333;
		background: #eee;
		border: 1px solid #bbb;
		border-radius: 4px;
	}
	.pto-err-banner__dismiss:hover {
		background: #e0e0e0;
	}
	.ddsi form fieldset { border-radius:4px;border:1px solid rgba(100,100,200,.5); display:inline-block;}
	.ddsi input::-webkit-input-placeholder { color:#BDBDBD; }
	.ddsi textarea::-webkit-input-placeholder { color:rgba(50,50,200,.5); }
	.ddsi option::-webkit-input-placeholder { color:rgba(50,50,200,.5); }
	.ddsi input:-moz-placeholder { color:rgba(50,50,200,.5); }
	.ddsi option.placeholder { color:rgba(50,50,200,.5); }
	.ddsi .errorClass { border:0.25em solid red; }
	.required { font-weight:bold;color: #FF0000;}
	
	.ddsi form input[type=checkbox][name=active] { margin-top:0px; }
	
	/*  Table styling   */
	
	.ddsi table { 
		border-spacing:0px 0px;
		font-size:inherit;
		
		border-width:0px;
		width:100%;
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-o-user-select: none;
		user-select: none;
		-ms-user-select:none;
	}
	.ddsi .ztbl thead tr {
		border-width:0px;
		width:100%;
		background-color:#A4A4A4;
		background-image: -webkit-gradient(
								linear,
								left bottom,
								left top,
								color-stop(0.42, rgb(168,168,168)),
								color-stop(0, rgb(255,255,255))
							);

		border-spacing:0px 0px;
		font-weight:bold;
		cursor:pointer;
		content: attr(title) "Click to sort.";
	}
	
	.export thead th {	border-width:0px; background-color:#a4a4a4;	border-spacing:0px 0px; font-weight:bold;	}
	.export table { border-spacing:0px 0px; font-size:1em; border-width:0px; width:100%; }
	
	.bbs1 {	font-size:0.8em;border-width:0px; background-color:#a4a4a4;	border-spacing:0px 0px; font-weight:bold;	}
	
	.ddsi .ztbl thead th { border-width:0px; font-size:inherit; font-family:inherit; }
	.ddsi .ztbl tbody td { border-width:0px; font-size:inherit; font-family:inherit; }
	.ddsi .ztbl tbody { overflow:auto; width:100% }
	.ddsi .ztbl tbody tr:hover { background-color:#E0E0F8; cursor:default; }
	.ddsi .ztbl thead { position:relative; height:95%; overflow:auto;}
	
	.titlehead {
		font-size:1.25em;
		vertical-align:middle;
		position:relative;
		text-align:center;
		line-height: 32px;
		height: 32px;
		font-weight:bold;
		padding-top:2px;
		padding-bottom:2px;
		width:100%;
		color:white;
		border-top-left-radius:1em;
		border-top-right-radius:1em;
		background-color:#848484;
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0.36, rgb(35,38,34)),color-stop(0.64, rgb(99,99,99)));

	}

	.timesheet-week-summary {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 8px 16px;
		margin-top: 6px;
		margin-bottom: 2px;
		padding: 8px 14px;
		font-size: 1.05em;
		font-weight: bold;
		color: #1a1a1a;
		border-radius: 0.85em;
		border: 1px solid rgba(0,0,0,0.14);
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
		background-color: #c5c5c5;
		background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgb(232,232,232)),color-stop(0.55, rgb(200,200,200)),color-stop(1, rgb(178,178,178)));
		letter-spacing: 0.02em;
	}
	.timesheet-week-summary-label {
		color: #333;
		opacity: 0.95;
		text-transform: uppercase;
		font-size: 0.72em;
		letter-spacing: 0.08em;
	}
	.timesheet-week-summary-value {
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
	}

	.titlehead-timesheet {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding-left: 8px;
		padding-right: 12px;
		box-sizing: border-box;
		min-height: 36px;
		height: auto;
		line-height: 1.2;
	}
	/* Keep original dark .titlehead look; only the week summary bar uses light gray. */
	.titlehead.titlehead-timesheet {
		height: auto;
		min-height: 36px;
		line-height: 1.25;
		padding-top: 4px;
		padding-bottom: 4px;
	}
	.titlehead-timesheet .titlehead-add {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
	}
	.titlehead-timesheet a.timesheet-header-add {
		display: inline-flex;
		align-items: center;
		flex-direction: row;
		gap: 6px;
		cursor: pointer;
		text-decoration: none;
		color: #f2f2f2;
		font-weight: bold;
		white-space: nowrap;
	}
	.titlehead-timesheet a.timesheet-header-add .timesheet-header-add-icon {
		display: block;
		width: 32px;
		height: 32px;
		flex-shrink: 0;
		background: transparent url(../css/images/ui-icons_2e83ff_256x240.png) no-repeat -32px -256px;
		background-size: 512px 480px;
	}
	.titlehead-timesheet a.timesheet-header-add .timesheet-header-add-text {
		font-size: 0.8em;
		line-height: 1;
	}
	.titlehead-timesheet .titlehead-title {
		flex: 1 1 auto;
		text-align: center;
		min-width: 0;
	}
	.titlehead-timesheet .titlehead-hours {
		flex: 0 0 auto;
		font-size: 0.82em;
		font-weight: bold;
		font-variant-numeric: tabular-nums;
		white-space: nowrap;
		opacity: 0.95;
	}
	
	
	/*
	
	
		Misc styles
	
	
	*/
	
	.text90 {
		-webkit-transform: rotate(-90deg); 
		-moz-transform: rotate(-90deg);	
		float:left;
		position:relative;
		display:inline-block;
	}
	
	
	/* Icon styling */
	
	div.save,div.cancel { 
		xheight:16px;
		display:inline-block;
		font-style:Arial;
		font-size:1em;
		text-transform:uppercase;
		padding-left:15px;
		padding-right:15px;
		border:1px solid rgba(0,0,0,0.25);
		cursor:pointer;
		xbackground-color:#a0c0a0;
		box-shadow:3px 3px 3px #606060;
		border-radius:6px;
		-webkit-transition:background-color 0.25s linear;
		transition:background-color 0.25s linear;
		vertical-align:middle;
		margin-top:2px;
		margin-bottom:2px;
		margin-left:0px;
		margin-right:10px;
	}
	div.save { font-weight:bold; background-color:#a0c0a0; }
	div.cancel { background-color:#c080a0; }
	div.save span { vertical-align:3px; padding-right:5px;}
	div.save:hover,div.cancel:hover { background-color: #f0a0a0;  -webkit-transition:background-color 0.25s linear; transition:background-color 0.25s linear; }
	
	div.btnsave,div.btncancel { 
		display:inline-block;
		font-style:Arial;
		font-size:1em;
		text-transform:uppercase;
		padding-left:15px;
		padding-right:15px;
		border:1px solid rgba(0,0,0,0.25);
		cursor:pointer;
		box-shadow:3px 3px 3px #606060;
		border-radius:6px;
		-webkit-transition:background-color 0.25s linear;
		transition:background-color 0.25s linear;
		vertical-align:middle;
		margin-top:2px;
		margin-bottom:2px;
		margin-left:0px;
		margin-right:10px;
	}
	div.btnsave { font-weight:bold; background-color:#a0c0a0; }
	div.btncancel { background-color:#c080a0; }
	div.btnsave span { vertical-align:3px; padding-right:5px;}
	div.btnsave:hover,div.btncancel:hover { background-color: #f0a0a0;  -webkit-transition:background-color 0.25s linear; transition:background-color 0.25s linear; }
	
	.timesheet-export {  
		float:right;
		background: #a0a0a0 url(../image/time-sheet-32x32.png) no-repeat center center;
		background-size:26px 26px;
		width:32px;
		height:32px;
		border:0px solid rgba(0,0,0,.1);
		border-radius:3px;
		cursor:pointer;
		vertical-align:50%;
		margin-right:0.8em;
	}
	
	.pdf {  
		float:right;
		background: #a0a0a0 url(../image/pdf.png) no-repeat center center;
		background-size:26px 26px;
		width:32px;
		height:32px;
		border:0px solid rgba(0,0,0,.1);
		border-radius:3px;
		cursor:pointer;
		vertical-align:50%;
		margin-right:0.8em;
	}
	
	.excel { 
		float:right;
		background: #a0a0a0 url(../image/excel.png) no-repeat center center;
		background-size:26px 26px;
		width:32px;
		height:32px;
		border:0px solid rgba(0,0,0,.1);
		border-radius:3px;
		cursor:pointer;
		vertical-align:50%;
		margin-right:0.8em;
	}
	.csv { 
		float:right;
		background: #a0a0a0 url(../image/csv.png) no-repeat center center;
		background-size:26px 26px;
		width:32px;
		height:32px;
		border:0px solid rgba(0,0,0,.1);
		border-radius:3px;
		cursor:pointer;
		vertical-align:50%;
		margin-right:0.8em;
	}
	.timesheet-export:hover,.pdf:hover,.excel:hover,.csv:hover { background-color: #f0a0a0;  -webkit-transition:background-color 0.25s linear;}
	
	.frmbutton {
		xheight:16px;
		display:inline-block;
		font-style:Arial;
		font-size:1em;
		text-transform:uppercase;
		padding-left:15px;
		padding-right:15px;
		border:1px solid rgba(0,0,0,0.25);
		cursor:pointer;
		background-color:#a0a0a0;
		box-shadow:3px 3px 3px #606060;
		border-radius:6px;
		-webkit-transition:background-color 0.25s linear;
		vertical-align:middle;
		margin-top:2px;
		margin-bottom:2px;
		margin-left:0px;
		margin-right:10px;
	}
	.frmbutton:hover { background-color: #606060; -webkit-transition: background-color 0.25s linear; }
	
	.icon {
		display:inline-block;
		width:16px; height:16px; /* size of sprite */
		cursor:pointer;
		margin-top:0.1em;
	}
	.icon.add { background: transparent url(../css/images/ui-icons_2e83ff_256x240.png) 
		no-repeat -32px -256px; height: 32px; width: 32px; background-size: 512px 480px; }
	.icon.add:after { content: "ADD"; padding-left:30px; font-size:0.8em;vertical-align:50%;}
	
	.icon.del {  background: transparent url(../css/images/ui-icons_cd0a0a_256x240.png) no-repeat -80px -128px;  }
	
	.icon.cal { background: transparent url(../css/images/ui-icons_2e83ff_256x240.png) no-repeat -112px -112px; position:relative; left:-25px; top:3px; pointer-events:none;}
	
	.triangle-right {
		width:0;height:0;
		margin-left:8px;
		margin-right:8px;
		border-top:5px solid transparent;
		border-bottom:5px solid transparent;
		border-left:5px solid black;
	}
	.triangle-left {
		width:0;height:0;
		margin-left:8px;
		margin-right:8px;
		border-top:5px solid transparent;
		border-bottom:5px solid transparent;
		border-right:5px solid black;
	}
	.triangle-up {
		width:0;height:0;
		margin-left:8px;
		margin-right:8px;
		border-left:5px solid transparent;
		border-right:5px solid transparent;
		border-bottom:5px solid black;
	}
	.triangle-down {
		width:0;height:0;
		margin-left:8px;
		margin-right:8px;
		border-left:5px solid transparent;
		border-right:5px solid transparent;
		border-top:5px solid black;
	}
	
	.selectdown {
		position:relative;
		left:-8px;
		top:6px;
		xvertical-align:bottom;
		border-color:rgba(20,20,200,0.8) transparent transparent transparent;
		border-style:solid;
		border-width:5px;
		height:30px;
		width:30px;
		pointer-events:none;
	}
	
	.icon_right {
		width:0;height:0;
		margin-left:0px;
		margin-right:0px;
		border-top:5px solid transparent;
		border-bottom:5px solid transparent;
		border-left:5px solid black;
	}
	.icon_down {
		width:0;height:0;
		margin-left:0px;
		margin-right:0px;
		border-left:5px solid transparent;
		border-right:5px solid transparent;
		border-top:5px solid black;
	}
	
	div.icon_down div.subdetails{ right:0px;border:0px solid black; border-radius:10px; background-color: #e0e0e0; padding:25px; width:45em;}
	div.icon_down div.subtable{ float:left;xbackground-color:#e0e0e0;position:relative;margin-top:1em;left:2em; width:25em;}

	.subdetails {
		position:relative;
		display:inline-block;
		text-align:left;
		padding:5px;
		width:auto;
		float:left;
		top:1em;
		left:2em;
		overflow:visible;
	}
	.ddsi xa span { padding-left:20px; vertical-align:middle; }	
	
	.tbtnbar {

		position:relative;
		display:inline-block;
		float:left;
		top:-4px;
		margin-left:5px;
}

	.tbtn {
		display:inline-block;
		font-style:Arial;
		font-size:0.8em;
		font-weight:bold;
		height:2em;
		line-height:2em;
		padding-left:5px;
		padding-right:5px;
		cursor:pointer;
		background-color:#a0a0a0;
		-webkit-transition:background-color 0.25s linear;
		vertical-align:middle;
		margin-top:2px;
		margin-bottom:2px;
		margin-left:2px;
		margin-right:0px;
	}
	.tbtn:hover { background-color: #c0c0d0; -webkit-transition: background-color 0.25s linear; }	
	
	
	/*  
	
		Combobox styling
		
		
	*/
	
	.hilite { background-color:#d0e0e0;	}
	.xddsi ul.select {
		background-color:white;
		border-radius:10px;
		border:1px solid rgba(20,20,20,0.5);
		padding:2px;
		margin:0px;
		position:absolute;
		display:block;
		overflow:none;
		xmax-height:100px;
		height:auto;
		xwidth:200px;
		z-index:99;
		
	}
	.xddsi ul { list-style-type:none; }
	
	hr { border: 1px solid rgba(0,0,0,0.1); }
 
	.mod { 
		position:relative;
		display:inline-block;
		max-height:10em;
		max-width:50em;
		float:right;
		background-color:#FC9191;
		xborder-style:ridge;
		border-radius:5px;
		xborder-width:5px;
		xborder-color:#FC9191;
		color:darkblue;
		font-weight:bold;
		padding:0.25em;
		overflow-y:scroll;
		overflow-x:hidden;
	}
	
	/*  
	
		Map styling 
		
	*/
	
	div iframe.map_iframe { 
		pointer-events:none;
		position:absolute;
		display:inline-block;
		border:0px;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
		background-color:transparent;
		xborder-bottom-left-radius:10px;
		xborder-bottom-right-radius:10px;
		xborder-top-right-radius:10px;
		xborder-top-left-radius:10px;
		xbox-shadow:2px 2px 2px #000;
	}
	
	
	
	.dropmenu input[type=checkbox] {
		position:relative;
		-webkit-appearance:none;
		appearance:none;
		padding:0px 8px 0px 8px;
		width:16px;
		height:16px;
		top:5px;
		xborder:1px solid black;
		pointer-events:none;
	}
	.dropmenu input[type=checkbox]:checked {	background: transparent url(../image/check.png) no-repeat center center;}
	
	
	/*
	
		Chrome Frame Install CSS
		
	*/
	
	 .chromeFrameInstallDefaultStyle {
	   display:none;
       width: 400px; /* default is 800px */
       border: 5px solid blue;
     }
	 
	 /*
	 
		JQuery UI CSS
	 
	 */
	 
	 div.ui-datepicker { font-size:0.8em; }
	 	 .ui-tabs-panel .ui-widget-content { background: blue; }
	.ui-dialog-titlebar { display:none; }
	.ui-widget-content { color:black; background-color:white; }
	 
	 /*
	 
		Uploader CSS
	 
	 */
	 
	.qq-uploader { position:relative; width: 100%;}
	.qq-upload-button { display:block; width: 105px; padding: 0px 0; text-align:center; background-color:#8888E0; border-radius:10px; }
	.qq-upload-button-hover { background-color:#505080; }
	.qq-upload-button-focus {}

	.qq-upload-drop-area {
		position:absolute; width:15em; height:100%; min-height: 70px; z-index:2;
		background-color:#8888E0; text-align:center; border:3px dashed black;
	}
	.qq-upload-drop-area span { display:inline-block;position:relative; top: 50%; margin-top:-8px; font-size:1em; }
	.qq-upload-drop-area-active { background-color:#8888E0;}
	.qq-upload-list { display:inline-block; margin:15px 35px; padding:0; list-style:disc;}
	.qq-upload-list li { margin:0; padding:0; line-height:1.1em; font-size:1em;}
	.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-failed-text { margin-right: 7px; }

	.qq-upload-file {}
	.qq-upload-spinner {display:inline-block; background: url("/ts/image/loading.gif"); width:15px; height:15px; vertical-align:text-bottom;}
	.qq-upload-size,.qq-upload-cancel {font-size:11px;}

	.qq-upload-failed-text {display:none;}
	.qq-upload-fail .qq-upload-failed-text {display:inline;}
	 
	/*
	 
		SImple Tree View CSS
		
	*/
	
	.treeview {overflow-x:hidden;overflow-y:auto;height:95%;}
	
	.treeview div {
		background: transparent url('../image/open.gif') no-repeat left 3px;
		padding-left:20px;
		white-space:nowrap;
	}
	.treeview .closed {
		background: transparent url('../image/closed.gif') no-repeat left 3px;
	}
	.treeview div.none { font-size:0.8em;background-image:none;}
	.treeview .closed div {display:none}
	#map_legend_content  a { cursor:pointer; color:blue; font-weight:bold;}
	#distance_calc  span { border:2px solid transparent; cursor:pointer; color:blue; font-weight:bold;}
	#distance_calc  span:hover {border-bottom:2px solid #ff0000; }
	#qry_result td {	overflow:hidden;padding-right:10px;white-space:nowrap;text-overflow:ellipsis;border-bottom:1px solid black;  }
	#qry_result tr { }
	#qry_result thead tr { background-color:#909090;font-weight:bold;}
	#qry_result { height:80%;white-space:nowrap;border:0px solid black; }

	/* Vehicle maintenance photo upload/gallery */
	.photo-block {
		margin-top: 1em;
		padding: 0.5em;
		border: 1px solid #ccc;
		background: #f7f7f7;
	}
	.photo-block h4 { margin: 0 0 0.5em 0; }
	.photo-upload-bar {
		display: flex;
		align-items: center;
		gap: 0.5em;
		margin-bottom: 0.5em;
	}
	.photo-upload-bar input[type=file] { max-width: 240px; }
	.photo-upload-bar .hint { font-size: 0.85em; color: #555; }
	.photo-errors { color: #c00; margin-bottom: 0.5em; }
	.photo-uploads .upload-row { font-size: 0.9em; color: #333; }
	.photo-gallery-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
		gap: 8px;
	}
	.photo-gallery-grid img {
		width: 100%;
		height: 120px;
		object-fit: cover;
		border: 1px solid #ccc;
		border-radius: 4px;
	}
	.photo-empty, .photo-disabled { color: #666; font-size: 0.9em; }
	.photo-drop-hint { font-size: 0.85em; color: #444; margin-bottom: 0.25em; }
	.photo-block.photo-dragging { border: 2px dashed #888; background: #eef5ff; }

	/* PTO submit / approve-deny loading overlay */
	.pto-action-busy-overlay {
		position: fixed;
		inset: 0;
		z-index: 10050;
		background: rgba(255, 255, 255, 0.94);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 1rem;
		padding: 2rem;
		text-align: center;
		box-sizing: border-box;
	}
	.pto-action-busy-spinner {
		width: 48px;
		height: 48px;
		border: 4px solid #ddd;
		border-top-color: #2196f3;
		border-radius: 50%;
		animation: pto-action-busy-spin 0.75s linear infinite;
	}
	@keyframes pto-action-busy-spin {
		to { transform: rotate(360deg); }
	}
	.pto-action-busy-title {
		margin: 0;
		font-size: 1.2rem;
		font-weight: 700;
		color: #222;
	}
	.pto-action-busy-sub {
		margin: 0;
		max-width: 24rem;
		font-size: 0.95rem;
		color: #555;
		line-height: 1.45;
	}

	/* PTO FullCalendar (request + response) */
	/* PTO request/response: one column aligned with calendar (#pto_*_fc_wrap width: 100% inside stack). */
	.pto-request-form-stack,
	.pto-response-form-stack {
		box-sizing: border-box;
		max-width: min(100%, 1120px);
		margin-left: auto;
		margin-right: auto;
		padding: 0 clamp(12px, 2.5vw, 20px);
	}
	/* PTO response: page title + approver nav link on one row */
	.pto-response-page-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: 10px 16px;
		margin: 0 0 18px 0;
		padding-bottom: 12px;
		border-bottom: 1px solid #e0e0e0;
	}
	.pto-response-page-header h2 {
		margin: 0;
		line-height: 1.25;
	}
	.pto-response-dashboard-nav__link {
		font-size: 0.95rem;
		font-weight: 600;
		color: #1565c0;
		text-decoration: none;
		white-space: nowrap;
		padding: 6px 10px;
		border-radius: 4px;
		border: 1px solid transparent;
	}
	.pto-response-dashboard-nav__link:hover {
		color: #0d47a1;
		text-decoration: underline;
		background-color: rgba(21, 101, 192, 0.06);
		border-color: rgba(21, 101, 192, 0.2);
	}
	.pto-fc-help { color: #444; font-size: 0.92em; line-height: 1.45; margin-bottom: 10px; }
	.pto-request-comments-totals {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		margin-bottom: 10px;
	}
	.pto-request-comments-totals__comments,
	.pto-request-comments-totals__summary {
		width: 100%;
		box-sizing: border-box;
		min-width: 0;
	}
	.pto-request-comments-totals__comments textarea { width: 100%; box-sizing: border-box; }
	.pto-request-totals-label { font-size: 0.82em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #555; margin-bottom: 4px; }
	.pto-request-totals { font-size: 0.95em; font-weight: 600; color: #222; line-height: 1.4; }
	.pto-response-detail-table { width: 100%; max-width: 100%; box-sizing: border-box; }
	.pto-response-conflicts-heading {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-top: 20px;
		margin-bottom: 10px;
	}
	.pto-response-conflicts-heading-icon {
		flex-shrink: 0;
		display: block;
		width: 18px;
		height: 18px;
	}
	.pto-fc-wrap {
		margin: 10px 0 16px 0;
		border: 1px solid #ccc;
		border-radius: 6px;
		overflow: hidden;
		background: #fff;
	}
	.pto-fc-wrap .fc {
		--fc-page-bg-color: #fff;
		--fc-border-color: #ddd;
		/* Default event chrome: dark text so hover / light backgrounds stay readable */
		--fc-event-text-color: #1a1a1a;
		--fc-event-bg-color: #c5e3f6;
		--fc-event-border-color: #5c9fd4;
	}
	.pto-fc-wrap .fc-event:hover,
	.pto-fc-wrap .fc-timegrid-event:hover {
		--fc-event-text-color: #0d0d0d;
		--fc-event-bg-color: #9fd4f0;
	}
	.pto-fc-wrap .fc-event .fc-event-main,
	.pto-fc-wrap .fc-event .fc-event-title,
	.pto-fc-wrap .fc-event .fc-event-time {
		color: var(--fc-event-text-color, #1a1a1a);
	}
	/* Drag-select preview (mirror) often used a light fill with inherited pale text */
	.pto-fc-wrap .fc-event-mirror,
	.pto-fc-wrap .fc-event-mirror .fc-event-main {
		--fc-event-text-color: #111;
		color: #111 !important;
		background-color: rgba(159, 212, 240, 0.55) !important;
		border-color: #4a90c2 !important;
	}
	/* Beat inline event colors on hover / selected (otherwise text can stay white on pale fill) */
	.pto-fc-wrap .fc .fc-event:hover,
	.pto-fc-wrap .fc .fc-event.fc-event-selected {
		--fc-event-text-color: #0d0d0d;
	}
	.pto-fc-wrap .fc .fc-event:hover .fc-event-main,
	.pto-fc-wrap .fc .fc-event:hover .fc-event-title,
	.pto-fc-wrap .fc .fc-event:hover .fc-event-time,
	.pto-fc-wrap .fc .fc-event.fc-event-selected .fc-event-main,
	.pto-fc-wrap .fc .fc-event.fc-event-selected .fc-event-title,
	.pto-fc-wrap .fc .fc-event.fc-event-selected .fc-event-time,
	.pto-fc-wrap .fc .fc-timegrid-event:hover .fc-event-main,
	.pto-fc-wrap .fc .fc-timegrid-event:hover .fc-event-title,
	.pto-fc-wrap .fc .fc-timegrid-event:hover .fc-event-time,
	.pto-fc-wrap .fc .fc-daygrid-event:hover .fc-event-main,
	.pto-fc-wrap .fc .fc-daygrid-event:hover .fc-event-title,
	.pto-fc-wrap .fc .fc-list-event:hover .fc-list-event-title,
	.pto-fc-wrap .fc .fc-list-event:hover .fc-list-event-time {
		color: #0d0d0d !important;
	}
	/* Read-only wrap: id wins over class so we can match request calendar width */
	.pto-fc-wrap--readonly { max-width: 900px; }

	/*
	 * Response calendar (full page + dashboard modal): month cells can render events as a hairline if
	 * layout is measured before the dialog/content width is final, or with custom eventContent HTML.
	 */
	#pto_response_fc_wrap .fc .fc-daygrid-block-event .fc-event-main {
		min-height: 22px;
		padding-top: 2px;
		padding-bottom: 2px;
		box-sizing: border-box;
	}
	#pto_response_fc_wrap .fc .fc-h-event {
		min-height: 22px;
		min-width: 5.5em;
	}
	#pto_response_fc_wrap .fc .fc-daygrid-dot-event {
		padding-top: 3px;
		padding-bottom: 3px;
	}

	/* PTO response calendar: per-segment status (matches dashboard expandable table colors) */
	#pto_response_fc_wrap .fc .fc-h-event[class*="pto-fc-ev-status-"] {
		min-height: 38px;
	}
	#pto_response_fc_wrap .fc .fc-event.pto-fc-ev-status-approved {
		--fc-event-bg-color: #e8f5e9;
		--fc-event-border-color: #66bb6a;
		--fc-event-text-color: #1b5e20;
	}
	#pto_response_fc_wrap .fc .fc-event.pto-fc-ev-status-approved:hover,
	#pto_response_fc_wrap .fc .fc-event.pto-fc-ev-status-approved.fc-event-selected {
		--fc-event-bg-color: #c8e6c9;
		--fc-event-border-color: #43a047;
		--fc-event-text-color: #0d3d12;
	}
	#pto_response_fc_wrap .fc .fc-event.pto-fc-ev-status-denied {
		--fc-event-bg-color: #ffebee;
		--fc-event-border-color: #ef5350;
		--fc-event-text-color: #b71c1c;
	}
	#pto_response_fc_wrap .fc .fc-event.pto-fc-ev-status-denied:hover,
	#pto_response_fc_wrap .fc .fc-event.pto-fc-ev-status-denied.fc-event-selected {
		--fc-event-bg-color: #ffcdd2;
		--fc-event-border-color: #e53935;
		--fc-event-text-color: #7f0000;
	}
	/* Cancelled: strong edge contrast (pale grey on pale grey read as no border; esp. full-request cancelled) */
	#pto_response_fc_wrap .fc .fc-event.pto-fc-ev-status-cancelled {
		--fc-event-bg-color: #eceff1;
		--fc-event-border-color: #546e7a;
		--fc-event-text-color: #37474f;
		border: 1px solid #546e7a !important;
		border-radius: 4px;
		box-sizing: border-box;
	}
	#pto_response_fc_wrap .fc .fc-event.pto-fc-ev-status-cancelled:hover,
	#pto_response_fc_wrap .fc .fc-event.pto-fc-ev-status-cancelled.fc-event-selected {
		--fc-event-bg-color: #e0e4e8;
		--fc-event-border-color: #455a64;
		--fc-event-text-color: #263238;
		border-color: #455a64 !important;
	}
	#pto_response_fc_wrap .fc .fc-event.pto-fc-ev-status-pending {
		--fc-event-bg-color: #fff8e1;
		--fc-event-border-color: #ffb74d;
		--fc-event-text-color: #e65100;
	}
	#pto_response_fc_wrap .fc .fc-event.pto-fc-ev-status-pending:hover,
	#pto_response_fc_wrap .fc .fc-event.pto-fc-ev-status-pending.fc-event-selected {
		--fc-event-bg-color: #ffecb3;
		--fc-event-border-color: #ff9800;
		--fc-event-text-color: #bf360c;
	}

	.pto-fc-wrap--readonly .pto-fc-event-text-stack {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
		min-width: 0;
		width: 100%;
		box-sizing: border-box;
	}
	.pto-fc-wrap--readonly .pto-fc-event-status {
		display: block;
		font-size: 0.78em;
		font-weight: 700;
		line-height: 1.2;
		white-space: normal;
		word-break: break-word;
		max-width: 100%;
	}
	.pto-fc-wrap--readonly .pto-fc-event-status--approved {
		color: #4caf50;
	}
	.pto-fc-wrap--readonly .pto-fc-event-status--denied {
		color: #f44336;
	}
	.pto-fc-wrap--readonly .pto-fc-event-status--cancelled {
		color: #9e9e9e;
	}
	.pto-fc-wrap--readonly .pto-fc-event-status--pending {
		color: #ff9800;
	}

	/* Read-only response calendar: custom eventContent for everyone (modal / theme default hid titles); approvers get conflict row when applicable */
	.pto-fc-wrap--readonly .pto-fc-event-readonly {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: 20px;
		line-height: 1.25;
		box-sizing: border-box;
	}

	/* Approver-only PTO conflict warning inside read-only response calendar */
	.pto-fc-wrap--readonly .pto-fc-event-with-conflict {
		display: flex;
		align-items: flex-start;
		gap: 4px;
		width: 100%;
		min-height: 20px;
		line-height: 1.25;
	}
	.pto-fc-wrap--readonly .pto-fc-conflict-anchor {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		line-height: 0;
		text-decoration: none;
		border-radius: 2px;
	}
	.pto-fc-wrap--readonly .pto-fc-conflict-anchor:hover .pto-fc-conflict-icon,
	.pto-fc-wrap--readonly .pto-fc-conflict-anchor:focus .pto-fc-conflict-icon {
		filter: brightness(0.92);
	}
	.pto-fc-wrap--readonly .pto-fc-conflict-anchor:focus-visible {
		outline: 2px solid #1976d2;
		outline-offset: 1px;
	}
	.pto-fc-wrap--readonly .pto-fc-event-title-text,
	#pto_response_fc_wrap .fc .fc-event-title.pto-fc-event-title-text {
		flex: 1 1 auto;
		min-width: min-content;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: var(--fc-event-text-color, #1a1a1a);
		font-size: inherit;
		font-weight: inherit;
	}
	.pto-fc-wrap--readonly .fc-list-event .pto-fc-event-title-text {
		white-space: normal;
	}
	/* Modal: keep hours line dark; status line keeps semantic colors from .pto-fc-event-status--* */
	.ui-dialog.pto-dashboard-request-dialog #pto_response_fc_wrap .fc-event-title.pto-fc-event-title-text {
		color: #1a1a1a !important;
	}
	#pto_response_fc_wrap .fc .fc-event:hover .pto-fc-event-status--approved,
	#pto_response_fc_wrap .fc .fc-event.fc-event-selected .pto-fc-event-status--approved {
		color: #388e3c !important;
	}
	#pto_response_fc_wrap .fc .fc-event:hover .pto-fc-event-status--denied,
	#pto_response_fc_wrap .fc .fc-event.fc-event-selected .pto-fc-event-status--denied {
		color: #c62828 !important;
	}
	#pto_response_fc_wrap .fc .fc-event:hover .pto-fc-event-status--cancelled,
	#pto_response_fc_wrap .fc .fc-event.fc-event-selected .pto-fc-event-status--cancelled {
		color: #757575 !important;
	}
	#pto_response_fc_wrap .fc .fc-event:hover .pto-fc-event-status--pending,
	#pto_response_fc_wrap .fc .fc-event.fc-event-selected .pto-fc-event-status--pending {
		color: #f57c00 !important;
	}

	/* PTO calendars — full width of parent stack (.pto-request-form-stack / .pto-response-form-stack) */
	#pto_fc_wrap,
	#pto_response_fc_wrap {
		box-sizing: border-box;
		width: 100%;
		max-width: none;
		margin: 10px 0 16px;
		padding: 0;
	}
	#pto_fc_calendar .fc-toolbar-title,
	#pto_response_fc_calendar .fc-toolbar-title {
		font-size: 1.1em;
	}
	#pto_fc_calendar .fc-header-toolbar,
	#pto_response_fc_calendar .fc-header-toolbar {
		padding: 12px 14px;
		flex-wrap: wrap;
		gap: 12px;
		row-gap: 10px;
		align-items: center;
	}
	#pto_fc_calendar .fc-toolbar-chunk,
	#pto_response_fc_calendar .fc-toolbar-chunk {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 8px;
	}
	#pto_fc_calendar .fc-button-group,
	#pto_response_fc_calendar .fc-button-group {
		display: inline-flex;
		flex-wrap: wrap;
		gap: 4px;
	}
	#pto_fc_calendar .fc-button-group > .fc-button,
	#pto_fc_calendar .fc-toolbar-chunk > .fc-button,
	#pto_response_fc_calendar .fc-button-group > .fc-button,
	#pto_response_fc_calendar .fc-toolbar-chunk > .fc-button {
		margin: 0;
	}
	/* TimeGrid week/day: all-day lane sits inside .fc-timegrid .fc-daygrid-body (not month view) */
	#pto_fc_calendar .fc-timegrid .fc-daygrid-body,
	#pto_response_fc_calendar .fc-timegrid .fc-daygrid-body {
		background: linear-gradient(180deg, #e8f4fc 0%, #dfedf6 100%);
		border-bottom: 2px solid #5c9fd4;
		box-shadow: inset 0 -1px 0 rgba(92, 159, 212, 0.35);
		min-height: 2.75em;
	}
	#pto_fc_calendar .fc-timegrid .fc-daygrid-body .fc-daygrid-day:hover,
	#pto_response_fc_calendar .fc-timegrid .fc-daygrid-body .fc-daygrid-day:hover {
		background-color: rgba(21, 101, 192, 0.1);
	}
	#pto_fc_calendar a.fc-timegrid-axis-cushion,
	#pto_response_fc_calendar a.fc-timegrid-axis-cushion {
		font-weight: 700;
		font-size: 0.72rem;
		text-transform: uppercase;
		letter-spacing: 0.055em;
		color: #1565c0;
		text-decoration: none;
	}

	/* PTO dashboard: View Request modal (AJAX-loaded pto_response embed)
	   Override jquery-ui.css .ui-dialog black frame + transparent .ui-dialog-content
	   (otherwise text inherits app chrome colors and label cells become unreadable). */
	.ui-dialog.pto-dashboard-request-dialog {
		font-size: 0.95em;
		background: #fff;
		background-image: none;
		border: 1px solid #999;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.22);
		overflow: hidden;
	}
	.ui-dialog.pto-dashboard-request-dialog .ui-dialog-content {
		background: #fff !important;
		color: #1a1a1a !important;
		overflow: auto;
		padding: 10px 14px 16px;
	}
	.ui-dialog.pto-dashboard-request-dialog .ui-dialog-titlebar {
		display: block !important;
		background: #e8e8ec !important;
		background-image: none !important;
		border-bottom: 1px solid #bbb;
		color: #222 !important;
		padding: 0.45em 1em;
	}
	.ui-dialog.pto-dashboard-request-dialog .ui-dialog-title {
		color: #1a1a1a !important;
	}
	.ui-dialog.pto-dashboard-request-dialog .ui-dialog-titlebar-close {
		top: 50%;
		border: 1px solid #999;
		background: #f5f5f5;
	}
	.ui-dialog.pto-dashboard-request-dialog .ui-dialog-titlebar-close .ui-icon-closethick,
	.ui-dialog.pto-dashboard-request-dialog .ui-dialog-titlebar-close .ui-icon {
		background-image: url(../css/images/ui-icons_222222_256x240.png) !important;
	}
	.ui-dialog.pto-dashboard-request-dialog .ui-dialog-titlebar-close.ui-state-hover,
	.ui-dialog.pto-dashboard-request-dialog .ui-dialog-titlebar-close.ui-state-focus {
		background: #e0e0e0;
		border-color: #666;
	}
	.ui-dialog.pto-dashboard-request-dialog .ui-dialog-titlebar-close.ui-state-hover .ui-icon,
	.ui-dialog.pto-dashboard-request-dialog .ui-dialog-titlebar-close.ui-state-focus .ui-icon {
		background-image: url(../css/images/ui-icons_222222_256x240.png) !important;
	}

	#pto-dashboard-request-modal-root {
		position: relative;
		box-sizing: border-box;
		background: #fff;
		color: #1a1a1a;
	}
	.pto-dashboard-request-modal-bar {
		margin-bottom: 10px;
		padding-bottom: 8px;
		border-bottom: 1px solid #ccc;
	}
	.pto-dashboard-request-modal-back {
		padding: 6px 14px;
		cursor: pointer;
		font-size: 0.95em;
		background: #f3f3f5;
		border: 1px solid #aaa;
		border-radius: 4px;
		color: #1a1a1a;
	}
	.pto-dashboard-request-modal-body {
		overflow-x: auto;
		overflow-y: auto;
		max-height: calc(85vh - 120px);
		box-sizing: border-box;
		min-width: 0;
		background: #fff;
		color: #1a1a1a;
	}
	.pto-dashboard-request-loading {
		margin: 1em 0;
		color: #444;
	}
	#pto-dashboard-request-modal-root .pto-action-busy-overlay--modal {
		position: absolute;
		inset: 0;
		z-index: 200;
	}
	.ui-dialog.pto-dashboard-request-dialog .pto-response-dashboard-embed {
		box-sizing: border-box;
		max-width: 100%;
		color: #1a1a1a;
	}
	.ui-dialog.pto-dashboard-request-dialog .pto-response-dashboard-embed .pto-response-detail-table {
		table-layout: auto;
		word-wrap: break-word;
	}
	.ui-dialog.pto-dashboard-request-dialog .pto-response-dashboard-embed td,
	.ui-dialog.pto-dashboard-request-dialog .pto-response-dashboard-embed th,
	.ui-dialog.pto-dashboard-request-dialog .pto-response-dashboard-embed p,
	.ui-dialog.pto-dashboard-request-dialog .pto-response-dashboard-embed li,
	.ui-dialog.pto-dashboard-request-dialog .pto-response-dashboard-embed ul,
	.ui-dialog.pto-dashboard-request-dialog .pto-response-dashboard-embed strong {
		color: #1a1a1a;
	}
	.ui-dialog.pto-dashboard-request-dialog .pto-response-dashboard-embed h2,
	.ui-dialog.pto-dashboard-request-dialog .pto-response-dashboard-embed h3 {
		color: #111;
	}

	/*
	 * FullCalendar inside PTO modal: jQuery UI .ui-widget-content a { color: #fff } makes
	 * column headers, day numbers, and list headings invisible. Neutral text var + explicit rules.
	 */
	.ui-dialog.pto-dashboard-request-dialog #pto_response_fc_wrap .fc {
		--fc-neutral-text-color: #1a1a1a;
		--fc-more-link-text-color: #0d47a1;
	}
	.ui-dialog.pto-dashboard-request-dialog #pto_response_fc_wrap a {
		color: #1a1a1a !important;
	}
	.ui-dialog.pto-dashboard-request-dialog #pto_response_fc_wrap .fc-col-header-cell-cushion,
	.ui-dialog.pto-dashboard-request-dialog #pto_response_fc_wrap .fc-daygrid-day-number,
	.ui-dialog.pto-dashboard-request-dialog #pto_response_fc_wrap .fc-timegrid-slot-label-cushion,
	.ui-dialog.pto-dashboard-request-dialog #pto_response_fc_wrap .fc-list-day-text,
	.ui-dialog.pto-dashboard-request-dialog #pto_response_fc_wrap .fc-list-day-side-text,
	.ui-dialog.pto-dashboard-request-dialog #pto_response_fc_wrap .fc-list-event-time,
	.ui-dialog.pto-dashboard-request-dialog #pto_response_fc_wrap .fc-list-event-title {
		color: #1a1a1a !important;
	}
	.ui-dialog.pto-dashboard-request-dialog #pto_response_fc_wrap .fc-list-day-cushion {
		color: #1a1a1a !important;
	}
	.ui-dialog.pto-dashboard-request-dialog #pto_response_fc_wrap .fc-list-table .fc-list-event:hover td {
		color: #0d0d0d;
	}