/* color definitions */

:root {
	--main-bg-color: white;
	--main-text-color: black;
	--kooky-font: 'Gaegu', sans-serif;
}



/* important misc */

#qrcode {
	display: block;
	margin: 1em 1em 1em auto;
	width: 256px;
}

.faint, .faintLatent {
	opacity: 0.4;
}
.faintLatent:hover { opacity:1; }

.smallish {
	font-size: 91%;
}

.titlePretext {
	font-size:1rem;
	font-weight:normal;
	text-decoration:none;
	display:inline-block;
}

.kooky {
	font-family: var(--kooky-font);
}

.sansserif {
	font-family: sans-serif;
}

.dollaredCents, .cents {
	font-family: monospace;
	color: rgb(59, 133, 59);
}
.dollaredCents::before {
	content: '$';
	opacity: 0.4;
}
.raisedCents {
	vertical-align: 0.2em;
	font-size: 70%;
}

.gapLeft {
	padding-left: 0.3em;
}

.faintHovCell {
	opacity: 0.3;
}
table:hover .faintHovCell {
	opacity: 1;
}

*[contenteditable="true"] {
	background-color: rgba(97, 198, 235, 0.2);
	padding-right: 3rem;
}

textarea {
	min-width: min(40em,80vm);
	min-height: 10rem;
}

.bigInput input, input.bigInput {
	font-size: 1.4rem;
}

.anticipated {
	opacity: 0.6;
	font-style: italic;
}
.anticipated span {
	text-shadow: 0 0 2px #aaa;
}
.anticipatedNotice {
	background-color: #ddf;
	color: black;
	/* margin-left: 0.6em; */
	border-radius: 0.6em;
	box-shadow: inset #fff 0 0 4px;
}
.anticipatedNoticeCompact {
	display: inline-block;
	width: 1rem;
	transition: width 5s ease;
	white-space: pre;
	overflow: hidden;
}
.anticipatedNoticeCompact:active, .anticipatedNoticeCompact:hover {
	width: 7em;
	transition: width 0s;
}

.clearBoth {
	clear: both;
}

.expired {
	opacity: 0.7;
}
.expired, .expired span, a.expired {
	text-decoration:line-through double rgba(255,30,30,0.4);
}
.expired span > span, .expired a > span {
	text-decoration: none;
}
.expiredText {
	color: rgba(255,30,30,0.6);
	font-variant: small-caps;
	opacity: 0.9;
}

.expiredField {
	opacity: 0.6;
	font-size: 89%;
	font-style: italic;
	text-decoration:line-through lightgray;
}

table.fieldTable {
	border-spacing: 0;
}

.fieldTable td { padding: 2px; }
.fieldTable td:empty { padding:0; }

.alignRight {
	text-align: right;
}

div.ui-dialog {position:fixed;} 

.error {
	color: red;
}

.warnEmptyInput:placeholder-shown { /* needs a placeholder to work */
	background: rgba(255, 0, 0, 0.11);
}

.emphasis {
	font-weight: bold;
	text-shadow: 0 1px 1px black;
}

.nowrap {
	white-space: nowrap;
}

.clickableIcon {
	cursor: pointer;
	border-radius: 1em;
	color: black;
	text-decoration: none;
}
.clickableIcon:hover {
	opacity: 1;
	color: white;
	text-shadow: 1px 1px 5px blue;
}
.fa-stack > .fa-spin-hover {
	opacity: 0.2;
}
.fa-stack:hover > .fa-spin-hover {
	opacity: 1;
	color: lightblue;
	-webkit-animation: fa-spin 2s infinite ease-in-out;
	animation: fa-spin 2s infinite ease-in-out;
}
.selfRefIcon {
	transform: rotate(-11deg);
}

a.panelLink {
	position: absolute; z-index: 1;
	top:0;right:0;bottom:0;left:0;
}

.editablefieldpanel {
	white-space: pre-wrap;
	max-height: 4em;
	min-width: 1em;
	overflow: auto;
	display: block;
}
.editablefieldpanel:focus, .editablefieldpanel:active {
	max-height: none;
}
span.editablefieldpanel {
	display: inline-block;
}

/* hilite keywords */

.hilitkeyw {
	/* font: 600 16px/1 Comic Sans, Lucida Sans, Verdana, sans-serif; */
	
	display: inline-block;
	opacity: 1;
	
	border: 1px solid #ccc;
	margin: -1px -5px;
	padding: 0 4px;
	/*
	font-weight: 600; 
	font-size: 110%;
	font: 600 18px/1 Lucida Sans, Verdana, sans-serif; 
	*/
	
	/* color: #fff;
	text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px; */
	border-radius: 16px;
}
/* .backup_colour {
	box-shadow: 0 10px 16px rgba(66, 140, 240, 0.5), inset 0 -8px 12px 0 #6bf, inset 0 -8px 0 8px #48c, inset 0 -35px 15px -10px #7ad;
	background: #cde; 
	border-color: #8ba2c1 #5890bf #4f93ca #768fa5;
} */
.hilitkeyw:hover, .memopanel:hover .hilitkeyw  {
	/* text-shadow: rgb(255, 255, 255) 0px 0px 5px; */
	opacity: .4;
	text-shadow: black 0 0 1px;
}

decw .hilitkeyw {
	margin: 0;
}
decf .hilitkeyw {
	padding: 0 2px;
	margin: 0;
	line-height: 1em;
}


/* recent acts */

.recentEditPanel {
	margin: 2em 0.3em 0;
	opacity: 0.5;
}
.recentEditPanel:active, .recentEditPanel:hover {
	opacity: 1;
}
.recentEditPanel > h4 { margin-bottom: 0.3em; }

.rActDate {
	white-space: nowrap;
	font-weight: bold;
	color: #669;
	font-size: 94%;
}

/* end recent acts */

.entityLink {
	text-decoration: none;
	border-radius: 0 1em 1em 0;
	padding: 0 3px 0 0;
	box-shadow: 0 1px 4px 0 #888888;
	color: black;
}
.entityLink:hover {
	box-shadow: 0 1px 6px -1px #888888;
	text-shadow: 0px 1px 2px rgba(0,0,0,0.2), 0px -1px 3px rgba(155,255,255,0.3);
	color: blue;
}
.entityLink:visited:hover {
	color: purple;
}

.contactLink {
	text-decoration: none;
	border-radius: 0 1em 1em 0;
	padding: 0 3px 0 0;
	box-shadow: 0 1px 4px 0 #888888;
}
.contactLink:hover {
	box-shadow: 0 1px 6px -1px #888888;
	text-shadow: 0px 1px 2px rgba(0,0,0,0.2), 0px -1px 3px rgba(155,255,255,0.3);
}

.opportunityLink {
	text-decoration: none;
	border-radius: 0.3em;
	padding: 0 5px;
	box-shadow: 0 1px 4px 0 #669988;
}
.opportunityLink:hover {
	box-shadow: 0 1px 6px -1px #66ab88;
	text-shadow: 0px 1px 2px rgba(0,0,0,0.2), 0px -1px 3px rgba(155,255,255,0.3);
}

.goalLink {
	text-decoration: none;
	border-radius: 0 0 0.5em 0.5em;
	padding: 0 3px 0 0;
	box-shadow: 0 2px 4px -2px #888888;
}
.goalLink:hover {
	box-shadow: 0 3px 6px -3px #558888;
	text-shadow: 0px 1px 2px rgba(0,0,0,0.2), 0px -1px 3px rgba(199,255,199,0.3);
}

.staffLink {
	text-decoration: none;
	white-space: nowrap;
}

td {
	vertical-align: top;
}

table {
	empty-cells: show;
}

div.searchResultContainer {
	width: 100%;
	overflow-x: auto;
}

