:root {
	--card-border: silver;
	--card-color: white;
	--card-color2: #f8f9fa;
	--card-text: gray;
	--card-title: darkslateGray;
	--gold-title: goldenrod;
	--blackish: Black;
	--blue-top: #3144B0;
	--background-alt: #BDBDBD;
	--background: #BDBDBD;
	--button-border: Silver;
	--button: #426fca;
	--button-text: #fff;
	--normal-text: #333;
	--top-label: #cbba9c;
	--navbar: #3D3D3D;
	--silver: Silver;
	--shadow: #ccc;
	--blueish: #00555a;
	--Menu-blue: #0067B0;
	--Menu-main: #565658;
	--Blue-selected: #B3D3EC;
	--Page-label: #343a40;
	--Page-heading: #00555a;
	--greenish: #4a6446;
	--greenish-accent: #60BD82;
	--Dark-green: #217346;
	--slate-gray: darkslateGray;
	--lightGray: #999;
	--White: white;
	--cream-white: #f3f5e6;
	--highlight-blue: #426fca;
	--medium-gray: #636872;
	/* --font-to-use: "Arial"; */
	--font-to-use: "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
	--font-size-Xtra-large: 20px;
	--font-size-large: 16px;
	--font-size-normal: 14px;
	--font-size-small: 12px;
}

.top-menu a {
	text-decoration: none;
	color: #fff
}

.password-container {
	position: relative;
}

body {
	margin: 0;
	padding: 0;
	background-color: var(--cream-white);
	font-size: var(--font-size-normal);
	line-height: 1.33337;
	font-weight: 400;
	letter-spacing: -.01em;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat
}

.signimage {
	height: 100vh;
	padding-top: 8rem;
	background: url("/img/bg2.png");
	background-position: center;
	background-size: cover
}

.username {
	font-size: var(--font-size-small);
	color: var(--White);
	width: 70%;
	text-align: left;
	margin: 3px;
	padding-top: 5px;
	font-weight: lighter
}

.booknr {
	font-size: var(--font-size-small);
	color: var(--lightGray);
	width: 100%;
	text-align: left;
	margin: 2px;
	padding-bottom: 3px;
}

.booknrwhite {
	font-size: var(--font-size-small);
	color: var(--White);
	width: 100%;
	text-align: left;
	margin: 2px;
	padding-bottom: 3px;
}

.card {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	margin-top: 10px;
	border-color: var(--card-border);
	padding: 0;
	background-color: var(--card-color);
	border-radius: 15px;
	min-width: 300px;
}

.card-home {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	margin: 10px;
	border: #000 1px solid;
	border-color: var(--card-border);
	padding: 0;
	background-color: var(--card-color);
	border-radius: 5px;
	max-width: 350px
}

.card-order {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	margin: 10px;
	border: #000 1px solid;
	border-color: var(--card-border);
	padding: 0;
	padding-bottom: 5px;
	padding-top: 5px;
	background-color: var(--card-color);
	border-radius: 5px;
	max-width: 400px
}

.card-flow {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	margin-top: 10px;
	/* border: #000 1px solid; */
	border-color: none;
	padding: 0;
	/* background-color: var(--card-color); */
	border-radius: 5px;
	/* max-width: 350px */
}


.card-title4 {
	float: left;
	color: var(--card-title);
	font-size: 18px;
	text-align: left;
	padding-top: 0;
	padding-left: 10px;
	padding-bottom: 0px;
	text-shadow: 1px 1px 2px var(--shadow)
}

.card-title {
	color: var(--normal-text);
	padding-top: 10px;
	padding-bottom: 0;
	padding-left: 10px;
	font-size: 22px;
	text-align: left;
	font-weight: 400
}

.job-comments {
	color: var(--white);
	/* padding: 10px; */
	font-size: var(--font-size-normal);
	text-align: center;
	/* font-weight: lighter */
}

.card-body {
	display: flex;
	flex-direction: column;
	/* justify-content: space-between; */
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 14px;
	font-weight: 400;
}

.card-body3 {
	display: flex;
	flex-direction: column;
	padding: 10px;
	font-size: var(--font-size-normal);
	font-weight: 400;
	background-color: var(--card-color2);
	border-radius: 15px;
	width: 400px;
	border-color: var(--card-border);
}

.card-body4 {
	width: 500px;
	display: flex;
	flex-direction: column;
	padding: 10px;
	font-size: var(--font-size-normal);
	font-weight: 400;
	background-color: var(--card-color2);
	border-radius: 15px;
}


