/*******************************/
/* Globals */
/*******************************/
.failureMessage {
	background: #ffd9d9;
	padding: 0.5em 1em;
	border-bottom: 2px solid red;
	color: var(--primary);
}

.infoMessage {
	background: var(--secondary);
	padding: 0.5em 1em;
	border-bottom: 2px solid var(--primary);
	color: var(--primary);
}

form {
	/*padding: 1em;*/
}
/*******************************/
/* Authentication */
/*******************************/
#authentication {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--secondary);
}

	/*#authentication #loginDivs {
		background-color: rgba(255, 255, 255, 0.9);
		padding: 2em;
		border-radius: 1.5em;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	}*/

	#authentication #menuLogo {
		width: 20em;
	}

	#authentication input[type=text],
	#authentication input[type=password] {
		padding: 0.5em 1em;
		border-radius: 0.25em;
	}

	#authentication .left {
		background-color: var(--primary);
		flex: 2;
		height: 100%;
	}

		#authentication .left > * {
			max-width: 300px;
		}

	#authentication .right {
		background-color: var(--secondary);
		flex: 3;
		height: 100%;
		background-image: url('/img/HandBackground.png');
		background-position: 70% 90%;
		background-repeat: no-repeat;
		background-size: contain;
		margin-left: 4em;
	}

	#authentication .passwordResetRequest {
		color: antiquewhite;
	}

@media (max-width: 800px) {
	#authentication .right {
		display: none;
	}
}
/*******************************/
/* Loading Overlay */
/* Not a huge fan of how it is always overlaid but hidden, consider 0 / 0 size until shown */
/*******************************/
#loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}

.loading-content {
	background-color: rgba(255, 255, 255, 0.9);
	padding: 2em;
	border-radius: 1.5em;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

#loading-overlay.show {
	visibility: visible;
	opacity: 1;
}

#loading-overlay.hide {
	visibility: hidden;
	opacity: 0;
}

/*******************************/
/* Loading In Place */
/*******************************/
.loadFit {
	width: 100%;
	height: 100%;
}

	.loadFit img {
		max-height: 4em;
		max-width: 4em;
		width: auto;
		height: auto;
		background-color: rgba(255, 255, 255, 0.9);
		padding: 0.4em;
		margin: 0.2em;
		border-radius: 0.2em;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	}

.loadOver {
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 9998;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	position: absolute;
	top: 0;
	left: 0;
}

	.loadOver.easeIn {
		opacity: 1;
		transition: opacity 0.3s ease-in-out;
	}

/***************************/
/* Drag / drop */
/***************************/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 16px;
	background-color: #fff;
	overflow: hidden;
}

.drag-over {
	border: dashed 3px red;
}


