/**
 * UI components
 */

/* define rotation */
@keyframes rotation {
  from {
     transform: rotate(0deg);
  }
  to {
     transform: rotate(359deg);
  }
}

/* prevent user agent active element outlines */
* {
   outline: none !important;
}



/* text overflow container */
div.text-overflow {
	width: 150px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left !important;
}

/* flexrow control icons */
:is(.flexrows-ctrls, .control-icons) > .fa {
	display: inline-block;
	border: 0px;
	padding: 0px;
	margin-left: 3px;
	width: 20px;
	height: 21px;

	vertical-align: middle;
	text-align: center;
	font-size: 16px;

	cursor: pointer;
}

	/* control icons floated to the left */
	.control-icons.float-right {
		text-align: left !important;
	}
		.control-icons.float-right > .fa {
			float: right;
		}

	/* labelled icon */
	.control-icons > .fa.labelled {
		margin-left: 2px !important;
		padding: 2px 6px 2px 3px !important;
		width: auto;
		border: 1px solid rgba(0,0,0,.25) !important;
		border-radius: 2px;
		background-color: rgba(0,0,0,.1);
	}
		/* hover labelled icon */
		.control-icons > .fa.labelled:hover {
			background-color: rgb(150,150,150) !important;
			border: 1px solid rgba(0,0,0,.45) !important;
		}
		/* click labelled icon */
		.control-icons > .fa.labelled:active,
		.control-icons > .fa.labelled:active > label {
			color: rgba(255,255,255,.5) !important;
		}

		/* labelled icon label */
		.control-icons > .fa.labelled > label {
			font-family: 'Nimbus Sans';
			font-size: 15px;
			color: rgba(0,0,0,.85);
			cursor: pointer;
		}
			.control-icons > .fa.labelled:hover > label {
				color: black;
			}

	/* adjust styling to match native icon for date/datetime/time inputs */
	.fa.PDCFW3-autoSetDateTimeInputs-actionAuto {
		font-size: 14px;
	}
		/* for chrome */
		body.is-browser-chrome .fa.PDCFW3-autoSetDateTimeInputs-actionAuto {
			font-size: 13px;
		}

	/* default icon styling */
	:is(.flexrows-ctrls, .control-icons) > .fa {
		color: rgba(0,0,0,.5);
	}
		:is(.flexrows-ctrls, .control-icons) > .fa:hover {
			color: rgba(0,0,0,.75);
		}

	/* add */
	:is(.flexrows-ctrls, .control-icons) > .fa[role="add"] {
		color: rgba(0,0,100,.5);
	}
		:is(.flexrows-ctrls, .control-icons) > .fa[role="add"]:hover {
			color: rgba(0,0,100,.75);
		}

	/* del */
	:is(.flexrows-ctrls, .control-icons) > .fa[role="del"] {
		color: rgba(100,0,0,.5);
	}
		:is(.flexrows-ctrls, .control-icons) > .fa[role="del"]:hover {
			color: rgba(100,0,0,.75);
		}

		/* click */
		:is(.flexrows-ctrls, .control-icons) > .fa:active {
			color: rgba(255,255,255,.5);
			text-shadow: -1px -1px 0px rgba(0,0,0,.5);
		}

	/* readonly icon */
	:is(.flexrows-ctrls, .control-icons) > .fa[readonly] {
		opacity: .25;
		cursor: default;
	}

	/* "positive" icon */
	.fa.positive {
		color: rgb(50,100,175);
	}
	/* "negative" icon */
	.fa.negative {
		color: rgb(175,100,50);
	}

	/* custom adjustments */
	.fa.fa-share-square-o.WrittenOff-0 {
		transform: rotate(90deg);
	}

	.fa.fa-share-square-o.WrittenOff-1 {
		transform: rotate(-90deg);
	}

	/* icons for flexrow controls */
	.flexrows-ctrls > .fa {
		padding: 6px 4px 0px 5px;
		margin-left: 3px;
		width: 20px;
		height: 21px;

		vertical-align: middle;
		text-align: center;
		font-size: 16px;

		border: 1px solid #7ABEF9;
		border-radius: 3px;
		cursor: pointer;
	}

		/* add */
		.flexrows-ctrls > .fa[role="add"] {
			color: rgba(0,0,100,.5);
		}
			.flexrows-ctrls > .fa[role="add"]:hover {
				color: rgba(0,0,100,.75);
				background: rgba(0,0,100,.1);
			}

		/* del */
		.flexrows-ctrls > .fa[role="del"] {
			color: rgba(100,0,0,.5);
		}
			.flexrows-ctrls > .fa[role="del"]:hover {
				color: rgba(100,0,0,.75);
				background: rgba(100,0,0,.1);
			}

			/* click */
			.flexrows-ctrls > .fa:active {
				border: 1px solid rgba(0,0,0,.75);
			}

		/* readonly icon */
		.flexrows-ctrls > .fa[readonly] {
			opacity: .25;
			cursor: default;
		}

		/* "positive" icon */
		.fa.positive {
			color: rgb(50,100,175);
		}
		/* "negative" icon */
		.fa.negative {
			color: rgb(175,100,50);
		}

		/* custom adjustments */
		.fa.fa-share-square-o.WrittenOff-0 {
			transform: rotate(90deg);
		}

		.fa.fa-share-square-o.WrittenOff-1 {
			transform: rotate(-90deg);
		}

