/* ******************************* */
/* Globals */
/* ******************************* */
.infoMessage {
	background: var(--secondary-light90);
	padding: 0.5em 1em;
	border-bottom: 2px solid var(--secondary);
}

.failureMessage,
.field-validation-error {
	background: #ffd9d9;
	padding: 0.5em 1em;
	border-bottom: 2px solid red;
}

form {
	padding: 1em;
}
/* ******************************* */
/* Authentication */
/* ******************************* */
#authentication {
	flex: 1;
}

	#authentication #authLogo {
		width: 16em;
	}

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

	#authentication .left {
		flex: 2;
		height: 100vh; /* or 100% of whatever container */
	}

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

		#authentication .left #authHeader {
			margin-top: auto; /* pushes top child down from top edge */
			flex-shrink: 0; /* stays natural height, never shrinks */
		}
		#authentication .left #authSpacer {
			margin-bottom: auto; /* pushes bottom child up from bottom edge */
			flex-shrink: 0; /* stays natural height, never shrinks */
			min-height:40px;
		}

		#authentication .left #loginDivs {
			flex-shrink: 1; /* takes up all remaining space */
			overflow-y: auto; /* scrolls if content exceeds available space */
			min-height: 0; /* critical! without this, flex won't let it shrink below content size */
		}

		#authentication .right {
			flex: 2;
			height: 100%;
			background-image: url('/img/login_splash.png');
			background-repeat: no-repeat;
			background-size: cover;
		}

	#authentication #loginForm .border {
		border-radius: 0.5em;
	}

@media (max-width: 800px) {
	#authentication .right {
		display: none;
	}
}

@media (max-height: 1000px) {
	#authentication .left img {
		max-width: 10em;
	}
	#authentication .left #loginDivs {
		/*max-height: calc(100% - 200px);
		overflow-y: auto;
		overflow-x: hidden;*/
	}
}

/* ******************************* */
/* 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;
	pointer-events: none;
	-webkit-touch-callout: none;
}

.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 {
		/* Needs to compare sizes to work on very narrow shapes*/
		max-height: min(100%, 4em);
		max-width: min(100%, 4em);
		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;
	}
/* ******************************* */
/* Project Graph - Html */
/* ******************************* */
.project {
}

	.project .group {
	}

	.project .node {
	}

		.project .node.waiting {
		}

		.project .node.active {
		}

		.project .node.blocked {
		}

		.project .node.todo {
		}
/* ******************************* */
/* Project - Details */
/* ******************************* */
#cy {
	z-index: auto;
	height: 500px;
	width: 500px;
	left: 0;
	top: 0;
}

#eat {
	left: 1em;
	top: 1em;
	font-size: 1em;
	z-index: -1;
	color: #c88;
}

.popup {
	position: absolute;
	background-color: white;
	border: 1px solid black;
	padding: 10px;
	font-family: Arial, sans-serif;
	/* pointer-events: none; 
                auto: allows click events, doesn't allow dragging "through" the div
                none: no click events, can drag through
            */
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
	/* opacity: 0; */
	transform-origin: center;
	/*transition: opacity 0.3s ease;*/
	top: 0;
}

	.popup.show {
		opacity: 1;
	}


/*******************************/
/*TODO*/
/*******************************/
img.dimen {
	/*todo same as .charttile? */
	/*border: 1px solid var(--primary);
    border-radius: 4px;
    box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.2);
    background-color: white;*/
}

	img.dimen:hover {
		border: 1px solid var(--primary);
		border-radius: 4px;
		box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.2);
		background-color: white;
	}

pre {
	white-space: pre-wrap;
	word-break: keep-all;
	overflow-wrap: break-word;
	font-family: Arial;
}

/*img.med {
    width: 3em;
    height: 3em;
}

img.sm {
    width: 2em;
    height: 2em;
}

img.tiny {
    width: 1em;
    height: 1em;
}

.bgSL {
    background-color: var(--secondary-light90);
}

.bgWhite {
    background-color: white;
}

a {
    text-decoration: none;
    color: var(--primary);
}

.shadow {*/
/*
		0: Horizontal offset (no horizontal shadow)
		4px: Vertical offset (shadow appears below the element)
		2px: Blur radius (amount of blur for the shadow)
		-2px: Spread radius (negative value makes the shadow smaller than the element)
		gray: Color of the shadow
	*/
/*box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.12);
}*/
#conversation pre {
	padding: 1em 2em;
	background-color: var(--primary-light);
}

#responses .question {
	margin-right: 4em;
	padding: 1em;
	border-left: 4px solid var(--primary);
}

#responses .response {
	margin-left: 4em;
	padding: 1em;
	border-right: 4px solid var(--secondary);
}

#logo {
	max-width: 20em;
}

#content {
	margin: 0em 2em;
	padding: 1em;
}

