﻿
#shelbyTable_wrapper {
/*	z-index: 0;*/
	position: static;
	clear: unset;
	
}

#shelbyTable {
	font-size: 1rem !important;
}

#productionHeader {
	/*	z-index: -1;*/
}
/*Co /*mments dialog seetings */
/*.modal-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1050;
	width: 100%;
	height: 100%;
	background-color: #000;
}*/
/*.modal-dialog {
	max-width: 900px;
	height: 500px;
	margin: 1.75rem auto;
}
*/
/*#commentsTableContainer {*/
/*    height: 150px;*/
/*overflow-y: auto;
	margin: 0 5px;
}

.table > .commentsBody {
	vertical-align: inherit;
	height: auto;
	font-size: large;
}

tr .notesRowHead {
	background-color: #00248a;
	color: azure;
}*/
/**Comments Header Text setting**/
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
table.dataTable tfoot td {
	text-align: start;
}

/*.commentsTableRows:first-child {
	background-color: unset !important;
	color: black;
}

.commentsTableRows .commentsTableRowData {
	width: unset;
	max-width: unset;
	height: unset;
	max-width: unset;
	max-height: unset;
	text-overflow: ellipsis;
	overflow: hidden;
	background-color: unset;
	color: black;
}*/
/*
	.commentsTableRows .commentsTableRowData:first-child {
		background-color: unset;
		color: azure;
	}*/

#footer-img {
	text-align: center;
}

/* End Comments dialog seetings */

#exportBtn {
	background-color: #00248a;
	color: azure;
}

	#exportBtn:hover {
		background-color: #034396;
	}

.dt-layout-row label {
	margin: 0.2em;
	font-size: 1.2em;
	z-index: 1021;
}


div header {
	position: sticky;
	left: 25%;
	color: black;
	z-index: -1;
}

tr {
	line-height: 17.5px;
	min-height: 35px;
	height: 20px !important;
	overflow: auto;
}

td {
	width: 40px;
	max-width: 280px;
	height: 50px;
	max-height: 30px;
	text-overflow: ellipsis;
	white-space: normal;
	overflow: hidden;
}

#backToTopBtn {
	display: none;
	/* Hidden by default */
	width: 75px;
	height: 55px;
	position: fixed;
	/* Fixed/sticky position */
	bottom: 10px;
	left: 4%;
	/* Place the button 30px from the right */
	z-index: 1021;
	/* Make sure it does not overlap */
	border: none;
	/* Remove borders */
	outline: none;
	/* Remove outline */
	background-color: darkslategray;
	/* Set a background color */
	color: white;
	/* Text color */
	cursor: pointer;
	/* Add a mouse pointer on hover */
	padding: 15px;
	/* Some padding */
	border-radius: 10px;
	/* Rounded corners */
	font-size: 18px;
	/* Increase font size */
}

	#backToTopBtn:hover {
		background-color: #555;
		/* Add a dark-grey background on hover */
	}

.modal-body {
	line-height: 1.5rem;
	font-size: 1.2rem;
}

.vehicleProfilePic {
	width: 40%;
}

#notesLoader {
	position: relative;
	top: 10rem;
	left: 30rem;
}

.actionIcons {
	margin: 2px;
}

.actionIconsBtn:hover + select {
	display: block !important;
}

.actionIconsBtns {
	background-color: #00248a;
	color: azure;
	width: 40px;
	height: 35px;
	margin-right: 3px;
}

	.actionIconsBtns:hover {
		background-color: #034396;
		color: azure;
	}

.oasisSelectList {
	width: 100%;
}

.vehicle-info-modal {
	max-width: unset;
	height: unset;
	margin: 0;
}

/*.partsDetails {
	height: 300px;
	overflow-y: scroll;
}*/

.vehicle-container {
	position: relative;
	width: 100%;
	/* adjust as needed */
	height: 25px;
}

.vehicle-base {
	width: 100%;
	display: block;
}

.color-overlay,
.stripe-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.stripe-overlay {
	/*background-color:#b8bed8;*/
	/* red with transparency */
	/*     height: 100px;*/
	mix-blend-mode: multiply;
}

.color-overlay {
	background-image: repeating-linear-gradient(90deg, black, black 80px, transparent 0px, transparent 190px);
}