/* stats box container */
div.stats-box {
	display: inline-block;
	position: relative;
	width: calc( 100% - 35px );
	line-height: 1;
	margin: 1px 0px 1px 0px;
	text-align: center;

	border: 1px solid rgba(0,0,0,.25);
	border-radius: 3px;

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

/* invert state stats box container */
div.stats-box.invert[bool-state="1"] {
	border: 1px solid rgba(100,0,0,.25);
}

/* hover on stats element */
div.stats-box:not(.no-action):hover {
	filter: brightness(500%);
	border: 1px solid rgba(0,0,100,.5);
	cursor: pointer;
}

/* stat subcontainer label */
div.stats-box > label {
	display: inline-block;
	width: 43px !important;
	height: auto !important;
	padding: 3px !important;
	text-align: left !important;

	font-family: 'Rubik Light', Helvetica, Arial !important;
	font-size: 12px !important;
	background-color: rgba(0,0,100,.1);
	border-right: 1px solid rgba(0,0,0,.25);

	cursor: pointer;
}
	/* invert state stats box container label */
	div.stats-box.invert[bool-state="1"] > label {
		background-color: rgba(100,0,0,.4);
		color: white;
	}

/* stat subcontainer data */
div.stats-box > data {
	display: inline-block;
	position: relative;
	width: calc( 100% - 44px - 13px ) !important;
	padding: 3px;
	text-align: right;

	font-size: 12px;
	background-color: rgba(0,0,100,.2);

	cursor: pointer;
}
	/* invert state stats box container data */
	div.stats-box.invert[bool-state="1"] > data {
		background-color: rgba(100,0,0,.5);
		color: white;
	}

/* jquery UI dialogs */
.ui-dialog {
	z-index: 500 !important;
	overflow: hidden;
}

/* unclosable dialog */
[aria-describedby="ChamberBucksApp-dialogModalWait"] .ui-dialog-titlebar-close {
	display: none;
}

#ChamberBucksApp-dialogModalWait {
	text-align: center;
	font-size: 25px;
	color: rgba(0,0,0,.35);
	overflow: hidden;
}
	#ChamberBucksApp-dialogModalWait .fa {
		display: block;
		text-align: center;
		margin: 20px;
		font-size: 50px;
		overflow: hidden;
		color: rgba(0,0,0,.15)
	}

.PDCFW3-dialog {
	width: 600px;

	font-family: 'Rubik Light', Helvetica, Arial;
	font-size: 14px;

	line-height: 1.2;
}
	/* dialog paragraphs */
	.PDCFW3-dialog > p {
		line-height: 1.2;
		margin-bottom: 20px;
	}

	/* dialog title */
	.ui-dialog[role="dialog"] .ui-dialog-titlebar {
		font-family: 'Rubik Light', Helvetica, Arial;
		color: white;
		font-size: 16px;
		background: rgba(100,100,100);
	}

	/* dialog buttons */
	.ui-dialog[role="dialog"] .ui-dialog-buttonset > button {
		padding: 10px;

		font-family: 'Nimbus Sans';
		font-size: 16px;
		color: white;
		background: rgb(0,100,125);
		outline: none;
	}
		/* button hover */
		.ui-dialog[role="dialog"] .ui-dialog-buttonset > button:hover {
			background: rgb(50,125,150);
		}
		/* button click */
		.ui-dialog[role="dialog"] .ui-dialog-buttonset > button:active {
			box-shadow: -1px -1px 0px black;
			background: rgb(50,150,175);
		}

/* tippy */
[id^="tippy"], [id^="tippy"] *, .tippy-content {
	font-family: 'Rubik Light', Helvetica, Arial !important;
	font-size: 12px !important;
	line-height: 1.5 !important;
	z-index: 400 !important;
	text-align: left;
}

	/* tippy customizations */
	.tippy-box[data-theme="serials"] > .tippy-content {
		text-align: center;
		line-height: 1.5;
	}

