:root {
  /* --primary-color: #5E17EB; */
  --primary-color: green;
}

@font-face {
  font-family: "wedges";
  src: url("../fonts/wedges/Wedges.ttf");
}

@font-face {
  font-family: "MangoRg";
  src: url("../fonts/mango-scribble/Mango Rg.otf");
}

.ql-sub::before {
  content: 'ₓ'; /* Unicode subscript character */
}

.ql-sup::before {
  content: 'ˣ'; /* Unicode superscript character */
}

.flex-1{
	flex: 1;
}

.my-col-date {
	width: 100%;
}

.absolute-processing-holder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	z-index: 20;
}


@media(max-width:768px){
	.my-col-date {
		width: 50%;
	}
	
	.my-sm-movers {
		width: 50%;
	}
}

@media(max-width:375px){
	.my-sm-movers,
	.my-col-date {
		width: 100%;
	}
}

/* Add custom styling for option images */
.select2-container .select2-results__option img {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
}
.select2-container--default .select2-selection--single .select2-selection__rendered img {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
}

.custom-dropdown-width {
	width: 90vw !important;
	max-width: 350px !important;

}

.toggle-switch {
	position: relative;
	width: 50px;
	height: 24px;
	-webkit-appearance: none;
	appearance: none;
	background-color: #ccc;
	outline: none;
	border-radius: 15px;
	transition: background-color 0.3s;
	cursor: pointer;
}

.toggle-switch:checked {
	background-color: #4caf50;
}

.toggle-switch::before {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: white;
	top: 2px;
	left: 2px;
	transition: transform 0.3s;
}

.toggle-switch:checked::before {
	transform: translateX(26px);
}

/* When checked, change background and move slider */
.toggle-switch input:checked + .slider {
  background-color: #007bff;
}

.toggle-switch input:checked + .slider::before {
  transform: translateX(25px);
}

/* Default label text for "No" */
.form-check-label::after {
  content: "No";
}

/* Change to "Yes" when the checkbox is checked */
.form-check-input:checked + .form-check-label::after {
  content: "Yes";
}

/* The slider */
.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 25px;
  cursor: pointer;
  transition: 0.4s;
}

/* Slider before the toggle */
.slider::before {
  content: "";
  position: absolute;
  height: 17px;
  width: 17px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}

.container.hero{
	margin: -4em auto;
	height: 80vh;
	position: relative;
	padding: 0;
	background: #ffffff;
}

.container.hero .md-container,
.container.hero .lg-container {
	width: 100%;
	max-width: 768px;
	height: 100%;
	margin: 0 auto;
}

.container.hero .lg-container {
	max-width: 996px;
}

header{
	position:fixed;
	top:0;
	left:0;
	z-index:2;
	display:flex;
	background:#ffffff;
	display: flex;
	justify-content:space-between;
	align-items: center;
	width:100%;
}

header .logo-container{
	display: flex;
	height:100%;
	position:relative;
	align-items:center;
}

header .logo-container .logo-holder{
	flex: 1;
	position: relative;
}

header .logo-container .logo-holder img{
	max-height:55px;
}

header .logo-container .logo-text-holder{
	font-family: wedges;
	/* margin-left: -5px; */
	font-size: 1.4em;
	color:#2E7322;
	position: relative;
	flex: 2;
}

header .logo-container .logo-text-holder span{
	display:block;
	font-size:0.5em;
	margin-top:-1em;
	letter-spacing:2px;
}

header .menu-bar{
	display: flex;
	align-items: center;
	cursor:pointer;
	margin: 0 1em;
}

header .search-bar {
	flex: 1;
	margin: 5px 10px;
	display: flex;
	align-items: center;
	
}

header input {
	width: 100%;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 5px;
}

header i {
	display: none;
}

header .user {
	display: flex;
	align-items: center;
	font-weight: 500;
	margin-right: 5px;
}

header .user img {
	border-radius: 50%;
	width: 40px;
	height: 40px;
	/* margin-right: 10px; */
}

header .user span.welcome-user{
	display:block;
	margin-bottom: -5px;
	font-size:12px;
	color:#65B74B;
	opacity:0.8;
}

@media(max-width:768px){
	header .search-bar {
		justify-content: flex-end;
	}
	
	header input {
		display: none;
	}

	header i {
		display: flex;
	}
}

@media(max-width:576px){
	header .logo-container{
		flex: 1;
	}
	
	header .search-bar {
		flex: 0;
	}
	
	header .search-bar,
	header .menu-bar,
	header .user {
		margin:0;
		margin-right: 5px;
	}
	
	/* header .logo-container .logo-text-holder{
		font-size: 4.5vw;
	}
	
	header .logo-container .logo-text-holder span{
		font-size: 2.25vw;
		margin-top:-5px;
	} */
	
	/* header .user span {
		display: none;
	} */
	
}

@media(max-width:340px){
	header .logo-container{
		display: flex;
		align-items: center;
		height: 60px;
	}
	
	
	/* header .logo-container .logo-text-holder{
		font-size: 4.9vw;
	}
	
	header .logo-container .logo-text-holder span{
		font-size: 2.7vw;
	} */
}

.hero{
	width:100%;
	height:calc(100vh - 60px);
	position:relative;
	display:flex;
	top:60px;
	background:rgb(46,115,34,0.1);
}

.sidebar {
	width: 250px;
	background-color: #fff;
	height: 100%;
	box-shadow: 2px 0 5px rgba(0,0,0,0.1);
	padding-top: 20px;
}
.sidebar a {
	display: block;
	color: #333;
	padding: 15px;
	text-decoration: none;
	transition: background-color 0.3s;
	cursor: pointer;
}
.sidebar a:hover {
	background-color: #e4e4e4;
}

.content {
	width: calc(100% - 250px);
	height: 100%;
	overflow:auto;
	padding:2em 1em;
	
}

.content.view-quote {
	width: 100%;
	max-width: 768px;
	margin:0px auto;
}

@media(max-width:768px){
	.sidebar {
		width: 100%;
		position: fixed;
		top: 60px;
		left: 0;
		padding-top: 0;
		z-index:1;
		background:#FAE6E6;
		display: none;
	}
	
	.sidebar.active {
		display: block;
	}
	
	.sidebar a{
		background:#ffffff;
		padding:1em;
		margin: 5px 1em;
		border-radius:5px;
	}
	
	.content {
		width: 100%;
	}
}

@media(max-width:576px){
	.content {
		padding:2em 5px;
	}
}

.landing-card-btns-stats-container {
	display: flex;
	justify-content: space-between;
	gap: 2em;
}

.landing-card-btns-stats-container .landing-card-btns-holder {
	flex: 1;
}

.landing-card-btns-stats-container .landing-card-btns-holder {
	
}

