/**
 * Global element styles
 */

/* force agent font for select menus */
select, option {
	font: -moz-pull-down-menu;
}

/* "selected" styling for selected menus */
select.has-placeholder:not(.selected) {
	color: #a3a3b5;
}


/**
 * CRUD Form CSS
 */

/* CRUD header */
:is(main, #sidebarUI) > div#CRUD-header.form {

}

	/* CRUD header button(s) */
	:is(main, #sidebarUI) > div#CRUD-header.form > button {
		position: relative;
		min-width: 100px;
		border: 0px;
		height: 100%;
		padding: 0px 15px 0px 15px;

		font-family: 'Nimbus Sans';
		color: white;
		font-size: 19px;

		background: rgba(255,255,255,.15);
	}

		/* button icon */
		:is(main, #sidebarUI) > div#CRUD-header.form > button > .fa {
			margin-left: 5px;

			color: white;
			font-size: 17px;
		}
			/* space out non-first buttons */
			:is(main, #sidebarUI) > div#CRUD-header.form > button:not(:first-of-type) {
				border-left: 1px solid rgb(175,175,175);
			}

			/* "save" */
			:is(main, #sidebarUI) > div#CRUD-header.form > button.save {
				background: rgba(0,0,150,.25);
			}
			/* "cancel" */
			:is(main, #sidebarUI) > div#CRUD-header.form > button.cancel {
				background: rgba(150,0,0,.25);
			}
			/* "reset" */
			:is(main, #sidebarUI) > div#CRUD-header.form > button.reset {
				background: rgba(255,100,0,.25);
			}

		/* hover on button */
		:is(main, #sidebarUI) > div#CRUD-header.form > button:hover {
			text-shadow: 1px 1px 0px black;
			cursor: pointer;
			filter: contrast(1.5) brightness(2);
		}

		/* click on button */
		:is(main, #sidebarUI) > div#CRUD-header.form > button:active,
		:is(main, #sidebarUI) > div#CRUD-header.form > button:active > .fa {
			color: rgba(0,0,0,.5);
			text-shadow: 1px 1px 0px white;
		}

	/* CRUD header title */
	:is(main, #sidebarUI) > div#CRUD-header.form > h4 {
		display: inline-block;
		margin: 11px;
		vertical-align: top;

		font-family: 'Rubik Light';
		font-size: 14px;
		color: rgba(255,255,255,.85);
	}

/* forms */
:is(main, #sidebarUI) > form.container {
	text-align: center;
}

	/* article for notes */
	:is(main, #sidebarUI) > form.container > section > article.notice {
		display: inline-block;
		padding: 10px 10px 8px 10px;
		margin: 10px;
		width: auto;

		font-family: 'Rubik Light';
		font-size: 13px;
		color: rgba(0,0,0,.85);

		background-color: rgba(0,0,100,.15);
		border: 1px solid rgba(0,0,0,.15);
		border-radius: 4px;
	}
		/* notice icon */
		:is(main, #sidebarUI) > form.container > section > article.notice > .fa {
			margin: auto 5px auto 5px;
		}

		/* pseudo button to emphasize */
		:is(main, #sidebarUI) > form.container > section > article.notice .pseudo-button {
			padding: 4px 6px 3px 6px;
			background-color: rgba(255,255,255,.5);
			border: 1px solid rgba(0,0,0,.25);
			border-radius: 2px;
		}

	/* input row container */
	:is(main, #sidebarUI) > form.container > section > div {
		text-align: left;
	}
		/* div text container */
		:is(main, #sidebarUI) > form.container > section > div.text {
			text-align: left;
			font-size: 13px;
		}

		/* spacing for first/last containers */
		:is(main, #sidebarUI) > form.container > section > div:first-of-type {
			margin-top: 10px;
		}
		:is(main, #sidebarUI) > form.container > section > div:last-of-type {
			margin-bottom: 10px;
		}

		/* entry error container */
		:is(main, #sidebarUI) > form.container > section > div > div.entryError {
			display: block;
			padding: 15px 0px 15px 175px;
			text-align: left;

			font-family: 'Nimbus Sans';
			font-size: 18px;
			color: red;
		}

			/* adjustment for sidebar UI forms */
			#sidebarUI > form.container > section > div > div.entryError {
				padding: 5px 0px 5px 156px;
			}

			/* field-specific adjustments for entry errors */
			#sidebarUI > form.container > section > div > div.entryError:is(.errordummy-serials,.errordummy-exceptions) {
				padding-left: 10px;
			}
			
			#sidebarUI > form.container > section > div > div.entryError:is(.errordummy-expenses) {
				padding: 10px;
				text-align: center;
			}

		/* label */
		:is(main, #sidebarUI) > form.container > section > div > label {
			display: inline-block;
			width: 150px;
			vertical-align: top;
			padding: 9px 8px 2px 0px;
			height: 15px;

			text-align: right;
			font-family: 'Nimbus Sans';
			font-size: 16px;
			color: rgba(0,0,0,.65);
		}

		/* input container */
		:is(main, #sidebarUI) > form.container > section > div > span {
			display: inline-block;
			vertical-align: top;
		}

			/* input element */
			:is(main, #sidebarUI) > form.container > section > div > span :is(input, select, textarea):not(input[type="checkbox"], input[type="radio"]) {
				min-width: 200px;
				margin: 5px 0px 5px 0px;
				padding: 6px 5px 3px 5px;
				border: 0px;

				font-family: 'Rubik Light';
				font-size: 13px;
				color: rgb(0,0,50,.85);

				background: transparent;
				border-bottom: 1px solid rgba(0,0,0,.25);
				border-left: 1px solid rgba(0,0,0,.25);
			}

				/* inputs in error state */
				:is(main, #sidebarUI) > form.container > section > div > span .entryError:is(input, select, textarea):not(input[type="checkbox"], input[type="radio"]) {
					border-bottom: 1px solid red;
					border-left: 1px solid red;
					background-color: rgb(255,150,150);
					color: white;
					text-shadow: 1px 1px 0px red;
				}

				/* disabled texty inputs */
				:is(main, #sidebarUI) > form.container > section > div > span :is(input, select, textarea):not(input[type="checkbox"],input[type="radio"]):is([disabled],[readonly],:disabled) {
					background-color: rgba(0,0,0,.1);
				}

					/* disabled, but not emphasis */
					:is(:disabled,[readonly]).disabled-appear-normal {
						background-color: initial !important;
					}

				/* adjustment for number inputs */
				:is(main, #sidebarUI) > form.container > section > div > span input[type="number"] {
					padding-bottom: 5px !important;
				}
					/* numbers with no spinner buttons */
					:is(main, #sidebarUI) > form.container > section > div > span input[type="number"].no-buttons::-webkit-outer-spin-button,
					:is(main, #sidebarUI) > form.container > section > div > span input[type="number"].no-buttons::-webkit-inner-spin-button,
					:is(main, #sidebarUI) > form.container > section > div > span input[type="number"].no-buttons {
						-webkit-appearance: none;
  						-moz-appearance: textfield;
					}

				/* adjustment for datetime inputs */
				:is(main, #sidebarUI) > form.container > section > div > span input[type="datetime-local"] {
					min-width: 225px !important;
				}

				/* text inputs for numbers (smaller) */
				:is(main, #sidebarUI) > form.container > section > div > span .number:is(input, select, textarea):not(input[type="checkbox"], input[type="radio"]) {
					min-width: 50px;
					width: 50px;
				}
				:is(main, #sidebarUI) > form.container > section > div > span .number-medium:is(input, select, textarea):not(input[type="checkbox"], input[type="radio"]) {
					min-width: 80px;
					width: 80px;
				}
				:is(main, #sidebarUI) > form.container > section > div > span .number-long:is(input, select, textarea):not(input[type="checkbox"], input[type="radio"]) {
					min-width: 110px;
					width: 110px;
				}

				/* double-width input */
				:is(main, #sidebarUI) > form.container > section > div > span .width-double:is(input, select, textarea):not(input[type="checkbox"], input[type="radio"]) {
					width: 420px;
				}

				/* double-width input */
				:is(main, #sidebarUI) > form.container > section > div > span .width-triple:is(input, select, textarea):not(input[type="checkbox"], input[type="radio"]) {
					width: 630px;
				}

			/* input element focused */
			:is(main, #sidebarUI) > form.container > section > div > span :is(input, select, textarea):not(.entryError):not(input[type="checkbox"], input[type="radio"]):not([readonly]):focus {
				background: white;
				color: rgb(0,0,0);
				border-bottom: 1px solid rgba(0,0,0,.85);
				border-left: 1px solid rgba(0,0,0,.85);
			}

			/* check/radio elements */
			:is(main, #sidebarUI) > form.container > section > div > span :is(input[type="checkbox"], input[type="radio"]) {
				margin: 11px 0px 0px -1px;
			}

			/* textareas */
			:is(main, #sidebarUI) > form.container > section > div > span textarea {
				width: 650px;
				min-height: 100px;
				resize: vertical;
			}
				/* smaller textareas */
				:is(main, #sidebarUI) > form.container > section > div > span textarea.small {
					width: 200px;
					height: 35px;
					min-height: 35px;
				}
				/* shorter textareas */
				:is(main, #sidebarUI) > form.container > section > div > span textarea.short {
					height: 35px;
					min-height: 35px;
				}

			/* input note */
			:is(main, #sidebarUI) > form.container > section > div > span > span.input-note {
				display: inline-block;
				padding: 4px;
				margin-left: 10px;
				width: auto;

				font-family: 'Rubik Light';
				font-size: 11px;
				color: rgba(0,0,0,.65);

				background-color: rgba(0,0,150,.15);
				border: 1px solid rgba(0,0,0,.15);
				border-radius: 2px;
			}
				/* hide input note when empty */
				:is(main, #sidebarUI) > form.container > section > div > span > span.input-note:empty {
					display: none;
				}

			/* checkbox labels wrapping inputs */
			:is(main, #sidebarUI) > form.container > section > div > span label.check {
				display: inline-block;
				font-family: 'Rubik Light';
				font-size: 13px;
				color: rgba(0,0,0,.75);
			}

			/* input containers as flexrows */
			:is(main, #sidebarUI) > form.container > section > div > span.flexrows {
				font-size: 0px; /* collapse spacing */
			}

				/* flexrow rows */
				:is(main, #sidebarUI) > form.container > section > div > span.flexrows > .flexrows-row {
					display: block;
					font-family: 'Rubik Light';
					font-size: 13px;
				}

					/* flexrow elements */
					:is(main, #sidebarUI) > form.container > section > div > span.flexrows > .flexrows-row > * {
						margin-right: 10px;
					}

					/* flexrow controls */
					:is(main, #sidebarUI) > form.container > section > div > span.flexrows > .flexrows-row > .flexrows-ctrls {
						font-size: 18px;
					}

					/* flexrows for serials entered as list (textarea buggers with the alignment) */
					:is(main, #sidebarUI) > form.container > section > div > span.flexrows.serials.list > .flexrows-row > * {
						vertical-align: top;
					}
						:is(main, #sidebarUI) > form.container > section > div > span.flexrows.serials.list > .flexrows-row > .flexrows-ctrls > .fa {
							margin-top: 5px;
						}

				/* custom flexrows for serial no entry */
				:is(main, #sidebarUI) > form.container > section > div > span.flexrows.custom.serials {

				}
					/* serial range start */
					:is(main, #sidebarUI) > form.container > section > div > span.flexrows.custom.serials > .flexrows-row > input[name*="serial-start"] {
						margin-left: 10px;
						margin-right: 0px;
					}

					/* serials multi-entry textarea */
					:is(main, #sidebarUI) > form.container > section > div > span.flexrows.custom.serials > .flexrows-row > textarea[name*="serial-list"] {
						width: 300px;
						min-height: 16px;
						height: 16px;
					}

					/* total dollar amount by vendor */
					:is(main, #sidebarUI) > form.container > section > div > span.flexrows.custom.serials > .flexrows-row > .totalDollarAmountByFlexrowId {
						display: inline-block;
						width: 100px;
						margin-top: 15px;

						font-family: 'Courier New';
						font-size: 13px;
						text-align: right;
					}

			/* elements container for stylized checks or radios */
			:is(main, #sidebarUI) > form.container > section > div > span.checks {

			}
				/* check element separators */
				:is(main, #sidebarUI) > form.container > section > div > span.checks > div {
					display: inline-block;
				}
					/* check labels */
					:is(main, #sidebarUI) > form.container > section > div > span.checks > div > label {
						display: inline-block;

						margin: 5px 5px 5px 0px;
						padding: 5px;

						font-family: 'Rubik Light';
						font-size: 13px;
						color: rgb(0,0,50,.5);

						background-color: rgba(0,0,100,.05);
						border: 1px solid rgba(0,0,0,.25);

						cursor: pointer;
					}
						/* label 8con */
						:is(main, #sidebarUI) > form.container > section > div > span.checks > div > label > .fa {
							color: rgba(0,0,0,.5);
						}

						/* check label hover */
						:is(main, #sidebarUI) > form.container > section > div > span.checks > div > label:hover {
							background-color: rgba(0,0,150,.15);
						}

						/* check labels with corresponding element checked */
						:is(main, #sidebarUI) > form.container > section > div > span.checks > div > input:checked ~ label {
							color: rgb(0,0,50,.85);
							background-color: rgba(0,0,100,.15);
							border: 1px solid black;
						}

						/* hide inputs */
						:is(main, #sidebarUI) > form.container > section > div > span.checks > div > input:is([type="checkbox"],[type="radio"]) {
							display: none;
						}