.greenClass {
	background-color: green;
}

/** VSI Base overrides *
*/
.vsi-left-side-bar-header {
	background-color: white;
	background: none;
	border: 1px solid black;
}

.vsi-left-side-bar-header-company-title, .topTitle {
	font-weight: bold;
	color: var(--primary-color);
	margin-bottom: 4px;
}

.vsi-left-side-bar-header-company-title {
	font-size: 20px !important;
}

.logo {
	background-color: white;
}

.imageLogo {
	margin: 10px;
	border: 1px solid black;
	padding: 5px;
	width: 175px;
}

.vsi-left-side-bar-header-company-title {
	color: black;
}





/** general use *
*/
.invisible {
	display: none;
}

.bigFont {
	font-size: 1.5em;
}

.mediumFont {
	font-size: 1.25em;
}

.smallFont {
	font-size: 0.75em;
}


 base VSI datatable page 
.hiddenPageContainer {
	top: 0;
	height: 100%;
	display: none;
}

 any page layers that go over the base VSI datatable page 
.pageContainer {
	top: 0px;
	height: 100%;
	position: relative;
	text-align: left;
}

.focusBackgroundColor {
	background-color: lightgray;
}



 /*margins*/ 

.leftAlign {
	float: left;
}

.leftAlignSpaced {
	float: left;
	margin-left: 1em;
}

.leftAlignSpacedNarrow {
	float: left;
	margin-left: 0.25em;
}

.rightAlignSpaced {
	float: right;
	margin-right: 1em;
}

.leftRightMargin {
	margin-left: 1em;
	margin-right: 1em;
}

.leftRightMarginNarrow {
	margin-left: 0.5em;
	margin-right: 0.5em;
}



 /*results*/ 

.error {
	color: red;
	font-weight: bold;
	font-size: 1.25em;
	padding-bottom: 4em;
}

.success {
	color: var(--primary-color);
	font-weight: bold;
	font-size: 1.25em;
}



 /*tables*/ 

.innerTable {
	overflow-y: auto;
	float: left;
	height: 50vh;
	background-color: darkgray;
}


.innerTableLightColor {
	overflow-y: auto;
	float: left;
	height: 25vh;
	background-color: lightgray;
}

.innerTableLong {
	overflow-y: auto;
	float: left;
	height: 30vh;
	background-color: darkgray;
}

.innerTableShort {
	overflow-y: auto;
	float: left;
	height: 20vh;
	background-color: darkgray;
}


/* mobile (no VSI navigation bar on the left) 
*/@media (max-width: 1100px) {
	.innerTable {
		margin: 2vw;
		width: calc(96vw - 16px);
	}

	.innerTableLightColor {
		margin: 2vw;
		width: calc(96vw - 16px);
	}

	.innerTableLong {
		margin: 2vw;
		width: calc(96vw - 16px);
	}

	.innerTableShort {
		margin: 2vw;
		width: calc(96vw - 16px);
	}
}

 /*desktop*/ 
@media not (max-width: 1100px) {
	.innerTable {
		margin: 2%;
		width: 96%;
	}

	.innerTableLightColor {
		margin: 2%;
		width: 96%;
	}

	.innerTableLong {
		margin: 2%;
		width: 96%;
	}

	.innerTableShort {
		margin: 2%;
		width: 96%;
	}
}



/* last edited 
*/
.lastEditedHeader {
	margin-left: 15px
}

.lastEditedBody {
	margin-left: 15px
}



 /*spacing*/ 

.spaceUnder {
	padding-bottom: 1em;
}

tr.spaceUnder > td {
	padding-bottom: 1em;
}

tr.spaceUnderNarrow > td {
	padding-bottom: 0.5em;
}

.spaceUnderNarrow {
	padding-bottom: 0.5em;
}


.spaceAbove {
	padding-top: 1em;
}

tr.spaceAbove > td {
	padding-top: 1em;
}

.spaceAboveNarrow {
	padding-top: 0.5em;
}

tr.spaceAboveNarrow > td {
	padding-top: 0.5em;
}



/* text fields and labels 
*/
.wide {
	width: 100%;
}

.inputLabel {
	float: left;
}

.inputLabelForFullWidth {
	float: left;
	margin-left: 1em;
}

.inputTextField {
	float: left;
	width: 80%;
}

.inputTextFieldForFullWidth {
	width: 90%;
	float: left;
	margin-left: 1em;
}

input:disabled {
	opacity: 0.5;
}



/** buttons *

 image buttons */

.submitButton {
	width: 3em;
	height: 3em;
}

.submitButtonDisabled {
	pointer-events: none;
	opacity: 0.5;
}

.submitButtonSmall {
	width: 2em;
	height: 2em;
}

.submitButtonBig {
	width: 4em;
	height: 4em;
}


.closeButton {
	float: right;
	width: 30px;
	height: 30px;
	margin-bottom: 20px;
}

.closeButtonNoBottomMargin {
	float: right;
	width: 30px;
	height: 30px;
}

.closeButtonHoverRight {
	float: right;
	width: 30px;
	height: 30px;
	margin-bottom: 20px;
	position: absolute;
	right: 0px;
}

.closeButtonNoFloat {
	width: 30px;
	height: 30px;
	margin-bottom: 20px;
}


/* font awesome buttons 
*/
.submitFAIcon {
	grid-column: 1;
	grid-row: 1;
	margin: auto;
	pointer-events: none;
	 /*the color and height are decent defaults, 
	 but may need to be overridden in some cases */
	color: white;
	height: 55%;
}