.cards {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.cards .card {
	background-color: #fff;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	flex: 1;
	min-width: 250px;
	min-height: 150px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction:column;
	cursor: pointer;
}

.cards .card:not(.sub-buttons):not(.head-body-footer-buttons):hover {
	background-color:#031C05;
	color: #fff;
}

.cards .card.sub-buttons{
	padding:0;
	overflow: hidden;
}

.cards .card.sub-buttons h3{
	width: 100%;
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
}

.cards .card.sub-buttons h3:hover {
	background-color:#031C05;
	color: #fff;
}

.cards .card.sub-buttons .sub-buttons-container {
	width: 100%;
	display: flex;
}

.cards .card.sub-buttons .sub-buttons-container button {
	background: none;
	background-image: linear-gradient(to right top, #0b5622, #0e7329, #14912f, #1bbf35, #22ff3c);
	color: #ffffff;
	border: none;
	outline: none;
	margin: 0;
	text-align: center;
	flex: 1;
	padding: 5px;
}

.cards .card.sub-buttons .sub-buttons-container button.pending {
	background-image: linear-gradient(to right top, #370505, #5f0917, #8b0d25, #ba1033, #eb1241);
}

.cards .card.sub-buttons .sub-buttons-container button:hover{
	opacity: 0.5;
}

/* .cards .card.sub-buttons .sub-buttons-container button .title-holder {
	font-size: 0.85rem;
}

.cards .card.sub-buttons .sub-buttons-container button .title-holder span {
	font-size: 0.7rem;
} */

.cards .card h3 {
	margin: 0;
	font-size: 24px;
	margin-bottom: 10px;
}

.cards .card p {
	margin: 0;
	font-size: 18px;
}

.cards .card.head-body-footer-buttons{
	padding: 0 !important;
	width: 100%;
	overflow: hidden;
}

.cards .card.head-body-footer-buttons .header-holder {
	padding: 5px;
	font-size: 1.25em;
	font-weight: 500;
}

.cards .card.head-body-footer-buttons .header-data-holder {
	flex: 1;
	border-top: 1px solid #EAF1E8;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.cards .card.head-body-footer-buttons .header-data-holder:hover,
.cards .card.head-body-footer-buttons .footer-data-holder:hover,
.cards .card.head-body-footer-buttons .footer-btns-holder .footer-btn:hover {
	background-color:#031C05;
	color: #fff;
}

.cards .card.head-body-footer-buttons .footer-data-holder {
	border-top: 1px solid #EAF1E8;
	width: 100%;
	padding: 5px 0;
}

.cards .card.head-body-footer-buttons .footer-btns-holder {
	border-top: 1px solid #EAF1E8;
	width: 100%;
	display: flex;
	justify-content: center;
}

.cards .card.head-body-footer-buttons .footer-btns-holder .footer-btn {
	flex: 1;
	padding: 5px;
	text-align: center;
	border-right: 1px solid #EAF1E8;
	background-image: linear-gradient(to right top, #0b5622, #0e7329, #14912f, #1bbf35, #22ff3c);
	color: #ffffff;
}

.cards .card.head-body-footer-buttons .footer-btns-holder .footer-btn.sent {
	background-image: linear-gradient(to right top, #8e24aa, #ab47bc, #c2185b, #e91e63, #f06292);
}

.cards .card.head-body-footer-buttons .footer-btns-holder .footer-btn:last-child {
	border-right: none;
}

.cards .card .increase {
	color: green;
}

.cards .card .decrease {
	color: red;
}

@media(max-width:992px){
	.landing-card-btns-stats-container {
		flex-direction: column;
		gap: 1em;
		justify-content: center;
	}
	
	.chart-container{
		display: flex;
		justify-content: center;
		text-align: center;
	}
	
	.cards {
		justify-content: center;
	}
	
	.cards .card {
		min-width: calc(50% - 25px);
		max-width: calc(50% - 25px);
	}
	
	/* .cards .card.sub-buttons {
		min-width: 100%;
	} */
	
	.cards .card h3 {
		font-size: 1.4rem;
		text-align:center;
	}
	
	.cards .card p {
		font-size: 1rem;
		text-align:center;
	}
}

@media(max-width:510px){
	.cards .card.sub-buttons,
	.cards .card.head-body-footer-buttons	{
		min-width: 100%;
	}
}

@media(max-width:340px){
	.cards .card:not(.sub-buttons):not(.head-body-footer-buttons) {
		/* min-width: 100%; */
		min-height: 80px;
	}
	
	.cards .card:not(.sub-buttons):not(.head-body-footer-buttons) h3 {
		font-size: 1.1rem;
	}
}

.freeze{
	overflow: hidden;
}

.none{
	display:none;
}

.hidden {
	display: none;
}

.pointer{
	cursor: pointer;
}

.border-top-primary{
	border-top:1px solid var(--primary-color);
}

.fixed-Bottom{
	position: fixed !important;
	bottom: 1em;
	right: 5px !important;
	z-index: 2;
}

.fit-content{
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.primary-theme-button{
	background: var(--primary-color);
	color: #fff;
}

.break-email {
    word-break: break-word; /* Break long words */
    overflow-wrap: break-word; /* Ensure long words wrap */
    word-wrap: break-word; /* Fallback for older browsers */
}

.my-md-container {
	width: 100%;
	max-width: 768px;
	margin: 1em auto;
}

.my-lg-container {
	width: 100%;
	max-width: 992px;
	margin: 1em auto;
}

.my-md-container.flex,
.my-lg-container.flex {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.my-col-3 {
	width: calc(33.3% - 5px);
	margin-bottom: 1em;
	margin-right: 5px;
	/* border: 1px solid red; */
}

.my-col-2 {
	width: calc(50% - 5px);
}

.my-col-2.my-flex-column {
	width: 100%;
}

@media(max-width:992px){
	.my-col-3 {
		width: calc(50% - 5px);
	}
}

@media(max-width:576px){
	.my-col-3 {
		width: 100%;
	}
	
	.my-col-2 {
		width: 100%;
	}
}

.preview-Container{
	max-width: 100%;
	max-height: 300px;
	position: relative;
	margin: 0px auto;
 }
 
 .preview {
	max-width: 100%;
	max-height: 300px;
	display: flex;
	align-items:center;
	justify-content:center;
	text-align: center;
}

.preview-Container button{
	position: absolute;
	top: 0;
	right: 0;
}

.overflow{
	overflow:auto;
}

.overflow-100-minus-40{
	height:calc(100% - 40px);
	overflow:auto;
}

.overflow-100-minus-60{
	height:calc(100% - 60px);
	overflow:auto;
}

.overflow-60{
	height:60vh;
	overflow:auto;
}

.overflow-inner-60{
	height:60vh;
	overflow:auto;
}

.overflow-inner-60.minus-50{
	height:cacl(60vh - 50px);
}

.overflow-inner-60.minus-90{
	height:cacl(60vh - 90px);
}

.overflow-inner-55{
	height:55vh;
	overflow:auto;
}

.overflow-inner-70{
	height:70vh;
	overflow:auto;
	position:relative;
}

@media(max-width:768px){
	.overflow-100-minus-40,
	.overflow-100-minus-60{
		height:100%;
	}
	.overflow-inner-60{
		height:75vh;
	}
	
	.overflow-inner-60.minus-50{
		height:calc(75vh - 50px);
	}
	
	.overflow-inner-60.minus-90{
		height:calc(75vh - 40px);
	}
	
	.overflow-inner-55{
		height:calc(75vh - 50px);
	}
	
	.overflow-inner-70{
		height:84vh;
	}
}

.same-line-text {
    white-space: nowrap;
}

@media(max-width:350px){
	.follow-ups-break-350{
		display: block;
		color: red;
	}
}

.truncate-text {
    white-space: nowrap;        /* Prevent text from wrapping to the next line */
    overflow: hidden;           /* Hide the overflow text */
    text-overflow: ellipsis;    /* Add "..." to indicate text overflow */
    max-width: 100%;            /* Ensure it fits within its container */
    display: block;             /* Ensure it behaves like a block element */
}

.btn_One{
	background-image: linear-gradient(to right top, #052c37, #00455f, #005e8b, #0076bb, #128deb);
	border:none;
	border-radius:10px;
	padding:10px;
	margin:5px;
	letter-spacing:1px;
	font-weight:400;
	color:#ffffff;
	cursor:pointer;
	outline:none;
}

.btn_Two{
	background-image: linear-gradient(to right top, #370505, #5f0917, #8b0d25, #ba1033, #eb1241);
	border:none;
	border-radius:10px;
	padding:10px;
	margin:5px;
	letter-spacing:1px;
	font-weight:400;
	color:#ffffff;
	cursor:pointer;
	outline:none;
}

.btn_Three{
	background-image: linear-gradient(to right top, #be3d04, #ac4d00, #995800, #885f00, #786402);
	border:none;
	border-radius:10px;
	padding:10px;
	margin:5px;
	letter-spacing:1px;
	font-weight:400;
	color:#ffffff;
	cursor:pointer;
	outline:none;
}

.btn_Four,
.btn_Primary{
	background-image: linear-gradient(to right top, #870a8c, #681985, #4a1d7a, #2b1e6d, #031b5e);
	border:none;
	border-radius:10px;
	padding:10px;
	margin:5px;
	letter-spacing:1px;
	font-weight:400;
	color:#ffffff;
	cursor:pointer;
	outline:none;
}

.btn_Primary{
	background-image: linear-gradient(to right top, #0b5622, #0e7329, #14912f, #1bbf35, #22ff3c);
}

.btn_One.sm,
.btn_Two.sm,
.btn_Three.sm,
.btn_Four.sm
.btn_Primary.sm{
	padding:5px;
	font-size:1em;
}

.btn_One.round,
.btn_Two.round,
.btn_Three.round,
.btn_Four.round,
.btn_Primary.round{
	padding:0;
	width:40px;
	height:40px;
	border-radius:50%;
}

.btn_One.sm_round,
.btn_Two.sm_round,
.btn_Three.sm_round,
.btn_Four.sm_round,
.btn_Primary.sm_round{
	width:30px;
	height:30px;
}

.btn_One.fixed,
.btn_Two.fixed,
.btn_Three.fixed,
.btn_Four.fixed,
.btn_Primary.fixed{
	position:fixed;
	bottom:20px;
	right:10px;
	z-index:2;
}

/*.alert-Error-Container starts here...*/
.alert-Error-Container,
.success-Message-Container,
.alert-Info-Container,
.confirm-Info-Container,
.home-Found-Product-Item-Quantity-Form-Holder,
.precessing-Fixed-Flex-Box-Container,
.myPopUpContainer,
.output-fixed-container{
	width:100%;
	height:100vh;
	position:fixed;
	top:0;
	left:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background:rgba(171, 205, 239, 0.3); /*background with opacity of 30%, 0.3 at the end...*/
	-webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
	z-index:10000;
}

.myPopUpContainer,
.output-fixed-container{
	z-index:9555;
	display:none;
}

.myPopUpContainer.active,
.output-fixed-container.active{
	display:flex;
}

.myPopUpContainer .myPopUpContainerInnerHolder,
.output-fixed-container .output-fixed-inner-holder{
	width:768px;
	max-width:95%;
	height:85vh;
	position:relative;
	background:#fafafa;
}

.output-fixed-container .output-fixed-inner-holder{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.myPopUpContainer .myPopUpContainerInnerHolder .myPopUpContainerOverflow{
	width:100%; 
	height:calc(85vh - 60px);
	overflow:auto;
	position:relative;
}

@media(max-width:768px){
	.myPopUpContainer .myPopUpContainerInnerHolder{
		height:95vh;
	}
	
	.myPopUpContainer .myPopUpContainerInnerHolder .myPopUpContainerOverflow{
		height:calc(95vh - 60px);
	}
}

.home-Found-Product-Item-Quantity-Form-Holder{
	z-index:4;
}

.confirm-Info-Container.block{
	display:block;
}


.alert-Error-Container .alert-Error-Center-Container,
.success-Message-Container .success-Message-Center-Container,
.alert-Info-Container .alert-Info-Center-Container,
.confirm-Info-Container .alert-Info-Center-Container,
.confirm-Info-Container .alert-Info-Center-Processed-Container{
	width:500px;
	height:auto;
	background: #ECF0E9;
	background: -moz-linear-gradient(left, #ECF0E9 0%, #F5F5F5 50%, #E9EBD5 100%);
	background: -webkit-linear-gradient(left, #ECF0E9 0%, #F5F5F5 50%, #E9EBD5 100%);
	background: linear-gradient(to right, #ECF0E9 0%, #F5F5F5 50%, #E9EBD5 100%);
	text-align:center;
	position:relative;
}

.confirm-Info-Container .alert-Info-Center-Processed-Container.block{
	margin:20px auto;
	height:90vh;
	overflow:auto;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.confirm-Info-Container .alert-Info-Center-Processed-Container.block::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.confirm-Info-Container .alert-Info-Center-Processed-Container.block {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

@media(max-width:505px){
	.alert-Error-Container .alert-Error-Center-Container,
	.success-Message-Container .success-Message-Center-Container,
	.alert-Info-Container .alert-Info-Center-Container,
	.confirm-Info-Container .alert-Info-Center-Container,
	.confirm-Info-Container .alert-Info-Center-Processed-Container{
		width:90%;
	}
}

.alert-Error-Container .alert-Error-Center-Container .header-Container,
.alert-Info-Container .alert-Info-Center-Container .header-Container{
	padding:1em;
	font-size:0.8em;
	background: #ED0915;
	background: -moz-linear-gradient(left, #ED0915 0%, #DB0813 50%, #C70812 100%);
	background: -webkit-linear-gradient(left, #ED0915 0%, #DB0813 50%, #C70812 100%);
	background: linear-gradient(to right, #ED0915 0%, #DB0813 50%, #C70812 100%);
	color:#ffffff;
	letter-spacing:1px;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	width:100%;
}

.alert-Info-Container .alert-Info-Center-Container .header-Container{
	background-color: #c1bfbf;
	background-image: linear-gradient(315deg, #c1bfbf 0%, #af8231 74%);
}

.confirm-Info-Container .alert-Info-Center-Container .header-Container{
	padding:1em;
	font-size:0.8em;
	background: #ffa500;
	color:#ffffff;
	letter-spacing:1px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	text-align:center;
	width:100%;
}

.alert-Error-Container .alert-Error-Center-Container .header-Container i,
.alert-Info-Container .alert-Info-Center-Container .header-Container i{
	font-size:1.4em;
	margin-right:5px;
}

.confirm-Info-Container .alert-Info-Center-Container .header-Container i{
	font-size:1.4em;
	margin-right:5px;
	cursor:pointer;
}

.alert-Error-Container .alert-Error-Center-Container .message-Container,
.alert-Info-Container .alert-Info-Center-Container .message-Container,
.confirm-Info-Container .alert-Info-Center-Container .message-Container,
.confirm-Info-Container .alert-Info-Center-Processed-Container .message-Container{
	width:100%;
	height:auto;
	margin:20px auto;
	padding:0.5em;
}

.confirm-Info-Container .alert-Info-Center-Processed-Container .message-Container{
	display:block !important;
}

.alert-Error-Container .alert-Error-Center-Container .message-Container h4,
.alert-Info-Container .alert-Info-Center-Container .message-Container h4{
	background: #B50E0E;
	background: -webkit-linear-gradient(to right, #B50E0E 0%, #9E1515 100%);
	background: -moz-linear-gradient(to right, #B50E0E 0%, #9E1515 100%);
	background: linear-gradient(to right, #B50E0E 0%, #9E1515 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size:1.1em;
	letter-spacing:1px;
}

.alert-Info-Container .alert-Info-Center-Container .message-Container h4,
.confirm-Info-Container .alert-Info-Center-Container .message-Container h4,
.confirm-Info-Container .alert-Info-Center-Processed-Container .message-Container h4{
	background: #91580D;
	background: -webkit-linear-gradient(to right, #91580D 0%, #7D4C0B 100%);
	background: -moz-linear-gradient(to right, #91580D 0%, #7D4C0B 100%);
	background: linear-gradient(to right, #91580D 0%, #7D4C0B 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.alert-Error-Container .alert-Error-Center-Container .btn-Container,
.alert-Info-Container .alert-Info-Center-Container .btn-Container,
.confirm-Info-Container .alert-Info-Center-Container .btn-Container,
.confirm-Info-Container .alert-Info-Center-Processed-Container .btn-Container{
	padding-bottom:1em;
}

.success-Message-Container .success-Message-Center-Container .header-Container{
	padding:1em;
	font-size:0.8em;
	background: #0C8C17;
	background: -moz-linear-gradient(left, #0C8C17 0%, #0C8C17 50%, #08590F 100%);
	background: -webkit-linear-gradient(left, #0C8C17 0%, #0C8C17 50%, #08590F 100%);
	background: linear-gradient(to right, #0C8C17 0%, #0C8C17 50%, #08590F 100%);
	color:#ffffff;
	letter-spacing:1px;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	width:100%;
}

.success-Message-Container .success-Message-Center-Container .header-Container img{
	width:40px;
	height:40px;
	margin-right:5px;
	border-radius:50%;
}

.success-Message-Container .success-Message-Center-Container .message-Container{
	width:100%;
	height:auto;
	margin:20px auto;
	padding:0.5em;
}

.success-Message-Container .success-Message-Center-Container .message-Container h4{
	background: #B50E0E;
	background: -webkit-linear-gradient(to right, #B50E0E 0%, #9E1515 100%);
	background: -moz-linear-gradient(to right, #B50E0E 0%, #9E1515 100%);
	background: linear-gradient(to right, #B50E0E 0%, #9E1515 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-size:1.1em;
	letter-spacing:1px;
}

.success-Message-Container .success-Message-Center-Container .btn-Container{
	padding-bottom:1em;
}

.precessing-Fixed-Flex-Box-Container{
	display:none;
}

.precessing-Fixed-Flex-Box-Container.active{
	display:flex;
}

/* table-search-container */
.table-search-container{
	width:auto;
	overflow-x: scroll;
}

.table-search-container .table-search{
	border-collapse: collapse;
	margin:1em 5px;
	table-layout: auto; /* Let the table adjust column widths based on content */
}

.table-search-container .table-search .table-search-tr{
	border:1px solid #DEE2E6;
}

.table-search-container .table-search .table-search-tr .table-search-th,
.table-search-container .table-search .table-search-tr .table-search-td{
	padding: 10px;
    border: 1px solid #DEE2E6;
    text-align: left;
    white-space: nowrap; /* Prevent text from wrapping */
	cursor:pointer;
}

.table-search-container .table-search .table-search-tr.no-border,
.table-search-container .table-search .table-search-tr .table-search-th.no-border,
.table-search-container .table-search .table-search-tr .table-search-td.no-border{
	border: none;
}

.table-search-container .table-search .table-search-tr .table-search-th.progressReport,
.table-search-container .table-search .table-search-tr .table-search-td.progressReport{
	padding: 5px;
	font-size:12px;
}

.table-search-container .table-search .table-search-tr .table-search-td.progressReportSmallFont{
	padding: 5px;
	font-size:10px;
}

.table-search-container .table-search .table-search-tr .table-search-td.clip-content{
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	border:5px solid red;
}

.table-search-container .table-search .table-search-body .table-search-tr:hover{
	background: #F9E5E5;
	/* color: var(--white-color); */
}

.table-search-container .table-search select,
.table-search-container .table-search input{
	 border: 1px solid #DEE2E6;
}

.table-search-container .table-search .table-search-body{
	
}

.table-search-container .table-search .table-search-tfoot{
	display:flex;
	width:100%;
	padding: 5px;
}

.table-search-container .table-search .table-search-tfoot button{
	/* cursor:pointer; */
	/* color: #000; */
	
}

.multiline {
    white-space: pre; /* or white-space: pre-wrap; to handle wrapping */
  }

/* quote-preview */
.quote-preview{
	font-size: 12px;
}

.table-layout{
	table-layout: auto;
}

/* A4 size in pixels (at 96 DPI) */
.a4-portrait {
    width: 210mm; /* A4 width in millimeters */
	height: auto;
	border: 2px solid red;
}

.print-A4-Table{
	page-break-after: always;
	border-collapse: collapse;
	margin: 0 !important;
	padding:0 !important;
	width: 100%;
}

.print-A4-Table .print-A4-Table-Th, 
.print-A4-Table .print-A4-Table-Td {
  border-top: 1px solid #DEE2E6;
  padding: 5px;
}

.print-A4-Table .print-A4-Table-Td.border-bottom {
	border-bottom: 1px solid #DEE2E6;
}

.print-A4-Table .print-A4-Table-Th{
	font-weight: 700;
}

.print-A4-Table .print-A4-Table-Thead{
	display: table-header-group;
}

.print-A4-Table .print-A4-Table-Thead .print-A4-Table-Th{
	border: none;
}

.print-A4-Table tfoot{
	/* display: table-footer-group; */
	background:blue !important;
}

@media print {
    .print-A4-Table thead {display: table-header-group;}
    /* .print-A4-Table tfoot {display: table-footer-group;} */
    
    .print-A4-Table  {
	   size: A4 portrait !important;
	   page-break-after: always;
       border-collapse: collapse;
    }

    .print-A4-Table  th, .print-A4-Table  td {
       /*  border: 1px solid red !important;
		border-right: none; */
        padding: 5px;
    }
	
	.print-A4-Table tr .print-A4-Table-Th{
		color: red !important;
	}
}

/* Start of quotes styles */
.quotation-items-container {
	box-sizing: border-box;
	/* background-color: #f4f4f4; */
	width: 100%;
	height: auto;
}

.quotation-items-container .quote-item, .quotation-items-container .user-item {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

.quotation-items-container .quote-item-holder, .quotation-items-container .user-item-holder {
	background-color: #fff;
	border: 1px solid #ddd;
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
}

.quotation-items-container .quote-item-customer-name-total-holder, 
.quotation-items-container .quote-item-statuses-info-holder, 
.quotation-items-container .user-item-holder {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.quotation-items-container .quote-title, .quotation-items-container .user-name {
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.quotation-items-container .quote-number, 
.quotation-items-container .quote-total, 
.quotation-items-container .quote-status-response, 
.quotation-items-container .quote-date-time,
.quotation-items-container .user-age,
.quotation-items-container .user-department,
.quotation-items-container .user-status {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.quotation-items-container .quote-item-statuses-info-holder .quote-status {
	font-weight: bold;
	color: #007bff;
}

.quotation-items-container .quote-item-statuses-info-holder .quote-date-time {
	font-size: 12px;
	color: #888;
}

/* Search Input */
.quotation-items-container .search-container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 20px auto;
	/* margin-bottom: 20px; */
	position: relative;
	width: 400px;
	max-width: 100%;
}

.quotation-items-container .search-container i {
	position: absolute;
	left: 10px;
}

.quotation-items-container .search-input {
	width: 100%;
	padding: 10px;
	border-radius: 8px;
	border: 1px solid #ddd;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	background-position: 10px center;
	background-repeat: no-repeat;
	padding-left: 40px;
	outline: none;
}

/* Select Holder */
.quotation-items-container .select-holder {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.quotation-items-container .select-holder select {
	width: 48%;
	padding: 10px;
	border-radius: 8px;
	border: 1px solid #ddd;
	background-color: #fff;
}

/* Filter Buttons */
.quotation-items-container .filter-buttons {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
	background: #ffffff;
}

.quotation-items-container .filter-buttons button {
	flex: 1;
	padding: 10px;
	background-color: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	transition: border-bottom 0.3s ease-in-out;
}

.quotation-items-container .filter-buttons button.active {
	border-bottom: 2px solid #008000;
}

.quotation-items-container .filter-buttons button:hover {
	border-bottom: 2px solid #008000;
}

/* Pagination */
.quotation-items-container .pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin-top: 20px;
}

.quotation-items-container .pagination button {
	padding: 10px 20px;
	border: none;
	background-image: linear-gradient(to right top, #0b5622, #0e7329, #14912f, #1bbf35, #22ff3c);
	color: #fff;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.quotation-items-container .pagination button:hover {
	background-color: #0056b3;
}

.quotation-items-container .pagination span {
	font-weight: bold;
}

/* Responsive Styles */
/* @media (max-width: 768px) {
	.quotation-items-container  {
		font-size: 14px;
	}
} */

@media (max-width: 576px) {
	.quotation-items-container  {
		font-size: 1rem;
	}

	.quotation-items-container .quote-item-holder, .quotation-items-container .user-item-holder {
		padding: 10px;
	}

	.quotation-items-container .quote-item-customer-name-total-holder, 
	.quotation-items-container .quote-item-statuses-info-holder, 
	.quotation-items-container .user-item-holder {
		align-items: flex-start;
	}

	.quotation-items-container .quote-number, .quote-total, .quote-status-response, .quote-date-time,
	.quotation-items-container .user-age, .user-department, .user-status {
		text-align: left;
	}

	.quotation-items-container .filter-buttons button {
		font-size: 0.9rem;
	}

	.quotation-items-container .select-holder select {
		font-size: 0.9rem;
	}
}
/* End of quotes styles */

/* Start of image-output-holder styles */
.image-output-holder {
	position: relative;
	display: inline-block;
}
.image-output-holder img {
	max-width: 150px;
	max-height: 150px;
	object-fit: cover;
	border: 1px solid #ddd;
	border-radius: 8px;
	margin-right: 5px;
	margin-top: 5px;
}

.abosulte-top-right {
	position: absolute;
	top: 5px;
	right: 5px;
}
/* End of image-output-holder styles */

/* results-input-search-holder */
.results-input-search-holder {
	background: inherit;
	max-height: 150px;
	overflow-y: auto;
	margin-top: 5px;
	position: absolute;
	background-color: #fff;
	z-index: 1000;
	width: 100%;
}
.results-input-search-holder div {
	padding: 10px;
	cursor: pointer;
}
.results-input-search-holder div:hover {
	background-color: #f0f0f0;
}

.added-quote-invoice-dropdown{
	border: 1px solid green;
}

.added-quote-invoice-dropdown li:first-child{
	margin-top: -0.5em;
}

.added-quote-invoice-dropdown li:last-child{
	margin-bottom: -0.5em;
}

.added-quote-invoice-dropdown li.edit{
	background: blue;
	color: white;
}

.added-quote-invoice-dropdown li.email{
	background: #338DFF;
	color: white;
}

.added-quote-invoice-dropdown li.download{
	background: #7A33FF;
	color: white;
}

.added-quote-invoice-dropdown li.active{
	background: #512475;
	color: white;
}

.added-quote-invoice-dropdown li.completed{
	background: #41AB1F;
	color: white;
}

.added-quote-invoice-dropdown li.view-online{
	background-color: #0d0a0b;
	background-image: linear-gradient(315deg, #0d0a0b 0%, #009fc2 74%);	
	color: white;
}

.added-quote-invoice-dropdown li.danger{
	background: red;
	color: white;
}

.added-quote-invoice-dropdown li.views{
	background-color: #a4508b;
	background-image: linear-gradient(326deg, #a4508b 0%, #5f0a87 74%);
	color: white;
}

.added-quote-invoice-dropdown li a{
	color: inherit;
}

/* users-contacts-container */
.users-contacts-container {
  /*   border: 1px solid #ccc; */
   /*  padding: 10px; */
   /*  border-radius: 5px; */
}

.search-users-contact-container {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.search-users-contact-container #search {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.search-users-contact-container .search-icon {
    position: absolute;
    right: 10px;
}

.contact-item {
    padding: 10px;
    border-bottom: 1px solid #ccc;
	cursor:pointer;
}

.contact-item:first-child {
    /* border-bottom: none; */
	 border-top: 1px solid #ccc;
	 margin-top: 1em;
}

.contact-item .customer-footer-holder {
	display: flex;
	justify-content: space-between;
}

.pagination-user-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.pagination-user-container #prevBtn, .pagination-user-container #nextBtn {
    background-color: #65B84C;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}

.pagination-user-container #pageInfo {
    font-size: 14px;
}

.items-per-page-container {
    margin-top: 10px;
    width:100%;
	display: flex;
	justify-content: flex-end;
}

.items-per-page-container label {
    margin-right: 10px;
}

/* customer-Profile-Container */
.customer-Profile-Container{
	width: 100%;
	display: flex;
	padding: 1em;
	border-bottom: 1em;
}

.customer-Profile-Container .customer-Profile-Image-Holder{
	padding: 5px;
}

.customer-Profile-Container .customer-Profile-Image-Holder div{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #EAF1E8;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5em;
}

.customer-Profile-Container .customer-Profile-Info-Holder .customer-Profile-Info-Item-Holder{
	margin-bottom: 10px;
}

.customer-Profile-Container .customer-Profile-Info-Holder.flex-box{
	display: flex;
	align-items: center;
	width:100%;
	max-width:425px;
	border-top: 1px solid #ccc;
	padding-bottom:1em;
	padding-top:5px;
}

.customer-Profile-Container .customer-Profile-Info-Holder.flex-box:first-child{
	border-top: none;
}

.customer-Profile-Container .customer-Profile-Info-Holder.flex-box .customer-Btn-Holder{
	text-align: right;
	width: 100%;
}

.customer-Profile-Container .customer-Profile-Info-Holder .customer-Profile-Info-Item-Holder small{
	text-transform: uppercase;
}

.customer-Profile-Container .customer-Profile-Info-Holder .customer-Profile-Info-Item-Holder small.sm{
	font-size: 12px;
	opacity: 0.8;
}

.customer-Profile-Container .customer-Profile-Info-Holder .customer-Profile-Info-Item-Holder a{
	text-decoration: none;
	color: green;
	cursor: pointer;
}

.customer-Profile-Container .customer-Profile-Info-Holder .customer-Profile-Info-Item-Holder a:hover{
	text-decoration: underline;
}

/* settings-container */
.settings-container {
	width: 100%;
	background-color: #fff;
}

.settings-nav {
	display: flex;
	justify-content: space-around;
}

.settings-tab {
	flex: 1;
	background:none;
	border: none;
	padding: 10px 5px;
	cursor: pointer;
	text-align: center;
}

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

.settings-tab.active {
	background-color: #65B84C;
	color: white;
}

@media (max-width: 375px) {
	.settings-tab.active {
		background:none;
		color: #000;
		padding: 10px 0;
		border-bottom: 2px solid #65B84C;
		font-weight: bold;
		opacity:0.7;
	}
}

.settings-content {
	border-top: 1px solid #ccc;
	padding: 2em 5px 10px 5px;
}

.settings-section {
	display: none;
}

.settings-section.active {
	display: block;
}

/* three-Column-Container */
.three-Column-Container{
	width:100%;
	height:100%;
	display:flex;
	flex-direction:column;
}

.three-Column-Container-Header{
	width:100%;
	height:50px;
	display:flex;
	align-items:center;
}

.three-Column-Container-Header div{
	flex:1;
	margin-left:5px;
}

.three-Column-Container-Body{
	flex:1;
	overflow: auto;
}

/* .view-quote-header-container */
.view-quote-header-container {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.view-quote-header-container .view-quote-card {
	width: 33.3%;
	margin-bottom: 1em;
}

.view-quote-header-container .view-quote-card .view-quote-flex-content-holder {
	width: 100%;
	display: flex;
	flex-direction: column;
	letter-spacing: 1px;
}

.view-quote-header-container .view-quote-card .view-quote-flex-content-holder .view-quote-flex-title-holder {
	opacity: 0.8;
	text-transform: uppercase;
	font-size: 12px;
}

.view-quote-header-container .view-quote-card .view-quote-flex-content-holder .view-quote-flex-desc-holder {
	margin-bottom: 10px;
	font-weight: 500;
	opacity: 0.9;
}

@media(max-width:768px){
	.view-quote-header-container:not(.print) .view-quote-card {
		width: 50%;
	}
}

@media(max-width:458px){
	.view-quote-header-container:not(.print) .view-quote-card {
		width: 100%;
	}
}

.view-quote-items-container {
	width: 100%;
	border-top: 1px solid #ccc;
	display: flex;
	flex-wrap: wrap;
	padding: 5px 0;
}

.view-quote-items-container .view-quote-item-holder {
	/* margin-right: 2em; */
	width:50%;
}

.view-quote-items-container .view-quote-item-holder .view-quote-item-title-holder {
	font-weight: 500;
	opacity: 0.9;
}

.view-quote-items-container .view-quote-qty-holder {
	width: 10%;
	font-weight: 500;
	opacity: 0.9;
	text-align: center;
	/* padding: 0 2em; */
}

.view-quote-items-container .view-quote-amnt-holder {
	width: 40%;
	font-weight: 500;
	opacity: 0.9;
	text-align: end;
}

@media(max-width:768px){
	.view-quote-items-container:not(.print) .view-quote-item-holder {
		width: 70%;
	}
	
	.view-quote-items-container:not(.print) .view-quote-amnt-holder {
		width: 20%;
	}
}

@media(max-width:576px){
	.view-quote-items-container:not(.print) .view-quote-item-holder,
	.view-quote-items-container:not(.print) .view-quote-qty-holder,
	.view-quote-items-container:not(.print) .view-quote-amnt-holder	{
		width: 100%;
	}
	
	.view-quote-items-container:not(.print) .view-quote-item-holder .view-quote-desc-holder {
		font-size: 0.9rem;
	}
	
	.view-quote-items-container:not(.print) .view-quote-qty-holder {
		text-align: right;
	}
	
}

.view-quote-totals-container {
	border-top: 1px solid #ccc;
	padding: 1em 0;
}

.view-quote-totals-container .view-quote-totals-holder {
	display: flex;
	justify-content: flex-end;
}

.view-quote-totals-container .view-quote-totals-holder.vat {
	align-items: center;
}

.view-quote-totals-container .view-quote-totals-holder .view-quote-totals-desc-holder {
	padding-right: 2em;
	width: 75%;
	display: flex;
	justify-content: flex-end;
}

.view-quote-totals-container .view-quote-totals-holder .view-quote-totals-ammnt-holder {
	padding: 0 5px 0 2em;
	background: #EAF1E8;
	width:25%;
	text-align: right;
}

.view-quote-totals-container .view-quote-totals-holder.vat .view-quote-totals-desc-holder,
.view-quote-totals-container .view-quote-totals-holder.vat .view-quote-totals-ammnt-holder {
	padding-bottom: 1em;
}

.view-quote-totals-container .view-quote-totals-holder.first .view-quote-totals-desc-holder,
.view-quote-totals-container .view-quote-totals-holder.first .view-quote-totals-ammnt-holder {
	padding-top: 1em;
}

@media(max-width:576px){
	.view-quote-totals-container:not(.print) .view-quote-totals-holder .view-quote-totals-desc-holder {
		width: 60%;
	}
	
	.view-quote-totals-container:not(.print) .view-quote-totals-holder .view-quote-totals-ammnt-holder {
		width: 40%;
	}
}

@media(max-width:330px){
	.view-quote-totals-container:not(.print) .view-quote-totals-holder.vat .view-quote-totals-desc-holder.lead,
	.view-quote-totals-container:not(.print) .view-quote-totals-holder.vat .view-quote-totals-ammnt-holder.lead {
		font-size: 1.1rem !important;
	}
}

.view-quote-terms-condition-holder:not(.print) .view-quote-title-bg-color {
	background: #EAF1E8;
	padding: 10px;
}

/* views-status-header */
.views-status-header {
    position: relative;
    width: 100%;
}

.views-status-header.accepted {
   color: #4285F4;
}

.views-status-header.sent {
   color: orange;
}

.views-status-header.complete {
   color: green;
}

.views-status-header.editing {
   color: red;
}

.views-status-header.active {
   color: purple;
}

.views-status-header::after {
    content: '';
    position: absolute;
    bottom: -1.5em;
    left: 0;
    right: 0;
    height: 100%;
    border-top: 4px solid #AED1FB;
    box-sizing: border-box;
}

.views-status-header.accepted::after {
	 border-top: 4px solid #AED1FB;
}

.views-status-header.sent::after {
	 border-top: 4px solid orange;
	 opacity: 0.5;
}

.views-status-header.complete::after {
	 border-top: 4px solid green;
	 opacity: 0.5;
}

.views-status-header.editing::after {
	 border-top: 4px solid red;
	 opacity: 0.5;
}

.views-status-header.active::after {
	 border-top: 4px solid purple;
	 opacity: 0.5;
}

.views-status-opens-container {
	width: 100%;
	max-width: 768px;
}

.views-status-opens-container .counter{
	font-size:2.5rem;
	/* background: linear-gradient(to right, #f06, #48f); */
	background: linear-gradient(to right, #0000ff, #00aaff);
    -webkit-background-clip: text;
    color: transparent;
}

.views-status-opens-holder{
	position: relative;
	font-weight:500;
	display:flex;
	justify-content: space-between;
	width: 100%;
	font-size:1.1rem;
}

.views-status-opens-holder::after {
    content: '';
    position: absolute;
    bottom: -1.5em;
    left: 0;
    right: 0;
    height: 100%;
    border-top: 4px solid #000;
    box-sizing: border-box;
	opacity: 0.5;
}

.views-status-opens-holder.btn-holder::after {
	bottom: -2em;
}

.views-status-opens-holder div:last-child{
	color: green;
}

.views-status-opens-holder.btn-holder .title-desc-holder{
	color: #000;
	font-size: 12px;
}

.views-status-opens-holder.btn-holder .title-desc-holder div:first-child{
	opacity: 0.8;
}

.views-status-opens-holder.btn-holder .title-desc-holder div:last-child{
	margin-top: -5px;
}

@media(max-width:375px){
	.views-status-opens-holder:not(.print) div:last-child{
		font-size: 0.8rem;
	}
}

/* before-after-img-vid-holder */
.before-after-img-vid-container {
   display: inline-block; /* Allows the container to take the width of its child elements */
    overflow-x: auto; /* Enables horizontal scrolling */
    white-space: nowrap; /* Prevents content from wrapping to the next line */
	width: 100%;
}

.before-after-img-vid-title-holder {
	background: rgb(0,128,0,0.25);
	font-weight: 700;
	padding: 5px;
	display: flex;
}

.before-after-img-vid-title-holder div.text-holder{
	flex: 1;
	text-align: center;
}

.before-after-img-vid-holder {
	display: inline-block;
}

.before-after-img-vid-holder .before-after-img-vid-inner-flex-holder {
	cursor:pointer;
}

.before-after-img-vid-holder .before-after-img-vid-inner-flex-holder.flex{
	display: flex;
	justify-content: center;
}

.before-after-img-vid-holder .before-after-img-vid-inner-flex-holder div {
	max-height: 150px;
	position: relative;
}

.before-after-img-vid-holder .before-after-img-vid-inner-flex-holder div img,
.before-after-img-vid-holder .before-after-img-vid-inner-flex-holder div video {
	max-height: 150px;
}

@media(max-width:768px){
	.before-after-img-vid-holder:not(.print) .before-after-img-vid-inner-flex-holder div img,
	.before-after-img-vid-holder:not(.print) .before-after-img-vid-inner-flex-holder div video {
		max-width: 100%;
		height: auto;
	}
}


.before-after-img-vid-holder .before-after-img-vid-inner-flex-holder div span {
	background: rgb(0,0,0,0.25);
	color: white;
	padding:5px 1em;
	position:absolute;
	bottom:0;
	right:0;
}

/* bookings */
.bookings-container {
	width: 95%;
	max-width: 768px;
	margin: 2rem auto;
	background-color: #fff;
	padding: 2rem;
	border-radius: 8px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	border: 1px solid #ccc;
	border-radius: 1em;
}

@media (max-width: 425px) {
	.bookings-container:not(.print) {
		width: 100%;
		margin: 5px auto;
		padding: 1rem;
		border-radius: 0;
	}
}

 .bookings-search-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
	gap: 1em;
}

.bookings-search-bar input[type="text"] {
	padding: 8px;
	font-size: 16px;
	border: 1px solid #ddd;
	border-radius: 5px;
	flex: 1;
}

.bookings-filters {
	flex: 1;
	display: flex;
	gap: 10px;
}

.bookings-filter-button {
	flex: 1;
	padding: 8px 16px;
	background-color: #f2f2f2;
	border: 1px solid #ddd;
	border-radius: 5px;
	cursor: pointer;
	text-align: center;
}

.bookings-filter-button.active {
	background-color: #198754;
	color: #fff;
}

.bookings-bookings-table {
	width: 100% !important;
	border-collapse: collapse;
	margin: 1rem auto;
}

.bookings-table-th,
.bookings-table-td {
	padding: 12px 15px;
	text-align: left;
	border: 1px solid #ddd;
}

.bookings-table-th {
	background-color: #EAF1E8;
	font-weight: bold;
}

.bookings-table-tr:nth-child(even) {
	background-color: #f2f2f2;
}

.bookings-table-tr:hover {
	background-color: #f1f1f1;
}

.bookings-table-td.action-buttons{
	display: flex;
	gap: 1em;
	align-items: center;
}

@media (max-width: 992px) {
	.bookings-table,
	.bookings-table-tbody,
	.bookings-table-tr,
	.bookings-table-th,
	.bookings-table-td {
		display: block;
		width: 100%;
	}

	.bookings-table-tr {
		margin-bottom: 1rem;
		border: none;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	.bookings-table-th {
		display: none;
	}

	.bookings-table-td {
		padding: 12px;
		text-align: right;
		position: relative;
		border: none;
		display: flex;
		justify-content: space-between;
		background: #fafafa;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	.bookings-table-td:nth-child(even) {
		background-color: #f2f2f2;
	}

	.bookings-table-td::before {
		content: attr(data-label);
		font-weight: bold;
		text-align: left;
		color: #333;
	}

	.bookings-table-td[data-label="Actions"]::before {
		display: none;
	}

}

.bookings-next-prev-btns-holder{
	display: flex;
	justify-content: space-between;
}

.stats {
	text-align: center;
	margin-bottom: 20px;
}
.stats .value {
	font-size: 24px;
	font-weight: bold;
	color: #007bff;
}
.stats .label {
	color: #6c757d;
}

.chart-container {
	position: relative;
	max-height: 400px;
}

/* chat-container */
.chat-fixec-container {
	position: fixed;
	background: #fafafa;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 20;
}

.chat-container {
	width: 400px;
	max-width: 95%;
	height: 95vh;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
}

.chat-header {
	background-color: #075e54;
	color: #fff;
	padding: 15px;
	display: flex;
	align-items: center;
}

.chat-header .chat-header-img-holder div {
	width: 40px;
	height: 40px;
	background: #fafafa;
	color: green;
	font-weight: bold;
	font-size: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 5px;
}

.chat-header .chat-header-name-holder {
	flex: 1;
	font-size: 18px;
}

.chat-body {
	flex: 1;
	padding: 15px;
	overflow-y: auto;
	background-color: #e5ddd5;
	max-height: 80vh; /* Set the maximum height to 60% of the viewport height */
}
.chat-message {
	margin-bottom: 15px;
	padding: 10px 15px;
	border-radius: 20px;
	max-width: 95%;
	word-wrap: break-word;
	position: relative;
}
.chat-message.sent {
	background-color: #dcf8c6;
	align-self: flex-end;
}
.chat-message.received {
	background-color: #fff;
	align-self: flex-start;
}
.chat-message::after {
	content: '';
	position: absolute;
	border-style: solid;
}

.chat-message.sent::after {
	border-color: transparent #dcf8c6 transparent transparent;
	border-width: 10px 10px 0 0;
	right: -10px;
	top: 0;
}

.chat-message.received::after {
	border-color: transparent transparent transparent #fff;
	border-width: 10px 0 0 10px;
	left: -10px;
	top: 0;
}

.chat-message .date-time-holder {
	font-size: 0.8em;
	opacity: 0.8;
}

.chat-message .date-time-holder .time-holder {
	font-size: 0.75em;
	display: block;
}

.chat-footer {
	padding: 10px;
	background-color: #fff;
	display: flex;
	align-items: center;
	border-top: 1px solid #ccc;
	width: 100%;
}
.chat-footer textarea {
	flex: 1;
	padding: 5px 1em;
	border: 1px solid #ccc;
	border-radius: 20px;
	outline: none;
	font-size: 16px;
	resize: none; /* Prevents resizing */
	height: 2.8em;
}
.chat-footer button {
	background-color: #075e54;
	border: none;
	color: #fff;
	padding: 10px 20px;
	margin-left: 10px;
	border-radius: 20px;
	cursor: pointer;
	font-size: 16px;
}
.chat-footer button.unsend {
	background-color: red;
	opacity: 0.5;
}
.chat-footer button:hover {
	background-color: #128c7e;
}
.chat-footer button.unsend {
	background:grey;
}

@media (max-width: 380px) {
	.chat-footer button i{
		display: none;
	}
}

@media (max-width: 350px) {
	.chat-footer button {
		padding: 0;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		background-color: none;
	}
	
	.chat-footer button span{
		display: none;
	}
	
	.chat-footer button i{
		display: flex;
		color: #128C7E;
		font-size: 1.4em;
	}
	
	.chat-footer button:hover {
		background: none;
		background-color: none;
	}
}

/* stepsBtnsContainer */
.stepsBtnsContainer {
	display: flex;
	height: 100%;
	position: relative;
}

.stepsBtnsContainer .step-btn {
	background: none;
	background-color: none;
	border: none;
	outline: none;
	cursor: pointer;
	color: green; 
	flex: 1;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.stepsBtnsContainer .step-btn:hover ,
.stepsBtnsContainer .step-btn.active {
	background-image: linear-gradient(to right top, #0b5622, #0e7329, #14912f, #1bbf35, #22ff3c);
	color: #ffffff;
}

.stepsBtnsContainer .step-btn span {
	margin-right: 5px;
}

@media (max-width: 670px) {
	.stepsBtnsContainer .step-btn i {
		display: none;
	}
}

@media (max-width: 598px) {
	.stepsBtnsContainer .step-btn span {
		display: none;
	}
	
	.stepsBtnsContainer .step-btn i {
		display: flex;
	}
}

/* items-search-dynamic-container */
.items-search-dynamic-container {
	max-width: 800px;
	margin: 0 auto;
}

.items-search-dynamic-search-bar {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

.items-search-dynamic-search-bar input {
	width: 100%;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid #ccc;
	outline: none;
}

.items-search-dynamic-output-holder {
   width: 400px;
   max-width: 90%;
   margin: 2em auto;
}

.items-search-dynamic-output-item {
	padding: 15px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 5px;
	text-align: center;
	display: block;
	margin-bottom: 1em;
	box-sizing: border-box;
	box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
}

.items-search-dynamic-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
}

.items-search-dynamic-pagination button {
	padding: 10px 15px;
	border: none;
	background-color: #007bff;
	color: white;
	cursor: pointer;
	border-radius: 5px;
	margin: 0 10px;
}

.items-search-dynamic-pagination button:disabled {
	background-color: #ccc;
}

/* inner-abosule-seacrh-holder */
.inner-abosule-seacrh-holder {
	position: fixed;
    width: 568px;
	max-width: 95%;
    height: 85vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #EAF1E8; /* Example background */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Example shadow */
    display: none;
	z-index: 9999;
	opacity: 0;
    animation: slideUp 1s ease forwards; /* Animation applied */
}

.inner-abosule-seacrh-holder.active {
	display: flex;
}

/* Define the keyframes for the slide-up effect */
@keyframes slideUp {
    0% {
        transform: translate(-50%, 100%); /* Start from below the screen */
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%); /* End at the center */
        opacity: 1;
    }
}

.output-fixed-container-print-holder{
	width:100%;
	height:100vh;
	position:fixed;
	top:0;
	left:0;
	display:none;
	align-items:center;
	justify-content:center;
	background:rgba(171, 205, 239, 0.3); /*background with opacity of 30%, 0.3 at the end...*/
	-webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
	z-index:10;
}

.output-fixed-container-print-holder .output-print-fixed-inner-holder{
	width:992px !important; 
	height: 90vh;
	overflow:auto; 
	position:relative; 
	margin:5em auto;
	position:relative;
	background:#ffffff;
}

/* edit-multi-imgs-container */
.edit-multi-imgs-container{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.edit-multi-imgs-container .edit-multi-img-holder{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 150px;
	box-sizing: border-box;
	box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
	position: relative;
}

.edit-multi-imgs-container .edit-multi-img-holder img,
.edit-multi-imgs-container .edit-multi-img-holder video{
	max-width: 100%;
	max-height: 100%;
}

.edit-multi-imgs-container .edit-multi-img-holder button{
	position: absolute;
	bottom: 0;
	right: 0;
}

.edit-multi-imgs-container .edit-multi-img-holder button.btn_Two{
	left: 0;
}

.edit-multi-imgs-container .edit-append-multi-img-holder{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(0,0,0,0.5);
	display: none;
	justify-content: center;
	align-items: center;
}

.edit-multi-imgs-container .edit-append-multi-img-holder.active{
	display: flex;
}

.edit-multi-imgs-container .edit-append-multi-img-holder img{
	max-width: 100%;
	max-height: 100%;
}

.edit-multi-imgs-container  .before-after-title-holder{
	position: absolute;
	top: 0;
	background: rgb(0,0,0,0.5);
	padding: 5px 1em;
	color: #fff;
}

/* .quote-before-after-img-preview-container */
.quote-before-after-img-preview-container{
	width: 100%;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.quote-before-after-img-preview-container .quote-before-after-img-text-holder{
	margin-top: 5px;
	margin-right: 5px;
}

.quote-before-after-img-preview-container .quote-before-after-img-text-holder h6{
	background: #EAF1E8;
	padding: 5px;
	margin: 0;
}

.quote-before-after-img-preview-container .quote-before-after-img-text-holder .quote-before-after-img-holder{
	display: flex;
}

.quote-before-after-img-preview-container .quote-before-after-img-text-holder .quote-before-after-img-holder .quote-before-after-img-full-info-holder{
	position: relative;
	cursor: pointer;
}

.quote-before-after-img-preview-container .quote-before-after-img-text-holder .quote-before-after-img-holder .quote-before-after-img-full-info-holder img,
.quote-before-after-img-preview-container .quote-before-after-img-text-holder .quote-before-after-img-holder .quote-before-after-img-full-info-holder video{
	max-width: 155px;
	max-height: 155px;
}

.quote-before-after-img-preview-container .quote-before-after-img-text-holder .quote-before-after-img-holder .quote-before-after-img-full-info-holder .quote-before-after-img-span-title-holder{
	position: absolute;
	bottom: 0;
	right: 0;
	background: rgb(0,0,0,0.5);
	color: #fff;
	padding: 5px 1em;
	border-radius: 5px;
	margin: 5px;
}

/* fixed-home-no-router-pop-up-container */
.fixed-home-no-router-pop-up-container {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	justify-content: center;
	align-items: center;
	z-index: 40;
}

.fixed-home-no-router-pop-up-container .popup-content {
	background-color: white;
	padding: 20px;
	border-radius: 10px;
	width: 95%;
	max-width: 400px;
	position: relative;
}

.fixed-home-no-router-pop-up-container .popup-content .close-btn {
	position: absolute;
	top: 0;
	right: 0;
	margin: 5px;
}

.fixed-home-no-router-pop-up-container .popup-content .popup-content-holder {
	width: 100%;
	max-height: 80vh;
}


/* Container */
.tasks-container {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 728px;
  text-align: center;
  margin: 1em auto;
}

/* Add Task Section */
.tasks-container .new-task {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.tasks-container #task-input {
  flex: 1;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
}

.tasks-container #add-task-btn {
  padding: 10px 20px;
  border: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  border-radius: 5px;
}

.tasks-container #add-task-btn:hover {
  background-color: #0056b3;
}

/* Task List */
.tasks-container #task-list {
  list-style-type: none;
}

.tasks-container .task {
  width: 100%;
  margin: 1em auto;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 10px;
}

.tasks-container .task .official-task-holder {
  display: flex;
  justify-content: space-between;
}

.tasks-container .task .customer-response {
    margin-top: 10px;
    padding: 10px;
    background: #fafafa;
    border-left: 4px solid #5FBB46;
    border-radius: 4px;
}

.tasks-container .task .customer-response p {
    margin: 0;
    font-style: italic;
    color: #333;
}

.tasks-container .task.task-completed .official-task-holder {
  text-decoration: line-through;
  color: gray;
}

/* .tasks-container .task button {
  border: none;
  background-color: transparent;
  color: #ff4d4d;
  cursor: pointer;
} */

/* Task Filters */
.tasks-container .task-filter {
  margin: 20px 0;
}

.tasks-container .filter-btn {
  border: none;
  background-color: #eee;
  color: #333;
  padding: 10px 20px;
  cursor: pointer;
  margin: 0 5px;
  border-radius: 5px;
}

.tasks-container .filter-btn:hover {
  background-color: #ddd;
}

.tasks-container .filter-btn.active {
    background-color: #5FBA46;
    color: #fff;
}


/* Date and Time Input Styling */
.tasks-container input[type="date"], .tasks-container input[type="time"] {
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 5px;
  margin-right: 10px;
  font-size: 14px;
}

.tasks-container #task-input {
  flex: 2; /* Adjust size to accommodate new date/time inputs */
}

.tasks-container .new-task {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tasks-container #add-task-btn {
  padding: 10px 15px;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.tasks-container #add-task-btn:hover {
  background-color: #218838;
}

/* Items per Page and Date Filter Holder */
.tasks-container .tasks-tem-per-page-date-filter-holder {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* Task List */
.tasks-container .task .due-date {
  color: #777;
  font-size: 12px;
  display: block;
  margin-top: 5px;
}

.tasks-container #task-list {
  list-style-type: none;
  padding: 0;
}

.tasks-container .task-overdue {
  color: red;
  font-weight: bold;
}

.tasks-container .task-upcoming {
  color: #007bff;
  font-weight: bold;
}

/* Pagination Styling */
.tasks-container .pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.tasks-container #prev-page-btn, .tasks-container #next-page-btn {
  padding: 10px 20px;
  background-color: #5FBA46;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.tasks-container #prev-page-btn:disabled, .tasks-container #next-page-btn:disabled {
  background-color: #ccc;
}

.tasks-container #page-info {
  font-size: 16px;
  font-weight: bold;
}

/* quote-invoice-container */
.quote-invoice-container {
	width: 100%;
	max-width: 768px;
	height: 85vh;
	position: relative;
	background: transparent;
	box-sizing: border-box;
}

.quote-invoice-container .form-nav {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.quote-invoice-container .nav-item {
  flex-grow: 1;
  text-align: center;
  padding: 10px;
  border-bottom: 2px solid #ccc;
  cursor: pointer;
  font-weight: 400;
  color: #000;
}

.quote-invoice-container .nav-item.active {
   font-weight: 700;
  color: #28a745;
  border-bottom: 2px solid #28a745;
}

/* Start of image-output-holder styles */
.image-output-holder {
	display: inline-block;
	width: auto;
	height: auto;
	position: relative;
}
.image-output-holder img {
	max-width: 150px;
	max-height: 150px;
	object-fit: cover;
	border: 1px solid #ddd;
	border-radius: 8px;
	margin-right: 5px;
	margin-top: 5px;
}

.abosulte-top-right {
	position: absolute;
	top: 5px;
	right: 5px;
}
/* End of image-output-holder styles */

/* custom-select styles */
.custom-select {
  position: relative;
  width: 100%;
  font-family: Arial, sans-serif;
}

.custom-select .selected-option {
  padding: 10px;
  background-color: #ffffff;
  border: 1px solid #ccc;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.custom-select .selected-option.disabled {
	pointer-events: none;
}

.custom-select .selected-option img {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

.custom-select .options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ccc;
  display: none;
  z-index: 1000;
  max-height: 150px;
  overflow-y: auto;
}

.custom-select .option {
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.custom-select .option:hover {
  background-color: #e6e6e6;
}

.custom-select .option img {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

/* .category-container starts here... */
.category-container {
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 15px;
	margin-bottom: 15px;
	background-color: #f9f9f9;
	position: relative;
}

.category-container .category-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
}

.category-container .category-header .category-info-holder {
	display: flex;
	align-items: center;
	flex: 1;
}

.category-container .category-header .category-info-holder img {
	width: 40px;
	height: 40px;
	margin-right: 10px;
}

.category-container .item-list {
	margin-top: 10px;
}

.category-container .selected-item {
	display: flex;
	flex-direction: column;
	background-color: #e6e6e6;
	padding: 8px;
	border-radius: 5px;
	margin-bottom: 8px;
}

.category-container .selected-item .item-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.category-container .selected-item .item-header .quote-total-input {
	width:100px; 
	text-align: right;
}

@media (max-width: 470px) {
	.category-container .selected-item .item-header .quote-total-input {
		width:60px; 
	}
}

.category-container .selected-item .item-name {
	font-size: 16px;
	font-weight: bold;
}

.category-container .selected-item .counter-value {
	font-size: 16px;
	margin-left: 0 2em;
}

.category-container .selected-item .item-image {
	max-width: 100px;
	max-height: 100px; /* Ensure image height does not exceed 100px */
	margin-top: 5px;
}

.category-container .selected-item .item-weight {
	display: flex;
	justify-content: space-between;
	margin-top: 5px;
	font-size: 14px;
}

.category-container .selected-item .counter-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 5px;
}

.category-container .selected-item .counter-controls .min-add-btns{
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
}

.category-container .selected-item .counter-controls .min-add-btns .counter-btn,
.category-container .selected-item .counter-controls .delete-btn {
	width: 25px;
	height: 25px;
	font-size: 16px;
	border: 1px solid #333;
	background-color: #f0f0f0;
	cursor: pointer;
	border-radius: 5px;
	margin: 0 5px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.category-container .selected-item .counter-controls .delete-btn {
	background-color: red;
	color: white;
	border: none;
}

.category-container .selected-item .item-footer {
    background-color: #f8f9fa; /* Light background for the footer */
    border-top: 1px solid #ccc; /* Subtle top border */
    padding: 10px; /* Padding for spacing */
    margin-top: 10px; /* Space above the footer */
    border-radius: 0 0 5px 5px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Light shadow for depth */
}

.category-container .selected-item .item-footer h5 {
    text-align: center; /* Centered header */
    font-size: 18px; /* Larger font for emphasis */
    color: #333; /* Darker color for the header */
    margin-bottom: 10px; /* Space below header */
}

.category-container .selected-item .item-footer .space-total,
.category-container .selected-item .item-footer .item-total {
    display: flex; /* Flex for alignment */
    justify-content: space-between; /* Space out the content */
    margin-top: 5px; /* Space above each item */
}

.category-container .selected-item .item-footer .desc {
    font-weight: bold; /* Bold description */
    color: #555; /* Slightly lighter color */
}

.category-container .selected-item .item-footer .title {
    font-size: 16px; /* Font size for values */
    color: #007bff; /* Use a blue color for values, for a professional touch */
}

.category-container .selected-item .item-footer .space-total .title,
.category-container .selected-item .item-footer .item-total .title {
    font-weight: 500; /* Slightly lighter than the description */
    text-align: right; /* Right-align values for a clean look */
}

.category-container .selected-item .item-image-input-holder {
	width: 100%;
	max-width: 568px;
	margin-top: 10px;
	display: flex;
	justify-content: center;
}

.category-container .selected-item .item-image-input-holder {
	width: 100%;
	margin-bottom: 1em;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.category-container .individual-item-image-input-holder {
	position: relative;
	width: 100px;
	height: 100px;
	margin-top:5px;
	margin-right: 5px;
}

.category-container .item-image-input-holder .individual-item-image-input-holder img {
	max-width: 100px;
	max-height: 100px;
}

.category-container .item-image-input-holder .individual-item-image-input-holder button {
	position: absolute;
	top: 0;
	right: 0;
}

.custom-dropdown {
	position: relative;
	margin: 10px auto;
	width: 100%;
	max-width: 475px;
	border; 1px solid red;
	
}
.custom-dropdown .item-search {
	width: 100%;
	padding: 5px;
}

.custom-dropdown .options-container {
	display: none;
	position: absolute;
	border: 1px solid #ccc;
	width: 100%;
	background: white;
	max-height: 150px;
	overflow-y: auto;
	z-index: 1;
}

.custom-dropdown.show-options .options-container {
	display: block;
}

.custom-dropdown .option {
	padding: 5px;
	cursor: pointer;
}

.custom-dropdown .option:hover {
	background-color: #f0f0f0;
}

/* btn-arrow-right */
.btn-arrow-right {
  position: relative;
  padding-left: 1em;
  padding-right: 1em;
  margin-top: 5px;
  margin-right: -4px; /* align buttons seamlessly */
}
.btn-arrow-right:before,
.btn-arrow-right:after {
  content: "";
  position: absolute;
  top: 5px; /* move it down for rounded corners */
  width: 22px;
  height: 22px;
  background: inherit;
  border: inherit;
  border-left-color: transparent;
  border-bottom-color: transparent;
  /* border-radius: 0px 4px 0px 0px; */ /* round arrow corner */
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}

.btn-arrow-right:before {
  left: -11px;
}
.btn-arrow-right:after {
  right: -11px;
}
.btn-arrow-right:after { /* bring arrow pointers to front */
  z-index: 1;
}
.btn-arrow-right:before { /* hide arrow tails background */
  background-color: white;
}
.btn.btn-disabled {
  background-color: #ccc;
  border-color: #ccc;
  color: #666;
  pointer-events: none;
}

.individual-view-quote-header-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	letter-spacing: 1px;
}

.individual-view-quote-header-container .view-quote-flex-title-holder {
	opacity: 0.8;
	text-transform: uppercase;
	font-size: 12px;
}

.individual-view-quote-header-container .view-quote-flex-desc-holder {
	margin-bottom: 10px;
	font-weight: 500;
	opacity: 0.9;
}

.user-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 20px;
}

/* Card 5 */
.user-card-5 {
	background-color: #ffffff;
	border-left: 5px solid #007bff;
	padding: 20px;
	border-radius: 8px;
	text-align: left;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
}

.user-card-5:hover {
	transform: translateX(10px);
}

.user-card-5 h3 {
	font-size: 22px;
	color: #333;
}

.user-card-5 p {
	font-size: 14px;
	color: #666;
	margin: 5px 0;
}

.deliveries-dashboard-container {
	width: 100%;
}
.deliveries-dashboard-container .dashboard-container {
	padding: 20px;
	max-width: 992px;
	margin: auto;
}
.deliveries-dashboard-container .header {
	background-image: linear-gradient(to right top, #0b5622, #0e7329, #14912f, #1bbf35, #22ff3c);
	color: white;
	padding: 15px;
	text-align: center;
	font-size: 24px;
	border-radius: 5px 5px 0 0;
}
.deliveries-dashboard-container .summary-section {
	display: flex;
	gap: 20px;
	margin-bottom: 20px;
}
.deliveries-dashboard-container .summary-card {
	flex: 1;
	padding: 15px;
	background: #ffffff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	text-align: center;
}
.deliveries-dashboard-container .summary-card h3 {
	margin: 0;
	color: #333;
}
.deliveries-dashboard-container .summary-card p {
	font-size: 14px;
	color: #666;
}
.deliveries-dashboard-container .filter-bar {
	display: flex;
	gap: 10px;
	margin: 20px auto;
}
.deliveries-dashboard-container .filter-bar input, .filter-bar select {
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 5px;
	flex: 1;
}
.deliveries-dashboard-container .filter-bar button {
	padding: 8px 12px;
	background: #0078d7;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}
.deliveries-dashboard-container .filter-bar button:hover {
	background: #0056b3;
}
.deliveries-dashboard-container .card-delivery-info-container {
	display: block;
	background: #ffffff;
	margin: 20px 0;
	padding: 15px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	overflow: hidden;
	cursor: pointer;
}
.deliveries-dashboard-container .card-delivery-info {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: space-between;
}
.deliveries-dashboard-container .origin-destination {
	flex: 1;
	padding: 10px;
	background: #f9f9f9;
	border-radius: 5px;
	margin-bottom: 10px;
}
.deliveries-dashboard-container .origin-destination h4 {
	margin: 0 0 5px;
	font-size: .9rem;
	color: #555;
}
.deliveries-dashboard-container .origin-destination p {
	margin: 0;
	font-size: 0.8rem;
	color: #777;
}
.deliveries-dashboard-container .delivery-details {
	margin-top: 10px;
}
.deliveries-dashboard-container .delivery-details .delivery-details-holder {
   display: flex;
   justify-content: space-between;
}
.deliveries-dashboard-container .delivery-details .status-upcoming {
	font-weight: bold;
	color: #ff8c00; /* Orange for Upcoming */
}
.deliveries-dashboard-container .delivery-details .status-completed {
	font-weight: bold;
	color: #28a745; /* Green for Completed */
}

.deliveries-dashboard-container .delivery-details .status-undelivered {
	font-weight: bold;
	color: #FF033E; /* Green for Completed */
}

.deliveries-dashboard-container .delivery-details .status-collected {
	font-weight: bold;
	color: #800080; /* Green for Completed */
}

@media (max-width: 568px) {
	.deliveries-dashboard-container .summary-section {
		gap: 0;
	}
	.deliveries-dashboard-container .summary-card p {
		font-size: 0.8rem;
	}
	.deliveries-dashboard-container .card-delivery-info {
		flex-direction: column;
	}
}
@media (max-width: 478px) {
	.deliveries-dashboard-container .dashboard-container {
		padding: 5px;
	}
	.deliveries-dashboard-container .card-delivery-info-container {
		Padding: 10px 5px;
	}
	.deliveries-dashboard-container .summary-card p {
		font-size: 0.75rem;
	}
}
@media (max-width: 350px) {
	.deliveries-dashboard-container .filter-bar {
		flex-direction: column;
	}
}

.deliveries-dashboard-container .delivery-details-info-holder {
	flex: 1;
	padding: 0 1em;
}


@media (max-width: 428px) {
	.deliveries-dashboard-container .delivery-details .delivery-details-holder {
		flex-direction: column;
	}
	
	.deliveries-dashboard-container .delivery-details-info-holder {
		padding: 0;
	}
	
	.deliveries-dashboard-container .delivery-details-info-holder:not(.footer):last-child{
		margin-top: 10px;
	}
}

.deliveries-dashboard-container .delivery-details-info-holder h4 {
	margin: 0 0 5px;
	font-size: .9rem;
	color: #555;
}
.deliveries-dashboard-container .delivery-details-info-holder p {
	margin: 0;
	font-size: 0.8rem;
	color: #777;
}

.deliveries-dashboard-container .delivery-details .delivery-details-footer {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
}

.deliveries-dashboard-container .pagination-conatiner {
	width: 100%;
	justify-content: center;
	text-align: center;
	margin-bottom: 20px;
}

/* requested quote styles */
.requested-quote-main-container {
	width: 95%;
	height: auto;
	max-width: 998px;
	background: #ffffff;
	position: relative;
	margin: 0 auto;
}

.requested-quote-main-container .requested-quote-container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	font-size: 1em;
}

.requested-quote-header {
	width: 100%;
	max-width: 768px;
	margin: 0 auto;
	padding: 0 1em;
	
}

.requested-quote-controls {
	display: flex;
	justify-content: space-between;
}

.requested-filter-buttons {
	display: flex;
}

.requested-filter-buttons button {
	flex: 1;
	background-color: white; /* background color inside the box */
	position: relative; /* To position the ::after pseudo-element */
	color: #000;
	outline: none;
	padding: .5em 5px;
	cursor: pointer;
	border: none;
}

.requested-filter-buttons button::after {
	content: '';
	position: absolute;
	bottom: 0; /* Adjust this to move the line closer or further from the div */
	left: 0;
	width: 100%;
	height: 2px;
	background-image: linear-gradient(to right top, #0b5622, #0e7329, #14912f, #1bbf35, #22ff3c);
	border-radius: 50%; /* This gives the line a rounded look */
}

.requested-filter-buttons button.active,
.requested-filter-buttons button:hover {
	background-image: linear-gradient(to right top, #0b5622, #0e7329, #14912f, #1bbf35, #22ff3c);
	color: #fff;
}

.requested-quote-cards-container {
	flex: 1;
	width: 100%;
	max-width: 768px;
	position: relative;
	margin: 0 auto;
}

.requested-quote-cards-container .requested-quote-card {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	margin-bottom: 20px;
	padding: 15px;
	border-radius: 8px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	cursor: pointer;
}

.requested-quote-cards-container .requested-quote-card:first-child {
	margin-top: 1em;
}

.requested-quote-cards-container .requested-quote-card.none {
	display: none !important;
}

.requested-quote-cards-container .requested-quote-card .requested-quote-card-header {
	font-weight: bold;
	margin-bottom: 5px;
}

.requested-quote-cards-container .requested-quote-card .requested-quote-card-body {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	color: #555;
}

.requested-quote-cards-container .requested-quote-card .requested-quote-card-footer {
	margin-top: 10px;
	align-items: center;
}

.requested-quote-cards-container .requested-quote-card .requested-quote-card-footer .status {
	padding: 5px 10px;
	border-radius: 4px;
	color: white;
}

.requested-quote-cards-container .requested-quote-card .requested-quote-card-footer .status.online {
	background-color: #28a745;
}

.requested-quote-cards-container .requested-quote-card .requested-quote-card-footer .status.abandoned {
	background-color: #dc3545;
}

.requested-quote-cards-container .requested-quote-card .requested-quote-card-footer .status.submitted {
	background-image: linear-gradient(to right top, #6a3cc5, #7f44e1, #9647f4, #aa50f9, #b65ff9);
}

.requested-quote-cards-container .requested-quote-card .requested-quote-card-footer .status.quoted {
	background: rgb(34,139,34);
	background: linear-gradient(159deg, rgba(34,139,34,1) 0%, rgba(50,205,50,1) 100%);
}

.requested-quote-container .pagination {
	display: flex;
	justify-content: center;
	gap: 5px;
	margin-top: 20px;
}

.requested-quote-container .pagination button {
	padding: 5px 15px;
	border: none;
	border-radius: 4px;
	background-image: linear-gradient(to right top, #0b5622, #0e7329, #14912f, #1bbf35, #22ff3c);
	color: white;
	cursor: pointer;
}

.requested-quote-container .pagination button:hover {
	background-color: #0056b3;
}

.requested-quote-container .pagination span {
	padding: 10px 15px;
	background-color: #f1f1f1;
	border-radius: 4px;
}

@media (max-width: 576px) {
	.requested-quote-header {
		padding: 0 5px;
	}
	
	.requested-quote-container .pagination button,
	.requested-filter-buttons button {
		font-size: .9em;
	}
	
	.requested-filter-buttons button.active,
	.requested-filter-buttons button:hover {
		background-image: linear-gradient(to right top, #0b5622, #0e7329, #14912f, #1bbf35, #22ff3c);
		-webkit-background-clip: text; /* This clips the background to the text */
		background-clip: text; /* Standard syntax for browsers supporting background-clip for text */
		color: transparent; /* Makes the text color transparent so the gradient is visible */
	}
}

.flex-gap-title-desc-container {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.flex-gap-title-desc-container .flex-gap-title-desc-holder {
	flex: 1;
}

.flex-gap-title-desc-container .flex-gap-title-desc-holder:last-child {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	text-align: end;
}

.flex-gap-title-desc-container .flex-gap-title-desc-holder .flex-gap-title-holder {
	font-size: .75em;
	font-weight: 700;
	opacity: .9;
}

.flex-gap-title-desc-container .flex-gap-title-desc-holder .flex-gap-desc-holder {
	font-size: .9em;
}

/* Container styling */
.inventory-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 1em;
}

/* Heading styling */
.inventory-container h4 {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

/* Grid styling for items */
.inventory-container .inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive columns */
  gap: 10px; /* Space between items */
}

/* Individual item styling */
.inventory-container .inventory-item {
  font-size: 16px;
  position: relative; /* Needed for pseudo-element positioning */
}

.inventory-container .inventory-item .inventory-item-qty-name-holder {
	display: flex;
	align-items: center; /* Vertically align items */
}

/* Quantity badge styling */
.inventory-container .quantity {
	background-color: #555; /* Dark gray background */
	color: white; /* White text */
	font-weight: bold;
	font-size: 14px;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	margin-right: 8px; /* Space between badge and text */
	position: relative; /* Needed for the arrow */
}

/* Arrow pointing at the item */
.inventory-container .quantity::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -8px; /* Position the arrow to the right of the badge */
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 8px; /* Creates a triangle */
  border-color: transparent transparent transparent #555; /* Match the badge color */
}

.inventory-container .inventory-item-images-holder {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.inventory-container .inventory-item-images-holder img{
	max-width: 50px;
	max-height: 50px;
	cursor: pointer;
}

/* step-div-btns-monitor-container */
.step-div-btns-monitor-container {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: space-between;
	margin: 5px auto;
}

.step-progress-monitor {
	text-align: center;
	flex: 1;
	position: relative;
}

.step-progress-monitor::before {
	content: '';
	position: absolute;
	top: 40%;
	left: 0;
	height: 4px;
	width: 100%;
	background-color: #ccc;
	z-index: 0;
	transform: translateY(-50%);
}

.step-progress-monitor:first-child::before {
	width: 50%;
	left: 50%;
}

.step-progress-monitor:last-child::before {
	width: 50%;
	right: 50%;
	left: auto;
}

.circle-progress-monitor {
	width: 40px;
	height: 40px;
	background-color: #000;
	border-radius: 50%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-size: 18px;
	z-index: 1; /* Ensure circles are above the line */
	position: relative; /* Allows the z-index to work properly */
}

.step-progress-monitor.active .circle-progress-monitor {
	background-color: #9044FF;
}

.completed .circle-progress-monitor {
	background-color: #4CAF50;
}

.step-progress-monitor.inactive .circle-progress-monitor {
	background-color: #ccc;
}

.step-progress-monitor .label {
	font-size: .9em;
	color: #666;
	margin-top: -5px;
}

.step-progress-monitor.active .label {
	font-weight: bold;
	color: #9044FF;
}

.step-progress-monitor.completed .label {
	font-weight: bold;
	color: #4CAF50;
}

@media(max-width:825px){
	.step-progress-monitor::before {
		 top: 50%;
	 }
	 
	.step-progress-monitor .label {
		display: none;
	}
}

.step-form {
	flex: 1;
	width: 100%;
	position: relative;
	overflow: auto;
}

.step {
	display: none;
}

.step.active {
	display: block;
}

.step-content {
	width: 90%;
	padding: 0 20px;
	margin: 2em auto;
}

.step.item-step {
	width: 100%;
	height: 64vh;
	position: relative;
}

.step.item-step .step-content {
	width: 100%;
	height: calc(100% - 35px);
	position: relative;
	padding: 0 5px;
	margin: 0px auto;
	flex: 1;
	overflow: auto;
}

.buttons-create-quote-holder {
	display: flex;
	justify-content: space-between;
	padding: 5px;
	gap: 1em;
}

.buttons-create-quote-holder .btn-next {
	background: #0073e6;
	color: white;
}

.buttons-create-quote-holder .btn-back {
	background: #ddd;
	color: #333;
}

.flex-images-holder {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.flex-images-holder .img-holder {
	max-width: 100px;
	max-height: 100px;
	position: relative;
	object-fit: cover;
	margin-top: 5px;
	margin-right: 5px;
}

.flex-images-holder .img-holder img {
	max-width: 100px;
	max-height: 100px;
}

@media(max-width:355px){
	.my-input-group.official input.w-50{
		width: 40px !important;
	}
}

.main-items-dropdowns-container {
	position: absolute; /* Fix the element in place */
	top: 0; /* Position it vertically in the center */
	left: 0; /* Position it horizontally in the center */
	width: 100%; /* Set width to 50% of the viewport width */
	height: 100%; /* Set height to 75% of the viewport height */
	background-color: #ffffff;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
	z-index: 1000; /* Ensure it appears above other elements */
	padding: 20px; /* Optional: Add some padding for content */
	overflow: auto; /* Optional: Ensure the content can scroll if needed */
	transition: transform 0.3s ease, opacity 0.3s ease;
	display: none;
	opacity: 0;
}

.main-items-dropdowns-container.active {
  display: block;
  opacity: 1;
}

.main-items-dropdowns-container .close-btn {
	position: absolute;
	top: 0;
	right: 0;
}

.main-items-dropdowns-container .main-items-dropdowns-container-content-holder {
	width: 100%;
	height: calc(100% - 2em);
	margin-top: 1em;
	overflow: auto;
}

.appended-category-items-container {
	border:1px solid #0073E6;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	margin-bottom: 1em;
	padding: 5px;
}

.appended-category-items-container:first-child {
	margin-top: 1em;
}

.dropdown {
  position: relative;
}

.select-box {
  border: 1px solid #ccc;
  padding: 8px;
  cursor: pointer;
  margin-bottom: 10px;
}

.select-placeholder {
  font-size: 16px;
  color: #333;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background-color: white;
  border: 1px solid #ccc;
  z-index: 999;
}

.dropdown-item {
  padding: 8px;
  cursor: pointer;
  color: #333;
}

.dropdown-item:hover {
  background-color: #f1f1f1;
}

.suggestions {
	width: 100%;
	background: white;
	border: 1px solid #ddd;
	border-top: none;
	border-radius: 0 0 8px 8px;
	max-height: 200px;
	overflow-y: auto;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.suggestion-item {
	padding: 10px 15px;
	cursor: pointer;
	transition: background 0.2s;
}

.suggestion-item:hover {
	background-color: #f5f5f5;
}

.search-input-c-quote {
	width: 100%;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #ddd;
	border-radius: 4px;
}
.categories {
	max-height: 300px;
	overflow-y: auto;
}
.category-item {
	padding: 10px;
	cursor: pointer;
	border-bottom: 1px solid #eee;
}
.category-item:hover {
	background-color: #f5f5f5;
}
.item-list-c-quote {
	padding: 10px 0;
}
.item-list-c-quote .item-container {
	display: flex;
	align-items: center;
	padding: 8px 0;
	border-bottom: 1px solid #eee;
}
.item-list-c-quote .item-name {
	flex-grow: 1;
}
.quantity-control {
	display: flex;
	align-items: center;
}
.quantity-btn {
	width: 30px;
	height: 30px;
	background-color: #f0f0f0;
	border: 1px solid #ddd;
	cursor: pointer;
	font-size: 16px;
}
.quantity-input {
	width: 40px;
	text-align: center;
	margin: 0 5px;
	padding: 5px;
	border: 1px solid #ddd;
}
.done-btn-c-quote {
	width: 100%;
	padding: 10px;
	background-color: #2196F3;
	color: white;
	border: none;
	border-radius: 4px;
	margin-top: 15px;
	cursor: pointer;
}
.output-container {
	margin-top: 20px;
	padding: 15px;
	border: 1px solid #ddd;
	border-radius: 5px;
}

.selected-category {
	font-weight: bold;
	margin: 10px 0;
	font-size: 18px;
}
.selected-items-list {
	padding-left: 20px;
}
.selected-item-c-quote {
	display: flex;
	flex-direction: column;
	padding: 5px 0;
}
.back-btn {
	padding: 8px 12px;
	background-color: #f0f0f0;
	border: 1px solid #ddd;
	border-radius: 4px;
	cursor: pointer;
	margin-bottom: 10px;
}
.add-images-btn {
	margin-top: 10px;
	background-color: #5c6bc0;
	color: white;
	border: none;
	border-radius: 4px;
	padding: 6px 12px;
	cursor: pointer;
	font-size: 14px;
}
.images-container {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}
.image-wrapper {
	position: relative;
	width: 120px;
	height: 120px;
	border: 1px solid #ddd;
	border-radius: 4px;
	overflow: hidden;
}
.item-image-c-quote {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.delete-image-btn {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 20px;
	height: 20px;
	background-color: rgba(255, 0, 0, 0.7);
	color: white;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}

.search-container-c-quote {
	display: none;
	flex-direction: column;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	max-width: 768px;
	height: 80vh;
	z-index: 10;
	background-color: white;
	border-radius: 8px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
	padding: 0;
	overflow: hidden;
}

.searchItemsHeader {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px;
	background-color: #f8f8f8;
	border-bottom: 1px solid #ddd;
}

.searchItemsHeader h4 {
	margin: 0;
	font-size: 18px;
}

.searchItemsHeader button {
	background-color: #f0f0f0;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 6px 12px;
	cursor: pointer;
}

.searchItemsHeader button:hover {
	background-color: #e0e0e0;
}

.searchItemsBody {
	flex: 1;
	overflow-y: auto;
	padding: 15px 20px;
}

.searchItemsFooter {
	padding: 15px 20px;
	border-top: 1px solid #ddd;
	background-color: #f8f8f8;
}

.searchItemsFooter .done-btn {
	width: 100%;
}

/* Make the backdrop for the modal */
.backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 5;
	display: none;
}

.backdrop.active {
	display: block;
}

/* Responsive styling for small screens */
@media (max-width: 576px) {
	.search-container-c-quote {
		height: 95vh;
		width: 95%;
		max-width: 95%;
	}
}

.slider-checkbox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
	border-radius: 0.5rem;
	transition: all 0.3s ease;
	cursor: pointer;
}
.slider-checkbox.checked {
	background-color: rgba(59, 130, 246, 0.1); /* Lighter blue */
	border-color: rgba(59, 130, 246, 0.2); /* Lighter border */
	color: #3b82f6; /* Keep the blue text */
}
.slider-checkbox.unchecked {
	background-color: rgba(247, 250, 252, 0.5);  /* Very light background - was: rgba(255, 255, 255, 0.05); */
	border-color: rgba(229, 231, 235, 0.5);  /* Light border -  was: rgba(255, 255, 255, 0.1); */
	color: #4b5563; /* Darker text for better contrast on light background - was: #d1d5db; */
}
.slider-checkbox.unchecked:hover {
	background-color: rgba(247, 250, 252, 0.8); /* Slightly darker hover - was: rgba(255, 255, 255, 0.1); */
}

.slider-tog {
	width: 2.5rem;
	height: 1.5rem;
	border-radius: 1rem;
	padding: 0.25rem;
	transition: all 0.3s ease;
}
.slider-tog.checked {
	background-color: #3b82f6;
}
.slider-tog.unchecked {
	background-color: #d1d5db; /* Lighter slider background - was: #6b7280; */
}
.slider-thumb {
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background-color: white;
	transition: all 0.3s ease;
	transform: translateX(0);
}
.slider-tog.checked .slider-thumb {
	transform: translateX(100%);
}

/* Start of quotes styles */
.quotes-container{
	max-width: 768px;
	margin: 1em auto;
	flex-direction: column;
	justify-content: center;
}

.quotes-container .search-container {
    position: relative;
    display: flex;
    justify-content: center;
	width: 90%;
	max-width: 375px;
	margin: 10px auto;
}

.quotes-container .quote-search {
	width: 100%;
	padding: 5px;
	padding-left: 2em;
	border: 1px solid #ccc;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
	outline: none;
	display: flex;
	align-items: center;
}

.quotes-container .quote-search::placeholder {
    color: #aaa;
}

.quotes-container .search-container::before {
    content: "\1F50D"; /* Unicode for magnifying glass */
    position: absolute;
	left: 5px;
    font-size: 20px;
    color: #aaa;
}

.quotes-container .quotes  .quotes-Select-Holder {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 0 1em;
}

.quotes-container .quotes  .quotes-Select-Holder select {
    flex: 1;
	padding: 5px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

 @media (max-width: 360px) {
	.quotes-container .quotes  .quotes-Select-Holder {
		padding: 0;
	}
	
	.quotes-container .quotes  .quotes-Select-Holder select {
		font-size: 4.5vw;
	}		
 }

.quotes-list-holder .added-ivoice-quote-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ccc;
	padding:10px 0;
	cursor: pointer;
	
}

.quotes-container .quote-title {
    font-weight: bold;
}

.quotes-container .quote-status {
    color: grey;
}

.quotes-container .quote-status.unpaid,
.quotes-container .quote-status.overdue {
	color: red;
}

.quotes-container .quote-status.outstanding {
	color: orange;
}

.quotes-container .quote-status.paid {
	color: #5FBA46;
}

.quotes-container .quote-date {
    color: grey;
}

.quotes-container #pagination {
    display: flex;
    justify-content: center;
	align-items: center;
    margin-top: 20px;
}

.quotes-container #pagination button {
    padding: 10px;
    margin: 0 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.quotes-container #pagination button.disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.quotes-container #pagination button.active {
    background-color: green;
    color: white;
}

.quotes-container .filter-buttons {
    display: flex;
	justify-content: center;
	width: 100%;
    margin-bottom: 20px;
	margin-top: 1em;
}

.quotes-container .filter-buttons button {
	flex: 1;   
	padding: 5x;
	border: none;
	background: none;
	outline: none;
	cursor: pointer;
}

.quotes-container .filter-buttons button.active {
    border-bottom:2px solid green;
}

.quotes-container .quotes-list-holder {
	padding: 1em;
}

@media (max-width: 576px) {
	.quotes-container .quotes-list-holder {
		padding: 5px;
	}
}
/* End of quotes styles */

/* --- CSS Variables for Easy Theming (can be defined outside if already present) --- */
:root {
	--etl-primary-color: #007bff;
	--etl-primary-hover: #0056b3;
	--etl-secondary-color: #6c757d;
	--etl-background-color: #f8f9fa; /* Page background */
	--etl-header-bg: #ffffff;
	--etl-content-bg: #ffffff; /* Editor/Preview pane background */
	--etl-text-color: #343a40;
	--etl-border-color: #dee2e6;
	--etl-input-bg: #ffffff;
	--etl-input-focus-border: #80bdff;
	--etl-shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
	--etl-shadow-md: 0 4px 6px rgba(0,0,0,0.1);
	--etl-border-radius: 8px;
	--etl-button-active-bg: #e7f1ff;
}

/* --- Main Layout Container --- */
.email-templates-layout-container {
	display: flex;
	flex-direction: column;
	height: 85vh; /* Adjust if integrated, e.g., height: 100% or min-height */
	overflow: hidden; /* Prevents whole page scroll if content overflows unexpectedly */
	font-family: 'Inter', sans-serif;
	background-color: var(--etl-background-color);
	color: var(--etl-text-color);
}

/* --- Navigation Header for Email Categories --- */
.email-templates-layout-container .etl-nav-header {
	padding: 12px 24px;
	background-color: var(--etl-header-bg);
	border-bottom: 1px solid var(--etl-border-color);
	display: flex;
	align-items: center;
	gap: 8px; /* Gap between buttons */
	flex-wrap: nowrap; /* Buttons stay in one line */
	overflow-x: auto; /* Allows horizontal scrolling for buttons on small screens */
	scrollbar-width: thin;
	scrollbar-color: var(--etl-secondary-color) var(--etl-background-color);
}
.email-templates-layout-container .etl-nav-header::-webkit-scrollbar {
	height: 6px;
}
.email-templates-layout-container .etl-nav-header::-webkit-scrollbar-thumb {
	background-color: var(--etl-secondary-color);
	border-radius: 3px;
}
.email-templates-layout-container .etl-nav-header::-webkit-scrollbar-track {
	background-color: var(--etl-background-color);
}


.email-templates-layout-container .etl-nav-button {
	padding: 10px 20px;
	background: none;
	border: 1px solid transparent; /* For consistent height with active */
	border-radius: var(--etl-border-radius);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--etl-secondary-color);
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	white-space: nowrap; /* Prevent button text from wrapping */
}

.email-templates-layout-container .etl-nav-button:hover {
	background-color: var(--etl-background-color);
	color: var(--etl-primary-hover);
}

.email-templates-layout-container .etl-nav-button.active {
	background-color: var(--etl-button-active-bg);
	color: var(--etl-primary-color);
	font-weight: 600;
	border-color: var(--etl-primary-color);
}

/* --- Content Body (Editor + Preview) --- */
.email-templates-layout-container .etl-content-body {
	flex: 1; /* Takes remaining vertical space */
	display: flex;
	overflow-y: auto; /* Allows vertical scrolling for editor/preview content */
	padding: 24px;
	gap: 24px;
	background-color: var(--etl-background-color);
}

/* --- Editor Pane & Preview Pane --- */
.email-templates-layout-container .etl-editor-pane,
.email-templates-layout-container .etl-preview-pane-wrapper {
	flex: 1;
	min-width: 320px; /* Minimum width before stacking */
	background-color: var(--etl-content-bg);
	border-radius: var(--etl-border-radius);
	box-shadow: var(--etl-shadow-sm);
	padding: 24px;
	border: 1px solid var(--etl-border-color);
}

.email-templates-layout-container .etl-preview-pane-wrapper {
	position: sticky;
	top: 0; /* Sticks to the top of the .etl-content-body */
	align-self: flex-start; /* Crucial for sticky positioning within a flex container */
	max-height: calc(100vh - 100px); /* Adjust based on header height + padding */
	overflow-y: auto; /* If preview itself becomes too long */
}


.email-templates-layout-container .etl-editor-pane h2,
.email-templates-layout-container .etl-preview-pane-wrapper h2 {
	font-size: 1.5rem;
	margin-top: 0;
	margin-bottom: 20px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--etl-border-color);
	font-weight: 600;
}

/* --- Form Styling (Scoped) --- */
.email-templates-layout-container .template-form {
	/* background-color: var(--etl-content-bg); Now handled by pane */
}

.email-templates-layout-container .form-section {
	margin-bottom: 24px;
}

.email-templates-layout-container .form-section h3 {
	font-size: 1rem;
	font-weight: 600;
	color: var(--etl-secondary-color);
	margin-bottom: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.email-templates-layout-container .form-group {
	margin-bottom: 16px;
}

.email-templates-layout-container .form-group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	font-size: 0.9rem;
}

.email-templates-layout-container .form-group input[type="text"],
.email-templates-layout-container .form-group input[type="url"],
.email-templates-layout-container .form-group textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--etl-border-color);
	border-radius: var(--etl-border-radius);
	background-color: var(--etl-input-bg);
	font-size: 0.95rem;
	font-family: 'Inter', sans-serif;
	transition: border-color 0.2s, box-shadow 0.2s;
	box-sizing: border-box;
}

.email-templates-layout-container .form-group input[type="text"]:focus,
.email-templates-layout-container .form-group input[type="url"]:focus,
.email-templates-layout-container .form-group textarea:focus {
	outline: none;
	border-color: var(--etl-input-focus-border);
	box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.email-templates-layout-container .form-group textarea {
	min-height: 100px;
	resize: vertical;
}

/* Styling for the new Greeting Editor */
.email-templates-layout-container .greeting-editor {
	display: flex;
	align-items: center;
	background-color: #f0f3f5;
	padding: 8px 12px;
	border-radius: var(--etl-border-radius);
	border: 1px solid var(--etl-border-color);
}

.email-templates-layout-container .greeting-text-input {
	/* Override general input styles for this specific one */
	padding: 6px 8px !important;
	font-size: 0.9rem !important;
	border: 1px solid #ccc !important;
	border-radius: 4px !important;
	margin-right: 8px;
	width: auto !important; /* Allow it to be small */
	min-width: 80px; /* Give some space for "Hello" etc. */
	flex-grow: 0; /* Prevent taking too much space */
	box-shadow: none !important; /* Remove focus shadow if too obtrusive */
	background-color: var(--etl-input-bg) !important; /* Ensure consistent bg */
}
.email-templates-layout-container .greeting-text-input:focus {
	border-color: var(--etl-input-focus-border) !important;
	/* box-shadow for focus can be added back if desired, but kept minimal for inline feel */
}

.email-templates-layout-container .greeting-variable-display {
	font-family: monospace;
	background-color: #d4edda; /* Greenish background for variable part */
	color: #155724;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 0.9rem;
	white-space: nowrap;
}

.email-templates-layout-container .save-button {
	padding: 10px 20px;
	background-color: var(--etl-primary-color);
	color: white;
	border: none;
	border-radius: var(--etl-border-radius);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s;
	float: right;
	margin-top: 10px;
}

.email-templates-layout-container .save-button:hover {
	background-color: var(--etl-primary-hover);
}

/* --- Live Email Preview (Scoped) --- */
.email-templates-layout-container .email-preview {
	border: 1px solid #e0e0e0; /* Slightly different border for preview box itself */
	border-radius: var(--etl-border-radius);
	background-color: #fff;
	box-shadow: var(--etl-shadow-sm);
	font-family: Arial, sans-serif; /* Simulating typical email client fonts */
	color: #333;
	font-size: 14px; /* Base font size for preview */
}

.email-templates-layout-container .preview-header {
	padding: 16px;
	text-align: center;
	border-bottom: 1px solid #eee;
}

.email-templates-layout-container #preview-logo {
	max-width: 140px;
	max-height: 60px;
	display: block;
	margin: 0 auto;
}

.email-templates-layout-container .preview-content {
	padding: 20px;
}

.email-templates-layout-container #preview-subject {
	font-size: 1.1em; /* Relative to 14px base */
	font-weight: bold;
	color: #222;
	margin-bottom: 16px;
}

.email-templates-layout-container #preview-greeting,
.email-templates-layout-container #preview-body,
.email-templates-layout-container #preview-footer-one,
.email-templates-layout-container #preview-footer-two {
	font-size: 1em; /* Relative to 14px base */
	line-height: 1.6;
	white-space: pre-wrap; /* Preserves line breaks from textarea */
}

.email-templates-layout-container #preview-greeting {
	margin-bottom: 12px;
}

.email-templates-layout-container .preview-footer {
	padding: 20px;
	background-color: #f7f7f7;
	border-top: 1px solid #eee;
	font-size: 0.85em; /* Relative to 14px base */
	color: #666;
}

.email-templates-layout-container .preview-footer-info {
	margin-bottom: 12px;
}
 .email-templates-layout-container .preview-footer-info p,
 .email-templates-layout-container #preview-disclaimer p {
	margin: 0 0 8px 0;
}

.email-templates-layout-container .preview-footer hr {
	border: none;
	border-top: 1px solid #ddd;
	margin: 12px 0;
}

/* Utility Classes */
.email-templates-layout-container .hidden {
	display: none !important;
}

/* --- Responsive Design --- */
@media (max-width: 992px) { /* Breakpoint for stacking editor and preview */
	.email-templates-layout-container .etl-content-body {
		flex-direction: column;
		padding: 16px;
	}
	.email-templates-layout-container .etl-editor-pane,
	.email-templates-layout-container .etl-preview-pane-wrapper {
		width: 100%; /* Take full width when stacked */
		margin-bottom: 16px;
	}
	 .email-templates-layout-container .etl-preview-pane-wrapper {
		position: relative; /* Reset sticky when stacked */
		top: auto;
		max-height: none; /* Allow it to grow */
		padding: 16px;
	}
	.email-templates-layout-container .etl-editor-pane {
		 padding: 16px;
	}
}

@media (max-width: 768px) {
	.email-templates-layout-container .etl-nav-header {
		padding: 12px 16px; /* Reduce padding on smaller screens */
	}
	 .email-templates-layout-container .etl-nav-button {
		padding: 8px 12px;
		font-size: 0.9rem;
	}
	.email-templates-layout-container .etl-editor-pane h2,
	.email-templates-layout-container .etl-preview-pane-wrapper h2 {
		font-size: 1.25rem;
	}
}