/* jquery: autocomplete */
ul.ui-autocomplete {
	z-index: 201;
	max-height: 35vh;
	overflow-y: auto;
}
	/* a/c item */
	ul.ui-autocomplete > li {
		font-family: 'Rubik Light', Helvetica, Arial;
		font-size: 12px;
		padding: 3px;
	}

	/* autocomplete item adjustments */
	.ui-menu .ui-menu-item-wrapper,
	.ui-menu .ui-menu-item-wrapper:hover {
		padding: 0px;
		margin: 0px;
		border: 0px;
	}
		.ui-menu .ui-menu-item:hover,
		.ui-menu .ui-menu-item .ui-menu-item-wrapper:hover {
			color: white !important;
			background: rgba(0,0,150,.65) !important;
		}
			.ui-menu .ui-menu-item:hover data,
			.ui-menu .ui-menu-item .ui-menu-item-wrapper:hover data {
				color: white !important;
			}

	/* autocomplete html header */
	ul.ui-autocomplete > li .autocomplete-html-header,
	ul.ui-autocomplete .ui-menu-item-wrapper:hover .autocomplete-html-header {
		font-weight: bold;
		padding: 5px 0px 5px 0px;
		font-size: 14px;
		color: black;
		background: transparent;
		cursor: default;
	}

	/* autocomplete html item */
	/* NOTE: class is independent of parent references so it can be used as input display */
	.autocomplete-html-item {
		margin: 0px 0px 0px 10px;
		font-size: 0px; /* collapse spacing */
	}

	/* all data containers */
	.autocomplete-html-item > data {
		display: inline-block;
		font-size: 13px;
	}

	/* custom item styling */
	.autocomplete-html-item > data[key] {
		display: inline-block;
		padding: 3px;
		margin-right: 5px;
		width: 50px;
		vertical-align: top;

		background-color: rgba(0,0,0,.15);
		border: 1px solid rgba(0,0,100,.15);
		border-radius: 1px;
	}

		.ui-menu .ui-menu-item:hover .autocomplete-html-item > data[key],
		.ui-menu .ui-menu-item .ui-menu-item-wrapper:hover .autocomplete-html-item > data[key] {
			background-color: rgba(0,0,0,.2) !important;
			border: 1px solid rgba(0,0,100,.2) !important;
		}

		.autocomplete-html-item > data[key].wide {
			width: 125px;
		}

	/* data items not [key] */
	.autocomplete-html-item > data:not([key]) {
		vertical-align: top;
		margin-top: 5px;
	}

	.autocomplete-html-item > data.date {
		width: 125px;
		margin-right: 10px;
		color: rgba(0,0,0,.5);
	}

	.autocomplete-html-item > data.icon {
		width: 75px;
		margin-top: 4px;
		margin-right: 10px;
		color: rgba(0,0,0,.5);
	}

	.autocomplete-html-item > data.amount {
		width: 75px;
		margin-right: 10px;
		color: rgba(0,0,0,.75);
	}

	.autocomplete-html-item > data.name {
		color: black;
		font-weight: bold;
	}

	/* autocomplete item as selected in form */
	:is(main, #sidebarUI) > form.container > section > div span.autocomplete-html-container > .autocomplete-html-item {
		margin: 5px;
		position: absolute;
		background: white !important;
 		/* above sidebar ui container */
		z-index: 200;
	}

	/* html autocomplete when item selected */
	.autocomplete-html-selected input[type="text"][autocomplete-set],
	.autocomplete-html-selected input[type="text"][autocomplete-set]:disabled {
		color: transparent;
		background-color: white !important;
	}

		/* autocomplete input while waiting for results */
		input[type="text"][autocomplete-set].wait {
			cursor: wait;
		}

		/* autocomplete input while waiting for result to populate */
		input[type="text"][autocomplete-set].loading-selection {
			cursor: wait !important;
			color: transparent !important;
		}
		
		/* autocomplete input inside flexrow */
		:is(main, #sidebarUI) > form.container > section > div .flexrows-row > input[type="text"][autocomplete-id] {
			width: 553px;
		}

	/* reset icon for html autocompletes */
	form.container > section > div span.autocomplete-html-container > .fa.autocomplete-html-reset {
		display: none;
	}

		/* reset icon when autocomplete value selected */
		form.container > section > div span.autocomplete-html-container.autocomplete-html-selected > .fa.autocomplete-html-reset {
			display: inline-block;
			position: absolute;
			margin: 10px 0px 0px 615px;
			font-size: 14px;
		}
		
		/* reset icon for html autocompletes inside flexrows */
		form.container > section > div .flexrows-row span.autocomplete-html-container.autocomplete-html-selected > .fa.autocomplete-html-reset,
		form.container > section > div .flexrows-row.autocomplete-html-container.autocomplete-html-selected > .fa.autocomplete-html-reset {
			margin: 10px 0px 0px 540px;
		}

	/* refresh button for HTML autocompletes with QB cache lists */
	form.container > section > div span.autocomplete-html-container button[QB-cache-refresh] {
		position: absolute;
		margin: 4px 0px 0px 560px;
	}

/* passive notification */
div#PDCFW3-notify {
	opacity: 0;
	position: fixed;
	width: 130px;
	height: 120px;
	padding: 10px;
	top: 10px;
	left: 11px;
	z-index: 499;
	text-align: center;

	font-family: 'Rubik Light', Helvetica, Arial;
	font-size: 13px;
	color: white;
	line-height: 1.35;
	text-shadow: 1px 1px 0px rgba(0,0,0,.5);

	border: 1px solid rgba(0,235,255,.35);
	background-color: rgba(68,68,68,.9);

	transition: opacity 0.5s 0s ease;
}
	div#PDCFW3-notify.effect {
		opacity: 1;
		transition: opacity 0.1s 0s linear;
	}

	/* notification for print order success */
	div#PDCFW3-notify.ChamberBucksApp-notify-sidebar > .fa {
		display: block;
		margin-top: 10px;
		font-size: 35px;

		color: rgba(0,235,255,.75);
	}