.submitFABase {
	grid-column: 1;
	grid-row: 1;
	margin: auto;
}




/** animations *
*/
.fadeInAndOut {
	animation: fadeInOut 2s linear forwards;
}

@-webkit-keyframes fadeInOut {
	0% {
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	90% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/* progress bar 
*/
.progressBarContainer {
	background-color: darkgray;
	border-radius: 8px;
}

.progressBar {
	background-color: var(--primary-color);
	height: 2.4em;
	transition-duration: 0.5s;
	border-radius: 8px;
	padding: 2px;
	display: flex;
	align-items: center;
}

.progressText {
	font-size: 1em;
	color: white;
	margin-left: 4px;
	position: absolute;
}

/* thinking animation 
*/div.thinkingContainer {  /*the div here is to override any inputTextField classes that may also be in the container */
	display: grid;
	margin-left: 0;
	margin-right: 0.6em; /* the right margin is required so any horizontal buttons is aligned correctly with other buttons */
}

div.thinkingContainerForFullWidth {  /*the div here is to override any inputTextField classes that may also be in the container */
	display: grid;
	margin-left: 1em;
	margin-right: 0.6em;
}

.thinkingOverlay {
	grid-area: 1/1;
	width: calc(100% + 0.55em);
	height: 100%;
	background-color: rgb(20, 74, 117);
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	border-radius: 2px;
	transition-duration: 0.2s;
}

.thinkingOverlayForFullWidth {
	grid-area: 1/1;
	width: calc(100% + 0.55em);
	height: 100%;
	background-color: rgb(20, 74, 117);
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	border-radius: 2px;
	transition-duration: 0.2s;
	margin-left: 1em;
}

.thinkingOverlayActive {
	opacity: 0.6;
	pointer-events: all;
}

input.thinkingInput {
	grid-area: 1/1;
	z-index: 1;
	width: 100%;
	margin-left: 0;
}

.lds-thinking {
	display: inline-block;
	position: relative;
	width: 100%;
	height: 100%;
}

	.lds-thinking div {
		display: inline-block;
		position: absolute;
		width: 1em;
		background: #fff;
		animation: lds-thinking 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
	}

		.lds-thinking div:nth-child(1) {
			left: 1em;
			animation-delay: -0.24s;
		}

		.lds-thinking div:nth-child(2) {
			left: 2.5em;
			animation-delay: -0.12s;
		}

		.lds-thinking div:nth-child(3) {
			left: 4em;
			animation-delay: 0;
		}

@keyframes lds-thinking {
	0% {
		top: 10%;
		height: 90%;
	}

	50%, 100% {
		top: 40%;
		height: 20%;
	}
}




/* Yes No Dialog 
*/
.yesNoDialogContentCondensed {
	width: 80vw;
	font-size: 1em;
}




/** datatables 
*/
.wrapText {
	white-space: break-spaces;
}


/* bale custom column widths 
*/.baleNumberColumn {
	max-width: 6em;
}

	.baleNumberColumn > div > div > div > input {
		max-width: 5em;
		text-overflow: ellipsis;
	}


.lotNumberColumn {
	max-width: 5.5em;
}

	.lotNumberColumn > div > div > div > input {
		max-width: 4.5em;
		text-overflow: ellipsis;
	}


.statusColumn {
	max-width: 10em;
}


.uomColumn {
	max-width: 8em;
}


.baleQuantityColumn {
	max-width: 11em;
}
	 selector for the header text container div 
	.baleQuantityColumn > div > div > div:nth-child(2) {
		justify-content: end;
		margin-right: 5px !important;
	}


.itemCountColumn {
	max-width: 11em;
}
	 selector for the header text container div 
	.itemCountColumn > div > div > div:nth-child(2) {
		justify-content: end;
		margin-right: 5px !important;
	}


.inventoryQuantityColumn {
	max-width: 11em;
}

	.inventoryQuantityColumn > div > div > div:nth-child(2) {
		justify-content: end;
		margin-right: 5px !important;
	}

/* selector for the header text container div 
*/.rightJustifiedDatatableColumn > div > div > div:nth-child(2) {
	justify-content: end;
}

/* hides the datatable header search field 
*/.hideDatatableSearchField > div > div > div:nth-child(1) {
	visibility: hidden;
	pointer-events: none;
}





/* Custom Overrides */

.padded {
	padding: 10px;
	padding-inline: 30px;
}

.paddedNarrow {
	padding: 10px;
	padding-inline: 5px;
}

.paddedInline {
	padding-inline: 10px;
}

.flexGrowMedium {
	flex-grow: 0.7;
}

.fillWidth25Percent {
	width: 25%;
}

.flex {
	display: flex;
}

.inlineFlex {
	display: inline-flex;
}

.flexGrowLarge {
	flex-grow: 1;
}

.spaceAroundContentJustified {
	justify-content: space-around;
}

.centerContentJustified {
	justify-content: center;
}

.fillHeight150Percent {
	height: 150%;
}

.takeUpAlmostHalfOfViewWidth {
	width: 45vw;
}

.innerTable2 {
	margin: 2vw;
	width: calc(96vw - 16px);
}

.fillHalfWidth {
	width: 50%;
}

.fillWidth90Percent {
	width: 90%;
}

.fillWidth80Percent {
	width: 80%;
}

.fillHeight {
	height: 100%;
}

.centerText {
	text-align: center;
}

.paddedRightNarrow {
	padding-right: 10px;
}

.paddedLeftNarrow {
	padding-left: 10px;
}

.fillHeight80Percent {
	height: 80%;
}

.fillWidth70Percent {
	width: 70%;
}