#CustomPrompt {
	min-height: 400px;
}

#aiFilters select {
	max-width: 40em;
}

/* ******************************* */
/* Administration */
/* ******************************* */
#adminEditForm #AssignedClients {
	min-height: 300px;
}

#adminEditForm #editImg {
	max-height: 200px;
	max-width: 200px;
	object-fit: contain;
}
/* ******************************* */
/* Dashboard */
/* ******************************* */
.chartTile {
	min-height: 300px;
	min-width: 320px;
	max-height: 400px;
	/*todo same as .dimen?*/
	border: 1px solid var(--secondary);
	border-radius: 4px;
	box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.2);
	background-color: white;
}

	.chartTile.fit {
		display: flex;
		flex-basis: fit-content;
		justify-content: center;
	}

.bar {
	fill: #2196F3;
}

	.bar:hover {
		fill: #1976D2;
	}

.arc path {
	transition: opacity 0.2s;
}

.arc:hover path {
	opacity: 0.8;
}

.states :hover {
	fill: red;
}

.state-borders {
	fill: none;
	stroke: #fff;
	stroke-width: 0.5px;
	stroke-linejoin: round;
	stroke-linecap: round;
	pointer-events: none;
}

.tooltip {
	pointer-events: none;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	z-index: 1000;
}

#mapTableContainer {
	max-height: 300px;
	overflow: auto;
}

#percentMailedByProductChart {
	padding-bottom: 2em;
}

#slaAdherence {
	overflow-y: auto;
}

#pieceCountChart {
	max-width: 40em;
}

@media (max-width: 1400px) {
	#pieceCountChart {
		max-width: none;
	}
}
/* ******************************* */
/* File Dashboard */
/* ******************************* */
#filePreview {
	width: 680px;
	height: 800px;
}

	#filePreview iframe {
		width: 100%;
		height: calc(100% - 50px);
	}

#fileListDiv > table > tbody > tr:nth-child(4n+1) {
	background-color: var(--white);
}

#fileListDiv table tbody tr td {
	border-bottom: 1px solid var(--secondary);
}

#fileListDiv table thead tr.altHead {
	/*background: var(--primary-light);
    color: var(--white);*/
}

.detailsTable {
	/*border-left: 6px solid var(--primary-light);*/
	font-size: 0.9rem;
}

	.detailsTable table thead tr {
		/*background-color: #ccc;
        color: var(--primary);*/
	}

	.detailsTable a {
		text-decoration: underline;
	}



.wave-shell::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 220px;
	background: linear-gradient(120deg, #B7DEEC, #DA6458);
	/*clip-path: polygon(0 60%, 100% 0, 100% 100%, 0% 100%);*/
	/*clip-path: polygon( 0% 0%, 0% 20%, 50% 80%, 100% 20%, 100% 100%, 0% 100%);*/
	/*using a wave form generator https://github.com/Svetloslav15/wave-generator */
	clip-path: polygon(100% 100%, 0% 100%, 0.00% 74.00%, 2.00% 74.34%, 4.00% 74.77%, 6.00% 75.30%, 8.00% 75.90%, 10.00% 76.57%, 12.00% 77.30%, 14.00% 78.08%, 16.00% 78.89%, 18.00% 79.73%, 20.00% 80.57%, 22.00% 81.41%, 24.00% 82.24%, 26.00% 83.04%, 28.00% 83.79%, 30.00% 84.49%, 32.00% 85.12%, 34.00% 85.68%, 36.00% 86.15%, 38.00% 86.53%, 40.00% 86.82%, 42.00% 87.00%, 44.00% 87.08%, 46.00% 87.05%, 48.00% 86.91%, 50.00% 86.67%, 52.00% 86.33%, 54.00% 85.90%, 56.00% 85.38%, 58.00% 84.78%, 60.00% 84.11%, 62.00% 83.38%, 64.00% 82.60%, 66.00% 81.78%, 68.00% 80.95%, 70.00% 80.10%, 72.00% 79.26%, 74.00% 78.43%, 76.00% 77.64%, 78.00% 76.89%, 80.00% 76.19%, 82.00% 75.55%, 84.00% 75.00%, 86.00% 74.52%, 88.00% 74.14%, 90.00% 73.86%, 92.00% 73.67%, 94.00% 73.60%, 96.00% 73.63%, 98.00% 73.76%, 100.00% 74.00%);
	/*animation: wave-drift 8s linear infinite;*/
}
/* ******************************* */
/* File Manager */
/* ******************************* */
.progressBar {
	width: 100%;
	background-color: #e0e0e0;
	border-radius: 4px;
	overflow: hidden;
	height: 1.25em;
}

.progressFill {
	height: 100%;
	background-color: var(--primary);
	border-radius: 4px;
	transition: width 0.2s ease;
}

tr.deleted td {
	opacity: 0.5;
	text-decoration: line-through;
}