.card2 {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	border-color: var(--card-border);
	box-shadow: var(--card-border) 5px 5px 5px;
	border-width: 1px;
	padding: 0;
	background-color: var(--card-color);
	border-radius: 15px;
	min-width: 300px
}

.card-body-top {
	background-color: var(--medium-gray);
	width: 100%;
	padding: 5px;
	box-sizing: border-box;
	border-radius: 13px 13px 0px 0px;
	display: flex;
	flex-direction: column;
	font-size: var(--font-size-normal);
	font-weight: 400
}

.card-body-top2 {
	background-color: var(--greenish);
	color: var(--White);
	width: 100%;
	padding: 0 0 5px 0;
	box-sizing: border-box;
	border-radius: 15px 15px 0px 0px;
	display: flex;
	flex-direction: column;
	font-size: var(--font-size-normal);
	font-weight: 400
}

.detail-row {
	display: flex;
	justify-content: space-between;
	padding-left: 10px;
	padding-right: 10px;
}

.card-label {
	/* float: left; */
	text-align: left;
	color: var(--card-title);
	font-size: var(--font-size-normal);
	padding: 0px;
	padding-left: 10px;
	width: 100px;
	font-weight: lighter
}

.card-info {
	display: block;
	/* float: left; */
	text-align: left;
	color: var(--card-text);
	font-size: var(--font-size-normal);
	padding: 0px;
	padding-left: 20px;
	/* padding-bottom: 5px; */
	margin: 0px;
	font-weight: 400;
	width: 150px;
}

.card-info3 {
	display: block;
	text-align: left;
	color: var(--card-text);
	font-size: var(--font-size-large);
	padding: 0px;
	padding-left: 0px;
	padding-top: 5px;
	margin: 0px;
	font-weight: 400;
	width: 190px;
}

.info-Color {
	text-align: left;
	color: maroon;
	background-color: yellow;
	padding: 5px;
	font-size: var(--font-size-small);
}

.card-info2 {
	float: left;
	text-align: left;
	color: var(--card-text);
	font-size: 10px;
	padding-left: 20px;
	padding-bottom: 5px;
	margin: 0px;
	font-weight: 400;
}

.card-info-highlight3 {
	font: var(--font-to-use);
	float: left;
	text-align: right !important;
	color: var(--blueish);
	text-shadow: var(--lightGray) 0px 1px 1px;
	font-size: var(--font-size-large);
	padding-left: 2px;
	padding-right: 10px;
	padding-top: 5px;
	margin: 0px;
}

.card-info-highlight {
	float: right;
	text-align: left;
	color: var(--blueish);
	text-shadow: var(--lightGray) 0px 1px 1px;
	font-size: var(--font-size-normal);
	padding-left: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	margin: 0px;
}

.card-info-highlight-left {
	background-color: var(--background-alt);
	text-align: left;
	color: maroon;
	text-shadow: var(--lightGray) 0 1px 1px;
	font-size: var(--font-size-normal);
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 5px;
	margin: 0
}

.center {
	margin-left: auto;
	margin-right: auto
}

.container {
	max-width: 100%;
	display: -ms-inline-flexbox;
	position: relative
}

.row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-left: 0px;
	margin-right: 0px;
}

.total-row {
	background-color: var(--medium-gray);
	color: var(--White);
	font-size: var(--font-size-large);
	font-weight: bolder;
	line-height: 10px
}

.total-row2 {
	display: flex;
	flex-direction: row;
	background-color: var(--white);
	color: var(--White);
	font-size: var(--font-size-large);
	border-radius: 5px;
	/* font-weight: bolder; */
	/* line-height: 10px */
}

.column {
	width: 40%
}

.column-data {
	float: left;
	width: 80%;
	padding: 0px;
}

/* Add or update these styles */
.comments-container {
	word-wrap: break-word;
	/* Allows long words to be broken and wrapped to the next line */
	white-space: normal;
	/* Ensures whitespace characters are handled normally */
}


.li {
	list-style: none
}

.footer {
	position: fixed;
	left: 0;
	bottom: -8px;
	width: 100%;
	height: auto;
	background-color: #333;
	padding: 5px;
	color: silver;
	text-align: center;
	font-size: var(--font-size-small);
	text-shadow: #000 1px 1px 3px;
	font-weight: 400
}

.flex {
	flex: 1
}

.flexbox {
	display: flex;
	flex-wrap: wrap
}