.hide {
	display: none;
}
/*******************************/
/* Scheduling - Calendar */
/*******************************/
#calendar, #daily {
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

	#calendar #month {
		background: #c1c1c1;
		padding-right: 0px;
		overflow-y: auto;
		max-height: calc(100vh - 120px);
		overflow-x: hidden;
	}

	#calendar #unassigned,
	#daily #leftSide {
		background-color: var(--secondary-light);
		min-height: 10em;
		margin-left: 1em;
	}

	#daily #unassigned {
		min-height: 10em;
	}

	#calendar #unassigned {
		overflow-y: auto;
		max-height: calc(100vh - 210px);
		overflow-x: hidden;
	}

	#calendar .shiftLeft {
		margin-left: -0.75em;
	}

	#calendar #unassigned .transfer {
		max-width: 400px;
	}

	#calendar .transfer.disabled {
		outline: 2px solid red;
	}

	#calendar .transfer.manual {
		outline: 2px solid blue;
	}

	#calendar .transfer.pickup,
	#daily .transfer.pickup {
		background: linear-gradient( to bottom, white 70%, var(--primary-light-alpha) 90% 100% );
	}

	#calendar .transfer.layover.dropoff,
	#daily .transfer.layover.dropoff {
		background: linear-gradient( to bottom, var(--primary-light-alpha) 10%, white 20% 100% );
	}

	#calendar .transfer.highlight,
	#daily .transfer.highlight {
		border: 2px solid var(--primary-med);
	}

		#calendar .transfer.highlight.single {
			background: var(--primary-lightest);
		}

	#calendar .transfer.layover.highlight,
	#daily .transfer.layover.highlight {
		border: 2px solid var(--primary-med);
	}

	#calendar .transfer.tier1 .pkgcnt {
		background: rgb(125, 218, 88);
		padding-left: 0.25em;
		padding-right: 0.25em;
	}

	#calendar .transfer.tier2 .pkgcnt {
		background: rgb(255, 230, 27);
		padding-left: 0.25em;
		padding-right: 0.25em;
	}

	#calendar .transfer.tier3 .pkgcnt {
		background: rgb(254, 153, 0);
		padding-left: 0.25em;
		padding-right: 0.25em;
	}

	#calendar .transfer.tier4 .pkgcnt {
		color: white;
		background: #f73d3d;
		padding-left: 0.25em;
		padding-right: 0.25em;
	}

	#calendar #month .weekDay {
		width: calc(14.28571429% - 4px);
		background: white;
		min-height: 80px;
	}

		#calendar #month .weekDay a {
			text-decoration: underline;
		}



		#calendar #month .weekDay.oob {
			color: #525252;
			background: #f1f1f1;
		}

		#calendar #month .weekDay > div {
			min-height: 80px;
		}

		#calendar #month .weekDay.prev > div {
			/*position: absolute;*/
			/*top: 50%;
			left: 0;
			width: 100%;
			height: 20px;*/
			/*background-color: red;*/
			/*			transform-origin: left center;
			transform: rotate(-45deg);
			border-left: 1px solid #ff000070;*/
			flex: 1;
			width: 100%;
			background-color: #ff00001c;
			/*background: rgb(255,255,255);*/
			/*background: linear-gradient(35deg, rgba(255,255,255,1) 49%, rgba(255,0,0,1) 50%, rgba(255,255,255,1) 51%);*/
			/*background: linear-gradient(35deg, white 0%,white 49%,#ff000070 50%, #ff000070 50%, white 51%, white 100%);*/
			/*black 0%,black 20%,green 20%,green 100%*/
		}

		#calendar #month .weekDay .dragula-container {
			height: 100%;
			width: 100%;
		}

	/* yellow */
	#calendar .transfer,
	#daily .transfer {
		background-color: white;
		cursor: pointer;
		border: 1px solid var(--primary-light);
		border-left: solid 0.5em #ffff60;
		font-size: 0.9rem;
	}

		/* yellow */
		#calendar .transfer.highlight,
		#daily .transfer.highlight,
		#calendar .transfer.yellow,
		#daily .transfer.yellow {
			border-left: solid 0.5em #ffff60;
		}

		/* green */
		#calendar .transfer.pickup,
		#daily .transfer.pickup,
		#calendar .transfer.green,
		#daily .transfer.green {
			border-left: solid 0.5em #63c863;
		}

		/* pink */
		#calendar .transfer.il,
		#daily .transfer.il,
		#calendar .transfer.pink,
		#daily .transfer.pink {
			border-left: solid 0.5em #ea84c7;
		}

		/* Blue */
		#calendar .transfer.layover.dropoff,
		#daily .transfer.layover.dropoff,
		#calendar .transfer.blue,
		#daily .transfer.blue {
			border-left: solid 0.5em #6f6fff;
		}

	#calendar .transferMenu {
		width: 20em;
		background: var(--white);
		border: 1px solid var(--primary);
		padding: 1em;
		border-radius: 0.25em;
		box-shadow: 4px 4px 3px var(--primary-light);
		z-index: 9999;
	}

	#daily .transfer {
		padding: 0.1em 0.75em;
	}

		#daily .transfer .dragContent {
			gap: 1em;
		}

		#daily .transfer img {
			width: 18px;
		}

#transferMerge #mergeTargets div.selected {
	outline: 2px solid var(--primary);
}

#transferEdit {
	min-height: 475px;
}

	#transferEdit [data-ts-item] {
		display: flex;
	}

	#transferEdit .ts-wrapper input[type=text] {
		background-color: #eee !important;
		padding: 0.5em !important;
		border-bottom: 1px solid black !important;
		margin-top: 0.5em !important;
	}

@media (max-width: 1400px) {
	#calendar #month {
		padding-right: 4px;
	}

		#calendar #month .weekDay {
			width: 100%;
		}

	#calendar #unassigned .transfer {
		max-width: 320px;
	}
}

@media (min-width: 1400px) {

	#calendar #month .weekDay .address {
		flex-direction: column;
	}

		#calendar #month .weekDay .address img {
			rotate: 90deg;
			justify-self: center;
		}
}
/*******************************/
/* Scheduling - Daily */
/*******************************/
#daily .vehicle {
	background: #f1f1f1;
}

	#daily .vehicle .dragula-container {
		background: white;
	}

#daily #leftSide {
	overflow-y: auto;
	max-height: calc(100vh - 140px);
	overflow-x: hidden;
}

#daily #committed {
	overflow-y: auto;
	max-height: calc(100vh - 140px);
	overflow-x: hidden;
}

@media (max-width: 900px) {
	#daily .transfer .dragContent {
		flex-direction: column;
		gap: 0;
	}
}
/*******************************/
/* Scheduling - Metrc Detail */
/*******************************/
#metrcDetail .metrcDetailLine:hover {
	background-color: var(--secondary-med);
}

