.ws {
	white-space: nowrap;
}

.d-none {
	display: none !important;
}

/* html {
	scrollbar-width: none;
} */

::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}

::-webkit-scrollbar-thumb {
	background: #888;
	border-radius: 5px;
}

::-webkit-scrollbar-track {
	background: #f1f1f1;
}

.star {
	color: red !important;
}

.w60px {
	width: 60px !important;
}

.w25px {
	width: 25px !important;
}

.d-flex {
	display: flex !important;
}

input::-ms-reveal,
input::-ms-clear {
	display: none;
}

#login_form .form-group .icon {
	width: 16px;
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 99;
}

/* .modal-body {
	overflow: auto;
} */

textarea {
	resize: none !important;
}

.align-items-center {
	align-items: center !important;
}

.panel-body.height {
	min-height: 500px;
}

.bg-gray {
	background: #F9F9FC !important;
}

.form-control {
	box-shadow: none;
	color: inherit;
}

.form-control.multiselect-search {
	height: 42px;
}

.multiselect-clear-filter {
	height: 42px;
	display: flex;
	align-items: center;
}

.multiselect-container.dropdown-menu {
	margin-top: 38px !important;
	max-width: 100%;
}

.form-label {
	font-weight: 500;
	margin-bottom: 10px;
	/* color: #65686f; */
}

.table {
	margin: 0px !important;
}

.table-wrapper {
	overflow: visible;
}

.br-o {
	border-radius: 0px;
}

.border {
	border-width: 1px;
	border-style: solid;
}

/****************************/
/** Basic **/
/****************************/
.pa-0 {
	padding: 0px !important;
}

.pa-5 {
	padding: 5px !important;
}

.pa-10 {
	padding: 10px !important;
}

.pa-15 {
	padding: 15px !important;
}

.pa-20 {
	padding: 20px !important;
}

.pa-25 {
	padding: 25px !important;
}

.pa-30 {
	padding: 30px !important;
}

.pt-0 {
	padding-top: 0px !important;
}

.pt-5 {
	padding-top: 5px !important;
}

.pt-10 {
	padding-top: 10px !important;
}

.pt-15 {
	padding-top: 15px !important;
}

.pt-20 {
	padding-top: 20px !important;
}

.pt-25 {
	padding-top: 25px !important;
}

.pt-30 {
	padding-top: 30px !important;
}

.pt-35 {
	padding-top: 35px !important;
}

.pt-40 {
	padding-top: 40px !important;
}

.pt-45 {
	padding-top: 45px !important;
}

.pt-50 {
	padding-top: 50px !important;
}

.pb-0 {
	padding-bottom: 0px !important;
}

.pb-5 {
	padding-bottom: 5px !important;
}

.pb-10 {
	padding-bottom: 10px !important;
}

.pb-15 {
	padding-bottom: 15px !important;
}

.pb-20 {
	padding-bottom: 20px !important;
}

.pb-25 {
	padding-bottom: 25px !important;
}

.pb-30 {
	padding-bottom: 30px !important;
}

.pb-35 {
	padding-bottom: 35px !important;
}

.pb-40 {
	padding-bottom: 40px !important;
}

.pb-45 {
	padding-bottom: 45px !important;
}

.pb-50 {
	padding-bottom: 50px !important;
}

.pl-0 {
	padding-left: 0px !important;
}

.pl-5 {
	padding-left: 5px !important;
}

.pl-10 {
	padding-left: 10px !important;
}

.pl-15 {
	padding-left: 15px !important;
}

.pl-20 {
	padding-left: 20px !important;
}

.pl-25 {
	padding-left: 25px !important;
}

.pl-30 {
	padding-left: 30px !important;
}

.pl-35 {
	padding-left: 35px !important;
}

.pl-40 {
	padding-left: 40px !important;
}

.pl-45 {
	padding-left: 45px !important;
}

.pl-50 {
	padding-left: 50px !important;
}

.pr-0 {
	padding-right: 0px !important;
}

.pr-5 {
	padding-right: 5px !important;
}

.pr-10 {
	padding-right: 10px !important;
}

.pr-15 {
	padding-right: 15px !important;
}

.pr-20 {
	padding-right: 20px !important;
}

.pr-25 {
	padding-right: 25px !important;
}

.pr-30 {
	padding-right: 30px !important;
}

.pr-35 {
	padding-right: 35px !important;
}

.pr-40 {
	padding-right: 40px !important;
}

.pr-45 {
	padding-right: 45px !important;
}

.pr-50 {
	padding-right: 50px !important;
}

.ma-0 {
	margin: 0px !important;
}

.ma-5 {
	margin: 5px !important;
}

.ma-10 {
	margin: 10px !important;
}

.ma-15 {
	margin: 15px !important;
}

.ma-20 {
	margin: 20px !important;
}

.ma-25 {
	margin: 25px !important;
}

.ma-30 {
	margin: 30px !important;
}

.mt-0 {
	margin-top: 0px !important;
}

.mt-2 {
	margin-top: 2px !important;
}

.mt-5 {
	margin-top: 5px !important;
}

.mt-10 {
	margin-top: 10px !important;
}

.mt-15 {
	margin-top: 15px !important;
}

.mt-20 {
	margin-top: 20px !important;
}

.mt-25 {
	margin-top: 25px !important;
}

.mt-30 {
	margin-top: 30px !important;
}

.mt-35 {
	margin-top: 35px !important;
}

.mt-40 {
	margin-top: 40px !important;
}

.mt-45 {
	margin-top: 45px !important;
}

.mt-50 {
	margin-top: 50px !important;
}

.mt-55 {
	margin-top: 55px !important;
}

.mt-60 {
	margin-top: 60px !important;
}

.mt-65 {
	margin-top: 65px !important;
}

.mt-70 {
	margin-top: 70px !important;
}

.mt-75 {
	margin-top: 75px !important;
}

.mt-80 {
	margin-top: 80px !important;
}

.mt-85 {
	margin-top: 85px !important;
}

.mt-90 {
	margin-top: 90px !important;
}

.mt-95 {
	margin-top: 95px !important;
}

.mb-0 {
	margin-bottom: 0px !important;
}

.mb-5 {
	margin-bottom: 5px !important;
}

.mb-10 {
	margin-bottom: 10px !important;
}

.mb-15 {
	margin-bottom: 15px !important;
}

.mb-20 {
	margin-bottom: 20px !important;
}

.mb-25 {
	margin-bottom: 25px !important;
}

.mb-30 {
	margin-bottom: 30px !important;
}

.mb-35 {
	margin-bottom: 35px !important;
}

.mb-40 {
	margin-bottom: 40px !important;
}

.mb-45 {
	margin-bottom: 45px !important;
}

.mb-50 {
	margin-bottom: 50px !important;
}

.mb-55 {
	margin-bottom: 55px !important;
}

.mb-60 {
	margin-bottom: 60px !important;
}

.mb-65 {
	margin-bottom: 65px !important;
}

.mb-70 {
	margin-bottom: 70px !important;
}

.mb-75 {
	margin-bottom: 75px !important;
}

.mb-80 {
	margin-bottom: 80px !important;
}

.mb-85 {
	margin-bottom: 85px !important;
}

.mb-90 {
	margin-bottom: 90px !important;
}

.mb-95 {
	margin-bottom: 95px !important;
}

.ml-0 {
	margin-left: 0px !important;
}

.ml-5 {
	margin-left: 5px !important;
}

.ml-10 {
	margin-left: 10px !important;
}

.ml-15 {
	margin-left: 15px !important;
}

.ml-20 {
	margin-left: 20px !important;
}

.ml-25 {
	margin-left: 25px !important;
}

.ml-30 {
	margin-left: 30px !important;
}

.ml-35 {
	margin-left: 35px !important;
}

.ml-40 {
	margin-left: 40px !important;
}

.ml-45 {
	margin-left: 45px !important;
}

.ml-50 {
	margin-left: 50px !important;
}

.ml-55 {
	margin-left: 55px !important;
}

.ml-60 {
	margin-left: 60px !important;
}

.mr-0 {
	margin-right: 0px !important;
}

.mr-5 {
	margin-right: 5px !important;
}

.mr-10 {
	margin-right: 10px !important;
}

.mr-15 {
	margin-right: 15px !important;
}

.mr-20 {
	margin-right: 20px !important;
}

.mr-25 {
	margin-right: 25px !important;
}

.mr-30 {
	margin-right: 30px !important;
}

.mr-35 {
	margin-right: 35px !important;
}

.mr-40 {
	margin-right: 40px !important;
}

.mr-45 {
	margin-right: 45px !important;
}

.mr-50 {
	margin-right: 50px !important;
}

.mr-55 {
	margin-right: 55px !important;
}

.mr-60 {
	margin-right: 60px !important;
}

.ml-auto {
	margin-left: auto !important;
}

.mr-auto {
	margin-right: auto !important;
}

.no-float {
	float: none !important;
}

.overflow-hide {
	overflow: hidden !important;
}

.clearfix {
	overflow: hidden;
	clear: both;
	float: none;
}

.modal-header {
	background-color: #F9F9FC;
}

@media (min-width: 768px) {
	.modal-xxl {
		width: 90%;
	}
}

.track {
	position: relative;
	background-color: #ddd;
	height: 7px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 60px;
	margin-top: 50px;
}

.track .step {
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	width: 25%;
	margin-top: -18px;
	text-align: center;
	position: relative;
}

.track .step.active:before {
	background: #ffd333;
}

.track .step::before {
	height: 7px;
	position: absolute;
	content: "";
	width: 100%;
	left: 0;
	top: 18px;
}

.track .step.active .icon {
	background: #ffd333;
}

.track .icon {
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	position: relative;
	border-radius: 100%;
	background: #ddd;
}

.track .text {
	display: block;
	margin-top: 7px;
}

.track_awb td.track_dot {
	width: 30px;
	position: relative;
	padding: 0;
	text-align: center;
}

.track_awb.table td,
.track_awb.table th {
	padding: 2px;
	font-size: 10px;
	line-height: 17px;
}

.track_awb td.track_dot span.track_line {
	background: #555555;
	width: 2px;
	min-height: 24px;
	position: absolute;
}

.track_awb td.track_dot:after {
	content: "\f111";
	font-family: FontAwesome;
	position: absolute;
	margin-left: -3px;
	font-size: 8px;
}

@media only screen and (min-width: 320px) and (max-width: 640px),
only screen and (max-width: 740px),
only screen and (max-width: 1024px) {
	.track .text {
		font-size: 10px;
	}

	.track_awb td.track_dot span.track_line {
		min-height: 40px;
	}
}

.page-meta {
	border-bottom: 1px solid #2125291a;
	border-top: 1px solid #2125291a;
	font-size: 0.875rem;
	line-height: 1.25rem;
	padding: 0.5625rem 1rem;
}

.meta_body {
	overflow: hidden;
}

.meta_list {
	display: flex;
	flex-wrap: wrap;
	margin-top: -0.25rem;
	margin-left: -1.5625rem;
}

.meta_item {
	margin-top: 0.25rem;
	position: relative;
	margin-left: 1.5625rem;
}

.meta_item:before {
	background: #21252933;
	content: "";
	display: block;
	height: calc(100% - 0.375rem);
	position: absolute;
	top: 0.1875rem;
	width: 0.0625rem;
	left: -0.8125rem;
}

.form-light-bar {
	background: #e7e7e7;
	padding: 6px 20px;
	font-weight: 600;
	margin-bottom: 5px;
}

.courier_calculator_summary {
	
	columns: 2;
	-webkit-columns: 2;
	-moz-columns: 2;
	padding-left: 10px;
}

.courier_calculator_summary li {
	list-style-type: none;
}

.courier_calculator_summary li span {
	float: right;
}

.rating {
	color: #ffd333;
}

.img-box img {
	border: 2px solid #ece6e6;
	margin-top: 10px;
	padding: 6px;
	border-radius: 0.125rem;
}

.right-form-box {
	background: #ffffff;
	padding: 0px 0px 0px 25px;
}

.list-box ul {
	list-style-type: none;
	padding-left: 0px;
}

.list-box ul li {
	line-height: 30px;
	margin-left: 30px;
	color: #0d062d;
	position: relative;
}

.list-box ul li i {
	width: 20px;
	color: #3b55a0;
	position: absolute;
	top: 7px;
	left: -30px;
	font-weight: 500;
}

.list-box ul li a i {
	color: #000000;
}

.no-left-padding {
	padding-left: 0px;
}

.filter-search {
	height: 40px;
	background: #f5f5f5;
	border: 0px;
	padding-left: 90px;
	color: var(--site_color);
}

.filter-icon {
	position: absolute;
	left: 75px;
	top: 10px;
	width: 20px;
}

.table-dark {
	background: #3b549f;
	color: #ffffff;
}

.table-dark tr th {
	font-weight: 500 !important;
}

.panel {
	box-shadow: none;
}

.table-light {
	background: #f7f7fe;
	color: #333;
}

#form_filters {
	border-radius: 14px;
	background: #ffffff;
	box-shadow: 0px 13px 61px 0px rgba(169, 169, 169, 0.37);
	padding-top: 15px;
	position: absolute;
	z-index: 999;
	width: 97%;
}

#form_filters::before {
	content: "";
	width: 0px;
	height: 21px;
	transform: rotate(-45.248deg);
	position: absolute;
	top: -5px;
	left: 30px;
	background: #ffffff;
}

.mobileonly {
	display: none;
}

.multiselect-container.dropdown-menu>li>a {
	border-radius: 0px;
}

.mobilehide {
	display: block;
}

label.required:after {
	content: "*";
	color: red;
	font-weight: bold;
	padding-left: 6px;
}

.error {
	color: red !important;
}

.small-badge {
	min-width: 10px;
	background: #0b87c529;
	color: #000;
	font-size: 11px;
	padding: 2px 6px;
}

.filter_summary {
	display: inline-block;
	background: #f5f5f6;
	padding: 2px 8px;
	
	font-weight: 600;
	border-radius: 5px;
	margin-bottom: 10px;
}

#suggestion-list {
	z-index: 999;
	list-style: none;
	padding: 0;
	max-height: 400px;
	overflow-y: auto;
	position: absolute;
	background-color: #fff;
	box-shadow: 0 4px 30px rgba(0, 0, 0, .2);
}

#suggestion-list li a {
	font-weight: 600;
	padding: 8px 10px;
	align-items: center;
	display: flex;
	justify-content: space-between;
	color: #0f0f0f;
	border-bottom: 1px solid #E7E7E7;
}

#suggestion-list li:hover,
#suggestion-list li:hover a {
	background: #38383a;
	color: #FFFFFF;
}

#suggestion-list li a.btn {
	display: inline flow-root list-item;
	color: #FFFFFF;
	border-radius: 0px;
}

#suggestion-list::-webkit-scrollbar {
	width: 6px;
}

#suggestion-list::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

#suggestion-list::-webkit-scrollbar-thumb {
	background-color: #0f0f0f;
}

.heading {
	background: #555;
	color: #fff;
	padding: 6px 10px;
	font-size: 16px;
	margin-bottom: 10px;
}

.site-service {
	background: #555;
	color: #fff;
	text-align: center;
	padding: 5px;
	font-size: 15px;
	margin-bottom: 10px;
}

.switchbtn {
	position: relative;
	display: inline-block;
	width: 90px;
	height: 25px;
}

.switchbtn::before {
	position: absolute;
	left: 27px;
	z-index: 1;
	color: #fff;
	content: "Inactive";
	line-height: 25px;
}

.switchbtn input {
	display: none;
}

.slider {
	position: absolute;
	cursor: pointer;
	overflow: hidden;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #9b9b9b;
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.slider:before {
	position: absolute;
	z-index: 2;
	content: "";
	height: 16px;
	width: 16px;
	left: 6px;
	bottom: 4px;
	background-color: #ffffff;
	-webkit-box-shadow: 0 2px 5px rgb(0 0 0 / 22%);
	box-shadow: 0 2px 5px rgb(0 0 0 / 22%);
	-webkit-transition: 0.4s;
	transition: all 0.4s ease-in-out;
}

.slider:after {
	position: absolute;
	left: 0;
	z-index: 1;
	content: "Active";
	text-align: left !important;
	line-height: 25px;
	padding-left: 0;
	width: 90px;
	color: #fff;
	border-radius: 100px;
	background-color: #0c54a7;
	font-weight: 600;
	-webkit-transform: translateX(-160px);
	-ms-transform: translateX(-160px);
	transform: translateX(-160px);
	transition: all 0.4s ease-in-out;
}

input:checked+.slider:after {
	-webkit-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
	padding-left: 14px;
}

input:checked+.slider:before {
	-webkit-transform: translateX(160px);
	-ms-transform: translateX(160px);
	transform: translateX(160px);
	left: -91px;
}

/* Rounded sliders */
.slider.round {
	border-radius: 100px;
}

.slider.round:before {
	border-radius: 50%;
}

.absolute-no {
	position: absolute;
	left: 0;
	color: #ffffff;
	text-align: right !important;
	width: calc(100% - 25px);
	line-height: 30px;
	cursor: pointer;
}

/*** preloader : start ***/
#preloader {
	display: none;
}

#preloader {
	position: fixed;
	z-index: 999999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.6);
}

#preloader-status {
	position: absolute;
	top: 40%;
	left: 45%;
}

#preloader-title img {
	height: 50px;
}

.spinner {
	margin: 5px 0 0 0px;
	width: 130px;
	height: 30px;
	text-align: center;
	font-size: 10px;
}

.spinner>div {
	background-color: var(--site_color);
	height: 100%;
	width: 20px;
	display: inline-block;
	-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
	animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
	background: #333333;
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
}

.spinner .rect3 {
	-webkit-animation-delay: -1s;
	animation-delay: -1s;
}

.spinner .rect4 {
	background: #333333;
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}