textarea {
	padding: 10px;
	max-width: 100%;
	line-height: 1.5;
	border-radius: 5px;
	border: 1px solid var(--shadow);
	resize: none;
	color: var(--slate-gray);
	font-size: var(--font-size-small);
	font-weight: 400
}

/* Master back ground fade in and out */

@keyframes fadeBackground {
	0% {
		background-image: url('/img/big.png');
	}

	33% {
		background-image: url('/img/big2.png');
	}

	66% {
		background-image: url('/img/big3.png');
	}

	100% {
		background-image: url('/img/big.png');
	}
}

.masthead {
	height: 100vh;
	padding-top: 4rem;
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	width: 100%;
	height: 100vh;
	animation: fadeBackground 15s infinite;
	/* The animation will last 15 seconds and loop indefinitely */
}

.masthead::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	/* Add an overlay for better readability of text */
	z-index: -1;
}

.with-background {
	background: url("/img/bg2.png") center center no-repeat;
	background-size: cover;
	background-attachment: fixed;
	/* This ensures the background image stays fixed */
	width: 100%;
	height: 100vh;
}

.index {
	width: auto;
	height: auto
}

.info {
	font-size: 18px;
	color: var(--gold-title);
	width: 100%;
	text-align: center;
	margin: 0;
	font-weight: 400
}

.topline {
	height: 1px;
	border-width: 0;
	background-color: gray;
	margin: 0
}

.card-line {
	height: 1px;
	border-width: 0;
	background-color: gray;
	margin: 0
}

.middleline {
	height: 1px;
	border-width: 0;
	background-color: rgba(0, 0, 0, .1);
	width: 100%;
	margin-bottom: 5px;
	margin-top: 5px
}

.myline {
	height: 1px;
	width: 90%;
	border-width: 0;
	background-color: silver;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 10%
}

.pointer {
	cursor: pointer
}

.h6 {
	font-size: 38px;
	text-align: left
}

.disabled {
	pointer-events: none;
	cursor: default;
	color: var(--silver)
}

.input-label {
	font-size: var(--font-size-small);
	font-weight: 400;
	color: var(--card-text);
	width: 100%;
	text-align: left;
	margin: 0px;
	padding-bottom: 3px;
}

.form-group {
	margin-bottom: 10px
}

.form-control {
	display: inline-block;
	padding-left: 5px;
	font-size: var(--font-size-normal);
	font-weight: 400;
	height: 25px;
	color: #495057;
	background-color: #fff;
	border: 1px solid #ced4da;
	border-radius: .25rem
}

.form-control:focus {
	border-color: var(--gold-title);
	outline: 0 !important;
	box-shadow: none !important
}

.custom-select {
	margin: 0px;
	font-family: var(--font-to-use);
	position: relative;
	font-size: var(--font-size-small);
	color: var(--blueish);
	text-shadow: var(--lightGray) 0px 1px 1px;
	padding: 0 0 0 10px;
	height: 20px;
	width: 120px;
	background-color: var(--cream-white);
	cursor: pointer;
}

.custom-select:focus {
	font-family: var(--font-to-use);
	border-color: var(--gold-title);
	outline: 0 !important;
	box-shadow: none !important
}

.custom-select-camera {
	margin: 0px;
	font-family: var(--font-to-use);
	position: relative;
	font-size: var(--font-size-small);
	color: var(--blueish);
	text-shadow: var(--lightGray) 0px 1px 1px;
	padding: 0 0 0 10px;
	height: 30px;
	/* width: 120px; */
	background-color: var(--cream-white);
}

.custom-select-camera:focus {
	font-family: var(--font-to-use);
	border-color: var(--gold-title);
	outline: 0 !important;
	box-shadow: none !important
}

.custom-control {
	text-align: left
}

.select {
	position: static;
	display: flex;
	height: 3em;
	line-height: 3;
	background: #5c6664;
	overflow: hidden;
	border-radius: .25em
}

.hidden-column {
	display: none;
}


.table-left {
	width: 97% !important;
	padding-top: 0;
	padding-bottom: 0;
	text-align: left;
}


.table {
	width: 97%;
	padding-top: 0;
	padding-bottom: 0
}

.th {
	font-family: var(--font-to-use);
	border-collapse: separate;
	vertical-align: bottom;
	text-align: left;
	height: 10px;
	cursor: pointer
}

.tblabel {
	font: var(--font-to-use);
	background: var(--medium-gray);
	font-size: var(--font-size-small);
	text-align: left;
	color: var(--white);
	vertical-align: middle;
	line-height: 10px;
	font-weight: 400
}