/*******************************/
/* Tabs - Tab Themes */
/*******************************/
.tab {
	overflow: hidden;
	border: 1px solid #ccc;
	background-color: #f1f1f1;
}

	.tab button {
		background-color: inherit;
		float: left;
		border: none;
		outline: none;
		cursor: pointer;
		padding: 14px 16px;
		transition: 0.3s;
	}

		.tab button:hover {
			background-color: #ddd;
		}

		.tab button.active {
			background-color: #ccc;
		}

.tablinks.active {
	color: var(--primary) !important;
}

.tabcontent {
	display: none;
	padding: 6px 12px;
	border: 1px solid #ccc;
	border-top: none;
}

.two-pane-select-wrapper .ts-dropdown {
	position: static !important;
	height: 50vh;
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	width: 100% !important;
	border: 1px solid #ccc !important;
	border-top: none !important;
}

.two-pane-select-wrapper .ts-control {
	width: 100% !important;
	min-height: 40px !important;
	border: 1px solid #ccc !important;
	border-radius: 4px 4px 0 0 !important;
	display: none;
}

.ts-dropdown.dropup {
	bottom: 100%;
	top: auto;
}

.two-pane-select-wrapper {
	width: 100% !important;
	height: 50vh !important;
}

	.two-pane-select-wrapper .ts-control-input {
		width: 100% !important;
	}

	.two-pane-select-wrapper .ts-dropdown-content {
		max-height: calc(100% - 2.5em) !important;
	}

.two-pane-button {
}

.back-to-login-div {
	padding: 0;
}

.back-to-login-button {
	display: block;
	height: 100%;
	width: 100%;
	border: 0;
	padding: 0.5em 1em;
	background: var(--primary-light);
}

.side-by-side-label {
	background: var(--primary);
	color: white;
}
/*******************************/
/* Splash */
/*******************************/
#splash {
}

	#splash #header {
		padding-left: 2em;
		padding-right: 2em;
		padding-top: 2em;
		height: 60px;
	}

	#splash #circleLogo {
		width: 120px;
	}

	#splash #leftPanel {
		flex: 2;
	}

	#splash #rightPanel {
		flex: 3;
		overflow: hidden;
		background: url('/img/logo/Splash-page-hero-image.png');
		background-position-y: 0%;
		background-repeat: repeat;
		background-repeat: no-repeat;
		background-position-y: bottom;
		background-position-x: left;
	}

		#splash #rightPanel img {
		}

@media (max-width: 500px) {
	#splash #header {
		white-space: nowrap;
	}

		#splash #header img {
			width: 120px;
		}
}

@media (min-width: 1749px) {
	#splash #rightPanel {
		background-position-x: right;
	}
}
/*******************************/
/* Registration */
/*******************************/
#registration {
	margin: auto;
}

	#registration img {
		height: 60px;
	}

	#registration a {
		text-decoration: underline;
	}

	#registration input[type=text],
	#registration select {
		width: 170px;
	}

/*******************************/
/* Join Doon */
/*******************************/
#joinDoon {
	margin: auto;
	width: 100%;
}

	#joinDoon img {
		height: 60px;
	}

	#joinDoon a {
		text-decoration: underline;
	}

	#joinDoon #phoneSubmission,
	#joinDoon #accessCodeSubmitValidate {
		max-width: 600px;
	}

	#joinDoon #acceptToS {
		width: 80%;
		height: 70vh;
	}

	#joinDoon #Tos {
		width: 100%;
		height: 100%;
		text-align: center;
	}

		#joinDoon #Tos iframe {
			width: 100%;
			max-width: 1025px;
			height: 100%;
		}

/*******************************/
/* Scanner */
/*******************************/
#packageValidationTable {
	font-size: 1em;
}

	#packageValidationTable input[type=checkbox] {
	}

/*******************************/
/* Dashboard */
/*******************************/
#dashboard .card {
	text-align: center;
	width: inherit;
	height: inherit;
}
/*******************************/
/* Shipment */
/*******************************/
#scheduleOutbound {
}

	#scheduleOutbound .chooseList {
		max-height: calc(100vh - 300px);
		overflow: auto;
	}

		#scheduleOutbound .chooseList > div {
			cursor: pointer;
			padding: 0.25em;
			border: 2px solid var(--secondary-light)
		}

	#scheduleOutbound .inventoryTable tbody tr:hover {
		cursor: pointer;
		background: #c3f9c3;
	}

	#scheduleOutbound .inventoryTable tbody tr.selected {
		cursor: pointer;
		outline: 1px solid var(--primary);
		background: #95ec95;
	}
	#scheduleOutbound .inventoryTable{
	width:auto;
	margin:initial;
	}
	/*******************************/
	/* Inventory */
	/*******************************/
	.inventoryTable {
		margin: auto;
		width: 100%;
	}