/* div only? */
div.searchResultTable {
	display: table;
	width: 100%;
	border-spacing: 8px 0;
	table-layout: auto;
}
div.searchResultTable a {
	text-decoration:inherit;
	color:inherit;
}
div.searchResultTable > * {
	display:table-row;
	white-space: nowrap;
}
div.searchResultTable > *:hover {
	background: #ddf;
}
div.searchResultTable > * > *, table.searchResultTable > * > * > td {
	display:table-cell;
	overflow: hidden;
	max-width: 100px;
}
div.searchResultTable > * > *.searchResultAddress {
	max-width: 3em;
}
div.searchResultTable > * > *.searchResultLastLogTime {
	max-width: 2.5em;
	font-size: 90%;
}
div.searchResultTable > * > *.searchResultLastLogParent > i.fa {
	opacity: 0.5;
	font-size: 80%;
}
div.searchResultTable > * > .searchResultStaff {
	max-width: 5em;
}
div.searchResultTable > * > .logEntryPreview {
	max-width: 50em;
}









table.searchResultTable {
	width: 100%;
	border-spacing: 8px 0;
	table-layout: auto;
}
table.searchResultTable a {
	text-decoration:inherit;
	color:inherit;
}
table.searchResultTable td > a:only-child {
	display:block;
}
table.searchResultTable tr {
	white-space: nowrap;
}
table.searchResultTable tr:hover {
	background: #ddf;
}
table.searchResultTable td {
	overflow: hidden;
	/* max-width: 100px; */
}
table.searchResultTable td.searchResultAddress {
	max-width: 3em;
}
table.searchResultTable td.searchResultLastLogTime {
	max-width: 2.5em;
	font-size: 90%;
}
table.searchResultTable td.searchResultLastLogParent > i.fa {
	opacity: 0.5;
	font-size: 80%;
}
table.searchResultTable td.searchResultStaff {
	max-width: 5em;
}
table.searchResultTable td.logEntryPreview {
	max-width: 50em;
}



.viewAllLink { /* after searchResultTable */
	font-style: italic;
	padding-left: 0.5em;
	transition: all 42s ease;
	opacity: 0.6;
}
.viewAllLink:hover {
	padding-left: 80%;
	letter-spacing: 0.5em;
	opacity: 0.4;
}








a.contactSearchResultOptionsButton, a.projectSearchResultOptionsButton {
	color: #99c;
	position: absolute;
	right: 0;
	font-size: 160%;
	text-decoration: none;
}

.navLine {
	font-size: 120%;
}
.navLine button {
	font-size: 100%;
}
.paginavSearch {
	padding-left: 3em;
}

.logAuthor {
	opacity: 0.8;
	color: #223377;
	font-variant: small-caps;
}
.logTopic {
	color: #225533;
	font-weight: bold;
}
.logTime {
	opacity: 0.5;
	white-space: nowrap;
}
.logAuthor:hover, .logTopic:hover {
	opacity: 1;
	cursor: pointer;
	text-decoration: underline;
}
.logTime:hover {
	opacity: 1;
}
.faintDate {
	opacity: 0.6;	
}

.logEntryOnPage, .noteEntryOnPage {
	border: 3px double gray;
	border-radius: 0.4rem;
	max-width: 45rem;
	padding: 1rem;
}
.noteEntryOnPage { border-radius:0; border-color: rgb(83, 111, 129); }

.invalidDataSymbol {
	color: #e44444;
}

button.utilityButton {
	font-size: x-large;
	padding: 0.3rem 0.8rem;
	opacity: 0.5;
	margin-top: 1rem;
}

.bigModal {
	position: absolute;
	z-index: 100;
	top: 1em;
	right: 2em;
	left: 2em;
	background: var(--main-bg-color);
	border: 2px solid gray;
	border-radius: 1em;
	padding: 1em;
}
.wsBody .bigModal { font-size:1.6rem; top:0.3rem; left:0.3rem; right:0.3rem;  }
.modalBackground {
	position: fixed;
	z-index: 99;
	top: 0; bottom: 0; right: 0; left: 0;
	background: rgba(0,0,0,0.5);
	overflow-y: auto;
}
.modalFloatPanel {
	float: left;
	width: 20em;
	margin: 1em;
	padding: 1em;
	height: 7em;
	overflow: auto;
	border-radius: 0.5em;
	border: 1px solid gray;
	box-shadow: 0 1px 10px 0 #888888;
}
.modalFloatPanel > h3, .modalFloatPanel > h4 {
	margin-top: 0;
}
.modalFloatPanel.clickableIcon:hover {
	background: red;
}
.modalFloatPanel.unclickable {
	border-color: red;
	box-shadow: 0 1px 10px 0 red;
	font-weight: bold;
}
@media (max-width: 800px) {
	.bigModal { top:0.2rem; left:0.1rem; right:auto; width:96vw; padding:0.1rem; }
	.wsBody .bigModal { font-size:1rem; }
	.modalFloatPanel { clear:both; float: none; width:auto; margin:0.9rem 0.1rem; padding:0.2rem; height:auto; font-size:80%; }
}

.selected {
	font-weight: bold;
	box-shadow: 0 1px 10px 0 red;
}

#ckwindow {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background: white;
	padding: 1em;
	color: black;
	font-size: 200%;
	border: 3px double black;
	border-width: 0 3px 3px 0;
	font-family: serif;
}

.fieldGuideline {
	border-radius: 1em;
	background: #D0FBEF;
	color: #21594A;
	padding: 0 1em;
}

/* div.fieldButtonRow {} */
div.fieldButtonRow > button {
	margin: 0.2em;
}

html.wait {
	cursor: wait !important;
}



.emailLink {
	color: black;
	text-decoration: none;
}
.emailLink:hover {
	color: blue;
	text-decoration: underline;
	background: #eef;
}
.emailLink:hover:visited {
	color: purple;
	background: #fef;
}
.mailingListAddrSpan, .mailingListAddrSpan a {
	background:#5588ff22;color:#223d89;padding:0 0.1em;border-radius:9px;text-decoration: none;font-size:90%;
}
#crmailBody, .description {
	margin: 1em;
	width: 80%;
	max-width: 900px;
	padding: 2em 1.5em 3em;
	box-shadow: 0 0 4px 0 #aaaacc, 0 0 2em 0 #ccccff;
	border-radius: 0.3em;
	border: none;
}
#crmailBody {
	height: 500px;
}
.emailRelTable div { white-space:nowrap; }