.spinner .rect5 {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {

	0%,
	40%,
	100% {
		-webkit-transform: scaleY(0.4);
	}

	20% {
		-webkit-transform: scaleY(1);
	}
}

@keyframes stretchdelay {

	0%,
	40%,
	100% {
		transform: scaleY(0.4);
		-webkit-transform: scaleY(0.4);
	}

	20% {
		transform: scaleY(1);
		-webkit-transform: scaleY(1);
	}
}

pre {
	background: none;
	max-width: 25rem;
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word;
	font-family: "Roboto", sans-serif;
}

.new_accordion .panel {
	border: medium none;
	border-radius: 0;
	box-shadow: none;
	margin: 0 0 15px 10px;
}

.new_accordion .panel-heading {
	border-radius: 30px;
	padding: 0;
}

.new_accordion .panel-title a {
	background: var(--site_color) none repeat scroll 0 0;
	border: 1px solid transparent;
	border-radius: 30px;
	color: #fff;
	display: block;
	font-size: 16px;
	padding: 12px 20px 12px 50px;
	position: relative;
	transition: all 0.3s ease 0s;
}

.new_accordion .panel-title a small {
	color: #fff;
}

.new_accordion .panel-title a.collapsed small {
	color: #333;
}

.new_accordion .panel-title a.collapsed {
	background: #fff none repeat scroll 0 0;
	border: 1px solid #ddd;
	color: #333;
}

.new_accordion .panel-title a::after,
.new_accordion .panel-title a.collapsed::after {
	background: var(--site_color) none repeat scroll 0 0;
	border: 1px solid transparent;
	border-radius: 50%;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.58);
	color: #fff;
	content: "\f107";
	font-family: fontawesome;
	font-size: 25px;
	height: 55px;
	left: -20px;
	line-height: 55px;
	position: absolute;
	text-align: center;
	top: 8px;
	transition: all 0.3s ease 0s;
	width: 55px;
}

.new_accordion .panel-title a.collapsed::after {
	background: #fff none repeat scroll 0 0;
	border: 1px solid #ddd;
	box-shadow: none;
	color: #333;
	content: "\f106";
}

.new_accordion .panel-body {
	background: transparent none repeat scroll 0 0;
	border-top: none !important;
	padding: 20px 25px 10px 9px;
	position: relative;
}

.settings .panel-heading {
	padding: 8px 12px !important;
}

.settings .card-view {
	padding: 10px;
}

.settings .card-view:hover {
	background: #f0f4f5;
}

.settings .card-view h5 {
	margin-bottom: 10px;
	font-size: 15px;
}

.round_number {
	background: #333333;
	color: #ffffff;
	border-radius: 50px;
	float: right;
	padding: 1px 8px;
}

.no-data {
	text-align: center;
	margin: 30px 10px;
}

input:checked {
	background-color: var(--site_color) !important;
	border-color: var(--site_color) !important;
}

/* 
.table-responsive {
	overflow-x: initial;
} */

.table-responsive.oxa {
	overflow-x: auto !important;
}

.table-fixed {
	max-height: 80vh;
	overflow-y: auto;
}

.table-fixed thead tr th{
	position: sticky;
	background: #0d55a7 !important;
	color: #fff;
	z-index: 9;
	box-shadow: 0 1px 0 0 #0d55a7, 0 -1px 0 0 #0d55a7;
}

/* First header row */
.table-fixed thead tr:nth-child(1) th {
	top: 0;
}

/* Second header row */
.table-fixed thead tr:nth-child(2) th {
	top: 36px;
}

.table-fixed thead tr:nth-child(3) th {
	top: 72px;
}

.multiselect.dropdown-toggle .caret {
	margin-top: 2px;
}

.multiselect-native-select .btn {
	padding: 6px 12px;
	min-width: 42px;
	height: 42px;
}

/* .multiselect-container>li>a>label {
	padding: 0px;
}
*/
.sub_form {
	background: #f5f5f6;
	padding: 15px;
	margin-bottom: 16px;
	border-radius: 5px;
}

/*.vertical-pills .tab-content{
	overflow:auto;
}
*/
table thead tr th a {
	color: #ffffff;
	padding-left: 5px;
}

.table-bordered thead tr.table-dark th,
.table-bordered tfoot tr.table-dark th {
	border: 1px solid #725f5f;
}

hr.default {
	margin-top: 6px;
	margin-bottom: 6px;
	border-top: 2px dotted #777777;
}

.label_file {
	font-size: 26px;
	color: #aa2323;
	padding: 7px;
}

.pod_file {
	font-size: 26px;
	color: #187f18;
	padding: 7px;
}

.table-th-bold th {
	font-weight: 600;
}

.connection-item span.block {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

svg.icon {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

/* .dropdown-menu.upper {
	top: auto !important;
	bottom: 100% !important;
}

.dropdown-menu.upper::before {
	bottom: -5px !important;
	top: auto !important;
}

.multiselect-container.dropdown-menu.upper {
	top: 100% !important;
	bottom: initial !important;
} */

/* .dropdown-menu .dropdown-item {
	cursor: pointer;
	display: block;
	width: 100%;
	padding: 0px;
	clear: both;
	font-weight: 500;
	text-align: inherit;
	white-space: nowrap;
	background-color: transparent;
	border: 0;
}
.dropdown-menu .dropdown-item:hover {
	color: #ec1f24;
} */
.mt-20 {
	margin-top: 20px;
}

.multiple-status {
	padding-left: 10px;
}

.multiple-status li {
	list-style-type: none;
}

.multiple-status li span {
	float: right;
}

.sa-inbox__body {
	flex-grow: 1;
	overflow: hidden;
}

.sa-inbox-chat {
	--sa-inbox-chat--avatar-size: 2.5rem;
	--sa-inbox-chat--avatar-gutter: 1rem;
	--sa-inbox-chat--avatar-total-width: calc(var(--sa-inbox-chat--avatar-size) + var(--sa-inbox-chat--avatar-gutter));
}

.sa-inbox-chat__form {
	padding: 1.25rem;
	position: relative;
}

.sa-inbox-chat__form {
	padding-left: calc(1.25rem + var(--sa-inbox-chat--avatar-total-width));
}

.sa-inbox-chat__form>.sa-symbol {
	font-size: var(--sa-inbox-chat--avatar-size);
	position: absolute;
	left: 1.25rem;
	right: 1.25rem;
}

.sa-symbol {
	--sa-symbol--bg-color: #ebedf0;
	--sa-symbol--font-color: #77838c;
	--sa-symbol--status-color: #000;
	--sa-symbol--size: inherit;
	--sa-symbol--parent-bg-color: #fff;
	--sa-symbol--text-size: 37%;
	--sa-symbol--icon-size: 40%;
	flex-shrink: 0;
	font-size: var(--sa-symbol--size);
	height: 1em;
	position: relative;
	width: 1em;
}

.sa-symbol:hover {
	text-decoration: none;
}

.sa-symbol img {
	border-radius: inherit;
	display: block;
	height: 100%;
	width: 100%;
}

.sa-symbol--shape--circle {
	border-radius: 0.5em;
}

.sa-inbox-chat__form>.sa-quill {
	margin: 1.25rem 0;
}

.sa-inbox-chat__form-head {
	align-items: stretch;
	display: flex;
}

.sa-inbox-chat__form-footer {
	align-items: center;
	display: flex;
}

.sa-inbox-chat__list {
	border-bottom: 1px solid #2125291a;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sa-inbox-chat__item {
	border-top: 1px solid #2125291a;
}

.sa-inbox-chat__item-header {
	display: grid;
	grid-template-columns: var(--sa-inbox-chat--avatar-size) var(--sa-inbox-chat--avatar-gutter) 1fr auto auto;
	grid-template-rows: 1fr 1fr;
	padding: 0.875rem 1.25rem;
}

.sa-inbox-chat__item-body {
	padding: 0.125rem 1.25rem 0.875rem;
}

.sa-inbox-chat__item-body {
	padding-left: calc(1.25rem + var(--sa-inbox-chat--avatar-total-width));
}

.sa-inbox-chat__item-avatar {
	align-self: center;
	grid-column: 1;
	grid-row: 1/3;
}

.sa-inbox-chat__item-avatar .sa-symbol {
	font-size: var(--sa-inbox-chat--avatar-size);
}

.sa-inbox-chat__item-author {
	font-size: 0.9375rem;
	font-weight: 500;
	grid-column: 3;
	grid-row: 1;
}

.sa-inbox-chat-item-author {
	font-size: 0.9375rem;
	font-weight: 500;
	grid-row: 1;
}

.sa-inbox-chat__item-date {
	align-self: center;
	color: #6c757d;
	font-size: 0.875rem;
	grid-column: 4;
	grid-row: 1/3;
	padding-top: 0.0625rem;
}

.sa-inbox-chat__item-date {
	margin-left: 1rem;
}

.sa-inbox-chat__item-actions {
	align-self: center;
	display: flex;
	grid-column: 5;
	grid-row: 1/3;
}

.sa-inbox-chat__item-actions {
	margin-left: 0.75rem;
}

.sa-inbox-chat__item-meta {
	color: #6c757d;
	font-size: 0.875rem;
	grid-column: 3/6;
	grid-row: 2;
}

.sa-inbox-chat__item-meta a {
	color: inherit;
}

.sa-inbox-chat__item-message {
	font-size: 0.9375rem;
	grid-column: 3/6;
	grid-row: 3;
	line-height: 1.3125rem;
	padding-bottom: 0.5rem;
	white-space: pre-wrap;
	word-break: break-word;
}

.emp-detail-box {
	background: #f0f2f5;
	padding: 15px;
	border-radius: 5px;
	color: #000000;
	margin-top: 10px;
	margin-bottom: 10px;
}

.emp-detail-box.active {
	background: #d9ecff;
	color: #000000;
}

.emp-detail-box div {
	margin-bottom: 4px;
}

.emp-detail-box div span {
	float: right;
}

.task-tab-open {
	color: #3562ff;
}

.task-tab-working {
	color: #b19329;
}

.task-tab-review {
	color: #53a700;
}

.task-tab-archieved {
	color: #8939c8;
}

.task-tab-trash {
	color: #fa3939;
}

.message-item {
	margin-bottom: 15px;
	margin-left: 40px;
	position: relative;
}

.message-item .message-inner {
	border: 1px solid #ddd;
	border-radius: 3px;
	padding: 10px;
	position: relative;
}

.message-item .message-inner:before {
	border-right: 10px solid #ddd;
	border-style: solid;
	border-width: 10px;
	color: rgba(0, 0, 0, 0);
	content: "";
	display: block;
	height: 0;
	position: absolute;
	left: -20px;
	top: 6px;
	width: 0;
}

.message-item .message-inner:after {
	border-right: 10px solid #fff;
	border-style: solid;
	border-width: 10px;
	color: rgba(0, 0, 0, 0);
	content: "";
	display: block;
	height: 0;
	position: absolute;
	left: -18px;
	top: 6px;
	width: 0;
}

.message-item:before {
	border-radius: 2px;
	bottom: -30px;
	box-shadow: 0 0 2px #ffd333;
	content: "";
	height: 100%;
	left: -30px;
	position: absolute;
	width: 1px;
}

.message-item:after {
	border: 2px solid #ffd333;
	border-radius: 50%;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	content: "";
	height: 15px;
	left: -36px;
	position: absolute;
	top: 10px;
	width: 15px;
}

.s-badge {
	display: inline-block;
	padding: 0.35em 0.65em;
	font-size: 0.75em;
	font-weight: 500;
	line-height: 1;
	color: #fff;
	text-align: center;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: 2px;
	margin-right: 2px;
}

.shake-lr {
	background: #e22d2d;
	color: #fff;
	position: absolute;
	z-index: 1;
	font-size: 8px;
	line-height: 14px;
	padding: 2px 6px;
	border-radius: 100em;
	box-shadow: 0 0 6px 2px rgb(0 0 0 / 5%);
	-webkit-box-shadow: 0 0 6px 2px rgb(0 0 0 / 5%);
	-moz-box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.05);
	margin-left: 10px;
}

.shake-lr {
	-webkit-animation: shake-lr 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2s infinite alternate-reverse both;
	animation: shake-lr 3s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2s infinite alternate-reverse both;
}

@-webkit-keyframes shake-lr {

	0%,
	100% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
	}

	10% {
		-webkit-transform: rotate(8deg);
		transform: rotate(8deg);
	}

	20%,
	40%,
	60% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}

	30%,
	50%,
	70% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
	}

	80% {
		-webkit-transform: rotate(-8deg);
		transform: rotate(-8deg);
	}

	90% {
		-webkit-transform: rotate(8deg);
		transform: rotate(8deg);
	}
}

@keyframes shake-lr {

	0%,
	100% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
		-webkit-transform-origin: 50% 50%;
		transform-origin: 50% 50%;
	}

	10% {
		-webkit-transform: rotate(8deg);
		transform: rotate(8deg);
	}

	20%,
	40%,
	60% {
		-webkit-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}

	30%,
	50%,
	70% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
	}

	80% {
		-webkit-transform: rotate(-8deg);
		transform: rotate(-8deg);
	}

	90% {
		-webkit-transform: rotate(8deg);
		transform: rotate(8deg);
	}
}

.active-badge,
.badge-danger,
.badge-unkown {
	padding: 2px 2px;
	border-radius: 70px;
	line-height: 0;
}

.active-badge i {
	color: #469408 !important;
}

.badge-danger i {
	color: red !important;
}

.badge-unkown i {
	color: blue !important;
}

.card-view h4 {
	background: #f7f7fe;
	padding: 6px 10px;
	margin-bottom: 10px;
	font-size: 16px;
}

.card-view .list {
	padding: 10px 10px;
	border-bottom: 2px solid #f7f7fe;
}

.card-view .list:last-child {
	border-bottom: none;
}

.modal-title {
	color: var(--site_color);
}

.btn {
	font-weight: 500;
}

.btn-default {
	color: #0f3659;
}

.btn-filter {
	position: absolute;
	padding: 2px 15px !important;
	color: #ffffff;
	background: #3a3a3b;
	top: 10px;
	left: 24px;
	font-size: 11px;
}

.btn-filter.focus,
.btn-filter:focus,
.btn-filter:hover {
	color: #ffffff;
	background: #4a4a4a;
}

.btn .icon {
	position: relative;
	top: 3px;
	height: 16px;
}

/* Global selectpicker dropdown height limit */
.bootstrap-select .dropdown-menu.inner {
    max-height: 280px !important;
}

.bootstrap-select .btn,
.multiselect.btn.btn-default {
	padding: 6px 12px;
	color: #555555;
	font-weight: 400;
	height: 34px;
	border: 1px solid #ccc;
	display: block;
}