.has-painted {
	background-color: #ffa726; /* ORANGE for entire row */
}

.has-color {
	background-color: #ffa726; /* ORANGE */
}

/* highlight the word ADD */
.word-add {
	background-color: #2ecc71; /* GREEN */
	color: #1a1a1a;
	font-weight: 600;
	padding: 0 2px;
	border-radius: 2px;
}

/* optional: a bit of spacing between lines */
.comment-line {
	margin: 0;
	padding-left: .5rem; /* ps-2 equivalent */
	border-left: 1px solid var(--bs-border-color, #dee2e6);
	border-right: 1px solid var(--bs-border-color, #dee2e6);
	border-bottom: 1px solid var(--bs-border-color, #dee2e6);
	text-align: left;
}

@media (max-width: 768px) {
	html {
		font-size: 1.2rem;
	}

	div.dt-container div.dt-layout-row {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: sticky;
		left: 0;
		/* Stick to the left edge of the screen */
		right: 0;
		/* Stick to the right edge of the screen */
		overflow-x: auto;
		/* Prevent horizontal scrolling */
	}

	.modal-dialog {
		max-width: 768px !important;
		width: 768px;
	}

	.modal-backdrop.show {
		display: none;
	}
}

@media (max-width: 640px) {
	#shelbyTable_wrapper {
		z-index: 1020;
		position: static;
		clear: unset;
		overflow: scroll;
	}

	.dataTables_wrapper {
		margin: 4px
	}

	div.dt-container div.dt-layout-row {
		display: flex;
		flex-direction: column;
		position: sticky;
		left: 0;
		/* Stick to the left edge of the screen */
		right: 0;
		/* Stick to the right edge of the screen */
		overflow-x: auto;
		/* Prevent horizontal scrolling */
		z-index: 1021;
		/* Ensure the element stays above other content */
	}

	#productionHeader {
		text-align: center;
		width: 50% !important;
		z-index: -1 !important;
	}

	#oasis6logo {
		display: none;
	}

	div.dt-container div.dt-layout-cell {
		display: table-cell;
		vertical-align: middle;
		padding: 5px 0;
	}

	div.dt-container .dt-paging .dt-paging-button {
		box-sizing: border-box;
		display: inline-block;
		min-width: 1.5em;
		padding: 0.5em 0.5em;
		margin-left: 0.5em;
		text-align: center;
		text-decoration: none !important;
		cursor: pointer;
		color: inherit !important;
		border: 1px solid transparent;
		border-radius: 2px;
		background: transparent;
	}

	.dt-container .dt-length,
	.dt-container .dt-search {
		float: none;
		text-align: right;
		margin-right: 5px;
	}

	/**MODAL SETTINGS*/

	.modal-backdrop.show {
		display: none;
	}
	/*
	.modal {
		position: fixed;
		top: 0%;
		left: 0;
		z-index: 1055;
		display: none;
		width: 100%;
		height: 100%;
		overflow-x: auto;
		overflow-y: auto;
		outline: 0;
	}

	.modal-dialog {
		width: auto;
		padding: 4px;
	}

	.modal-footer {
		display: flex;
		flex-wrap: wrap;
		flex-shrink: 0;
		align-items: center;
		justify-content: flex-end;
		padding: 0;
		border-top: 1px solid #dee2e6;
		border-bottom-right-radius: calc(.3rem - 1px);
		border-bottom-left-radius: calc(.3rem - 1px);
	}*/

	/**Back to top button***/
	#backToTopBtn {
		display: none;
		/* Hidden by default */
		position: fixed;
		/* Fixed/sticky position */
		bottom: 20px;
		left: 30px;
		z-index: 1020;
		border: none;
		outline: none;
		background-color: darkslategray !important;
		color: white;
		cursor: pointer;
		/* Add a mouse pointer on hover */
		padding: 15px;
		border-radius: 10px;
		font-size: 18px;
	}

	.vehicleSalesOrderDetails {
		height: 200px;
		overflow-y: scroll;
	}

	.vehicleSalesOrderColumns {
		padding-right: 0;
	}

	.partsDetails {
		height: 200px;
		overflow-y: scroll;
	}

	.vehicleProfilePic {
		width: 100% !important;
	}
}

/**End Mobile CSS*/