.tbtext {
	font-size: var(--font-size-normal);
	text-align: left;
	color: var(--normal-text);
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	font-weight: 400
}

.tbtext-gridclick {
	font-size: var(--font-size-normal);
	text-align: left;
	color: var(--highlight-blue);
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	font-weight: 400
}

.top-label-page-header {
	color: var(--white);
	min-width: 300px;
	background-position: center;
	background-size: cover;
	background-color: var(--Page-label);
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: var(--font-size-Xtra-large);
	margin-bottom: 0;
	font-weight: 400;
}

.top-label-page {
	color: var(--white);
	min-width: 300px;
	background-position: center;
	background-size: cover;
	background-color: var(--Page-label);
	padding-top: 5px;
	padding-bottom: 10px !important;
	font-size: var(--font-size-large);
	margin-bottom: 0;
	font-weight: 400;
}

.top-label2 {
	color: var(--normal-text);
	min-width: 300px;
	background-position: center;
	background-size: cover;
	background-color: var(--background);
	padding-top: 2px;
	padding-bottom: 10px;
	font-size: var(--font-size-large);
	margin-bottom: 0;
	font-weight: 400;
}

.top-info {
	display: flow-root;
	color: var(--white);
	min-width: 300px;
	background-position: center;
	background-size: cover;
	font-size: var(--font-size-small);
	margin-bottom: 0;
	/* font-weight: lighter; */
}

.top-menu {
	color: var(--top-label);
	min-width: 300px;
	background-position: center;
	background-size: cover;
	/* background-color: var(--background); */
	padding-top: 10px;
	font-weight: 400;
}

.welcome {
	text-shadow: #000 2px 2px 10px;
	color: var(--White);
	font-size: 30px;
	font-weight: lighter
}

.welcome2 {
	text-shadow: #000 1px 1px 10px;
	min-width: 300px;
	font-size: 30px;
	color: var(--White);
	font-weight: lighter
}

.signupLogo {
	align-self: center;
	display: flexbox;
	width: 100px;
	height: 100px;
	border-radius: 15px
}

.emptyLogo {
	align-self: center;
	width: 175px;
	height: 175px;
	border-radius: 15px
}