.bootstrap-select .btn:focus,
.multiselect.btn.btn-default:focus {
	border-color: #66afe9;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

/* .dropdown-menu > li {
	padding: 8px 20px;
}
.dropdown-menu > li > a {
	padding: 0px;	
} */
.btn-primary {
	color: #fff;
	background-color: #0c54a7;
	border-color: #0c54a7;
}

.btn-secondary {
	background: var(--secondary_color);
	border: solid 1px var(--secondary_color);
	color: #ffffff !important;
}

.btn-secondary:hover {
	background: var(--site_color);
	border: solid 1px var(--site_color);
	color: #ffffff !important;
}

.multiselect-container>li>a>label>input[type="checkbox"] {
	margin-left: -20px;
	margin-top: 3px;
}

.header {
	padding: 10px 11px;
	box-shadow: 0 0 1px 1px rgb(0 0 0/5%), 0 1px 2px -2px rgb(0 0 0/6%), 0 1px 3px 0 rgb(0 0 0/7%);
	margin-bottom: 15px;
}

.header .has-search .form-control-feedback {
	font-size: 25px;
	right: 5px;
	top: 7px;
	color: #ccc;
}

.header .has-search .form-control {
	padding-left: 12px;
	height: 40px;
	padding-right: 34px;
}

.page-heading {
	padding-bottom: 10px;
}

.page-heading h3 {
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	line-height: 32px;
}

.page-heading p {
	color: #9b9b9b;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}

.d-box {
	width: 100%;
	position: relative;
	text-align: center;
	background: var(--secondary_color);
	color: #ffffff;
	border-radius: 10px;
	padding: 10px 10px;
	overflow: hidden;
}

.d-box::before {
	content: "";
	position: absolute;
	bottom: -50px;
	left: -50px;
	border-radius: 50%;
	border: 10px solid #ffffff;
	box-sizing: border-box;
	width: 120px;
	height: 120px;
	opacity: 0.56;
}

.d-box::after {
	content: "";
	position: absolute;
	top: -50px;
	right: -50px;
	border-radius: 50%;
	border: 10px solid #ffffff;
	box-sizing: border-box;
	width: 120px;
	height: 120px;
	opacity: 0.56;
}

.d-box.blue {
	background: var(--site_color);
}

.d-box.blue::before {
	bottom: auto;
	left: -50px;
	top: -50px;
}

.d-box.blue::after {
	top: auto;
	right: -50px;
	bottom: -50px;
}

.d-box h4 {
	font-size: 40px;
	line-height: 60px;
	font-weight: 800;
}

.d-box p {
	font-weight: 500;
}

.top-navigation {
	margin-right: 0px;
	margin-top: 10px;
}

.top-navigation {
	display: flex;
	align-items: center;
	gap: 4px;
}

.top-navigation>li {
	position: relative;
	display: flex;
	align-items: center;
}

.top-navigation>li>a {
	border-radius: 8px;
	padding: 7px 10px;
	line-height: normal !important;
	color: #4b5563;
	transition: all 0.15s ease;
}

.top-navigation>li>a:hover {
	background: #f0f4ff;
	color: #1e3a8a;
}

.top-navigation>li.profile {
	padding-top: 0px;
	margin-left: 4px;
}

.top-navigation>li.profile>a {
	padding: 0px;
	display: flex;
	align-items: center;
	border-radius: 50%;
}

.top-navigation>li.profile>a>img {
	width: 36px;
	height: 36px;
	border: 2px solid #e5e7eb;
	transition: border-color 0.15s;
}

.top-navigation>li.profile>a:hover>img {
	border-color: #2854a0;
}

.top-navigation>li.user {
	border-left: none;
	line-height: 1;
	padding-left: 6px;
	font-weight: 400;
	padding-bottom: 0;
	font-size: 13px;
	color: #4b5563;
}

.top-navigation>li.user strong {
	color: #1f2937;
	font-weight: 600;
}

.top-navigation>li>a>.badge {
	position: absolute;
	right: -4px;
	top: -2px;
	font-size: 8px;
	padding: 4px 4px 4px;
	border-radius: 50%;
}

.top-navigation>li.blue>a {
	background: #eef2ff;
}

.top-navigation>li.blue>a:hover {
	background: #dbeafe;
}

.top-navigation>li>a>img.icon {
	width: 18px;
	position: relative;
	top: 0;
	opacity: 0.7;
	transition: opacity 0.15s;
}

.top-navigation>li>a:hover>img.icon {
	opacity: 1;
}

.top-navigation>li.red>a {
	background: transparent;
	padding: 8px 10px;
	border-radius: 8px;
}

.top-navigation>li.red>a:hover {
	background: #f0f4ff;
}

.top-navigation>li.blue>a>.badge {
	background: #0c55a6;
}

.top-navigation>li.red>a>.badge {
	background: #ec1f24;
}

.top-navigation>li.wallet>a {
	border-right: none;
	padding: 6px 12px !important;
	background: #f0fdf4;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
	color: #15803d;
}

.top-navigation>li.wallet>a:hover {
	background: #dcfce7;
	color: #166534;
}

.sub-title {
	color: #b9bbbd;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.light-red {
	background: #ffe2e5;
}

.light-green {
	background: #e4fdec;
}

.light-yellow {
	background: #fff4de;
}

.light-purple {
	background: #eae1ff;
}

.light-orange {
	background: #ffe2e5;
}

.light-blue {
	background: #ebeeff;
}

.level-box {
	border-radius: 16px;
	padding: 15px;
	position: relative;
	overflow: hidden;
}

.level-box::before {
	content: "";
	background: #ffffff;
	opacity: 0.4;
	position: absolute;
	top: -30%;
	right: -30%;
	border-radius: 50%;
	width: 125px;
	height: 125px;
}

.level-box>img {
	width: 30px;
}

.level-box>h4 {
	font-weight: 900;
	font-size: 20px;
	margin-top: 8px;
	line-height: 42px;
}

.level-box>p {
	font-weight: 500;
	
	color: #425166;
	line-height: 22px;
}

.level-box>p.small {
	font-weight: 500;
	font-size: 10px;
	color: #4079ed;
}

.left-setting,
.left-box {
	border-radius: 0px 10px 10px 0px;
	border: 1px solid #e0e0e0;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.04);
	padding: 10px;
	background: #f5f5f6;
}

.left-setting>li {
	padding-top: 7px;
	padding-bottom: 7px;
}

.left-setting>li.master {
	color: #1c1c1c;
	font-weight: 600;
}

.left-setting>li>a {
	color: #38383a;
	font-weight: 500;
}

.left-setting>li>a:hover,
.left-setting>li.active>a {
	color: #ed1f25;
}

.left-setting>li>a .icon {
	position: relative;
	top: 1px;
	width: 14px;
	height: 14px;
	display: inline-block;
	margin-right: 5px;
	color: #ffffff;
	text-align: center;
}

.left-setting>li>a .icon img {
	width: 10px;
}

.left-setting>li>a i {
	color: #ed1f25;
	padding-right: 10px;
	font-weight: 500;
	width: 26px;
}

table .dropdown-toggle {
	display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: #6b7280;
    transition: all .2s;
    border: none;
    background: none;
    cursor: pointer;
    text-decoration: none;
}

table .access-btn .dropdown-toggle {
	width: auto;
}
.role-search-wrap {
	position: relative;
	display: inline-block;
	width: 100%;
	max-width: 400px;
	margin-bottom: 16px;
}
.role-search-wrap .form-control {
	padding-left: 14px;
	padding-right: 32px;
	height: 38px;
	border-radius: 8px;
	border: 1px solid #e2e8f0;
	font-size: 13px;
	width: 100%;
}
.role-search-wrap .form-control:focus {
	border-color: var(--site_color, #3b55a0);
	box-shadow: 0 0 0 3px rgba(59, 85, 160, 0.1);
}
.role-search-icon {
	position: absolute;
	right: 36px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 13px;
	color: #94a3b8;
	pointer-events: none;
}
.role-search-clear {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	color: #94a3b8;
	cursor: pointer;
	line-height: 1;
}
.role-search-clear:hover { color: #64748b; }
.role-more-perm-btn {
	background: linear-gradient(135deg, #3b55a0 0%, #2c4085 100%);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 12px;
	cursor: pointer;
	transition: all 0.15s ease;
	box-shadow: 0 1px 3px rgba(59, 85, 160, 0.25);
}
.role-more-perm-btn:hover, .role-more-perm-btn:focus {
	background: linear-gradient(135deg, #2c4085 0%, #1e3068 100%);
	color: #fff;
	box-shadow: 0 2px 6px rgba(59, 85, 160, 0.4);
}
.role-more-perm-btn .caret { margin-left: 4px; }

table .dropdown-toggle:hover {
	background: #eef2ff;
    color: #0c54a7;
    text-decoration: none;
}

.custom-steps {
	margin-bottom: 15px;
}

.custom-steps .btn {
	color: #ffffff;
	position: relative;
	overflow: hidden;
	border: 0px;
}

/* .custom-steps .btn::before {
	content: "";
	width: 40px;
	height: 36px;
	position: absolute;
	top: -3px;
	right: -1px;
	background: #f5f5f6;
} */

.custom-steps .btn .count {
	color: #1c1c1c;
	position: relative;
	background: #ffffff;
	padding: 2px 5px;
	margin-left: 10px;
	border-radius: 10px;
	font-size: 11px;
}

.custom-steps .btn.active {
	background: #3b559f !important;
	background: linear-gradient(90deg, #3b559f 0%, #ca4034 100%) !important;
	background: -moz-linear-gradient(90deg, #3b559f 0%, #ca4034 100%) !important;
	background: -webkit-linear-gradient(90deg, #3b559f 0%, #ca4034 100%) !important;
}

/* Ecommerce step colors */
.custom-steps .step-new        { background: #204596; }
.custom-steps .step-picklist   { background: #d9853b; }
.custom-steps .step-picking    { background: #c4b700; }
.custom-steps .step-invoiced   { background: #29bcc4; }
.custom-steps .step-rtmanifest { background: #ea3e40; }
.custom-steps .step-manifest   { background: #5666d4; }
.custom-steps .step-dispatched { background: #f273a2; }
.custom-steps .step-delivered  { background: #239795; }
.custom-steps .step-rto        { background: #4f73b8; }
.custom-steps .step-all        { background: #87c654; }

/* ================= stepper =================== */

.stepper .nav-tabs {
	position: relative;
}

.stepper .nav-tabs>li {
	position: relative;
}

.stepper .nav-tabs>li:after {
	content: "";
	position: absolute;
	background: #f1f1f1;
	display: block;
	width: 100%;
	height: 5px;
	top: 35px;
	left: 48%;
	z-index: 0;
}

.stepper .nav-tabs>li:last-child::after {
	background: transparent;
}

.stepper .nav-tabs [data-toggle="tab"] {
	width: 85px;
	height: 35px;
	margin: 20px auto;
	border-radius: 100%;
	border: none;
	padding: 0;
	color: #f1f1f1;
}

.stepper .nav-tabs [data-toggle="tab"]:hover {
	background: transparent;
	border: none;
}

.stepper .nav-tabs>.active>[data-toggle="tab"],
.stepper .nav-tabs>.active>[data-toggle="tab"]:hover,
.stepper .nav-tabs>.active>[data-toggle="tab"]:focus {
	color: #3b55a0;
	cursor: default;
	border: none;
}

.stepper .tab-pane {
	position: relative;
	padding-top: 50px;
}

.stepper .round-tab {
	width: 85px;
	height: 35px;
	line-height: 30px;
	display: inline-block;
	border-radius: 25px;
	background: #fff;
	border: 2px solid #707070;
	color: #707070;
	z-index: 2;
	position: absolute;
	left: 0;
	text-align: center;
	font-weight: bold;
}

.stepper .active .round-tab {
	background: #fff;
	color: #3b55a0;
	border: 2px solid #3b55a0;
}

.stepper .active .round-tab:hover {
	background: #fff;
	border: 2px solid #3b55a0;
}

.stepper .active .round-tab::after {
	display: none;
}

/* ================= stepper =================== */

.header-pricing-data {
	position: -webkit-sticky;
	position: sticky;
	top: 66px;
	background-color: #fff;
	z-index: 5;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: nowrap;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
}

.header-pricing-data.active .flex-item {
	padding-top: 7px;
	padding-bottom: 7px;
}

.header-pricing-data.active .all-plans,
.header-pricing-data.active .list-plans .flex-item {
	padding-top: 20px;
	padding-bottom: 12px;
}

.header-pricing-data.active .all-plans p {
	margin-bottom: 4px;
	font-weight: bold;
}

.header-pricing-data.active .pricing-switch {
	margin-bottom: 3px;
}

.header-pricing-data.active .flex-item.pricing p {
	font-weight: 600;
}

.header-pricing-data.active .flex-item .signup {
	margin-top: 6px;
	margin-bottom: 4px;
}

.header-pricing-data .all-plans {
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	padding-left: 0;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.pricing-table {
	position: relative;
}

.pricing-table .bi-x-circle {
	color: #ec1f24;
}

.pricing-table .flaticon-check {
	color: #008000;
}

.pricing-table tr td,
.pricing-table tr th {
	text-align: center;
	padding-left: 15px;
	padding-right: 15px;
}

.pricing-table tr td:first-child,
.pricing-table tr th:first-child {
	text-align: left;
}

.pricing-table tr.fold td:first-child {
	padding-left: 30px;
}

.pricing-table tr.view th {
	cursor: pointer;
}

.pricing-table tr.fold {
	display: none;

	&.open {
		display: table-row;
	}
}

.pricing-table tr.view th:after {
	content: "+";
	position: absolute;
	right: 20px;
	font-size: 20px;
}

.pricing-table tr.view.open th:after {
	content: "-";
}

span.monthly,
span.yearly {
	display: none;
	cursor: pointer;

	&.active {
		display: block;
	}
}

.media .media-left {
	background-color: #f2f7fe;
	line-height: 0;
	padding: 12px;
	border-radius: 6px;
}

.media .media-body {
	padding-left: 10px !important;
}

.font-xlarge {
	font-size: 18px;
}

.table .table {
	background: none;
}

.table .table .pa-0 {
	border: none;
}

.trial-pack {
	border-right: 1px solid #d9dee6;
	margin-left: 00px;
	padding-right: 10px;
}

ul.d-filter>li {
	float: left;
	margin-right: 25px;
	line-height: 34px;
}

.sales {
	width: auto;
	display: flex;
	flex-grow: 1;
	overflow-x: scroll;
	margin-right: -15px;
	margin-left: -15px;
}

.box {
	min-width: 300px;
	max-width: 300px;
	position: relative;
	min-height: 1px;
	padding-right: 10px;
	padding-left: 10px;
}

.head {
	text-transform: uppercase;
	font-weight: 600;
	padding-inline: 7px;
	border-radius: 3px;
	margin-right: 5px;
}

.box:nth-child(1) .head {
	background-color: #3b55a0;
	color: #fff;
}

.box:nth-child(2) .head {
	background-color: #3b55a0;
	color: #fff;
}

.box:nth-child(3) .head {
	background-color: #3b55a0;
	color: #fff;
}

.box:nth-child(4) .head {
	background-color: #3b55a0;
	color: #fff;
}

.box:nth-child(5) .head {
	background-color: #3b55a0;
	color: #fff;
}

.box:nth-child(6) .head {
	background-color: #3b55a0;
	color: #fff;
}

.sales .list {
	margin-top: 20px;
	height: 70vh;
	overflow-y: scroll;
}

.items {
	margin-bottom: 10px;
	background: #ffffff;
	width: 100%;
	padding: 7px;
	border-radius: 8px;
	border: 1px solid #eceaf9;
	cursor: pointer;
}

.items:hover {
	border: 1px solid #3b55a0;
	box-shadow: 2px 4px 4px #ddd;
}

.collapsible-link {
	width: 100%;
	position: relative;
	text-align: left;
}

.collapsible-link::before {
	content: "\f107";
	position: absolute;
	top: 50%;
	right: 0.8rem;
	transform: translateY(-50%);
	display: block;
	font-family: "FontAwesome";
	font-size: 1.1rem;
}

.collapsible-link[aria-expanded="true"]::before {
	content: "\f106";
}

.card-header {
	padding: 6px 0px;
	margin-bottom: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.card-header .btn-link {
	color: #38383a;
}

.card-header .btn-link:hover {
	color: #38383a;
	color: var(--secondary_color);
}

.btn-link:focus,
.btn-link:hover {
	text-decoration: none;
}

.s-table tr td {
	padding: 7px 0px;
	word-wrap: anywhere;
}

.assistance {
	height: 30px;
	width: 30px;
	border: 1px solid #c2c2c2;
	border-radius: 50%;
	font-weight: bold;
	line-height: 28px;
	text-align: center;
	
	float: right;
	position: absolute;
	right: -16px;
	top: 40%;
	z-index: 1;
	background: #dfdfdf;
}

.deadline-reached {
	background: #ffeae9;
}

.editable-container .card-header {
	position: relative;
}

.editable-container .collapsible-link {
	padding-left: 35px;
	width: auto !important;
}

.editable-container .collapsible-link::before {
	right: auto;
	left: 0.8rem !important;
}

.editable-container .edit-btn {
	position: absolute;
	right: 0.8rem;
	top: 0.8rem;
}

.editable-container .editable-field {
	width: 100%;
}

.editable-field {
	display: none;
}

.editable-text {
	display: block;
}

.sweet-alert button {
	border-radius: 8px;
}

.panel-heading .count {
	position: relative;
	float: right;
	width: 50px;
	background: #fff;
	color: #000000;
	text-align: center;
	
	font-weight: 600;
	border-radius: 2px;
}

.grid_view_followup_danger {
	float: right;
	background: var(--secondary_color);
	color: #f5f5f5;
	padding: 0px 6px;
	border-radius: 3px;
	font-size: 70%;
}

.grid_view_followup_normal {
	float: right;
	background: #cccccc;
	padding: 0px 6px;
	border-radius: 3px;
}

.jq-toast-loaded {
	background-color: unset !important;
}

.crm-header {
	background: #F9F9FC;
	border-radius: 10px;
	margin-bottom: 20px;
	padding: 0px 20px 10px 20px;
	margin-top: 10px;
}

.crm-header .page-heading p {
	color: #555;
}

.crm-header .page-heading {
	padding-bottom: 0px;
}

.lead-sidebar span.title {
	color: #333333;
	font-weight: 600;
}

.lead-sidebar .card-header {
	background: #F9F9FC;
	border-radius: 10px;
	border: 1px solid rgba(0, 0, 0, 0.125);
}

.lead-sidebar .card-header button {
	color: #000000;
}

.lead-sidebar .panel-body {
	background-color: #FFFFFF;
}

.bootstrap-tagsinput {
	width: 100%;
}

.ui-autocomplete {
	z-index: 1051 !important;
	/* Ensure dropdown appears above modals/inputs */
	width: 200px;
}

.ui-autocomplete li {
	list-style-type: none;
	background: #E7E7E7;
	border-bottom: 1px solid #cdc6c6;
	padding: 5px 10px;
	cursor: pointer;
}

.modal.left .modal-dialog,
.modal.right .modal-dialog {
	position: fixed;
	margin: auto;
	width: 50%;
	height: 100%;
	-webkit-transform: translate3d(0%, 0, 0);
	-ms-transform: translate3d(0%, 0, 0);
	-o-transform: translate3d(0%, 0, 0);
	transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
	height: 100%;
	overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body {
	padding: 15px 15px 80px;
}

#deal_details_right_modal .modal-dialog , #visit_details_right_modal .modal-dialog{
	width: 75% !important;
}

/*Right*/
.modal.right.fade .modal-dialog {
	right: -320px;
	-webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
	-moz-transition: opacity 0.3s linear, right 0.3s ease-out;
	-o-transition: opacity 0.3s linear, right 0.3s ease-out;
	transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
	right: 0;
}

.dash-stats-box {
	min-height: 300px;
	max-height: 300px;
	overflow-y: auto;
}

/* Align items to the start of the container */
.justify-content-start {
	display: flex;
	justify-content: flex-start;
}

/* Align items to the end of the container */
.justify-content-end {
	display: flex;
	justify-content: flex-end;
}

/* Align items to the center of the container */
.justify-content-center {
	display: flex;
	justify-content: center;
}

/* Distribute items evenly with the first item at the start and the last at the end */
.justify-content-between {
	display: flex;
	justify-content: space-between;
}

/* Distribute items with equal spacing around each */
.justify-content-around {
	display: flex;
	justify-content: space-around;
}

/* Distribute items with equal spacing between and around each */
.justify-content-evenly {
	display: flex;
	justify-content: space-evenly;
}

input[type="number"] {
	min-width: 70px !important;
	padding-left: 5px !important;
	padding-right: 5px !important;
}

.form-control.remarks {
	min-width: 150px !important;
}

textarea.products {
	min-width: 200px !important;
}

.btn-b2b-picklist {
	background: #5cb85c !important;
}

.multi-div {
	background: #3b55a0;
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 8px;
}

.multi-div a {
	color: #FFF;
}

.mw-250 {
	min-width: 250px;
}

.notification-alert {
	font-size: 17px;
	background: #ca4034;
	color: #FFFFFF;
	border-radius: 8px;
	padding: 14px 18px;
	text-align: center;
}

.notification-alert i {
	padding-right: 6px;
}

.order {
	position: relative;
	background-color: #ddd;
	height: 7px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 90px;
	margin-top: 50px;
}

.order .step {
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	width: 25%;
	margin-top: -18px;
	text-align: center;
	position: relative;
	pointer-events: none;
}

.order .step a {
	color: inherit;
	display: block;
}

.order .step.active {
	pointer-events: auto;
}

.order .step.active.disabled {
	pointer-events: none !important;
}

.order .step.active:before {
	background: #0d55a7;
}

.order .step::before {
	height: 7px;
	position: absolute;
	content: "";
	width: 100%;
	left: 0;
	top: 18px;
}

.order .step.active .icon {
	background: #0d55a7;
	color: #ffffff;
}

.order .icon {
	display: inline-block;
	width: 60px;
	height: 60px;
	line-height: 60px;
	position: relative;
	border-radius: 100%;
	background: #ddd;
	font-size: 20px;
	top: -10px;
}

.order .text {
	display: block;
	margin-top: 7px;
}

.employee-list {
	width: 100%;
	white-space: nowrap;
	padding-bottom: 10px;
	overflow: hidden;
}

.employee-list .panel {
	margin-bottom: 0px;
	display: inline-block;
	vertical-align: top;
	padding: 0px 0px;
	width: 100%;
	border: none;
}

.employee-list .panel.active p {
	color: #ed2025;
}

.employee-list .panel img {
	width: 60px !important;
	margin-bottom: 10px;
	height: 60px;
	border-radius: 50%;
}

.employee-list .panel p {
	font-weight: 600;
	margin-bottom: 0px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	display: block;
}

.employee-list .panel button {
	border: none;
	margin-top: 0px;
	color: #000000;
	font-size: 8px;
	position: absolute;
	top: 0px;
	right: 8px;
	z-index: 9999;
	padding: 5px 5px;
	line-height: 0px;
}

.favorite button {
	background-color: #ec971f;
	color: #FFFFFF !important;
}

.owl-nav .owl-prev,
.owl-nav .owl-next {
	background: #fff !important;
	position: absolute;
	top: 20%;
	padding: 0 18px 0 15px !important;
	border-radius: 50px !important;
	box-shadow: 3px 14px 25px -10px #92b4d0;
	transition: background 0.5s ease 0s;
}

.owl-nav .owl-prev {
	left: 5px;
	top: 30%;
}

.owl-nav .owl-next {
	right: 5px;
	top: 30%;
}

.owl-nav .owl-prev:after,
.owl-nav .owl-next:after {
	content: "\f104";
	font-family: FontAwesome;
	color: #333;
	font-size: 20px;
}

.owl-nav .owl-prev span,
.owl-nav .owl-next span {
	display: none;
}

.owl-nav .owl-next:after {
	content: "\f105";
}

/* ===== Task Table ===== */
.task-table-wrapper {
	border: 1px solid #e8ebf0;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}

/* Table header */
.task-table-head {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	gap: 10px;
	background: #f5f6fa;
	border-bottom: 1px solid #e8ebf0;
	font-size: 11px;
	font-weight: 600;
	color: #8b919d;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.task-table-head input[type="checkbox"] {
	margin: 0;
}

/* Task list reset */
.task-table-wrapper .task-list-view {
	margin-bottom: 0;
	list-style: none;
	padding: 0;
}

.task-table-wrapper .task-list-view li.list-group-item {
	border: none;
	border-bottom: 1px solid #f0f1f4;
	border-radius: 0;
	margin: 0;
	padding: 0;
	background: #fff;
	transition: background 0.15s ease;
}

.task-table-wrapper .task-list-view li.list-group-item:last-child {
	border-bottom: none;
}

.task-table-wrapper .task-list-view li.list-group-item:hover {
	background: #f8f9fc;
}

/* Deadline states */
.task-table-wrapper li.task-overdue {
	border-left: 3px solid #e74c3c;
}

.task-table-wrapper li.task-due-today {
	border-left: 3px solid #f39c12;
}

.task-table-wrapper li.task-paused {
	opacity: 0.65;
}

/* Flex row layout */
.task-row {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	gap: 10px;
	min-height: 44px;
}

/* Column widths */
.task-row-check {
	flex: 0 0 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.task-row-check input[type="checkbox"] {
	margin: 0;
	cursor: pointer;
}

.task-row-assignee {
	flex: 0 0 110px;
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	overflow: hidden;
}

.task-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--site_color);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	flex-shrink: 0;
	letter-spacing: 0.3px;
}

.task-assignee-name {
	
	font-weight: 500;
	color: #3a3f4b;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.task-row-category {
	flex: 0 0 90px;
	cursor: pointer;
	overflow: hidden;
}

.task-category-badge {
	display: inline-block;
	padding: 2px 8px;
	font-size: 10.5px;
	font-weight: 600;
	color: #5a6577;
	background: #eef0f5;
	border-radius: 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.task-row-title {
	flex: 1 1 180px;
	min-width: 0;
	cursor: pointer;
}

.task-title-text {
	font-size: 12.5px;
	font-weight: 500;
	color: #2c3040;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.task-tags-inline {
	display: flex;
	gap: 4px;
	margin-top: 2px;
}

.task-tag-chip {
	display: inline-block;
	padding: 0 5px;
	font-size: 9.5px;
	font-weight: 500;
	color: #7a7f8a;
	background: #f5f6fa;
	border-radius: 3px;
	line-height: 16px;
}

.task-row-comment {
	flex: 1 1 160px;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	overflow: hidden;
}

.task-comment-icon {
	flex-shrink: 0;
	color: #9aa0ab;
	font-size: 14px;
}

.task-comment-icon:hover {
	color: var(--site_color);
}

.task-comment-text {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 11.5px;
	color: #7a7f8a;
}

.task-comment-text a {
	color: #333333;
}

.task-comment-text a:hover {
	color: var(--site_color);
	text-decoration: none;
}

/* Actions column header */
.task-row-actions-head {
	flex: 0 0 260px;
	text-align: right;
}

/* Actions column */
.task-row-actions {
	flex: 0 0 260px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

/* Date inside actions */
.task-row-actions .task-action-date {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
	margin-right: 4px;
	flex-shrink: 0;
}

.task-row-actions .task-action-date .calendar-icon {
	font-size: 13px;
	color: #9aa0ab;
	cursor: pointer;
}

.task-row-actions .task-action-date .calendar-icon:hover {
	color: var(--site_color);
}

.task-row-actions .task-action-date .hidden-date-picker {
	opacity: 0;
	position: absolute;
	z-index: -1;
	width: 0;
	height: 0;
}

.task-row-actions .task-action-date .date-label {
	font-size: 11px;
	font-weight: 500;
	color: #e74c3c;
	white-space: nowrap;
}

/* Action buttons group */
.task-action-btns {
	display: flex;
	align-items: center;
	gap: 3px;
	flex-wrap: nowrap;
}

.task-act-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 5px;
	font-size: 11px;
	color: #5a6577;
	background: #f0f1f5;
	border: 1px solid transparent;
	transition: all 0.15s ease;
	text-decoration: none;
}

.task-act-btn:hover {
	text-decoration: none;
}

.task-act-btn.task-act-review {
	color: #2563eb;
	background: #eff4ff;
}

.task-act-btn.task-act-review:hover {
	background: #dbeafe;
	color: #1d4ed8;
}

.task-act-btn.task-act-reopen {
	color: #2563eb;
	background: #eff4ff;
}

.task-act-btn.task-act-reopen:hover {
	background: #dbeafe;
	color: #1d4ed8;
}

.task-act-btn.task-act-whatsapp {
	color: #16a34a;
	background: #f0fdf4;
}

.task-act-btn.task-act-whatsapp:hover {
	background: #dcfce7;
	color: #15803d;
}

.task-act-btn.task-act-email {
	color: #d97706;
	background: #fffbeb;
}

.task-act-btn.task-act-email:hover {
	background: #fef3c7;
	color: #b45309;
}

.task-act-btn.task-act-reminder {
	color: #9aa0ab;
	background: #f5f6fa;
}

.task-act-btn.task-act-reminder.active {
	color: #d97706;
	background: #fff8ec;
}

.task-act-btn.task-act-reminder:hover {
	background: #fef3c7;
	color: #b45309;
}

.task-act-btn.task-act-delete {
	color: #dc2626;
	background: #fef2f2;
}

.task-act-btn.task-act-delete:hover {
	background: #fee2e2;
	color: #b91c1c;
}

.task-act-btn.task-act-pause,
.task-act-btn.task-act-resume {
	color: #0891b2;
	background: #ecfeff;
}

.task-act-btn.task-act-pause:hover,
.task-act-btn.task-act-resume:hover {
	background: #cffafe;
	color: #0e7490;
}

.task-type-icon {
	color: #9aa0ab;
	
	margin-left: 2px;
}

/* Empty state */
.task-empty-state {
	text-align: center;
	padding: 40px 20px;
	color: #9aa0ab;
}

.task-empty-state i {
	font-size: 36px;
	display: block;
	margin-bottom: 10px;
	color: #d0d3da;
}

.task-empty-state p {
	font-size: 13px;
	margin: 0;
}

/* Mobile meta row */
.task-mobile-meta {
	display: none;
	padding: 4px 12px 8px 46px;
	gap: 6px;
	flex-wrap: wrap;
}

.task-meta-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	font-size: 10px;
	font-weight: 500;
	color: #5a6577;
	background: #f0f1f5;
	border-radius: 4px;
}

.task-meta-chip i {
	font-size: 9px;
}

/* ===== Task Table Responsive ===== */

/* Tablet */
@media (max-width: 991px) {
	.task-row-assignee {
		flex: 0 0 90px;
	}

	.task-row-comment {
		flex: 1 1 100px;
	}

	.task-row-actions-head {
		flex: 0 0 200px;
	}

	.task-row-actions {
		flex: 0 0 200px;
	}

	.task-act-btn {
		width: 24px;
		height: 24px;
		font-size: 10px;
	}

	.task-avatar {
		width: 22px;
		height: 22px;
		font-size: 8px;
	}

	.task-assignee-name {
		display: none;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.task-table-wrapper {
		border-radius: 8px;
	}

	.task-row {
		flex-wrap: wrap;
		padding: 10px 12px 6px;
		gap: 6px;
	}

	.task-row-check {
		flex: 0 0 22px;
		position: absolute;
		right: 12px;
		top: 12px;
	}

	li.list-group-item {
		position: relative;
	}

	.task-row-assignee,
	.task-row-category {
		display: none;
	}

	.task-row-title {
		flex: 1 1 100%;
		padding-right: 30px;
	}

	.task-title-text {
		white-space: normal;
		font-size: 13px;
	}

	.task-row-comment {
		flex: 1 1 100%;
	}

	.task-row-actions {
		flex: 1 1 100%;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 4px;
		padding-top: 4px;
		border-top: 1px solid #f0f1f4;
	}

	.task-row-actions .task-action-date {
		margin-right: auto;
	}

	.task-mobile-meta {
		display: flex;
	}

	.task-action-btns {
		gap: 4px;
		flex-wrap: wrap;
	}
	.btn-label{
		display: none;
	}
}

/* ===== Task Toolbar ===== */
.task-toolbar {
	margin-bottom: 12px;
}

.task-toolbar-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}

/* Left navigation tabs */
.task-tabs {
	display: flex;
	background: #f5f6fa;
	border-radius: 8px;
	padding: 3px;
	gap: 2px;
}

.task-tab-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	font-size: 12.5px;
	font-weight: 500;
	color: #5a6577;
	border-radius: 6px;
	text-decoration: none;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.task-tab-item:hover {
	color: var(--site_color);
	background: #eaedf5;
	text-decoration: none;
}

.task-tab-item.active {
	background: var(--site_color);
    color: #FFFFFF;
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.task-tab-item i {
	font-size: 13px;
}

/* Right side: type pills + bulk */
.task-toolbar-right {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Type pills */
.task-type-pills {
	display: flex;
	gap: 4px;
}

.task-type-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 12px;
	font-size: 11.5px;
	font-weight: 500;
	color: #7a7f8a;
	background: #f5f6fa;
	border: 1px solid transparent;
	border-radius: 20px;
	text-decoration: none;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.task-type-pill:hover {
	color: #e68a00;
	background: #fff8ec;
	border-color: #ffd78a;
	text-decoration: none;
}

.task-type-pill.active {
	color: #b36b00;
	background: #fff3d6;
	border-color: #ffc849;
	font-weight: 600;
}

.task-type-pill i {
	font-size: 11px;
}

.task-bulk-btn {
	border-radius: 6px;
	font-weight: 500;
}

/* ===== Quick Add Task ===== */
.task-quick-add {
	background: #fff;
	border: 1px solid #e8ebf0;
	border-radius: 10px;
	margin-bottom: 12px;
	overflow: hidden;
}

.task-quick-add-header {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--site_color);
	background: #f8f9fc;
	cursor: pointer;
	user-select: none;
	transition: background 0.15s ease;
}

.task-quick-add-header:hover {
	background: #eef1f8;
}

.task-quick-toggle-icon {
	margin-left: auto;
	font-size: 11px;
	color: #9aa0ab;
	transition: transform 0.2s ease;
}

.task-quick-add-body {
	padding: 12px 15px;
	border-top: 1px solid #eef0f4;
}

.task-quick-add-body .task-select-all {
	margin: 0 6px 0 0;
	vertical-align: middle;
}

.task-quick-fields {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
}

.task-quick-field {
	display: flex;
	flex-direction: column;
}

.task-quick-field label {
	
	font-weight: 600;
	letter-spacing: 0.3px;
	margin-bottom: 3px;
}

.task-quick-field .form-control {
	height: 32px;
	
	border-radius: 6px;
	border: 1px solid #dde0e7;
}

.task-quick-field .form-control:focus {
	border-color: var(--site_color);
	box-shadow: 0 0 0 2px rgba(59,85,160,0.1);
}

.task-quick-field-assignee {
	min-width: 150px;
	flex: 0 0 150px;
}

.task-quick-field-category {
	min-width: 110px;
	flex: 0 0 110px;
	position: relative;
}

.task-quick-field-title {
	min-width: 160px;
	flex: 1 1 160px;
}

.task-quick-field-desc {
	min-width: 140px;
	flex: 1 1 140px;
}

.task-quick-field-deadline {
	min-width: 130px;
	flex: 0 0 130px;
}

.task-quick-field-tags {
	min-width: 120px;
	flex: 0 0 120px;
}

.task-quick-field-audio {
	min-width: 160px;
	flex: 0 0 auto;
}

.task-audio-controls {
	display: flex;
	align-items: center;
	gap: 5px;
}

.task-audio-controls audio {
	height: 43px;
	width: 130px;
}

.task-audio-controls .btn-xs {
	width: 28px;
	height: 28px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.task-quick-field-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 2px;
}

.task-email-check {
	font-size: 11.5px !important;
	font-weight: 500 !important;
	color: #5a6577 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	margin-bottom: 0 !important;
	white-space: nowrap;
	cursor: pointer;
}

.task-email-check input[type="checkbox"] {
	margin-right: 4px;
	vertical-align: middle;
}

.task-quick-field-actions .btn-primary {
	border-radius: 6px;
	font-weight: 600;
	
	padding: 6px 16px;
	white-space: nowrap;
}

/* Bootstrap selectpicker inside quick-add */
.task-quick-field .bootstrap-select .btn {
	height: 32px;
	
	border-radius: 6px;
	border: 1px solid #dde0e7;
	padding: 4px 10px;
}

/* Tags input inside quick-add */
.task-quick-field .bootstrap-tagsinput {
	min-height: 32px;
	
	border-radius: 6px;
	border: 1px solid #dde0e7;
	padding: 2px 6px;
	width: 100%;
	box-shadow: none;
}

.task-quick-field .bootstrap-tagsinput input {
	
}

/* ===== Task Toolbar Responsive ===== */

/* Tablet */
@media (max-width: 991px) {
	.task-toolbar-top {
		flex-direction: column;
		align-items: stretch;
	}

	.task-tabs {
		justify-content: center;
	}

	.task-toolbar-right {
		justify-content: center;
	}

	.task-quick-fields {
		gap: 8px;
	}

	.task-quick-field-assignee,
	.task-quick-field-category,
	.task-quick-field-deadline,
	.task-quick-field-tags {
		flex: 1 1 calc(50% - 8px);
		min-width: calc(50% - 8px);
	}

	.task-quick-field-title,
	.task-quick-field-desc {
		flex: 1 1 100%;
		min-width: 100%;
	}

	.task-quick-field-audio {
		flex: 1 1 100%;
	}

	.task-quick-field-actions {
		flex: 1 1 100%;
		justify-content: flex-end;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.task-tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding: 2px;
	}

	.task-tab-item {
		padding: 6px 10px;
		font-size: 11px;
	}

	.task-tab-item span {
		display: none;
	}

	.task-tab-item i {
		font-size: 15px;
	}

	.task-type-pills {
		flex-wrap: wrap;
		justify-content: center;
	}

	.task-type-pill {
		padding: 4px 10px;
		font-size: 10.5px;
	}

	.task-quick-add-body {
		padding: 10px;
	}

	.task-quick-fields {
		flex-direction: column;
		gap: 8px;
	}

	.task-quick-field,
	.task-quick-field-assignee,
	.task-quick-field-category,
	.task-quick-field-title,
	.task-quick-field-desc,
	.task-quick-field-deadline,
	.task-quick-field-tags,
	.task-quick-field-audio,
	.task-quick-field-actions {
		flex: 1 1 100% !important;
		min-width: 100% !important;
	}

	.task-audio-controls audio {
		width: 100%;
		flex: 1;
	}

	.task-quick-field-actions {
		justify-content: space-between;
	}

	.task-bulk-btn {
		font-size: 10px;
		padding: 4px 8px;
	}
}

.notification-btn {
	background: #edf6ff;
	border: none;
	color: #000000;
	
	padding: 4px 12px;
	border-radius: 7px;
	font-weight: 600;
	margin-left: 20px;
}

.renew-btn {
	background: #0d55a7;
	border: none;
	color: #FFFFFF;
	font-size: 16px;
	padding: 12px 20px;
	border-radius: 6px;
	font-weight: 600;
}

/* Custom Sweet alert popup styling */
.sweet-alert {
	background-color: #0d55a7;
	color: #fff;
	border-radius: 8px;
	padding: 0px;
}

.sweet-alert .sa-icon {
	display: none !important;
}

.sweet-alert h2 {
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 5px;
	line-height: 30px;
	padding: 0px 10px;
}

.sweet-alert .sa-button-container {
	border-top: 2px solid #fff;
	margin-top: 30px;
	font-size: 19px;
}

.sweet-alert .sa-confirm-button-container {
	display: block;
}

.sweet-alert .cancel,
.sweet-alert .confirm {
	background: none !important;
	margin: 0px;
	width: 50%;
	padding: 20px 15px;
}

.sa-button-container button.cancel[style*="display: none;"]+.sa-confirm-button-container .confirm {
	/* Corrected selector */
	width: 100%;
}

.sweet-alert button:hover {
	background: #3a3a3b !important;
}

.sweet-alert .cancel {
	float: right;
}

.sweet-alert .confirm {
	background: #ca4034 !important;
	float: left;
}

/* Custom Sweet alert popup styling */

.traceability-icon {
	display: none;
	margin-left: 5px;
	color: #f39c12;
	cursor: pointer;
}

.right-check i {
	background: green;
	color: #FFF;
	border-radius: 50%;
	padding: 4px;
	
}

.discount-dropdown {
	display: inline-flex;
}

.discount-dropdown input[type="number"] {
	min-width: 60px !important;
}

.discount-dropdown select {
	width: 60px !important;
	padding: 0px;
}

.text-muted pre {
	color: #6f748b;
}



.chart-wrapper {
	width: 200px;
	position: relative;
}

.chart-label {
	position: absolute;
	top: 70%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-weight: bold;
}

.highlight-box {
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);
	padding: 15px;
	display: flex;
	align-items: center;
	max-width: 600px;
	margin: 30px auto;
}

.highlight-box .img-circle {
	width: 70px;
	height: 70px;
	border: 3px solid #aa2b3c;
	margin-right: 15px;
	object-fit: cover;
}

.highlight-box .message {
	margin: 0;
}

.highlight-box strong.text-danger {
	color: #aa2b3c;
	/* Matching red tone */
}


.chart-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.chart-container {
	width: 100%;
	aspect-ratio: 1 / 1;
	position: relative;
}

canvas {
	width: 100% !important;
	height: auto !important;
	display: block;
}

.chart-label {
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-weight: bold;
	pointer-events: none;
}

.chart-range {
	width: 100%;
	margin-top: 4px;
	display: flex;
	justify-content: space-between;
	font-size: 0.8rem;
	color: #555;
	padding: 0 6px;
	position: absolute;
	bottom: 20px;
}

.checkbox_under_box {
	background: #FFFFFF;
	border: 1px solid #CCC;
	padding: 6px 12px;
}

#audioPlayback,
#audio_inline_playback {
	padding: 6px 10px;
}


.light-red {
	background-color: #ff000030 !important;
}

.light-yellow {
	background-color: #ffff0038 !important;
}

.iti.iti--allow-dropdown {
	width: 100% !important;
}

#standard_right_content .modal-footer {
	position: fixed;
	bottom: 0px;
	width: 100%;
	background: #F9F9FC;
	z-index: 9;
}

.tax.bootstrap-select.btn-group .dropdown-menu li small {
	display: block !important;
	padding-left: 0px !important;
	color: #5eb8e0;
}

.tax.bootstrap-select.btn-group .dropdown-menu a {
	white-space: inherit !important;
}

.rate-group {
	display: flex;
}

.rate-group .input-group-text {
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	padding: 7px 16px;
	margin-bottom: 0;
	font-weight: 400;
	line-height: 1.5;
	color: #495057;
	text-align: center;
	white-space: nowrap;
	background-color: #e9ecef;
	border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.rate-group .form-control {
	border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.accordion .accordion-toggle:after {
	font-family: 'Glyphicons Halflings';
	content: "\e114";
	float: right;
	color: grey;
}

.accordion .accordion-toggle.collapsed:after {
	content: "\e080";
}

.input-group-addon,
.input-group-btn {
	width: auto !important;
	font-size: inherit;
}


.fw-bold {
	font-weight: 700 !important;
}

.friend-msg-wrap {
	width: 50% !important;
}

/* Horizontal scrolling wrapper */
.pivot-table-wrapper {
	overflow-x: auto;
	max-width: 100%;
	position: relative;
}

/* Table layout */
.pivot-table {
	border-collapse: collapse;
	width: max-content;
	/* needed for horizontal scroll */
}

/* Borders */
.pivot-table th,
.pivot-table td {
	border: 1px solid #dee2e6;
	padding: 5px 10px;
	background-clip: padding-box;
}

.modal-header .close {
	position: absolute;
	right: 20px;
	top: 15px;
}

/* Sticky top headers */
.pivot-table thead th {
	position: sticky;
	top: 0;
	background: #38383a;
	color: white;
	white-space: nowrap;
	z-index: 10;
}

/* Sticky left columns */
.pivot-table th.sticky-col,
.pivot-table td.sticky-col {
	position: sticky;
	left: 0;
	/* for first column */
	background: #38383a;
	color: white;
	z-index: 12;
}

/* If first column intersects with sticky header, increase z-index */
.pivot-table thead th.sticky-col {
	z-index: 15;
}




.sort-filter .input-group {
	display: flex;
	width: 100%;
}

.sort-filter .input-group>.form-control {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}

/* Remove double borders */
.sort-filter .input-group>.form-control:not(:last-child) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: 0;
}

.sort-filter .input-group-append>.form-control {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}


.sort-filter .w-50 {
	width: 50% !important;
}

.datepicker-dropdown:before {
	border-bottom: 0px !important;
}

.radio-check{
	display: inline;
}


/* ────────────────────────────────────────────────────────────
   EXPORT MODAL — Global modern export popup
   ──────────────────────────────────────────────────────────── */

#standard_modal.export-modal .modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.08);
    overflow: hidden;
}
.export-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: linear-gradient(135deg, #0c54a7 0%, #1a6fc4 100%);
    color: #fff;
    border: none;
}
.export-modal-header h5 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
}
.export-modal-header h5 i {
    font-size: 16px;
    opacity: .85;
}
.export-modal-close {
    background: rgba(255,255,255,0.1);
    border: none;
    color: rgba(255,255,255,0.6);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    padding: 0;
    line-height: 1;
}
.export-modal-close:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}
.export-modal-body {
    padding: 24px;
}
.export-desc {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 16px;
}
.export-labels {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 16px;
}
.export-labels p {
    margin: 0;
    font-size: 12px;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 6px;
}
.export-format-group {
    margin-bottom: 20px;
}
.export-format-label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
    display: block;
}
.export-format-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.export-format-option {
    flex: 1;
    min-width: 120px;
    cursor: pointer;
    margin: 0;
}
.export-format-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.export-format-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    transition: all .2s;
    text-align: center;
}
.export-format-card i {
    font-size: 24px;
    color: #94a3b8;
    transition: color .2s;
}
.export-format-card strong {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.export-format-card small {
    font-size: 11px;
    color: #94a3b8;
}
.export-format-option:hover .export-format-card {
    border-color: #94a3b8;
    background: #f1f5f9;
}
.export-format-option input:checked + .export-format-card {
    border-color: #1d6fc0;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(29,111,192,.1);
}
.export-format-option input:checked + .export-format-card i {
    color: #1d6fc0;
}
.export-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    margin: 0 -24px -24px;
}
.export-btn-cancel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    font-size: 13px;
    font-weight: 500;
    background: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s;
}
.export-btn-cancel:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}
.export-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    font-size: 13px;
    font-weight: 600;
    background: linear-gradient(135deg, #1d6fc0 0%, #0c54a7 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all .2s;
    box-shadow: 0 1px 3px rgba(12,84,167,.25);
}
.export-btn-primary:hover {
    background: linear-gradient(135deg, #1565b8 0%, #093f80 100%);
    box-shadow: 0 4px 12px rgba(12,84,167,.3);
    transform: translateY(-1px);
}
.export-btn-primary:active {
    transform: translateY(0);
}

@media (max-width: 576px) {
    .export-format-options {
        flex-direction: column;
    }
    .export-modal-footer {
        padding: 12px 16px;
    }
    .export-modal-body {
        padding: 16px;
    }
    .export-modal-footer {
        margin: 0 -16px -16px;
    }
}

/* Trial Countdown & Upgrade Plan Styles */
.trial-countdown {
    display: flex;
    align-items: center;
}
.trial-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.trial-active {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #a5d6a7;
}
.trial-warning {
    background-color: #fff3e0;
    color: #e65100;
    border: 1px solid #ffcc80;
    animation: pulse-warning 2s infinite;
}
.trial-expired {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #ef9a9a;
    animation: pulse-warning 1.5s infinite;
}
@keyframes pulse-warning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.upgrade-plan {
    display: flex;
    align-items: center;
}

/* Notification alert bar */
.notification-alert {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #ff5722;
    color: #fff;
    text-align: center;
    padding: 8px 15px;
    font-size: 13px;
    font-weight: 500;
}
.notification-btn {
    background: #fff;
    color: #ff5722;
    border: none;
    padding: 3px 15px;
    border-radius: 3px;
    font-weight: 600;
    margin-left: 10px;
    cursor: pointer;
}


/* Reset Bootstrap .table conflicts when .crm-table is present */
table.table { border-collapse: separate !important; border-spacing: 0 !important; margin-bottom: 0 !important; font-size: 13px !important; border-radius: 8px;}
table.table-bordered { border: none !important; }
table.table a{font-weight: 600; text-decoration: none; transition: color .2s;}
table.table-bordered > thead > tr > th,
table.table-bordered > thead > tr > td,
table.table-bordered > tbody > tr > th,
table.table-bordered > tbody > tr > td { border: none !important; border-bottom: 1px solid #f0f1f5 !important; }
/* table > thead.table-dark > tr > th { background: #0c54a7 !important; background-color: #0c54a7 !important; box-shadow: inset 0 0 0 9999px #0c54a7 !important; color: #fff !important; padding: 10px 12px !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; border-bottom: 2px solid #093f80 !important; white-space: nowrap !important; position: sticky !important; top: 0 !important; z-index: 3 !important; } */
table > thead.table-dark > tr > th a { color: rgba(255,255,255,.85) !important; }
table > thead.table-dark > tr > th .fa-light { color: rgba(255,255,255,.6) !important; }
table.table-hover > tbody > tr:hover { background: #f7f9ff !important; }
table.table-hover > tbody > tr:hover > td { background: transparent !important; }
table > tbody > tr > td { padding: 9px 12px !important; color: #374151 !important; vertical-align: middle !important; font-size: 13px !important; }

/* Modern pill-bar tabs (VU OLED style) */
.b2b-orders-tabs .nav-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    border-bottom: none;
    margin-bottom: 12px;
    padding: 5px;
    background: #eef0f4;
    border-radius: 50px;
}
.b2b-orders-tabs .nav-pills > li { margin: 0; }
.b2b-orders-tabs .nav-pills > li > a {
    border-radius: 50px;
    padding: 7px 20px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    border: none !important;
    background: transparent;
    text-decoration: none !important;
    margin: 0;
    transition: all .2s ease;
}
.b2b-orders-tabs .nav-pills > li > a:hover,
.b2b-orders-tabs .nav-pills > li > a:focus,
.b2b-orders-tabs .nav-pills > li > a:active {
    color: #1e293b;
    background: rgba(255, 255, 255, 0.5);
    border: none !important;
    text-decoration: none !important;
}
.b2b-orders-tabs .nav-pills > li.active > a,
.b2b-orders-tabs .nav-pills > li.active > a:hover,
.b2b-orders-tabs .nav-pills > li.active > a:focus {
    background: #fff;
    color: #1e293b;
    font-weight: 600;
    border: none !important;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Compact spacing modifier — pulls tabs tight to the header above */
.vf-page-header + .ch-tabs-compact,
.ch-tabs-compact {
    margin-top: -14px;
    margin-bottom: 0;
}
.ch-tabs-compact .nav-pills {
    margin-bottom: 8px;
}

/* Reports page — vertical sidebar + content layout */
.reports-layout {
    display: flex;
    gap: 20px;
    margin-top: 12px;
}
.reports-sidebar {
    flex: 0 0 180px;
    min-width: 0;
}
.reports-sidebar-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    padding: 0 8px 8px;
}
.reports-sidebar .nav-pills-vertical {
    display: flex;
    flex-direction: column;
    gap: 3px;
    border: none;
    padding: 5px;
    background: #eef0f4;
    border-radius: 14px;
}
.reports-sidebar .nav-pills-vertical > li { margin: 0; }
/* Report module colourful icon badges */
.rmod-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
    flex-shrink: 0;
    margin-right: 8px;
}
.rmod-blue   { background: #0c54a7; }
.rmod-green  { background: #059669; }
.rmod-purple { background: #7c3aed; }
.rmod-red    { background: #dc2626; }
.rmod-amber  { background: #d97706; }
.rmod-teal   { background: #0d9488; }
.rmod-slate  { background: #475569; }
.rmod-indigo { background: #4f46e5; }
.rmod-pink   { background: #db2777; }
.rmod-cyan   { background: #0891b2; }
.rmod-orange { background: #ea580c; }
.reports-sidebar .nav-pills-vertical > li > a {
    display: flex;
    align-items: center;
    border-radius: 10px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: none !important;
    text-decoration: none !important;
    transition: all .2s ease;
}
.reports-sidebar .nav-pills-vertical > li > a:hover,
.reports-sidebar .nav-pills-vertical > li > a:focus,
.reports-sidebar .nav-pills-vertical > li > a:active {
    color: #1e293b;
    background: rgba(255, 255, 255, 0.5);
    border: none !important;
    text-decoration: none !important;
}
.reports-sidebar .nav-pills-vertical > li.active > a,
.reports-sidebar .nav-pills-vertical > li.active > a:hover,
.reports-sidebar .nav-pills-vertical > li.active > a:focus {
    background: #fff;
    color: #1e293b;
    font-weight: 600;
    border: none !important;
    text-decoration: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.reports-content {
    flex: 1;
    min-width: 0;
}
@media (max-width: 768px) {
    .reports-layout {
        flex-direction: column;
        gap: 10px;
    }
    .reports-sidebar {
        flex: none;
        width: 100%;
    }
    .reports-sidebar .nav-pills-vertical {
        flex-direction: row;
        flex-wrap: wrap;
        border-radius: 50px;
    }
    .reports-sidebar .nav-pills-vertical > li > a {
        border-radius: 50px;
        padding: 6px 16px;
    }
}

/* Table link reset — no underline on hover */
.table a,
.table a:hover,
.table a:focus,
.table a:active,
.reports-table a,
.reports-table a:hover,
.reports-table a:focus,
.reports-table a:active {
    text-decoration: none !important;
}

/* Reports search bar */
.reports-search-bar {
    position: relative;
    margin-bottom: 12px;
}
.reports-search-bar > i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 13px;
    pointer-events: none;
}
.reports-search-bar > input {
    width: 100%;
    padding: 9px 14px 9px 36px;
    font-size: 13px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.reports-search-bar > input:focus {
    border-color: #a5b4fc;
    box-shadow: 0 0 0 3px rgba(165, 180, 252, 0.15);
}
.reports-search-bar > input::placeholder {
    color: #9ca3af;
}
.reports-search-bar #report_typeahead_suggestion {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 999;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 300px;
    overflow-y: auto;
}
.reports-search-bar #report_typeahead_suggestion #suggestion-list {
    position: static;
    box-shadow: none;
    background: transparent;
    max-height: none;
}
.reports-search-bar #report_typeahead_suggestion #suggestion-list li a {
    font-weight: 500;
    padding: 8px 14px;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none !important;
}
.reports-search-bar #report_typeahead_suggestion #suggestion-list li:last-child a {
    border-bottom: none;
}
.reports-search-bar #report_typeahead_suggestion #suggestion-list li:hover,
.reports-search-bar #report_typeahead_suggestion #suggestion-list li:hover a {
    background: #f0f4ff;
    color: #2854a0;
}

/* Report inline action icons */
.report-inline-actions {
    text-align: center;
    white-space: nowrap;
}
.report-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    color: #6b7280;
    font-size: 14px;
    text-decoration: none !important;
    border: none !important;
    transition: all .15s ease;
}
.report-action-icon:hover {
    background: #f0f4ff;
    color: #2854a0;
    text-decoration: none !important;
    border: none !important;
}
.report-action-icon.text-danger:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* Status badge colors based on order status */
.order-badge-draft { background: #f3f4f6 !important; color: #6b7280 !important; }
.order-badge-new { background: #dbeafe !important; color: #1e40af !important; }
.order-badge-invoiced { background: #d1fae5 !important; color: #065f46 !important; }
.order-badge-partial { background: #fef3c7 !important; color: #92400e !important; }
.order-badge-closed { background: #e8ecf5 !important; color: #374151 !important; }
.order-badge-cancel { background: #fee2e2 !important; color: #991b1b !important; }

/* Order type badges */
.order-type-draft { background: #fef3c7 !important; color: #92400e !important; }
.order-type-final { background: #d1fae5 !important; color: #065f46 !important; }



.text-muted { white-space: nowrap; font-size: 12px; color: #6b7280;}
.amount-cell { font-weight: 600; color: #374151; white-space: nowrap; text-align: right;}
.action-cell{width: 36px; text-align: center; position: static; overflow: visible;}
.action-cell .dropdown { position: relative; display: inline-block;}
.products[readonly] { background-color: #ffffff;}

/* Export button (amber) — used globally on all export buttons */
.bv-btn-export { background: #d97706 !important; border-color: #d97706 !important; color: #fff !important; }
.bv-btn-export:hover { background: #b45309 !important; border-color: #b45309 !important; box-shadow: 0 2px 8px rgba(217, 119, 6, 0.35); }

/* Status badge — used globally for active/inactive indicators */
.bv-status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.bv-status-active { background: #dcfce7; color: #15803d; }
.bv-status-inactive { background: #fee2e2; color: #dc2626; }
.bv-status-pending { background: #fef3c7; color: #b45309; }
.bv-status-default { background: #f1f5f9; color: #64748b; }
.bv-status-info { background: #dbeafe; color: #1d4ed8; }
.bv-status-purple { background: #f3e8ff; color: #7c3aed; }
.bv-status-danger { background: #fee2e2; color: #dc2626; }
.bv-status-warning { background: #ffedd5; color: #c2410c; }
.bv-status-teal { background: #ccfbf1; color: #0f766e; }
.bv-status-success { background: #dcfce7; color: #15803d; }
.bv-status-primary { background: #dbeafe; color: #1d4ed8; }

/* Body preview text — truncated single-line preview */
.body-preview-text {
    max-width: 250px; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; font-size: 13px; color: #555;
}

/* -- WhatsApp Template Form -- */
.wa-section { border: 1px solid #e8ecf1; border-radius: 8px; margin-bottom: 20px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.wa-section-header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; font-size: 15px; font-weight: 600; border-bottom: 1px solid #e8ecf1; }
.wa-section-header .wa-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; flex-shrink: 0; }
.wa-section-header .wa-opt-tag { font-size: 11px; font-weight: 500; background: #f0f0f0; color: #888; padding: 2px 8px; border-radius: 10px; margin-left: auto; }
.wa-section-body { padding: 18px; }
.wa-preview-section { border: 1px solid #25D366; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.wa-preview-header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; font-size: 15px; font-weight: 600; background: linear-gradient(135deg, #25D366, #128C7E); color: #fff; }
.wa-preview-header i { font-size: 16px; }
.wa-btn-group-styled .btn { border-radius: 20px !important; font-size: 13px; padding: 7px 16px; border: 1px solid #e0e0e0; transition: all 0.2s; background: #f8f9fa; color: #555; }
.wa-btn-group-styled .btn:hover { background: #eef1f5; border-color: #ccc; }
.wa-btn-group-styled .btn i { color: inherit !important; margin-right: 2px; }
.wa-btn-group-styled .btn.active { color: #fff !important; border-color: transparent !important; background: #128C7E !important; box-shadow: 0 2px 6px rgba(18,140,126,0.3); }
.wa-btn-group-styled .btn.active i { color: #fff !important; }
.wa-var-btn { background: #EDE7F6; color: #5E35B1; border: 1px solid #D1C4E9; border-radius: 6px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.wa-var-btn:hover { background: #D1C4E9; color: #4527A0; }
.wa-upload-zone { border: 2px dashed #d0d5dd; border-radius: 10px; padding: 28px 20px; text-align: center; cursor: pointer; transition: all 0.25s; background: #fafbfc; }
.wa-upload-zone:hover { border-color: #128C7E; background: #f0faf8; }
.wa-upload-zone.wa-drag-over { border-color: #25D366; background: #e8f8f0; border-style: solid; }
.wa-upload-zone.wa-has-file { border-style: solid; border-color: #128C7E; background: #f0faf8; padding: 16px 20px; }
.wa-upload-icon { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #e0f2f1, #b2dfdb); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; font-size: 20px; color: #128C7E; }
.wa-upload-title { display: block; font-size: 14px; font-weight: 600; color: #344054; margin-bottom: 4px; }
.wa-upload-title span { color: #128C7E; }
.wa-upload-hint { display: block; font-size: 12px; color: #8696a0; }
.wa-upload-file-info { display: flex; align-items: center; gap: 12px; text-align: left; }
.wa-upload-file-info > i { font-size: 28px; color: #128C7E; flex-shrink: 0; }
.wa-upload-filename { display: block; font-size: 14px; font-weight: 600; color: #344054; word-break: break-all; }
.wa-upload-filesize { display: block; font-size: 12px; color: #8696a0; margin-top: 2px; }
.wa-upload-remove { background: #fee2e2; border: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ef4444; cursor: pointer; margin-left: auto; flex-shrink: 0; transition: all 0.2s; }
.wa-upload-remove:hover { background: #fecaca; color: #dc2626; }
.wa-current-media { border: 1px solid #e8ecf1; border-radius: 8px; padding: 12px; background: #fafbfc; }
.wa-current-media-img { max-width: 100%; max-height: 120px; border-radius: 6px; display: block; margin-bottom: 8px; }
.wa-current-media-link { font-size: 13px; color: #128C7E; word-break: break-all; }
.wa-current-media-link i { margin-right: 4px; }
.wa-current-media-link a { color: #128C7E; text-decoration: none; }
.wa-current-media-link a:hover { text-decoration: underline; }
.wa-char-counter { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; }
.wa-char-counter .wa-counter { font-size: 12px; font-weight: 600; color: #8696a0; }
.wa-char-counter .wa-counter.wa-warn { color: #e67e22; }
.wa-char-counter .wa-counter.wa-danger { color: #e74c3c; }
.wa-info-icon { color: #8696a0; font-size: 12px; margin-left: 4px; cursor: help; }
.wa-name-status { font-size: 12px; font-weight: 500; margin-top: 4px; display: none; }
.wa-name-status i { margin-right: 3px; }
.wa-name-status.wa-name-available { color: #27ae60; display: block; }
.wa-name-status.wa-name-taken { color: #e74c3c; display: block; }
.wa-name-status.wa-name-cooldown { color: #e67e22; display: block; }
.wa-name-status.wa-name-checking { color: #8696a0; display: block; }

/* Copy icon — used inline next to text for copy-to-clipboard */
.bv-copy-icon {
    cursor: pointer;
    color: #94a3b8;
    font-size: 12px;
    margin-right: 6px;
    transition: color 0.2s;
}
.bv-copy-icon:hover { color: var(--site_color, #3b55a0); }
.bv-copy-icon.fa-check { color: #15803d; }

/* Keeps copy icon glued to the left of the value regardless of screen size */
.bv-copy-wrap {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    text-align: left;
}
.bv-copy-wrap .bv-copy-icon { flex: 0 0 auto; }

/* Info icon in table headers — prevent underline/border from tooltip */
th .fa-circle-info { color: #94a3b8; cursor: help; text-decoration: none; border-bottom: none; }
th .fa-circle-info:hover { color: #64748b; }

/* ============================================================
   Modal design system (bv-modal-*) — used globally
   ============================================================ */

/* -- Modal header (dark gradient) -- */
.bv-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: linear-gradient(135deg, #0c54a7 0%, #1a6fc4 100%);
    border-bottom: none;
}
.bv-modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1;
}
.bv-modal-close {
    background: rgba(255,255,255,0.1);
    border: none;
    color: rgba(255,255,255,0.6);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    flex-shrink: 0;
    margin-left: auto;
}
.bv-modal-close:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

/* -- Modal body -- */
.bv-modal-body { padding: 24px; }

/* -- Mandatory note -- */
.bv-mandatory-note {
    font-size: 12px;
    color: #94a3b8;
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}
.bv-required { color: #dc2626; }

/* -- Form actions (Cancel / Submit buttons) -- */
.bv-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid #f1f5f9;
    margin-top: 24px;
}
.bv-btn-cancel {
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: all 0.2s;
}
.bv-btn-cancel:hover {
    background: #f1f5f9;
    color: #334155;
}
.bv-btn-submit {
    padding: 9px 22px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    background: linear-gradient(135deg, #1d6fc0 0%, #0c54a7 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: opacity 0.2s, box-shadow 0.2s, transform 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.bv-btn-submit:hover, a.bv-btn-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(12, 84, 167, 0.35);
    color: #fff;
}
a.bv-btn-submit { color: #fff; }
a.bv-btn-submit i { color: #fff; }

/* -- Danger variant (red gradient) for destructive actions -- */
.bv-btn-submit.bv-btn-reject {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}
.bv-btn-submit.bv-btn-reject:hover {
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.35);
}

/* -- Danger modal header (red gradient) -- */
.bv-modal-header.bv-modal-header--danger {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
}
.export-modal-header.export-modal-header--danger {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
}

/* -- Serial / reference info pill inside modal body -- */
.bv-modal-info-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #334155;
    margin-bottom: 20px;
}
.bv-modal-info-pill i {
    color: #64748b;
    font-size: 14px;
}
.bv-modal-info-pill strong {
    font-weight: 700;
    color: #1e293b;
}

/* -- Modal content (borderless, rounded) -- */
.bv-modal-wrap .modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.08);
    overflow: hidden;
}

/* -- Form field label inside modal -- */
.bv-modal-body .bv-field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}
.bv-modal-body .bv-field-label.required::after {
    content: ' *';
    color: #ef4444;
    font-weight: 700;
}

/* -- Form controls inside bv-modal-body -- */
.bv-modal-body input.form-control,
.bv-modal-body textarea.form-control {
    padding: 9px 14px !important;
    font-size: 13.5px !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    height: auto !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
}
.bv-modal-body input.form-control:focus,
.bv-modal-body textarea.form-control:focus {
    border-color: var(--site_color, #3b55a0) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--site_color, #3b55a0) 10%, transparent) !important;
    outline: none !important;
}

/* -- Bootstrap-select inside bv-modal-body -- */
.bv-modal-body .bv-selectpicker + .bootstrap-select { width: 100% !important; }
.bv-modal-body .bv-selectpicker + .bootstrap-select > .btn,
.bv-modal-body .bootstrap-select > .btn.btn-default {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 9px 14px !important;
    font-size: 13.5px !important;
    color: #334155 !important;
    background: #fff !important;
    height: auto !important;
    box-shadow: none !important;
    line-height: 1.5 !important;
}
.bv-modal-body .bv-selectpicker + .bootstrap-select > .btn:focus,
.bv-modal-body .bootstrap-select > .btn.btn-default:focus {
    border-color: var(--site_color, #3b55a0) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--site_color, #3b55a0) 10%, transparent) !important;
    outline: none !important;
}
.bv-modal-body .bootstrap-select .dropdown-menu {
    z-index: 1060 !important;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
    margin-top: 4px !important;
    padding: 4px 0 !important;
}
.bv-modal-body .bootstrap-select .dropdown-menu .bs-searchbox { padding: 6px 10px !important; margin: 0 !important; }
.bv-modal-body .bootstrap-select .dropdown-menu .bs-searchbox .form-control {
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    font-size: 13px;
    padding: 6px 10px !important;
    height: auto !important;
}
.bv-modal-body .bootstrap-select .dropdown-menu .inner { max-height: 220px !important; }
.bv-modal-body .bootstrap-select .dropdown-menu ul li { margin: 0 !important; padding: 0 !important; }
.bv-modal-body .bootstrap-select .dropdown-menu li a,
.bv-modal-body .bootstrap-select .dropdown-menu li a span.text {
    font-size: 13px !important;
    padding: 7px 14px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    display: block !important;
    color: #334155 !important;
}
.bv-modal-body .bootstrap-select .dropdown-menu li a span.text { padding: 0 !important; }
.bv-modal-body .bootstrap-select .dropdown-menu li a:hover { background: #f1f5f9 !important; color: #1e293b !important; }
.bv-modal-body .bootstrap-select .dropdown-menu li.selected a,
.bv-modal-body .bootstrap-select .dropdown-menu li.active a {
    background: color-mix(in srgb, var(--site_color, #3b55a0) 8%, transparent) !important;
    color: var(--site_color, #3b55a0) !important;
}
.bv-modal-body .bootstrap-select .dropdown-menu li.selected a span.text,
.bv-modal-body .bootstrap-select .dropdown-menu li.active a span.text { color: var(--site_color, #3b55a0) !important; }
.bv-modal-body .bootstrap-select .dropdown-menu li.divider { margin: 2px 0 !important; }
.bv-modal-body .bootstrap-select .dropdown-menu li.no-results { padding: 7px 14px !important; font-size: 13px; color: #94a3b8; }
.bv-modal-body .bootstrap-select .dropdown-menu li.dropdown-header {
    padding: 8px 14px 5px !important;
    margin: 4px 0 0 !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    background: linear-gradient(135deg, #f8fafc 0%, color-mix(in srgb, var(--site_color, #3b55a0) 4%, #fff) 100%) !important;
}
.bv-modal-body .bootstrap-select .dropdown-menu li.dropdown-header:first-child { border-top: none; margin-top: 0 !important; }
.bv-modal-body .bootstrap-select .dropdown-menu li.dropdown-header span.text { padding: 0 !important; font-size: 11.5px !important; color: #64748b !important; }

/* ============================================================
   Inline filter bar (ch-filter-bar) — used globally
   ============================================================ */
.ch-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.ch-filter-bar .ch-filter-item { flex: 0 0 200px; min-width: 0; }
.ch-filter-bar .ch-filter-item select,
.ch-filter-bar .ch-filter-item input {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: #334155;
    background: #fff;
    width: 100%;
    height: auto;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ch-filter-bar .ch-filter-item select:focus,
.ch-filter-bar .ch-filter-item input:focus {
    border-color: var(--site_color, #3b55a0);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--site_color, #3b55a0) 12%, transparent);
    outline: none;
}
.ch-filter-bar .bootstrap-select { width: 100% !important; }
.ch-filter-bar .bootstrap-select > .btn,
.ch-filter-bar .bootstrap-select > .btn.btn-default {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
    color: #334155 !important;
    background: #fff !important;
    height: auto !important;
    box-shadow: none !important;
    line-height: 1.5 !important;
}
.ch-filter-bar .bootstrap-select > .btn:focus,
.ch-filter-bar .bootstrap-select > .btn.btn-default:focus {
    border-color: var(--site_color, #3b55a0) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--site_color, #3b55a0) 12%, transparent) !important;
    outline: none !important;
}
.ch-filter-bar .bootstrap-select .dropdown-menu {
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
    margin-top: 4px !important;
}
.ch-filter-bar .bootstrap-select .dropdown-menu .bs-searchbox .form-control {
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    font-size: 13px;
    padding: 6px 10px !important;
    height: auto !important;
}
.ch-filter-bar .bootstrap-select .dropdown-menu li a { font-size: 13px; padding: 7px 14px; }
.ch-filter-btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: var(--site_color, #3b55a0);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: opacity 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}
.ch-filter-btn-icon:hover {
    opacity: 0.9;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--site_color, #3b55a0) 30%, transparent);
}
.ch-filter-btn-icon--reset {
    background: #fff;
    color: #64748b;
    border: 1px solid #e2e8f0;
    text-decoration: none;
}
.ch-filter-btn-icon--reset:hover {
    background: #f1f5f9;
    color: #334155;
    text-decoration: none;
}
@media (max-width: 768px) {
    .ch-filter-bar { flex-direction: column; align-items: stretch; }
    .ch-filter-bar .ch-filter-item { flex: 1 1 100%; }
}

/* -- Inline filters (row + col-md-2) used in reports -- */
#inline_filters .bootstrap-select { width: 100% !important; }
#inline_filters .bootstrap-select > .btn,
#inline_filters .bootstrap-select > .btn.btn-default {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    color: #334155 !important;
    background: #fff !important;
    height: 34px !important;
    box-shadow: none !important;
    line-height: 34px !important;
}
#inline_filters .bootstrap-select > .btn:focus,
#inline_filters .bootstrap-select > .btn.btn-default:focus {
    border-color: var(--site_color, #3b55a0) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--site_color, #3b55a0) 12%, transparent) !important;
    outline: none !important;
}
#inline_filters .multiselect-native-select { width: 100%; display: block; }
#inline_filters .multiselect-native-select .btn-group { width: 100%; display: block; }
#inline_filters .multiselect-native-select .btn-group .multiselect.dropdown-toggle {
    width: 100% !important;
    text-align: left;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
    color: #334155 !important;
    background: #fff !important;
    height: 34px !important;
    box-shadow: none !important;
    line-height: 1.5 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#inline_filters .multiselect-native-select .btn-group .multiselect.dropdown-toggle:hover {
    background: #f8fafc !important;
}
#inline_filters .multiselect-native-select .btn-group .multiselect.dropdown-toggle:focus,
#inline_filters .multiselect-native-select .btn-group.open .multiselect.dropdown-toggle {
    border-color: var(--site_color, #3b55a0) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--site_color, #3b55a0) 12%, transparent) !important;
    outline: none !important;
}
#inline_filters .multiselect-native-select .btn-group .multiselect.dropdown-toggle .caret {
    float: right;
    margin-top: 7px;
}
#inline_filters .multiselect-native-select .multiselect-container.dropdown-menu {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    padding: 4px 0;
}
#inline_filters .multiselect-native-select .multiselect-container > li > a {
    font-size: 13px;
    padding: 6px 12px;
}
#inline_filters .multiselect-native-select .multiselect-container li.multiselect-filter .input-group {
    display: flex;
    width: 100%;
    padding: 6px 10px;
}
#inline_filters .multiselect-native-select .multiselect-container li.multiselect-filter .input-group .input-group-addon {
    display: flex;
    align-items: center;
    padding: 0 8px 0 0;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 13px;
}
#inline_filters .multiselect-native-select .multiselect-container li.multiselect-filter .input-group .multiselect-search {
    flex: 1;
    height: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 12.5px;
    padding: 0 8px;
    box-shadow: none;
}
#inline_filters .multiselect-native-select .multiselect-container li.multiselect-filter .input-group .multiselect-search:focus {
    border-color: var(--site_color, #3b55a0);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--site_color, #3b55a0) 12%, transparent);
}
#inline_filters .multiselect-native-select .multiselect-container li.multiselect-filter .input-group .input-group-btn {
    display: flex;
    align-items: center;
    padding: 0 0 0 4px;
}
#inline_filters .multiselect-native-select .multiselect-container li.multiselect-filter .input-group .input-group-btn .multiselect-clear-filter {
    border: none;
    background: transparent;
    color: #94a3b8;
    padding: 0 4px;
    font-size: 14px;
    cursor: pointer;
}
#inline_filters .multiselect-native-select .multiselect-container li.multiselect-filter .input-group .input-group-btn .multiselect-clear-filter:hover {
    color: #ef4444;
}
#inline_filters .form-control {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: #334155;
    height: 34px;
    box-shadow: none;
    line-height: 1.5;
}
#inline_filters .form-control:focus {
    border-color: var(--site_color, #3b55a0);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--site_color, #3b55a0) 12%, transparent);
    outline: none;
}
#inline_filters .ch-filter-btn-icon {
    height: 34px;
    width: 34px;
    font-size: 13px;
}

/* -- intl-tel-input inside bv-modal-body -- */
.bv-modal-body .iti.iti--allow-dropdown { width: 100% !important; }
.bv-modal-body .iti input.form-control {
    padding-left: 52px !important;
    width: 100% !important;
}
.bv-modal-body .iti__flag-container {
    border-radius: 8px 0 0 8px !important;
}
.bv-modal-body .iti__selected-flag {
    border-radius: 8px 0 0 8px !important;
    padding: 0 8px 0 12px !important;
    background: transparent !important;
}

/* ============================================================
   Vendor/Customer Profile (vp-*) — used globally
   ============================================================ */

/* -- Listing Action Icons (vl-*) -- */
.vl-action-icons { display: inline-flex; align-items: center; gap: 6px; }
.vl-action-btn {
    width: 32px; height: 32px; border-radius: 8px;
    border: 1px solid #e2e8f0; background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 13px; transition: all .2s;
}
.vl-btn-blue { color: var(--site_color, #3b55a0); }
.vl-btn-blue:hover { background: color-mix(in srgb, var(--site_color, #3b55a0) 8%, transparent); border-color: var(--site_color, #3b55a0); }
.vl-btn-purple { color: #8b5cf6; }
.vl-btn-purple:hover { background: #f5f3ff; border-color: #8b5cf6; }
.vl-btn-amber { color: #d97706; }
.vl-btn-amber:hover { background: #fef3c7; border-color: #d97706; }
.vl-btn-teal { color: #16a34a; }
.vl-btn-teal:hover { background: #dcfce7; border-color: #16a34a; }
.vl-btn-red { color: #dc2626; }
.vl-btn-red:hover { background: #fee2e2; border-color: #dc2626; }
.vl-btn-green { color: #16a34a; }
.vl-btn-green:hover { background: #dcfce7; border-color: #16a34a; }
.vl-status-wrap { display: flex; align-items: center; gap: 4px; }

/* -- Row Action Dropdown (vl-dropdown) -- */
.vl-dropdown { display: inline-block; }
.vl-dropdown .dropdown-toggle::after { display: none; }
.vl-dropdown-menu { min-width: 180px; padding: 6px 0; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); border: 1px solid #e2e8f0; }
.vl-dropdown-menu > li > a { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 13px; color: #334155; white-space: nowrap; }
.vl-dropdown-menu > li > a:hover { background: #f1f5f9; color: #0d55a7; }
.vl-dropdown-menu > li > a i { width: 16px; text-align: center; font-size: 14px; }
.text-teal { color: #0d9488 !important; }
.text-purple { color: #7c3aed !important; }

/* -- Add More / Add Row Button (global) -- */
.txn-add-row { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1.5px dashed #93c5fd; border-radius: 6px; background: none; color: #2563eb; font-size: 13px; font-weight: 500; cursor: pointer; transition: all .15s ease; text-decoration: none; }
.txn-add-row:hover { background: #eff6ff; border-color: #60a5fa; color: #2563eb; text-decoration: none; }
.txn-add-row.txn-add-row-danger { border-color: #fca5a5; color: #dc2626; }
.txn-add-row.txn-add-row-danger:hover { background: #fef2f2; border-color: #f87171; color: #dc2626; }

/* -- Profile header -- */
.vp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, #f8fafc 0%, color-mix(in srgb, var(--site_color, #3b55a0) 4%, #fff) 100%);
    border: 1px solid #e8ecf1;
    border-radius: 12px;
    margin-bottom: 20px;
}
.vp-header-left { display: flex; align-items: center; gap: 16px; }
.vp-avatar {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: var(--site_color, #3b55a0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--site_color, #3b55a0) 25%, transparent);
}
.vp-company-name { font-size: 18px; font-weight: 700; color: #1e293b; }
.vp-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vp-meta-item { font-size: 13px; color: #64748b; display: flex; align-items: center; gap: 5px; }
.vp-header-actions { flex-shrink: 0; }

/* -- Navigation tabs -- */
.vp-tabs {
    list-style: none;
    display: flex;
    gap: 4px;
    padding: 0;
    margin: 0 0 20px;
    border-bottom: 2px solid #e2e8f0;
}
.vp-tabs li a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}
.vp-tabs li a:hover { color: #334155; }
.vp-tabs li.active a {
    color: var(--site_color, #3b55a0);
    border-bottom-color: var(--site_color, #3b55a0);
}

/* -- Cards -- */
.vp-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: hidden;
}
.vp-card-header {
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.vp-card-header i { color: var(--site_color, #3b55a0); font-size: 15px; }
.vp-accordion-toggle { cursor: pointer; user-select: none; transition: background 0.15s; }
.vp-accordion-toggle:hover { background: #f1f5f9; }
.vp-accordion-icon { margin-left: auto; font-size: 13px !important; color: #94a3b8 !important; transition: transform 0.2s; }
.vp-card-body { padding: 16px 18px; }

/* -- Key-value field rows -- */
.vp-field {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}
.vp-field:last-child { border-bottom: none; }
.vp-field-label {
    font-size: 12.5px;
    font-weight: 600;
    color: #64748b;
    flex: 0 0 45%;
    min-width: 0;
}
.vp-field-value {
    font-size: 13px;
    color: #1e293b;
    text-align: right;
    flex: 0 0 55%;
    min-width: 0;
    word-break: break-word;
}

/* -- Address grid (2-col on right panel) -- */
.vp-address-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}
.vp-address-grid .vp-field { border-bottom: 1px solid #f1f5f9; }

/* -- Table inside card -- */
.vp-table { margin: 0; }
.vp-table thead th {
    background: var(--site_color, #3b55a0);
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 10px 16px;
    border-bottom: none;
    border-top: none;
}
.vp-table tbody td {
    padding: 12px 16px;
    font-size: 13px;
    color: #1e293b;
    border-top: none;
}

/* -- Action buttons bar -- */
.vp-action-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.vp-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    border: 1px solid transparent;
}
.vp-action-btn:hover { text-decoration: none; transform: translateY(-1px); }
.vp-action-excel { background: #ecfdf5; color: #059669; border-color: #a7f3d0; }
.vp-action-excel:hover { background: #d1fae5; color: #047857; box-shadow: 0 2px 8px rgba(5,150,105,0.2); }
.vp-action-pdf { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.vp-action-pdf:hover { background: #fee2e2; color: #b91c1c; box-shadow: 0 2px 8px rgba(220,38,38,0.2); }
.vp-action-email { background: #fef3c7; color: #d97706; border-color: #fde68a; }
.vp-action-email:hover { background: #fde68a; color: #b45309; box-shadow: 0 2px 8px rgba(217,119,6,0.2); }
.vp-action-whatsapp { background: #ecfdf5; color: #16a34a; border-color: #bbf7d0; }
.vp-action-whatsapp:hover { background: #dcfce7; color: #15803d; box-shadow: 0 2px 8px rgba(22,163,74,0.2); }

/* -- Summary total row -- */
.vp-summary-total {
    font-weight: 700 !important;
    color: #fff !important;
    background: var(--site_color, #3b55a0) !important;
    font-size: 13.5px;
}
.vp-table tfoot td {
    background: color-mix(in srgb, var(--site_color, #3b55a0) 10%, #fff);
    font-weight: 700;
    color: #1e293b;
    border-top: 2px solid var(--site_color, #3b55a0);
}

@media (max-width: 768px) {
    .vp-header { flex-direction: column; gap: 16px; align-items: flex-start; }
    .vp-address-grid { grid-template-columns: 1fr; }
    .vp-action-bar { flex-direction: column; }
}

/* ============================================================
   Vendor Transactions Accordion (vp-accordion-*) — used globally
   ============================================================ */

.vp-accordion { display: flex; flex-direction: column; gap: 10px; }

.vp-accordion-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s;
}
.vp-accordion-panel.is-open {
    border-color: var(--site_color, #3b55a0);
    box-shadow: 0 2px 12px rgba(59, 85, 160, 0.08);
}

.vp-accordion-header {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    cursor: pointer;
    background: #f8fafc;
    border-bottom: 1px solid transparent;
    transition: background 0.2s;
    user-select: none;
}
.vp-accordion-header:hover { background: #f1f5f9; }
.vp-accordion-panel.is-open .vp-accordion-header {
    background: color-mix(in srgb, var(--site_color, #3b55a0) 5%, #fff);
    border-bottom-color: #e2e8f0;
}

.vp-accordion-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
}
.vp-accordion-title i {
    font-size: 16px;
    color: var(--site_color, #3b55a0);
    width: 20px;
    text-align: center;
}

.vp-accordion-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 16px;
    flex-shrink: 0;
}
.vp-accordion-actions select.form-control {
    height: 32px;
    padding: 4px 10px;
    font-size: 12.5px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #334155;
    min-width: 120px;
}
.vp-accordion-actions select.form-control:focus {
    border-color: var(--site_color, #3b55a0);
    box-shadow: 0 0 0 2px rgba(59, 85, 160, 0.1);
}

.vp-accordion-chevron {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: #e2e8f0;
    transition: background 0.2s;
}
.vp-accordion-panel.is-open .vp-accordion-chevron {
    background: var(--site_color, #3b55a0);
}
.vp-accordion-chevron i {
    font-size: 12px;
    color: #64748b;
    transition: transform 0.25s ease;
}
.vp-accordion-panel.is-open .vp-accordion-chevron i {
    color: #fff;
}
.vp-accordion-chevron i.rotate { transform: rotate(180deg); }

.vp-accordion-body {
    padding: 0;
    background: #fff;
}
.vp-accordion-body .table-responsive { margin: 0; }
.vp-accordion-body .table { margin: 0 !important; }
.vp-accordion-body .table thead th {
    background: var(--site_color, #3b55a0);
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 10px 14px;
    border: none;
}
.vp-accordion-body .table tbody td {
    padding: 10px 14px;
    font-size: 13px;
    color: #1e293b;
    border-top: 1px solid #f1f5f9;
}
.vp-accordion-body .table tbody tr:hover { background: #f8fafc; }

.vp-accordion-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    font-size: 13px;
    color: #64748b;
}
.vp-accordion-loader i { font-size: 16px; color: var(--site_color, #3b55a0); }

.vp-accordion-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    font-size: 13px;
    color: #94a3b8;
}
.vp-accordion-empty i { font-size: 16px; }

/* Pagination inside accordion */
.vp-accordion-body .pagination { margin: 12px 16px; }

@media (max-width: 768px) {
    .vp-accordion-header { padding: 12px 14px; }
    .vp-accordion-actions { margin: 0 8px; }
    .vp-accordion-actions select.form-control { min-width: 100px; font-size: 12px; }
}

/* ============================================================
   Full-Page Form Layout (vf-*) — Add/Edit Vendor, Customer, etc.
   ============================================================ */

/* -- Page Header -- */
.vf-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, color-mix(in srgb, var(--site_color, #3b55a0) 4%, #fff) 100%);
    border: 1px solid #e8ecf1;
    border-radius: 12px;
    margin-bottom: 20px;
}
.vf-page-header-left { display: flex; align-items: center; gap: 14px; }
.vf-page-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.vf-header-text { flex: 1; min-width: 0; }
.vf-page-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0px 4px color-mix(in srgb, var(--site_color, #3b55a0) 25%, transparent);
}
.vf-page-icon i { font-size: 18px; color: #0d55a7; }
.vf-page-icon[style*="background"] i { color: #fff; }
.vf-page-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    line-height: 20px;
}
.vf-page-desc { font-size: 12px; color: #555555; margin: 0; }
.vf-btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.vf-btn-back:hover { background: #f0f5ff; color: #0c54a7; border-color: #bfcfea; box-shadow: 0 2px 8px rgba(12, 84, 167, .1); text-decoration: none; transform: translateY(-1px); }

/* -- Layout: sidebar + content -- */
.vf-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

/* -- Sidebar Navigation -- */
.vf-sidebar {
    width: 220px;
    flex-shrink: 0;
    position: sticky;
    top: 80px;
}
.vf-nav {
    list-style: none;
    padding: 8px;
    margin: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.vf-nav li { margin: 2px 0; border-radius: 8px; }
.vf-nav li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}
.vf-nav li a:hover { background: #f1f5f9; color: #1e293b; text-decoration: none; }
.vf-nav li a i { font-size: 15px; width: 18px; text-align: center; color: #94a3b8; }
.vf-nav li.active a {
    background: color-mix(in srgb, var(--site_color, #3b55a0) 8%, transparent);
    color: var(--site_color, #3b55a0);
    font-weight: 600;
    border-left-color: var(--site_color, #3b55a0);
	border-radius: 0px;
}
.vf-nav li.active a i { color: var(--site_color, #3b55a0); }

.vf-mandatory-note {
    padding: 10px 14px;
    font-size: 11.5px;
    color: #94a3b8;
}

/* -- Content Area -- */
.vf-content {
    flex: 1;
    min-width: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: visible;
    padding: 20px;
}
.vf-content .tab-content { padding: 0; }
.vf-content .form-group.row { margin-bottom: 12px; }

/* -- Section Titles inside form -- */
.vf-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    padding: 8px 0 10px;
    margin-bottom: 12px;
    border-bottom: 2px solid #f1f5f9;
}
.vf-section-title:not(:first-child) { margin-top: 20px; }
.vf-section-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vf-section-icon i { font-size: 14px; color: #fff; }
.vf-icon-blue    { background: #3b82f6; }
.vf-icon-green   { background: #0d9488; }
.vf-icon-slate   { background: #64748b; }
.vf-icon-amber   { background: #d97706; }
.vf-icon-purple  { background: #7c3aed; }
.vf-icon-teal    { background: #0891b2; }
.vf-icon-red     { background: #dc2626; }
.vf-icon-orange  { background: #ea580c; }
.vf-icon-indigo  { background: #4f46e5; }
.vf-icon-emerald { background: #059669; }

.vf-label {
    font-size: 13px;
    font-weight: 600;
    color: #323b48;
    margin-bottom: 0;
    padding-top: 7px;
}
.vf-label.required::after {
    content: " *";
    color: #ef4444;
    font-weight: 700;
}
.vf-hint {
    font-weight: 400;
    color: #94a3b8;
    font-size: 11px;
}

/* Form controls inside vf-content */
.vf-content .form-control {
    height: 34px;
    font-size: 12.5px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 10px;
    color: #1e293b;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.vf-content .form-control:focus {
    border-color: var(--site_color, #3b55a0);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--site_color, #3b55a0) 10%, transparent);
}
.vf-content textarea.form-control { height: auto; }

/* Field error highlight */
.vf-content .form-control.vf-field-error { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important; }
.vf-content .bootstrap-select.vf-field-error > .btn { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important; }
.vf-content .multiselect-native-select.vf-field-error .btn { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important; }
.vf-content select.form-control { appearance: auto; }

/* intl-tel-input inside vf-content */
.vf-content .iti { width: 100%; }
.vf-content .iti input.form-control { padding-left: 52px !important; }

/* bootstrap-select inside vf-content — hide original select permanently */
.vf-content .bootstrap-select { width: 100% !important; }
.vf-content select.selectpicker,
.vf-content .bootstrap-select > select {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}
.vf-content .bootstrap-select > .btn,
.vf-content .bootstrap-select > .btn.btn-default,
.vf-content .bootstrap-select > .btn.dropdown-toggle {
    height: 34px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    font-size: 12.5px !important;
    background: #fff !important;
    color: #1e293b !important;
    padding: 6px 10px !important;
    box-shadow: none !important;
    outline: none !important;
}
.vf-content .bootstrap-select > .btn:hover {
    background: #fff !important;
    border-color: #cbd5e1 !important;
}
.vf-content .bootstrap-select > .btn:focus,
.vf-content .bootstrap-select > .btn:active,
.vf-content .bootstrap-select.open > .btn {
    border-color: var(--site_color, #3b55a0) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--site_color, #3b55a0) 10%, transparent) !important;
    background: #fff !important;
}
.vf-content .bootstrap-select .dropdown-toggle .filter-option { display: flex; align-items: center; height: 100%; }
.vf-content .bootstrap-select .dropdown-toggle .caret { top: 50%; transform: translateY(-50%); right: 12px; }
.vf-content .bootstrap-select .dropdown-menu { border-radius: 8px; border: 1px solid #e2e8f0; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.vf-content .bootstrap-select .dropdown-menu li a { font-size: 13px; padding: 8px 12px; }
.vf-content .bootstrap-select .dropdown-menu .bs-searchbox .form-control { height: 34px; border-radius: 6px; font-size: 13px; }

/* bootstrap-multiselect inside vf-content / assign_to_wrap / ces-wrap */
.vf-content .multiselect-native-select,
#assign_to_wrap .multiselect-native-select,
.ces-wrap .multiselect-native-select { width: 100%; display: block; }
.vf-content .multiselect-native-select .btn-group,
#assign_to_wrap .multiselect-native-select .btn-group,
.ces-wrap .multiselect-native-select .btn-group { width: 100%; display: block; }
.vf-content .multiselect-native-select .btn-group .multiselect.dropdown-toggle,
#assign_to_wrap .multiselect-native-select .btn-group .multiselect.dropdown-toggle,
.ces-wrap .multiselect-native-select .btn-group .multiselect.dropdown-toggle {
    width: 100%;
    height: 34px;
    padding: 5px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #555;
    font-size: 12.5px;
    font-weight: 400;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vf-content .multiselect-native-select .btn-group .multiselect.dropdown-toggle:hover,
#assign_to_wrap .multiselect-native-select .btn-group .multiselect.dropdown-toggle:hover,
.ces-wrap .multiselect-native-select .btn-group .multiselect.dropdown-toggle:hover {
    background: #fff;
    border-color: #cbd5e1;
}
.vf-content .multiselect-native-select .btn-group .multiselect.dropdown-toggle:focus,
.vf-content .multiselect-native-select .btn-group.open .multiselect.dropdown-toggle,
#assign_to_wrap .multiselect-native-select .btn-group .multiselect.dropdown-toggle:focus,
#assign_to_wrap .multiselect-native-select .btn-group.open .multiselect.dropdown-toggle,
.ces-wrap .multiselect-native-select .btn-group .multiselect.dropdown-toggle:focus,
.ces-wrap .multiselect-native-select .btn-group.open .multiselect.dropdown-toggle {
    border-color: var(--site_color, #3b55a0);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--site_color, #3b55a0) 10%, transparent);
    background: #fff;
}
.vf-content .multiselect-native-select .btn-group .multiselect.dropdown-toggle .caret,
#assign_to_wrap .multiselect-native-select .btn-group .multiselect.dropdown-toggle .caret,
.ces-wrap .multiselect-native-select .btn-group .multiselect.dropdown-toggle .caret {
    margin-top: 0;
}
#assign_to_wrap {
    overflow: visible;
}
.vf-content .multiselect-native-select .multiselect-container.dropdown-menu,
#assign_to_wrap .multiselect-native-select .multiselect-container.dropdown-menu,
.ces-wrap .multiselect-native-select .multiselect-container.dropdown-menu {
    width: 100%;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    padding: 4px 0;
    z-index: 1050;
}
.vf-content .multiselect-native-select .multiselect-container > li > a,
#assign_to_wrap .multiselect-native-select .multiselect-container > li > a,
.ces-wrap .multiselect-native-select .multiselect-container > li > a {
    font-size: 13px;
    padding: 6px 12px;
}
.vf-content .multiselect-native-select .multiselect-container li.multiselect-filter .input-group,
#assign_to_wrap .multiselect-native-select .multiselect-container li.multiselect-filter .input-group,
.ces-wrap .multiselect-native-select .multiselect-container li.multiselect-filter .input-group {
    display: flex;
    width: 100%;
    padding: 6px 10px;
}
.vf-content .multiselect-native-select .multiselect-container li.multiselect-filter .input-group .input-group-addon,
#assign_to_wrap .multiselect-native-select .multiselect-container li.multiselect-filter .input-group .input-group-addon,
.ces-wrap .multiselect-native-select .multiselect-container li.multiselect-filter .input-group .input-group-addon {
    display: flex;
    align-items: center;
    padding: 0 8px 0 0;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 13px;
}
.vf-content .multiselect-native-select .multiselect-container li.multiselect-filter .input-group .multiselect-search,
#assign_to_wrap .multiselect-native-select .multiselect-container li.multiselect-filter .input-group .multiselect-search,
.ces-wrap .multiselect-native-select .multiselect-container li.multiselect-filter .input-group .multiselect-search {
    flex: 1;
    height: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 12.5px;
    padding: 0 8px;
    box-shadow: none;
}
.vf-content .multiselect-native-select .multiselect-container li.multiselect-filter .input-group .multiselect-search:focus,
#assign_to_wrap .multiselect-native-select .multiselect-container li.multiselect-filter .input-group .multiselect-search:focus,
.ces-wrap .multiselect-native-select .multiselect-container li.multiselect-filter .input-group .multiselect-search:focus {
    border-color: var(--site_color, #3b55a0);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--site_color, #3b55a0) 10%, transparent);
}
.vf-content .multiselect-native-select .multiselect-container li.multiselect-filter .input-group .input-group-btn,
#assign_to_wrap .multiselect-native-select .multiselect-container li.multiselect-filter .input-group .input-group-btn,
.ces-wrap .multiselect-native-select .multiselect-container li.multiselect-filter .input-group .input-group-btn {
    display: flex;
    align-items: center;
    padding: 0 0 0 4px;
}
.vf-content .multiselect-native-select .multiselect-container li.multiselect-filter .input-group .input-group-btn .multiselect-clear-filter,
#assign_to_wrap .multiselect-native-select .multiselect-container li.multiselect-filter .input-group .input-group-btn .multiselect-clear-filter,
.ces-wrap .multiselect-native-select .multiselect-container li.multiselect-filter .input-group .input-group-btn .multiselect-clear-filter {
    border: none;
    background: transparent;
    color: #94a3b8;
    padding: 0 4px;
    font-size: 14px;
    cursor: pointer;
}
.vf-content .multiselect-native-select .multiselect-container li.multiselect-filter .input-group .input-group-btn .multiselect-clear-filter:hover,
#assign_to_wrap .multiselect-native-select .multiselect-container li.multiselect-filter .input-group .input-group-btn .multiselect-clear-filter:hover,
.ces-wrap .multiselect-native-select .multiselect-container li.multiselect-filter .input-group .input-group-btn .multiselect-clear-filter:hover {
    color: #ef4444;
}

/* Product Components table — allow selectpicker dropdown to overflow */
#product_grouping_tab .table-responsive {
    overflow: visible;
}

/* Checkbox label */
.vf-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
    padding: 8px 0;
}
.vf-checkbox-label input[type="checkbox"] { accent-color: var(--site_color, #3b55a0); }

/* -- Toggle Switch -- */
.vf-toggle-wrap { display: flex; align-items: center; gap: 10px; height: 34px; }
.vf-toggle { position: relative; display: inline-block; width: 40px; height: 22px; margin: 0; }
.vf-toggle input { opacity: 0; width: 0; height: 0; }
.vf-toggle-slider {
    position: absolute; cursor: pointer; inset: 0;
    background: #cbd5e1; border-radius: 22px; transition: .25s;
}
.vf-toggle-slider::before {
    content: ''; position: absolute; width: 16px; height: 16px;
    left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .25s;
}
.vf-toggle input:checked + .vf-toggle-slider { background: var(--site_color, #3b55a0); }
.vf-toggle input:checked + .vf-toggle-slider::before { transform: translateX(18px); }
.vf-toggle-label { font-size: 12.5px; font-weight: 600; color: #16a34a; }
.vf-toggle-label.text-inactive { color: #94a3b8; }

/* -- Action Bar -- */
.vf-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
}
.vf-btn-cancel {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
}
.vf-btn-cancel:hover { color: #1e293b; border-color: #cbd5e1; text-decoration: none; }

/* -- Responsive -- */
@media (max-width: 992px) {
    .vf-layout { flex-direction: column; }
    .vf-sidebar { width: 100%; position: static; }
    .vf-nav { display: flex; flex-wrap: wrap; gap: 4px; }
    .vf-nav li a { padding: 8px 12px; font-size: 12px; border-left: none; border-bottom: 2px solid transparent; }
    .vf-nav li.active a { border-left-color: transparent; border-bottom-color: var(--site_color, #3b55a0); }
    .vf-mandatory-note { display: none; }
}
@media (max-width: 768px) {
    .vf-page-header { flex-direction: column; gap: 12px; align-items: flex-start; }
    .vf-content .tab-content { padding: 16px; }
    .vf-actions { padding: 12px 16px; }
}

/* Visit Profile - Photos */
.visit-photo-img {
    max-width: 100%;
    max-height: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* ============================================================
   File Upload — styled drag-and-drop area (global)
   ============================================================ */
.file-upload-area {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 12px 14px;
    background: #fafbfc;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}
.file-upload-area:hover {
    border-color: #94a3b8;
    background: #f1f5f9;
}
.file-upload-area .file-upload-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #3b82f6;
    flex-shrink: 0;
}
.file-upload-area .file-upload-text {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}
.file-upload-area .file-upload-text strong {
    color: #3b82f6;
    font-weight: 600;
}
.file-upload-area .file-upload-formats {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 2px;
    letter-spacing: 0.3px;
}
.file-upload-area input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* ============================================================
   Import Modal – Modern Redesign
   ============================================================ */
.import-modal-content { border: none; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
.import-modal-header {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 20px 24px; background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
    border-bottom: 1px solid #e2e8f0;
}
.import-modal-icon {
    width: 42px; height: 42px; border-radius: 10px;
    background: var(--site_color, #3b55a0); display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--site_color, #3b55a0) 25%, transparent);
}
.import-modal-icon i { font-size: 18px; color: #fff; }
.import-modal-title { font-size: 16px; font-weight: 700; color: #1e293b; margin: 0 0 2px; }
.import-modal-desc { font-size: 12.5px; color: #64748b; margin: 0; }
.import-modal-close {
    margin-left: auto; background: none; border: none;
    font-size: 18px; color: #94a3b8; cursor: pointer; padding: 0; line-height: 1;
}
.import-modal-close:hover { color: #475569; }
.import-modal-body { padding: 20px 24px; }
.import-download-bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    padding: 12px 14px; background: #f8fafc;
    border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 16px;
}
.import-download-label { font-size: 12.5px; font-weight: 600; color: #64748b; white-space: nowrap; }
.import-download-links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.import-download-link {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600; color: var(--site_color, #3b55a0);
    padding: 4px 10px; border: 1px solid #c7d2fe; border-radius: 6px;
    background: #fff; text-decoration: none; transition: all 0.15s;
}
.import-download-link:hover { background: #eef2ff; border-color: #a5b4fc; text-decoration: none; color: #1e3a8a; }
.import-notes {
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px;
    padding: 14px 16px; margin-bottom: 16px;
}
.import-notes-title { font-size: 13px; font-weight: 700; color: #92400e; margin-bottom: 8px; }
.import-notes-title i { margin-right: 4px; }
.import-notes ul { margin: 0; padding-left: 18px; }
.import-notes ul li { font-size: 12.5px; color: #78350f; line-height: 1.7; }
.import-notes ul li code { background: #fef3c7; padding: 1px 5px; border-radius: 3px; font-size: 11.5px; color: #92400e; }
.import-notes ul ul { margin-top: 4px; }
.import-form-fields { margin-bottom: 16px; }
.import-field-label { font-size: 12.5px; font-weight: 600; color: #334155; margin-bottom: 6px; display: block; }
.import-modal-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding-top: 16px; border-top: 1px solid #e2e8f0;
}
.import-btn-cancel {
    padding: 8px 18px; font-size: 13px; font-weight: 600;
    border: 1px solid #e2e8f0; border-radius: 8px;
    background: #fff; color: #475569; cursor: pointer; transition: all 0.15s;
}
.import-btn-cancel:hover { color: #1e293b; border-color: #cbd5e1; }

/* ── Scoped selectpicker + file input inside import modal ── */
.import-modal-content .bootstrap-select {
    width: 100% !important;
}
.import-modal-content .bootstrap-select > .btn {
    height: 38px;
    padding: 9px 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-size: 13px !important;
    font-weight: 500;
    box-shadow: none !important;
    outline: none !important;
    display: flex;
    align-items: center;
    line-height: 1.4;
}
.import-modal-content .bootstrap-select.open > .btn,
.import-modal-content .bootstrap-select > .btn:focus,
.import-modal-content .bootstrap-select > .btn:focus-visible {
    border-color: #0d55a7 !important;
    box-shadow: 0 0 0 3px rgba(13, 85, 167, 0.1) !important;
    outline: none !important;
}
.import-modal-content .bootstrap-select .filter-option {
    font-size: 13px;
    line-height: 1.4;
    color: #1e293b;
}
.import-modal-content .bootstrap-select .filter-option-inner-inner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.import-modal-content input[type="file"].form-control {
    height: 38px;
    padding: 8px 12px;
    font-size: 13px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #1e293b;
    line-height: 1.4;
    box-shadow: none;
}
.import-modal-content input[type="file"].form-control:focus {
    border-color: #0d55a7;
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 85, 167, 0.1);
}
.import-modal-content .import-form-fields .row {
    align-items: flex-end;
}

/* ── Right Drawer ── */
.drawer-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.45); z-index: 1040;
    opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
/* Email upload area — mirrors file-upload-area but avoids layout.blade.php handler */
.email-upload-area {
    position: relative;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    padding: 12px 14px;
    background: #fafbfc;
    transition: all 0.2s ease;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}
.email-upload-area:hover {
    border-color: #94a3b8;
    background: #f1f5f9;
}
.email-upload-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #3b82f6;
    flex-shrink: 0;
}
.email-upload-text {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}
.email-upload-text strong {
    color: #3b82f6;
    font-weight: 600;
}
.email-upload-formats {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 2px;
    letter-spacing: 0.3px;
}
.email-upload-area input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
/* Email multi-file attachment list */
.email-file-list { margin-top: 10px; }
.email-file-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; background: #fff; border: 1.5px dashed #d1d5db;
    border-radius: 8px; margin-bottom: 6px; font-size: 13px;
}
.email-file-item .file-info { display: flex; align-items: center; gap: 10px; overflow: hidden; }
.email-file-item .ef-icon {
    width: 28px; height: 28px; border-radius: 6px; display: inline-flex;
    align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0;
}
.email-file-item .ef-icon-img { background: #dcfce7; color: #16a34a; }
.email-file-item .ef-icon-pdf { background: #fee2e2; color: #dc2626; }
.email-file-item .ef-icon-doc { background: #dbeafe; color: #2563eb; }
.email-file-item .ef-icon-xls { background: #dcfce7; color: #16a34a; }
.email-file-item .ef-icon-file { background: #f3f4f6; color: #6b7280; }
.email-file-item .file-name {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 300px; color: #1f2937; font-weight: 500;
}
.email-file-item .file-size { color: #9ca3af; white-space: nowrap; }
.email-file-item .file-delete {
    color: #9ca3af; cursor: pointer; font-size: 18px; font-weight: 300;
    line-height: 1; padding: 0 4px; transition: color 0.15s;
}
.email-file-item .file-delete:hover { color: #ef4444; }

.drawer-overlay-visible { opacity: 1; visibility: visible; }

.drawer-panel {
    position: fixed; top: 0; right: 0; width: 50%; max-width: 92vw; height: 100%;
    background: #fff; z-index: 1050; box-shadow: -4px 0 24px rgba(0,0,0,0.12);
    transform: translateX(100%); transition: transform 0.3s ease;
    display: flex; flex-direction: column;
}
.drawer-panel.drawer-open { transform: translateX(0); }
.drawer-panel > div { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }

.drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-bottom: 1px solid #e2e8f0; flex-shrink: 0;
}
.drawer-header-left { display: flex; align-items: center; gap: 14px; }
.drawer-header-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    display: flex; align-items: center; justify-content: center;
    color: #3b82f6; font-size: 17px; flex-shrink: 0;
}
.drawer-title { font-size: 16px; font-weight: 700; color: #0f172a; margin: 0; }
.drawer-desc { font-size: 12.5px; color: #64748b; margin: 2px 0 0; }
.drawer-close {
    width: 34px; height: 34px; border-radius: 8px; border: 1px solid #e2e8f0;
    background: #fff; display: flex; align-items: center; justify-content: center;
    color: #64748b; font-size: 16px; cursor: pointer; transition: all 0.15s;
}
.drawer-close:hover { background: #f8fafc; color: #0f172a; border-color: #cbd5e1; }

.drawer-body {
    flex: 1; overflow-y: auto; padding: 22px; min-height: 0;
}
.drawer-body .form-group { margin-bottom: 16px; }
.drawer-body .vf-label { font-size: 12.5px; font-weight: 600; color: #334155; padding-top: 8px; }
.drawer-body .form-control { font-size: 13px; border-radius: 6px; border-color: #e2e8f0; }
.drawer-body .form-control:focus { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(59,130,246,0.08); }
.drawer-body .vf-checkbox-label { font-size: 13px; color: #334155; font-weight: 500; }

.drawer-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 14px 22px; border-top: 1px solid #e2e8f0; flex-shrink: 0; background: #f8fafc;
}

/* -- WA Status Tabs -- */
.wa-status-tabs { display: flex; gap: 0; margin-bottom: 15px; border-bottom: 2px solid #e9ecef; }
.wa-status-tab {
    display: flex; align-items: center; gap: 6px; padding: 10px 20px;
    text-decoration: none; color: #777; font-size: 14px; font-weight: 500;
    border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all 0.2s ease;
}
.wa-status-tab:hover { color: #333; text-decoration: none; background: #f8f9fa; }
.wa-status-tab.active { font-weight: 600; }
.wa-status-tab .tab-count {
    background: #e9ecef; color: #555; font-size: 11px; font-weight: 600;
    padding: 1px 7px; border-radius: 10px; min-width: 20px; text-align: center;
}
.wa-status-tab.active .tab-count { color: #fff; }

/* -- Sidebar + Page Wrapper overflow fix -- */
.wrapper { overflow-x: hidden; }
@media (max-width: 1400px) {
    .slide-nav-toggle .page-wrapper { left: 0; margin-left: 44px; width: calc(100% - 44px); }
}
@media (max-width: 1024px) {
    .slide-nav-toggle .page-wrapper { left: 0; margin-left: 44px; width: calc(100% - 44px); }
}

/* ── File Upload Zone ── */
.file-upload-zone {
    border: 2px dashed #d1d5db;
    border-radius: 10px;
    background: #fafbfc;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
}
.file-upload-zone:hover,
.file-upload-zone.dragover {
    border-color: #2854a0;
    background: #f0f4ff;
}
.file-upload-placeholder {
    text-align: center;
    padding: 28px 16px;
}
.file-upload-placeholder i {
    font-size: 32px;
    color: #9ca3af;
    margin-bottom: 8px;
    display: block;
}
.file-upload-zone:hover .file-upload-placeholder i,
.file-upload-zone.dragover .file-upload-placeholder i {
    color: #2854a0;
}
.file-upload-placeholder p {
    margin: 0 0 4px;
    font-size: 13.5px;
    color: #6b7280;
    font-weight: 500;
}
.file-upload-browse {
    color: #2854a0;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}
.file-upload-placeholder small {
    font-size: 12px;
    color: #9ca3af;
}
.file-upload-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 12px 12px;
}
.file-upload-list:empty {
    display: none;
}
.file-upload-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 12.5px;
    color: #374151;
    max-width: 220px;
}
.file-upload-item i.fa-image {
    color: #2854a0;
    font-size: 14px;
    flex-shrink: 0;
}
.file-upload-item .file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
.file-upload-item .file-size {
    color: #9ca3af;
    font-size: 11px;
    flex-shrink: 0;
}
.file-upload-item .file-remove {
    color: #9ca3af;
    cursor: pointer;
    font-size: 13px;
    flex-shrink: 0;
    transition: color 0.15s;
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
}
.file-upload-item .file-remove:hover {
    color: #ef4444;
}

/* ── Visit Toggle Group (pill radio buttons) ── */
.visit-toggle-group {
    display: inline-flex;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #f8fafc;
}
.visit-toggle-group input[type="radio"] { display: none; }
.visit-toggle-group label {
    padding: 4px 14px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    margin: 0;
    transition: all 0.2s;
    border-right: 1px solid #e2e8f0;
}
.visit-toggle-group label:last-child { border-right: none; }
.visit-toggle-group input[type="radio"]:checked + label { background: #0d55a7; color: #fff; }
.visit-toggle-group input[type="radio"].toggle-yes:checked + label { background: #16a34a; }
.visit-toggle-group input[type="radio"].toggle-no:checked + label { background: #dc2626; }
.visit-toggle-group.disabled { opacity: 0.6; cursor: not-allowed; }
.visit-toggle-group.disabled label { cursor: not-allowed; pointer-events: none; }

/* ── Flex align center utility ── */
.flex-align-center { align-items: center; }

/* ── Toolbar action button (standalone — works outside .crm-toolbar) ── */
.btn-toolbar-action {
    height: 34px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #d0d5e0;
    border-radius: 6px;
    background: #fff;
    color: #555;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
    white-space: nowrap;
}
.btn-toolbar-action:hover {
    background: #f0f3fa;
    border-color: #0c54a7;
    color: #0c54a7;
    text-decoration: none;
}