.contactModePriority { font-weight:bold; font-size:95%; opacity:0.9; display:inline-block; padding:0 0.2em; border-radius:1em; background:#00000011; color:#000000aa; }

.searchResultTable > * > .emailLinePreview {
	max-width: 50em;
}

.repliedToEmailBody {
	display: block;
	position: absolute;
	top: 1em;
	right: 1em;
	width:60%;
	max-width: 20em;
	margin: 0.3em;
	box-shadow: 0 0 4px 0 #aaaacc, 0 0 2em 0 #ccccff;
	border-radius: 0.3em;
	border: none;
	text-decoration: none;
	opacity: 0.4;
	color: #225;
	z-index: 1;
	background: white;
}
.repliedToInfo {
	position: absolute;
	top:0; left: 0; right:0; padding: 0.2em;
	display: block;
	color: #aac;
	font-weight: bold;
}
.repliedToEmailBody {
	padding: 2em;
}
@media (max-width: 600px) {
	.repliedToEmailBody {
		position: relative;
		width:100%;
		max-width:100%;
		padding:0.5em;
	}
	.repliedToInfo { position: relative; display: inline; padding:0; }
}
.repliedToEmailBody:hover {
	opacity: 1;
}
.repliedToEmailBody:hover > .repliedToSnippet {
	color: blue;
}
.repliedToEmailBody:hover:visited > .repliedToSnippet {
	color: purple;
}
.relEmailName {
	padding-left: 1em;
	font-style: italic;
	color: #223377;
}

/* Embox */

.emboxTitleSpan { margin-bottom:0; }
.emboxDateSep td { border-bottom:1px solid blue; height:0.4em; box-shadow:0 -1em 1em -1em rgb(146, 125, 117) inset; position:relative; }
.emboxDateSep td > span { background-color:var(--main-bg-color); border:1px solid blue; position:absolute;bottom:-1px;right:0; padding-left:0.7em; border-radius: 1em 0 0 0; border-width: 1px 0 0 1px; }

.emboxMailPanel { border: 1px solid #77777700; border-width: 1px 1px 0; margin: 0 0.1em 0; box-shadow: 0 0 1em -0.5em black inset; border-radius:0.5em; padding:0.2em 0 0.1em 0.1em; max-width:92vw; position:relative; }
.emboxMailPanelSelected { box-shadow: 0 0 1em -0.5em black inset, 0 0 1em -0.5em black inset, 0 0 1em -0.5em black inset, 0 0 1em -0.5em black inset; border-color:black; }
.emboxTimeBubble { font-size:87%; border: 1px solid #777777; border-radius:50%; padding: 0.1em 0.5em; position:absolute; top:-0.18em; right:-2vw; background-color:var(--main-bg-color); }
.emboxTimeBubbleMeridian { font-size:80%; opacity:0.8; }
.emboxTrimmedFrom { white-space: nowrap; overflow: hidden; }
.emboxFromSpan { display:inline-block; overflow: hidden; width:50vw; }
.emboxFromSpanMini { display:inline-block; overflow: hidden; max-width:60vw; }
.emboxToSpan { display:inline-block; overflow: hidden; }
.emboxSubjBodPanel { cursor:pointer; }
.emboxTrimmedSubject { background:rgba(111, 214, 255, 0.116); white-space: nowrap; overflow: hidden; }
.emboxTrimmedSubject > a { text-decoration: none; color:var(--main-text-color); }
.emboxTrimmedSubject a, .emboxSnippet a { width:100%; display:inline-block;}
.emboxSnippet { background:rgba(255, 197, 111, 0.116); overflow: hidden; max-height:3.25em; }
.emboxMailPanelxx > div { white-space: nowrap; overflow: hidden; }

.emboxSortesButton, .emboxSortesButtonSelected {
	margin: 0.2em 0.2em 0.2em 0;
	background-image: linear-gradient(to bottom, #bade18, #bced6d) !important;
	text-shadow: 0 0 2px #fff8ff;
	box-shadow: 0px 1px 3px #666666;
	font-weight: bold;
	color: #200606 !important;
	position: relative;
	border-radius: 3px;
	padding: 3px;
	border: none;
}
.emboxSortesButton:after, .emboxSortesButtonSelected:after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}
.emboxSortesButton:hover, .emboxSortesButtonSelected:hover {
	background-image: linear-gradient(to bottom, #f8c161, #D14D0A) !important;
	font-weight: bold;
}
.emboxSortesButtonSelected {
	color: #051400 !important;
	background-image: linear-gradient(to bottom, #8fdf0f, #3ca02f) !important;
}
.emboxSortesButtonSelected:after {
	background: linear-gradient(rgba(215, 236, 206, 0.26),rgba(176, 228, 134, 0.096));
}



/* Seedbase */

.understock {
	color: rgba(207, 0, 0, 0.6);
	text-shadow: 0 0.15em 0.15em var(--main-bg-color), 0 0 0 #000, 0.15em 0.15em var(--main-bg-color);
}
.overstock {
	color: rgb(10, 121, 0);
	text-shadow: 0 0.02em 0.01em #000d, 0 0.07em 0.04em #0005;

}
.underbuffer, .overbuffer {
	font-family: monospace;
	font-weight: 900;
}
.underbuffer {
	color: rgb(235, 34, 34);
}
.overbuffer {
	color: rgb(13, 151, 0);
}
.earmarkQ, a.earmarkQ {
	/* color: rgb(70, 46, 141); */
	/* color: rgb(57, 18, 121);
	background: -webkit-linear-gradient(rgb(87, 41, 161), rgb(107, 0, 139), rgb(10, 27, 255), rgb(72, 0, 187));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; */
	color: transparent;
	/* text-shadow: 0px 4px 4px #fff, 0 0 0 #000, 0px 4px 4px #fff;
	text-shadow: 0px 4px 4px #fff, 0 0 0 rgb(44, 0, 114);
	text-shadow: 0 0.25em 0.25em #fff, 0 0 0 rgb(44, 0, 114); */
	text-shadow: 0 0.15em 0.15em var(--main-bg-color), 0 0 0 rgb(44, 0, 114);
}
a.earmarkQ {
	display: inline-block;
	min-width:4em;
}
.earmarkDesc, a.earmarkDesc {
	font-weight:bold;
	font-family: var(--kooky-font);
}

.batchCurrent {
	color: rgb(80, 0, 126);
	font-weight: bold;
	background: rgb(200, 255, 0);
	font-variant: small-caps;
	padding: 0 0.5em;
	border-radius: 1em;
}

.nurPlantDate,a.nurPlantDate,td > a.nurPlantDate {
	color: rgb(41, 128, 0);
	color: rgb(108, 143, 51);
	font-style: italic;
}

.si_nurTaxon {
	color: rgb(5, 14, 0);
	background: radial-gradient(circle at 50% 32%, rgb(5, 92, 49), rgb(9, 182, 67), black, rgb(8, 59, 29), black, rgb(110, 0, 0), rgb(209, 0, 0), rgb(12, 87, 83));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.si_nurSeedLot {
	color: olive;
	background: -webkit-linear-gradient(rgb(201, 201, 4), rgb(104, 104, 0), rgb(59, 59, 0), rgb(27, 18, 0));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.si_nurPotSize {
	color: rgb(66, 54, 21);
	background: -webkit-linear-gradient(rgb(184, 71, 19),rgb(66, 54, 21), rgb(128, 76, 10), rgb(37, 21, 2));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.si_nurCollZone {
	color: #14a859;
	background: 
		radial-gradient(circle at 23% 31%, rgb(255, 107, 62) 2%, rgb(255, 249, 162) 10%, rgba(255,255,255,0) 13%), /* yellow sun */
		-webkit-linear-gradient(270deg, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 1) 90%), /* lower white edge */
		-webkit-linear-gradient(216deg, white 5%, rgb(114, 183, 248) 14%, rgba(255,255,255,0) 28%), /* upper-right sky */
		-webkit-linear-gradient(11deg, white 4%, rgb(111, 250, 255) 9%, rgba(255,255,255,0) 19%), /* left sky */
		-webkit-linear-gradient(290deg, white, rgb(224, 250, 255), rgb(111, 250, 255), rgb(126, 178, 255), rgb(104, 47, 20), rgb(97, 153, 6), rgb(0, 194, 81), rgb(182, 218, 24), rgb(72, 156, 235), rgb(150, 90, 0));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.si_invPlace {
	color: #789523;
	background: -webkit-linear-gradient(0deg, #789523, rgb(128, 76, 10), #333f0e, rgb(128, 76, 10), #789523);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.si_nurBatch {
	color: rgb(6, 139, 6);
	background: -webkit-linear-gradient(334deg, rgb(7, 102, 7), rgb(41, 105, 11), rgb(87, 180, 10), rgb(71, 70, 5), green, rgb(13, 129, 13), rgb(18, 231, 18));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.si_nurProject {
	color: rgb(94, 94, 44);
	background: -webkit-linear-gradient(black, rgb(49, 18, 0), rgb(94, 94, 44), rgb(51, 122, 10), rgb(31, 16, 2), rgb(167, 100, 46));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.si_nurProjectDeliveryTarget {
	color: rgb(94, 94, 44);
	background: -webkit-linear-gradient(rgb(27, 60, 207), rgb(49, 18, 0), rgb(94, 94, 44), rgb(51, 122, 10), rgb(31, 16, 2), rgb(104, 90, 79));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.si_crmHome_home {
	color: rgb(9, 97, 16);
	background: -webkit-linear-gradient(rgb(85, 218, 8), rgb(13, 160, 20), rgb(14, 100, 86), rgb(54, 54, 6), rgb(7, 34, 75), rgb(26, 10, 44));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.si_crmHome_vcard {
	color: rgb(200, 247, 126);
}
.si_sbHome_home {
	color: rgb(54, 24, 139);
	background: -webkit-linear-gradient(rgb(85, 218, 8), rgb(13, 160, 20), rgb(36, 12, 126), rgb(4, 59, 104), rgb(4, 69, 107), rgb(35, 7, 66));
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.si_sbHome_leaf {
	color: rgb(200, 247, 126);
	transform: rotate(-17deg) scaleX(-1);
	font-size:44%;
	bottom:18%;
}



.ipLogicMapCellOutside, .ipLogicMapCell {
	color: rgba(99, 57, 3, 0.884);
	padding: 0.2rem;
	text-decoration: none;
}
.ipLogicMapCell {
	min-width: 2rem;
	min-height: 2rem;
	border: 1px dotted rgb(167, 130, 83);
	background: rgba(210, 180, 140, 0.212);
	margin: 1rem;
	flex: auto;
	display: flex;
	flex-wrap: wrap;
}


.mapLabel {
	background-color: #4285F4;
	border-radius: 8px;
	color: #FFFFFF;
	font-size: 14px;
	padding: 10px 15px;
	position: relative;
}
.mapLabel::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translate(-50%, 0);
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid #4285F4;
}




/* Procedures */




#procedureGraph {
	position: relative;
}
#procedureGraphControlPanel {
	position: absolute;
	top: 0;
	left: 0;
}

.qtip-default button, #procedureGraph button {
	background: #50b9fa;
	background-image: -webkit-linear-gradient(top, #50b9fa, #2074a8);
	background-image: -moz-linear-gradient(top, #50b9fa, #2074a8);
	background-image: -ms-linear-gradient(top, #50b9fa, #2074a8);
	background-image: -o-linear-gradient(top, #50b9fa, #2074a8);
	background-image: linear-gradient(to bottom, #50b9fa, #2074a8);
	-webkit-border-radius: 9;
	-moz-border-radius: 9;
	border-radius: 9px;
	-webkit-box-shadow: 0px 1px 3px #666666;
	-moz-box-shadow: 0px 1px 3px #666666;
	box-shadow: 0px 1px 3px #666666;
	font-family: Arial;
	color: #ffffff;
	font-size: 1.1rem;
	padding: 6px 12px;
	margin: 4px;
	border: none;
}
.qtip-default button:hover, #procedureGraph button:hover {
	background: #63b563;
	background-image: -webkit-linear-gradient(top, #63b563, #118021);
	background-image: -moz-linear-gradient(top, #63b563, #118021);
	background-image: -ms-linear-gradient(top, #63b563, #118021);
	background-image: -o-linear-gradient(top, #63b563, #118021);
	background-image: linear-gradient(to bottom, #63b563, #118021);
	text-decoration: none;
}
#procedureGraphControlPanel > .cancelModificationButton {
	position: fixed;
	top: 1rem;
	margin: 0;
	background-image: linear-gradient(to bottom, #ff1111, #aa0000);
}
#procedureGraphControlPanel > .cancelModificationButton:hover {
	background-image: linear-gradient(to bottom, #cc0000, #770000);
}
#procedureGraphControlPanel > .addUnlinkedStepButton {
	font-size: 1rem;
	color: white;
	text-shadow: 1px 1px 5px black;
}
#procedureGraphControlPanel > .addUnlinkedStepButton:hover {
	color: #63b563;
	text-shadow: 0 0 3px black;
}
.edgeQtip button {
	font-size: 0.9rem;
}
.qtip-titlebar button {
	font-size: 0.85rem;
	margin: 0 1rem 0 0.5rem;
	padding: 4px 7px;
}
#newStepFieldset {
	margin: 0 -0.8rem;
	/*
	box-shadow: inset -3px -3px 10px #aabbaa;
	background: #eeffee;
	*/
	border-color: #eee;
}
#newStepFieldset button {
	font-size: 0.8rem;
	height: 2.1rem;
	overflow: hidden;
	text-align: center;
}
/*
.qtip-default { border: none !important; box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15) !important; }
.edgeQtip .qtip-content {
	background-color: #aaccff;
	border: 1px solid #88aaff;
}
.edgeQtip .qtip-title {
	background-color: #aaccff;
}
.activityQtip .qtip-content {
	background-color: #ffffcc;
	border: 1px solid #ddddaa;
}
*/

.edgeLabel {
	background: none !important;
}
.edgeLabel > span {
	padding: 1rem;
	cursor: pointer;
}
.mermaidEdgeNoLabel {
	background: hsla(200,20%,50%,0.05);
	color: hsla(200,20%,50%,0.15);
	border-radius: 11rem;
}
.mermaidEdgeLabel > span {
	background: hsla(200,50%,95%,0.8);
	color: hsla(200,20%,25%,1);
	border-radius: 1rem;
}
.mermaidNodeLabel {
	padding: 1rem;
	margin: -1rem;
	cursor: pointer;
}
.mermaidNodeEdgeTargetSource {
	border: 2px dashed black;
	border-radius: 3rem;
}
.mermaidNodeEdgeTarget {
	background: hsla(200,70%,50%,0.2);
	border: 2px solid hsla(200,70%,50%,0.8);
	border-radius: 3rem;
}

.fa-rotate-45 {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
.fa-shrinkmargin {
	margin:-6px 0 -6px -8px;
}
.symwidth {
	display: inline-block;
	width: 1em;
}


.lastReviewSmall {
	font-size:1rem;
}
.revAge0, .revAge1, .revAge2, .revAge3 {
	font-size:88%;
	transform: rotate(8deg);
}
.fa-check-circle.revAge0:after, .fa-check-circle.revAge1:after, .fa-check-circle.revAge2:after, .fa-check-circle.revAge3:after {
	display: block;
	content: "";
	position: absolute;
	background-color: #381c1c;
	background-color: rgb(255, 215, 103);
	background-color: rgb(255, 213, 220);
	background-color: rgb(233, 255, 182);
	background: radial-gradient(rgb(233, 255, 182),rgb(255, 136, 100));
	height: 70%;
	left: 15%;
	width: 70%;
	top: 15%;
	border-radius: 2em;
	z-index: -1;
}
.revAge0 {
	color:green;
	opacity: 0.9;
}
.revAge1 {
	color:olive;
	opacity: 0.8;
	filter: saturate(80%);
}
.revAge2 {
	opacity: 0.5;
	color:brown;
	filter: saturate(50%);
}
.revAge3 {
	opacity: 0.8;
	filter: saturate(10%);
	color: black;
}
.reviewedFire {
	text-shadow: 0 1px 1px #2e1c2e;
	animation: firecolorcycle 5s ease infinite;
}
@keyframes firecolorcycle {
	0%   {color:red;}
	40%   {color:red;}
	60% {color:orange;}
	65% {color:yellow;}
	70% {color:orange;}
	100% {color:red;}
}


.circleCount {
	display: inline-block;
	background: white;
	min-width: 1em;
	border-radius: 2em;
	padding: 0.2em;
	margin-left: 0.3em;
	color: black;
}


label.ui-checkboxradio-checked, .lightOrangeButton {
	background-image: linear-gradient(to bottom, #176CFF, #0956DB) !important;
	text-shadow: 1px 1px 3px #2e1c2e;
	box-shadow: 0px 1px 3px #666666;
	color: #ffffff !important;
	position: relative;
}
.lightOrangeButton {
	border-radius: 3px;
	padding: 3px;
	border: none;
}
label.ui-checkboxradio-checked:after, .lightOrangeButton:after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}
.toggleFieldset label.ui-checkboxradio-checked, .lightOrangeButton {
	background-image: linear-gradient(to bottom, #DE9518, #ED9E6D) !important;
	font-weight: bold;
	color: #FFDFB5 !important;
	text-shadow: 0 0 2px #2e1c2e;
}
.toggleFieldset label.ui-checkboxradio-checked:hover, .lightOrangeButton:hover {
	background-image: linear-gradient(to bottom, #DE9B43, #D14D0A) !important;
	font-weight: bold;
}




.redButton {
	background: #ff3636;
	background-image: linear-gradient(to bottom, #ff3636, #cf0000);
	border-radius: 28px;
	text-shadow: 1px 1px 3px #2e1c2e;
	box-shadow: 0px 1px 3px #666666;
	color: #ffffff;
	font-size: 20px;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
	border: none;
}
.redButton:hover {
	background: #ff7070;
	background-image: linear-gradient(to bottom, #ff7070, #ff0000);
	text-decoration: none;
}




.disabledButton {
	background: #a8a8a8;
	background-image: linear-gradient(to bottom, #929292, #4e4e4e);
	border-radius: 28px;
	text-shadow: 1px 1px 3px #2e1c2e;
	box-shadow: 0px 1px 3px #666666;
	color: #ffffff;
	font-size: 20px;
	padding: 10px 20px 10px 20px;
	text-decoration: none;
	border: none;
}




.orangeButton { /* opportunity stage */
	background: #ff8400;
	background-image: linear-gradient(to bottom, #ff8400, #ff5900);
	border-radius: 9px;
	text-shadow: 1px 1px 3px #d44700;
	box-shadow: 0px 1px 3px #943b00;
	color: #fad35c;
	color: #FFF017;
	font-size: 18px;
	padding: 5px 5px 5px 5px;
	text-decoration: none;
	border: none;
}

.orangeButton:hover {
	background: #ffbf00;
	background-image: linear-gradient(to bottom, #ffbf00, #ff8c00);
	text-decoration: none;
}



.tawnyButton { /* task actor stage */
	background: #ff840088;
	background-image: linear-gradient(to bottom, #ff840088, #ff590088);
	border-radius: 6px;
	text-shadow: 1px 1px 3px #d4470088;
	box-shadow: 0px 1px 3px #943b0088;
	color: #430721;
	font-size: 15px;
	font-weight: bold;
	padding: 3px;
	text-decoration: none;
	border: none;
}

.tawnyButton:hover {
	background: #ffbf00;
	background-image: linear-gradient(to bottom, #ffbf00, #ff8c00);
	color: black;
	text-decoration: none;
}




.greenGlassButton {
	position: relative;
	display: inline-block;
	background-image: linear-gradient(green,lightgreen);
	border: 0;
	padding: 3px 5px;
	border-radius: 3px;
	box-shadow: 0px 1px 4px -2px #333;
	color: white;
	text-shadow: 0 0 2px black, 0 0 4px black;
}
.greenGlassButton:after {
	content: "";
	position: absolute;
	/* z-index: 1; */
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}
.greenGlassButton:hover {
	background: linear-gradient(darkgreen,green);
}




.infoGlassButton {
	position: relative;
	display: inline-block;
	background-image: linear-gradient(rgb(7, 145, 110),rgb(107, 218, 218));
	border: 0;
	padding: 0.2rem 0.5rem;
	border-radius: 0.5rem;
	box-shadow: 0px 1px 4px -2px rgb(49, 49, 43);
	color: rgb(238, 252, 255);
	font-size:1.1rem;
	font-weight:bold;
	text-shadow: 0 0 2px rgb(16, 87, 63), 0 0 4px rgb(16, 87, 63);
}
.greenGlassButton:after {
	content: "";
	position: absolute;
	/* z-index: 1; */
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(209, 255, 229, 0.8), rgba(255,255,255,0.2));
}
.greenGlassButton:hover {
	background: linear-gradient(rgb(0, 100, 42),rgb(0, 128, 58));
}






.deleteButton {
	position: relative;
	display: inline-block;
	background-image: linear-gradient(red,lightcoral);
	border: 0;
	padding: 3px 5px;
	border-radius: 3px;
	box-shadow: 0px 1px 4px -2px #333;
	color: white;
	text-shadow: 0 0 1px black, 0 0 2px black;
}
.deleteButton:after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}
.deleteButton:before {
	content: "🗑 ";
}
.deleteButton:hover {
	background: linear-gradient(black,red);
}




.privateButton, .privateAddressSign {
	position: relative;
	display: inline-block;
	background-image: linear-gradient(rgb(4, 27, 61),rgb(8, 92, 117));
	border: 0;
	padding: 3px 5px;
	border-radius: 3px;
	box-shadow: 0px 1px 4px -2px #333;
	color: white;
	text-shadow: 0 0 1px black, 0 0 2px black;
}
.privateButton:after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}
.privateButton:before {
	content: "🙈 ";
}
.privateButton:hover {
	background: linear-gradient(black,rgb(42, 74, 255));
}
.privateAddressSign {
	font-weight:bold;
	border: 2px dotted white;
}




.cancelButton, .grayButton {
	position: relative;
	display: inline-block;
	background-image: linear-gradient(#999,#ccc);
	border: 0;
	padding: 3px 5px;
	border-radius: 3px;
	box-shadow: 0px 1px 4px -2px #333;
	color: black;
	text-shadow: 0 -1px 1px white, 0 1px 2px white;
}
.cancelButton:after, .grayButton:after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 2px;
	left: 2px;
	width: calc(100% - 4px);
	height: 50%;
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}
.cancelButton:before {
	content: "⊗ ";
}
.cancelButton:hover, .grayButton:hover {
	background: linear-gradient(black,white);
}




.miniFunnel p {
	position:relative;
	padding:1em;
}
table.miniFunnel { border-spacing: 0; overflow: hidden; }
.miniFunnel td { position:relative; overflow: hidden; vertical-align: bottom; }
/* .miniFunnel tbody tr { } */
.miniFunnel td.summf {
	background: radial-gradient(ellipse at center, rgba(232,249,255,1) 0%,rgba(237,250,255,1) 31%,rgba(255,255,255,0) 100%);
	color: hsl(196,100%,40%);
}
.miniFunnel td:hover {
	box-shadow:inset 0 0 10px rgba(0,0,0,0.5);
	cursor: pointer;
	border-radius: 1em 1em 0 0;
}
.miniFunnelBar {
	bottom: -14%;
	width:90%;position:absolute;left:5%; border-radius: 10px 10px 0 0; z-index: -1;
	box-shadow: 0 0 5px #aaa, inset 0 0 9px rgba(255,255,255,1);
	transition: all 0.6s ease;
}
.miniFunnelBar:after {
	content: "";
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
	background-image: linear-gradient(
		45deg, 
		rgba(255, 255, 255, .14) 25%, 
		transparent 25%, 
		transparent 50%, 
		rgba(255, 255, 255, .14) 50%, 
		rgba(255, 255, 255, .14) 75%, 
		transparent 75%, 
		transparent
	);
	z-index: 1;
	background-size: 30px 30px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	overflow: hidden;
	transition: all 1s ease;
}
.miniFunnelBar0 { background: #CDF788; }
.miniFunnelBar1 { background: #B2ED72; }
.miniFunnelBar2 { background: #8AD439; }
.miniFunnel td:hover .miniFunnelBar {
	width:80%; left:10%; bottom: -2%;
	border-top-left-radius: 50px 30px;
	border-top-right-radius: 50px 30px;
}
.miniFunnel td:hover .miniFunnelBar:after {
	animation: barberpole 4s linear infinite;
}
@keyframes barberpole {
	100% {
		background-position: 30px -30px;
	}
}
td.miniFunnelHeader {
	letter-spacing: 0px;
	padding-left: 1em;
	border-radius: 1em 1em 0 0;
	transition: all 1s ease;
	overflow: visible;
}
td.miniFunnelHeader:hover {
	padding-left: 0;
	letter-spacing: 2.5px;
	color: hsla(196, 100%, 45%, 1);
	box-shadow: none;
}
.miniFunnelHeader:after { /* funnel sun */
	content: "";
	position: absolute;
	top: 10rem; left: 40%;
	width: 60px; height: 60px;
	border-radius: 30px;
	z-index: -2;
	background-image: radial-gradient(circle 57px at 49% 49%, #ffd, #ff7, red);
	opacity: 0;
	transition: all 3s ease;
}
.miniFunnelHeader:hover:after {
	top: 10px;
	opacity: 0.9;
}
.miniFunnelHeader:before { /* funnel sky */
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 10rem;
	border-radius: 30px;
	z-index: -2;
	opacity: 0;
	transition: all 1s ease;
}
.miniFunnelHeader:hover:before {
	background: radial-gradient(ellipse at center, rgba(232,249,255,1) 0%,rgba(237,250,255,1) 31%,rgba(255,255,255,0) 100%);
	box-shadow:inset 0 0 15px rgba(232,249,255,1);
	opacity: 1;
}

.ui-datepicker-week-end { opacity: 0.5; }
.ui-datepicker-today > a.ui-state-highlight {
	background: linear-gradient(to bottom, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%);
}
.ui-datepicker-current-day > a.ui-state-active {
	background: linear-gradient(to bottom, #b4e391 0%,#61c419 50%,#b4e391 100%);
	font-weight: bold;
	color: #376D0E;
	text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white;
}
/* .ui-datepicker-week-end a.ui-state-default { background:linear-gradient(#fff,#eee); } */

.selectionTitle { position: absolute; top:0; right:0; margin: 0.3em; }

#rpagfoot { display: none; }


/* reports */
.calreportTable { border-spacing: 1rem 0.1rem; border-collapse: separate; }
.calreportTable td { min-width: 3rem; padding-bottom: 1rem; }
.calreportTable th { border-top: 1px solid #353; margin-top: 0.5rem; }

#ticketflowReportTable td { padding:0; }
#ticketflowReportTable td a  { display:block; height: 100%; width: 100%; text-align: center; padding: 8px 0; }
#ticketflowReportTable td a:not(.contactLink)  { text-decoration:none; }
#ticketflowReportTable td a:hover { background:#9ACEEB; }
#ticketflowReportTable td a:not(.contactLink) > i { color:rgb(180, 219, 235); }
#ticketflowReportTable a.tfrtRReady { background-color:lightyellow; }
#ticketflowReportTable a.tfrtRReview { background-color:lightyellow; }
#ticketflowReportTable a.tfrtAReady { background-color:#f5fdd2; }
#ticketflowReportTable a.tfrtAConfused { background-color:#fdf1ff; }
#ticketflowReportTable a.tfrtAStaged { background-color:#ffffe2; }
#ticketflowReportTable a.tfrtAWIP { background-color:#fdf8e9; }
/* #ticketflowReportTable tr.tfrtMyRow {  } */
#ticketflowReportTable tr.tfrtMyRow td  { background-color: rgba(140,200,250,.1); background-blend-mode: multiply; }
#ticketflowReportTable tr.tfrtMyRow a.contactLink { background:#e9f5f0; }
#ticketflowReportTable td a.contactLink:hover { background:#aaddc8; }
td.tcktflowCurCell a { background:white; box-shadow: 0 0 4px 2px rgb(55, 2, 77) inset; border-radius:4px; }

div.dt-button-collection button.dt-button.active:not(.disabled) { background:linear-gradient(to bottom, #e0f0e0 0%, #cadaca 100%); }
div.dt-button-collection button.dt-button:not(.active) { background:linear-gradient(to bottom, #f0e9e9 0%, #dad2d2 100%); color:#00000088; }






/* Tasks */

#myTaskCount { color: #99cc99; }
#myTaskCount a { text-decoration: none; }
.mytask, .reqtask { padding: 0 0.7em; font-weight: bold; }
.mytask { background:#bfefb0; color:#228833; padding-left: 0; border-radius: 0 0.5em 0.5em 0; }
.mytask > i { color: #005511; }
.reqtask { background:#cae9aa; color:#227744; border-radius: 0.5em; }

#myUnsMailCount { margin-left:0.2em; }
#myUnsMailCount a { text-decoration: none; }
.unsEmCount { font-weight: bold; background:#d3aa8599; color:#552900; border-radius: 0 0.5em 0.5em 0; padding-right: 0.5em; }
.unsEmCount > i { color: #86490f; }





/* Weeksheets */

#tsEdit { font-size:1.8rem; }
#tsEdit input, #tsEdit button { font-size:1.4rem; }
#tsEdit input { max-width:80%; }
#tsEdit h2 { font-size: 115%; margin: 0.2em; }
#tsEdit h3 { font-size: 105%; }
.incomplete { border: 5px dashed #ffc0cb; background: #ffeeee; border-radius: 0.7em; margin: 0.2em; padding: 0.5em; }
.incomplete h3 { color: #ff768e; margin:0; }
.tsRequiredNote { border: 5px solid rgb(255, 0, 64); }
#wsSearchOutput { background: #00000011; border-radius: 0.7em; border: 1px solid #00000022; }
#wsSearchOutput:empty { border:none; }
.tsChange { border: 5px dashed #EAC117; background: #FFE5B4; border-radius: 0.7em; margin: 0.2em; padding: 0.5em; position: relative; }
.tsChange h3 { color: #CD7F32; margin:0; }
.tsChange > textarea { font-size: 1.6rem; color: #CD7F32; }
.underEdit { border: 5px dashed #C6DEFF; background: none; border-radius: 0.7em; }
.floatSection { float:left; margin: 0.5em 1em 0 0; }

.tsHourButton,.tsJobButton,.tsJobButtonMeta,.tsServiceButton,.tsPayrollItemButton,.tsPayrollItemButtonMeta,.tsHourCell,.tsJobCell,.tsServiceCell,.tsPayrollItemCell,.tsDivisionCell,.tsEditCell { background: #eeffee; font-weight:bold; margin: 0.2em; padding: 0.6em 0.4em; color: green; border-radius:0; }
.tsHourButton:hover,.tsHourCell:hover { background: #c7f0bd; }
.tsHourButtonContainer { float:left; }
.tsHourButton { text-align:center;  background: #ddffdd; border: 5px solid green; border-radius: 0.5em; }
.tsHourButton.tsHourPlusButton { border: 2px solid #ddffdd; border-width: 0 2px 2px 2px; color:#ddffdd; background:green; border-radius:0.3em; margin:-0.7em 1em 0 1em; padding:0.1em; float:right; }
.tsHourButton.tsHourPlusButton:hover { background:#ddffdd; color:green;border-color:green;}
.tsHourButtonZero { background-color:transparent; border-color:#00800080; color:#008000a0; }
.tsHourButtonZero:hover {opacity:0;}
.tsHourButtonMore { background-color:transparent; border-color:#00800090; color:#008000a0; }
.tsHourButtonTextOnly, .tsHourButtonTextOnly:hover { background-color:transparent; border-color:#ffffff00; }
.tsHourSum { color:rgb(86, 160, 86); }
.tsJobButton,.tsJobCell { color:#393b08; background:#EAED75; }
.tsJobButton { border: 5px solid #C68E17; float:left; border-radius: 0.5em; }
.tsJobButton:hover,.tsJobCell:hover,.tsJobButtonMeta:hover { background:#FFF8DC; }
.tsJobButtonMeta { float:left; background:#FFE5B4; color:#C68E17; border: 5px double #C68E17; border-radius: 0.3em; }
.tsJobCell { padding: 0.6em 0; }
td.wsGridNewEntryCell { cursor:copy; }
td.wsGridNewEntryCell:hover { box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.2); }
.gridEditSelected { box-shadow:inset 0px 0px 3px 3px rgb(4, 148, 40); }

.tsClockinTitle { font-weight:bold; font-size:1.7rem; color: hsl(93, 51%, 12%); margin-bottom:0.3em; }
.tsClockinTitle:not(:first-child) { margin-top:0.2em; }
.tsClockinPeriod, .tsClockinPeriodLeft, .tsClockinPeriodMiddle, .tsClockinPeriodRight, .tsClockinPeriodText { background: hsl(93, 48%, 94%); font-weight:bold; margin: 0 0.2em 0.2em 0; padding: 0.4em 0.3em; color: hsl(93, 58%, 24%); border-radius: 50% / 16%; text-align:center; min-height:1.2em; font-size:1.4rem; } /* font-size:84%; */
@media (max-width: 400px) {
	.tsClockinPeriod, .tsClockinPeriodLeft, .tsClockinPeriodMiddle, .tsClockinPeriodRight, .tsClockinPeriodText { font-size:1rem; }
}
span.tsClockinPeriod { display:inline-block; margin-bottom:0; }
.tsClockinPeriodLeft, .tsClockinPeriodRight { background: hsl(93, 53%, 89%); margin: 0 0.2em 0.2em 0; padding: 0.4em 0.4em; border-radius: 80% / 26%; }
.tsClockinPeriodLeft { margin-right:0; padding-right:0.1em; }
.tsClockinPeriodRight { margin-left:0; padding-left:0.1em; }
.tsClockinPeriodMiddle { padding-right:0.2em; padding-left:0.2em; background: hsl(93, 44%, 97%); color:hsla(93, 55%, 43%,0.7); border-radius:0; margin:0; box-shadow:inset 7px 0 5px -6px hsl(93, 53%, 89%),inset -7px 0 5px -6px hsl(93, 53%, 89%); }
.tsClockinPeriodText { background:none; }
.tsClockinButton { border: 2px solid hsl(93, 58%, 24%); padding-left:0.4em; padding-right:0.4em; margin:0.3em; margin-left:0;; }
.tsClockinButtonStub { position:relative; border-left:none; }
.tsClockinButtonStub.tsClockinPeriodLeft { border-radius:0; }
.tsClockinButtonStub.tsClockinPeriodRight { border-top-right-radius:100% 26%; border-bottom-right-radius:100% 26%; }
.tsClockinButtonStub::after { content: ""; position:absolute;left:-2px;top:-2px;bottom:-2px;width:0.7em; background: linear-gradient(to right, hsla(93, 0%, 100%,1), hsla(93, 0%, 100%,0) ); }
.tsClockinButtonStub.tsSuggestedButton { box-shadow:none;}
.tsClockinPeriodLeft { border-top-right-radius:0; border-bottom-right-radius:0; }
.tsClockinPeriodRight { border-top-left-radius:0; border-bottom-left-radius:0; }

.tsSuggestedButton { background:linear-gradient(53deg, #f3e462, #FCF6BA); box-shadow: 0 0 5px rgba(48, 82, 44, 0.863); }
.tsSuggestedButton:hover { background:linear-gradient(53deg, #f7ea7d, #fcf9e1); border-color:rgb(115, 128, 61); }

.tsViewWSButton { background:linear-gradient(53deg, #f3e462, #FCF6BA); box-shadow: 0 0 5px rgba(48, 82, 44, 0.863); }
.tsViewWSButton:hover { background:linear-gradient(53deg, #f7ea7d, #fcf9e1); border-color:rgb(115, 128, 61); }
.tsNonViewWSButton { background:linear-gradient(53deg, #f5f1cd, #fcfbf0); box-shadow: 0 0 5px rgba(57, 80, 54, 0.863); }
.tsNonViewWSButton:hover { background:linear-gradient(53deg, #fffbdf, #ffffff); border-color:rgb(111, 119, 81); }
.tsViewArchivedWarning { background:white; border-radius:1rem; padding:0.1em 0.5em; font-size:1.7rem; margin: 0 auto 0.4rem auto; width:auto; display:inline-block; }
@media (max-width: 800px) {
	.tsViewWSButton, .tsNonViewWSButton { padding:0.5rem; margin-top:0.7rem; } /* easier to tap on mobile */
}
@media not print {
	.viewingOlderSheet { background:rgb(240, 196, 115); }
	.viewingOlderSheet .ui-widget-content { opacity: 0.95; }
}

#clockInOutModalContainer table { border-spacing: 0px; border-collapse:collapse; border-width:0; }
#clockInOutModalContainer td { padding:0; }

.tsServiceButton,.tsServiceCell { color:#754600; background:#FFEBCD; }
.tsServiceButton { border: 5px solid #493D26; float:left; border-radius: 0.5em; }
.tsServiceButton:hover,.tsServiceCell:hover { background:#F3E5AB; }
.tsServiceCell { padding: 0.6em 0; }
.tsServicePTOCell { color:#9b7946; background:#ffebcd98; border-color:#493d2673; }

.tsPayrollItemButton,.tsPayrollItemCell,.tsPayrollItemButtonMeta { color:#265b6b; background:#d0ebf3; }
.tsPayrollItemButton,.tsPayrollItemButtonMeta { border: 5px solid #218aaa; float:left; border-radius: 0.5em; }
.tsPayrollItemButtonMeta { border-style: double; background:#d0ebf344; border-radius: 0.3em; }
.tsPayrollItemButton:hover,.tsPayrollItemCell:hover,.tsPayrollItemButtonMeta:hover { background:#b4dbe7; }

.tsDivisionCell { color:#7654a1; background-color:#f6efff; cursor:pointer; opacity:0.7; }
.tsOverridDivision { border:2px solid #6c29c4; color:#6c29c4; opacity:1; }

.addentrybutton, .tsAddEntryButtonLong { color: rgb(175, 180, 180); }
.tsAddEntryButtonLong { font-size:90%; font-weight:bold; padding:0.2em 0 0 0; }

.addNOentrybutton { display: none; }
.tsCancelEntryButton { font-size:2rem; font-weight:bold; border-radius:3rem; padding:0.2rem 0.9rem; border: red; color: red; background: pink; margin:5px auto;display:block; } /* box-shadow: inset red -4px -4px 8px; */
.wsNextButton { margin:0 auto;display:block; font-size:1.5rem; font-weight:bold; background:rgb(31, 150, 230);color:white;padding:0.4em 1em; border:2px solid rgba(13, 135, 216, 0.685); border-radius:2em; cursor:pointer; }

.tsEditCell { background:none;color:#444;padding:0.6em 0.2em; }

.tsXButton { border: 5px solid gray; background: white; color:gray; padding:0.2rem; position:absolute;right:-0.2rem;top:-0.2rem;border-radius:0.5em; }

table.tsOTtab { border-spacing: 0.2rem 0.4rem; page-break-inside: avoid; }
.tsOTtab th { text-align:right; }
.tsOTtab td { min-width:3rem; text-align:right; }
.tsOTtab td:not(:empty) { background:rgb(243, 247, 245); box-shadow: inset #00293a 0 0 4px -2px; padding: 0.1em 0.3em; }
.tsOTinp { text-align:right; }

table.gridTable { border-collapse:collapse; background:#eee; color:#111; }
.gridTable td, .gridTable th { border: 1px solid gray; padding:2px; font-size:92%; }

.tsErroneous { color:red; border:2px solid red; }
.tsErroneousPI { color:#0d00ca; border:2px solid #0d00ca; }

.blockyTable { border-spacing: 1rem 1rem; border-collapse: separate; }
.blockyTable td, .blockyTable th { padding:05rem; background:rgb(217, 235, 211); }

.breaksContainer {
	margin-top:2rem;
}
.breaksContainer input[type=checkbox] {
	position:relative;
	width:1em;
	height:1em;
	font-size:1em;
	margin-right:0.8em;
}

.noBreaksCheckContainer input { min-width: 80%; }
.missedBreaksExplanationContainer { font-size:85%; padding:0.5em 1em 0 0.5em; }
.missedBreaksExplanationContainerTitle { border-bottom:1px solid black; height:100%; display:inline-block; }
.missedBreaksExplanationBody { border-left:1px dotted black; margin-left:6px;padding-left:6px; }
.missedBreaksExplanationSubsectionTitle { opacity: 0.5; font-size:82%; font-style:italic; }

.reviewClockT { font-size:1.3rem; margin:0.4rem; cursor:pointer; }

.missingName {
	background-color: #ffffff00;
	animation-name: missingNameAnim;
	animation-duration: 6s;
	animation-iteration-count: infinite;
	border-radius:0.5em;
	background-color: #ff47ac;
	box-shadow: inset #ffffff 0 0 5px 5px;
}
@keyframes missingNameAnim {
	from {
		box-shadow: inset #ffffff 0 0 5px 5px;
		animation-timing-function: ease-out;
	}
	40% {
		box-shadow: inset #ffffff 0 0 15px 15px;
		animation-timing-function: ease-in;
	}
	80% {
		box-shadow: inset #ffffff 0 0 5px 5px;
		animation-timing-function: ease-out;
	}
	90% {
		box-shadow: inset #ffffff 0 0 15px 15px;
		animation-timing-function: ease-in;
	}
	to {
		box-shadow: inset #ffffff 0 0 5px 5px;
	}
}

.rattle { animation: rattleAnim 0.08s infinite alternate; }
@keyframes rattleAnim {
	0% { transform: translateX(-2px); }
	25% { transform: translateY(-2px) rotate(-1deg); }
	50% { transform: translateX(1px); }
	75% { transform: translateY(1px); }
	100% { transform: translateY(-2px); }
}

.jitter { animation: jitterAnim 0.3747s infinite alternate; }
@keyframes jitterAnim {
	0% { transform: translateX(-1px); }
	10% { transform: translateX(1px); filter: blur(1px); }
	20% { transform: translateX(-1px); opacity:0.8; }
	30% { transform: translateX(1px); opacity:0.6; }
	40% { transform: translateX(-1px); }
	/* 90% { transform: translateX(2px); } */
	100% { transform: translateX(-1px); }
}

.tsLastEditedRow { position:relative; box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.5); }
.tsAlmostLastEditedRow { position:relative; box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.2); }
/*
.tsLastEditedRow > td { box-shadow: inset 0px -10px 10px -10px rgba(0,0,0,0.5), inset 0px 10px 10px -10px rgba(0,0,0,0.5); }
.tsAlmostLastEditedRow > td { box-shadow: inset 0px -10px 10px -10px rgba(0,0,0,0.2), inset 0px 10px 10px -10px rgba(0,0,0,0.2); }
*/

#tsEdit textarea { width: 95%; height: 6em; margin: 0.1em; border: 5px dashed #EDDA74; border-radius: 0.7em; }
.tsSaveNoteButton { border-radius:1em; font-weight:bold; padding:0.3em; border: 3px solid #ffc86156; color: #b9732d83; background: #ffc86156; width:auto; transition: width 1s; }
.tsChange > textarea:not(:placeholder-shown) + .tsSaveNoteButton { border-color: #17990b; color: #00a72a; background: #bef1bc; width:8em; height:auto; }
.tsChange > textarea::placeholder { color: #b9732d56; }
.tsNoteCell { margin: 0.2em; padding:0.2em; font-style:italic; }

.wsGridView td:hover:not([class]) { position:relative; box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.5); }
.wsGridView td:empty, .wsGridView th:empty { padding: 0; }
.wsGridView th { font-weight:normal; font-variant:small-caps; }
.wsGridView td:not(:empty) { padding: 0.2em; }
.wsGridViewRow td:nth-child(1):not([class]) { color:#754600; background-color:#ffebcd98; cursor:pointer; }
.wsGridViewRow td:nth-child(2):not([class]) { color:#393b08; background-color:#EAED75; cursor:pointer; }
.wsGridViewRow td:nth-child(2):empty:not([class]) { background-color:#e9ed75b6; cursor:pointer; }
.wsGridViewRow td:nth-child(3):not([class]) { background-color:#d0ebf3; cursor:pointer; }
.wsGridViewRow td:nth-child(4):not([class]) { color:#7654a1; background-color:#f6efff; cursor:pointer; }
.wsGridViewRow td:nth-child(n+5):nth-child(-n+11):not(:empty):not([class]) { background-color:#eeffee; color:green; text-align:right; cursor:pointer; }
.wsGridViewRow td:nth-child(n+5):nth-child(-n+11):empty { min-width:0.8em; }
.wsGridViewRow td:nth-child(10), .wsGridViewRow td:nth-child(11):not([class]) { background-color:rgb(249, 251, 252); }
.wsGridViewRow td:nth-child(10):not(:empty):not([class]), .wsGriwsGridViewRowdView td:nth-child(11):not(:empty) { background-color:rgba(220, 243, 230, 0.781) !important; }
.wsGridViewRow td:nth-child(12) { background-color:rgb(210, 220, 224);text-align:right; } /* summary column */
.wsGridViewTotalSummaryCol { background-color:rgb(235, 226, 218);text-align:right; } /* summary column */
table.wsGridView { overflow: hidden; z-index: 1; }
tr.wsGridViewRow:hover { box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.5); opacity:1; }
.wsGridView th, .wsGridView td { position:relative; z-index: 1; }
.wsGridView th:nth-child(n+5):nth-child(-n+11):hover::before, .wsGridView td:nth-child(n+5):nth-child(-n+11):hover::before {
	/* background-color: #c5e4a8; */
	box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.5);
	content: '\00a0';
	height: 10000px;
	position:absolute;
	bottom: 110%;
	left: 0;
	width: 3px;
	z-index: 0;
}
.wsGridView th:nth-child(n+5):nth-child(-n+11):hover::after, .wsGridView td:nth-child(n+5):nth-child(-n+11):hover::after {
	/* background-color: #c5e4a8; */
	box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.5);
	content: '\00a0';
	height: 10000px;
	position:absolute;
	bottom: 110%;
	right: 0;
	width: 3px;
	z-index: 0;
}
.wsGridView th:nth-child(n+5):nth-child(-n+11):hover::before, .wsGridView th:nth-child(n+5):nth-child(-n+11):hover::after {
	top: -5000px;
}

td.wsGridViewTotalCell, td.wsGridViewPerDiemCell { font-size:1.3rem !important; color:rgb(122, 92, 62) !important; }
td.wsGridViewTotalCell { text-align:right; }

.noteSummaryTable { font-size:80%; }
.noteSummaryTable td { padding-right:0.2em; }
.noteSummaryTable td:nth-child(1) { font-variant: small-caps;color:#654; }
.noteSummaryTable td:nth-child(2) { font-size:90%;color:#765; }
.noteSummaryTable td:nth-child(3) { font-style: italic; }

.wsSummarySection {
	position:relative;
	border-radius: 1rem 5rem 2rem 0;
	box-shadow: 0px 0px 18px 0px rgb(167, 130, 94);
	color: rgb(44, 35, 27);
	background-color: rgb(255, 251, 247);
	padding: 0.3rem 0 0 0;
}
@media (max-width: 800px) {
	.ui-tabs .ui-tabs-panel {
		padding: 1px;
	}
	.wsSummarySection {
		overflow-x:scroll;
		margin: 2px;
	}
}
@media (min-width: 800px) {
	.wsSummarySection {
		overflow:hidden;
		margin: 1rem 2rem 0.6rem 0.4rem;
	}
	.wsSummarySection:after {
		content: '✵'; /* ❂ ✵ ☸ ❁ */
		font-size:20rem;opacity:1;color:white;text-shadow:0 0 3px rgba(167, 131, 94, 0.308);
		position:absolute; right:-7rem;bottom:-9rem;
	}
}

@media (max-width: 900px) {
	.wsSummarySection { margin:0; border-radius:0 3rem 0 0; }
}
@media (max-width: 600px) {
	#tsEdit { font-size:1.2rem; }
	#tsEdit td.tsHourCell { text-align: center; }
}





/* Schedule */
.schedDayTitle {
	margin: 1.6em 0.1em 0.8em;
	text-shadow: 0 0 4px white, 0 0 6px white;
}
.schedDayTitle:after {
	content: "";
	background: radial-gradient(ellipse 50% 20% at 50% 50%, #bbb0d034, transparent);
	position: absolute;
	left: 0;
	margin: -0.1em 1em 0.1em 0;
	height: 1.4em;
	width: 35%;
	z-index: -1;
}
.schedEntry {
	margin: 0.3em;
	padding: 0.2em;
	border-radius: 0.2em;
	box-shadow: 0 1px 3px 0 #888888;
}







/* alternatives themes */
body.xanaduTheme { --main-bg-color:  #c7dac7; }
body.lavenderTheme { --main-bg-color: #e1d4ea; }
body.butterscotchTheme { --main-bg-color: #dcc0a4; }
body.periwinkleTheme { --main-bg-color:  #d3d4ec; }
body { background-color: var(--main-bg-color);}




/* PRINTING */
@media print {
	/* shrink font size when printing */
	html { font-size:13px; }

	#tabbuttons, .lightOrangeButton, .dataTables_filter, .dataTables_scrollHead, .spgoHelper, .dt-buttons {display: none;} /* #pagetitle, */
	.dataTables_scrollBody { max-height:none !important; }
	.dataTable > thead > tr > th > .dataTables_sizing { height:auto !important; }
	.dataTable tbody td { padding: 2px !important; }
	.faint, .logTime { opacity: 0.8; }
	.reviewedFire { animation: none; opacity: 1; }
	body { font-size: 60%; }
	@page { margin:9mm; padding:0; }
	.selectionTitle, #rpagfoot { display: block; position: relative; text-align: center; }
	#qrcode { margin: 0 0 0 auto; display: none; }
	#qrcode img { width: 15mm; }
	.printHide { display:none; }
	.printShow { display:unset !important; }

	/* Weeksheets */
	.wsSummarySection { overflow:visible; }
	.wsGridView td { border: 1px dotted lightgray; border-spacing: 0px; border-collapse:collapse; border-width: 1px 0 0 1px;  }
	.wsGridView td:nth-child(11) { border-right: 1px solid gray; }
	.wsSummarySection { all:unset; }
}
.printShow { display:none; }