.spinner {
	border: 9px solid var(--gold-title);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border-left-color: transparent;
	animation: spin 0.5s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

@keyframes grow {
	to {
		width: 14px;
		height: 14px;
		margin-top: -8px;
		right: 13px
	}
}

.modal {
	/* Bootstrap handles display and positioning, so no need to set them here */
	z-index: 1050;
	/* Ensure this is above the backdrop z-index */
}

.modal-backdrop {
	z-index: 1040;
	/* Ensure this is below the modal z-index */
}

.modal-content {
	background-color: var(--background);
	margin: auto;
	padding: 0;
	width: 100%;
	max-width: 400px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.modal-header,
.modal-footer {
	font-size: var(--font-size-large);
	background-color: var(--Dark-green);
	color: var(--White);
}

.modal-title,
.modal-button {
	font-size: var(--font-size-large);
	font-weight: lighter;
	color: var(--White);
}

.modal-footer .btn {
	background-color: var(--Dark-green);
	border: none;
	font-weight: lighter;
}

.modal-body {
	background-color: var(--white);
	padding: 0px;
}


/* Loading modal styles */
.modal-content-loading {
	background-color: #fefefe;
	margin: auto;
	padding: 0px;
	/* border: 1px solid #888; */
	width: 100%;
	max-width: 300px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.loading-overlay {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.modal-body-loading {
	background-color: var(--white);
	padding: 20px;
}

.content {
	padding-bottom: 70px
}

.location-option {
	cursor: pointer
}

.location-option:hover {
	background-color: var(--gold-title)
}

.active a {
	position: relative;
	color: var(--navbar) !important;
	font-weight: bold;
	background-color: var(--cream-white);
	padding-left: 30px !important;
	padding-right: 0px;
	width: auto;
	font-size: 20px;
}

.nav-link {
	font-size: 20px;
}

/* Styles for larger screens */
@media (min-width: 992px) {
	.navbar-toggler {
		display: none !important;
	}

	.navbar {
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 170px;
		padding-right: 0px;
		flex-direction: column !important;
	}

	.navbar .container {
		display: flex !important;
		flex-direction: column !important;
	}

	.navbar-nav {
		width: 10em;
		flex-direction: column !important;
		display: -ms-flexbox;
		display: flex !important;
		-ms-flex-direction: column !important;
		flex-direction: column !important;
		padding-left: 5px;
		padding-right: 0px;
		padding-top: 50px;
		margin-bottom: 0;
		list-style: none;
		bottom: 0;
		/* font-weight: lighter; */
		font-size: var(--font-size-large);
		/* font-size: 1.2rem; */
	}

	.navbar-expand-lg .navbar-collapse {
		display: flex !important;
		flex-grow: 1;
		align-items: start;
	}

	.main-content {
		margin-left: 170px;
	}
}

/* Styles for smaller screens */
.navbar-toggler {
	display: none;
}

@media (max-width: 991px) {
	.navbar-toggler {
		display: block;
	}
}

/* Style the navigation menu */
.top-nav {
	display: flex;
	justify-content: space-around;
	overflow: hidden;
	background-color: var(--background);
	height: 40px;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
}

/* Style the links inside the navigation menu */
.top-nav a {
	flex-grow: 1;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left: 10px;
	text-decoration: none;
}

/* Change the color of links on hover */
.top-nav a:hover {
	background-color: #ddd;
	color: black;
}

/* Add responsiveness - On small screens, display the nav links vertically instead of horizontally */
@media screen and (max-width: 600px) {
	.top-nav {
		display: flex;
		flex-direction: column;
		height: auto;
	}

	.top-nav a {
		text-align: center;
		/* padding: 40px; */
	}
}


.bottom-navigation {
	color: #fff;
	position: fixed;
	bottom: 0px;
	width: 100%;
	background-color: var(--medium-gray);
	display: none;
}

.bottom-navigation ul {
	list-style-type: none;
	height: 40px;
	padding: 0px;
	display: flex;
	justify-content: space-around;
}

.bottom-navigation li {
	margin: 5px;
}

.bottom-navigation a {
	text-decoration: none;
	color: var(--silver);
}

.bottom-navigation ul a i {
	color: inherit;
}

.bottom-navigation ul a.active i {
	font-weight: 900;
}

/* Show bottom navigation on small screens (768px or less) */
@media screen and (max-width: 768px) {
	.bottom-navigation {
		display: block;
		/* or 'flex' depending on your layout */
	}
}

.custom-alert-hidden {
	display: none;
}

.custom-alert-show {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1000;
	background-color: var(--navbar);
	color: var(--White);
	border: 0px solid var(--White);
	padding: 20px;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
	border-radius: 10px;
	z-index: 1150;
}

.alert-container {
	/* display: none; */
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1150;
	/* Ensure it's on top */
}

.alert {
	position: relative;
	/* Change from fixed to relative inside container */
	transform: translate(0, 0);
	/* No need to use translate if it's in a centered flexbox */
	background-color: rgb(60, 11, 11);
	color: var(--White);
	border: 1px solid var(--blackish);
	padding: 20px;
	box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
	border-radius: 10px;
	font-size: var(--font-size-large);
	font-weight: lighter;
	width: 80%;
	max-width: 400px;
}

.alert-notAllowed {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: rgb(60, 11, 11);
	color: var(--White);
	border: 1px solid var(--blackish);
	padding: 20px;
	box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
	border-radius: 10px;
	font-size: var(--font-size-large);
	font-weight: lighter;
	z-index: 1050;
}

.alert-notAllowed-hidden {
	display: none;
}


.containerHeader {
	display: flex;
	justify-content: space-between;
	/* This spreads out the columns */
	align-items: center;
	/* This vertically centers the contents */
	text-align: center;
	/* Centers text for the middle column */
	background-color: var(--Page-label);
}

.left-column,
.right-column {
	flex: 1;
	/* Allows these columns to grow and take up space */
}

.middle-column {
	flex: 2;
	/* Gives the middle column a bit more space */
	display: flex;
	flex-direction: column;
	/* Stacks the labels vertically */
	justify-content: center;
}

/* Additional styles might be necessary depending on your overall design */


::-webkit-input-placeholder {
	/* Chrome/Opera/Safari */
	color: #bfbfbf !important;
}

::-moz-placeholder {
	/* Firefox 19+ */
	color: #bfbfbf !important;
}

:-ms-input-placeholder {
	/* IE 10+ */
	color: #bfbfbf !important;
}

:-moz-placeholder {
	/* Firefox 18- */
	color: #bfbfbf !important;
}

.card-dashboard {
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* Space between rows */
	/* background-color: white !important;
	border: 1px solid var(--card-border);
	border-radius: 10px;
	margin: 10px;
	padding: 5px;
	box-shadow: 2px 2px 8px 0 var(--shadow);
	min-width: 400px; */
}