/*

Template Name: Rocker Admin

Author: codervent

Email: codervent@gmail.com

File: app.css

*/

:root {
	--brand-navy: #1a365d;
	--brand-blue: #3375d2;
	--brand-green: #3aa61a;
	--brand-green-deep: #0e650d;
	--brand-action: #31802e;
	--brand-danger: #f62718;
	--brand-gradient: linear-gradient(94deg, #1a365d 0%, #3375d2 32%, #3aa61a 68%, #0e650d 100%);
	--bs-primary: #1a365d;
	--bs-primary-rgb: 26, 54, 93;
	--sb-size: 8px;
	--sb-radius: 999px;
	--sb-track: rgba(26, 54, 93, 0.07);
	--sb-thumb: linear-gradient(180deg, #1a365d 0%, #3375d2 55%, #3aa61a 100%);
	--sb-thumb-solid: rgba(26, 54, 93, 0.45);
	--sb-thumb-hover: rgba(26, 54, 93, 0.7);
}

html.dark-theme {
	--sb-track: rgba(255, 255, 255, 0.06);
	--sb-thumb: linear-gradient(180deg, #2a4a7a 0%, #3375d2 55%, #2f7a1a 100%);
	--sb-thumb-solid: rgba(192, 198, 206, 0.4);
	--sb-thumb-hover: rgba(110, 168, 255, 0.65);
}

/* Scrollbar — light + dark */
html {
	scrollbar-width: thin;
	scrollbar-color: var(--sb-thumb-solid) var(--sb-track)
}

*::-webkit-scrollbar {
	width: var(--sb-size);
	height: var(--sb-size)
}

*::-webkit-scrollbar-track {
	background: var(--sb-track);
	border-radius: var(--sb-radius)
}

*::-webkit-scrollbar-thumb {
	background: var(--sb-thumb);
	border-radius: var(--sb-radius);
	border: 2px solid transparent;
	background-clip: padding-box;
	min-height: 36px
}

*::-webkit-scrollbar-thumb:hover {
	background: var(--sb-thumb-hover);
	background-clip: padding-box;
	border: 2px solid transparent
}

*::-webkit-scrollbar-corner {
	background: transparent
}

.simplebar-scrollbar:before {
	background: var(--sb-thumb-solid) !important;
	border-radius: var(--sb-radius) !important;
	left: 2px !important;
	right: 2px !important;
	opacity: .85 !important
}

.simplebar-scrollbar.simplebar-visible:before {
	opacity: 1 !important
}

.simplebar-track.simplebar-vertical {
	width: 10px !important;
	right: 2px !important
}

.simplebar-track.simplebar-horizontal {
	height: 10px !important;
	bottom: 2px !important
}

.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
	background-image: linear-gradient(180deg, #1a365d 0%, #3375d2 55%, #3aa61a 100%) !important;
	background-color: transparent !important
}

html.dark-theme .simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
	background-image: linear-gradient(180deg, #2a4a7a 0%, #3375d2 55%, #2f7a1a 100%) !important;
	background-color: transparent !important
}

.table-responsive,
.modal-body,
.select2-results__options,
.page-wrapper,
.page-content {
	scrollbar-width: thin;
	scrollbar-color: var(--sb-thumb-solid) var(--sb-track)
}



body {

	font-size: 14px;

	color: #4c5258;

	letter-spacing: .5px;

	background: linear-gradient(160deg, rgba(26, 54, 93, 0.15) 0%, #ffffff 48%, rgba(58, 166, 26, 0.15) 100%) !important;

	overflow-x: hidden;

	font-family: Roboto, sans-serif
}



a {

	text-decoration: none
}



.wrapper {

	width: 100%;

	position: relative
}



.sidebar-wrapper {

	width: 250px;

	height: 100%;

	position: fixed;

	top: 0;

	bottom: 0;

	left: 0;

	background: #fff;

	border-right: 0 solid #e4e4e4;

	z-index: 11;

	box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 2px 6px 0 rgb(206 206 238 / 54%) !important;

	transition: all .2s ease-out
}



.sidebar-header {

	width: 250px;

	height: 60px;

	display: flex;

	align-items: center;

	position: fixed;

	top: 0;

	bottom: 0;

	padding: 0 15px;

	z-index: 5;

	background: #fff;

	background-clip: padding-box;

	border-bottom: 1px solid #e4e4e4
}



.logo-icon {
	width: auto;
	max-width: 140px;
	height: auto;
	max-height: 42px;
	object-fit: contain;
	display: block;
}



.logo-text {

	font-size: 22px;

	margin-left: 10px;

	margin-bottom: 0;

	letter-spacing: 1px;

	color: #1a365d;

}



.toggle-icon {

	font-size: 22px;

	cursor: pointer;

	color: #1a365d
}

.toggle-icons {

	display: none;
	width: auto;
	max-width: 42px;
	max-height: 42px;
	height: auto;
	object-fit: contain;

}


.topbar {

	position: fixed;

	top: 0;

	left: 250px;

	right: 0;

	height: 60px;

	background: #fff;

	border-bottom: 1px solid rgb(228 228 228 / 0%);

	z-index: 10;

	-webkit-box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 0px 6px 0 rgb(206 206 238 / 54%);

	box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 0px 6px 0 rgb(206 206 238 / 54%);

}



.topbar .navbar {

	width: 100%;

	height: 60px;

	padding-left: 1.5rem;

	padding-right: 1.5rem;

}



.page-wrapper {

	height: 100%;

	margin-top: 60px;

	margin-bottom: 30px;

	margin-left: 250px
}



.page-content {

	padding: 1.5rem 1.5rem 0.7rem 1.5rem
}



.page-footer {

	background: #fff;

	left: 250px;

	right: 0;

	bottom: 0;

	position: fixed;

	text-align: center;

	padding: 7px;

	font-size: 14px;

	border-top: 1px solid #e4e4e4;

	z-index: 3
}



.wrapper.toggled .topbar {

	left: 70px
}



.wrapper.toggled .page-wrapper {

	margin-left: 70px
}



.wrapper.toggled .page-footer {

	left: 70px
}



.sidebar-wrapper ul {

	padding: 0;

	margin: 0;

	list-style: none;

	background: 0 0
}



.sidebar-wrapper .metismenu {

	background: 0 0;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;

	padding: 10px;

	margin-top: 60px;

	-webkit-box-orient: vertical;

	-webkit-box-direction: normal;

	-ms-flex-direction: column;

	flex-direction: column
}



.sidebar-wrapper .metismenu li+li {

	margin-top: 5px
}



.sidebar-wrapper .metismenu li:first-child {

	margin-top: 5px
}



.sidebar-wrapper .metismenu li:last-child {

	margin-bottom: 5px
}



.sidebar-wrapper .metismenu>li {

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;

	-webkit-box-orient: vertical;

	-webkit-box-direction: normal;

	-ms-flex-direction: column;

	flex-direction: column;

	position: relative
}



.sidebar-wrapper .metismenu a {

	position: relative;

	display: flex;

	align-items: center;

	justify-content: left;

	padding: 6px 16px;

	font-size: 15px;

	color: #5f5f5f;

	outline-width: 0;

	text-overflow: ellipsis;

	overflow: hidden;

	letter-spacing: .5px;

	border-radius: 0.625rem;

	transition: all .3s ease-out
}



.sidebar-wrapper .metismenu a .parent-icon {

	font-size: 24px;

	line-height: 1;

	color: inherit
}



.sidebar-wrapper .metismenu a .menu-title {

	margin-left: 10px;

	color: inherit
}



.sidebar-wrapper .metismenu ul a {

	padding: 6px 15px 6px 20px;

	font-size: 15px;

	border: 0
}



.sidebar-wrapper .metismenu ul a i {

	margin-right: 14px;

}



.sidebar-wrapper .metismenu ul {

	background: #fff
}



.sidebar-wrapper .metismenu ul ul a {

	padding: 8px 15px 8px 30px
}



.sidebar-wrapper .metismenu ul ul ul a {

	padding: 8px 15px 8px 45px
}



.sidebar-wrapper .metismenu .mm-active>a,
.sidebar-wrapper .metismenu a:active,
.sidebar-wrapper .metismenu a:focus,
.sidebar-wrapper .metismenu a:hover {
	color: #1a365d;
	text-decoration: none;
	background-color: rgba(26, 54, 93, 0.12);
}

.menu-label {

	padding: 20px 15px 5px 5px;

	color: #b0afaf;

	text-transform: uppercase;

	font-size: 12px;

	letter-spacing: .5px
}



.metismenu .has-arrow:after {

	position: absolute;

	content: "";

	width: .5em;

	height: .5em;

	border-style: solid;

	border-width: 1.2px 0 0 1.2px;

	border-color: #5f5f5f transparent transparent #5f5f5f;

	right: 15px;

	transform: rotate(-45deg) translateY(-50%);

	transform-origin: top;

	top: 50%;

	transition: all .3s ease-out
}

.sidebar-wrapper .metismenu .mm-active>a.has-arrow:after,
.sidebar-wrapper .metismenu a.has-arrow:hover:after,
.sidebar-wrapper .metismenu a.has-arrow:focus:after {
	border-color: #1a365d transparent transparent #1a365d
}



@media screen and (min-width:1025px) {

	.wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .logo-text {

		display: none
	}

	.wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper {

		width: 70px
	}

	.wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header {

		width: 70px
	}

	.wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .toggle-icon {

		display: none
	}

	.wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .toggle-icons {

		display: block
	}

	.wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header {

		justify-content: center
	}

	.wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header {

		width: 70px
	}

	.wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu a {

		justify-content: center
	}

	.wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu .menu-title {

		display: none
	}

	.wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu li ul {

		display: none
	}

	.wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu li.menu-label {

		display: none
	}

	.wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .metismenu .has-arrow:after {

		display: none
	}

	.email-toggle-btn {

		display: none !important
	}

	.chat-toggle-btn {

		display: none !important
	}

}



.product-show {

	font-size: 18px;

	left: 15px
}





.product-discount {

	width: 2.5rem;

	height: 2.5rem;

	font-size: 14px;

	background-color: #fff;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 50%
}



.color-indigator-item {

	width: 1.2rem;

	height: 1.2rem;

	background-color: #e6e0e0;

	border-radius: 50%;

	cursor: pointer
}



.product-grid .card {

	-webkit-transition: all .2s;

	-o-transition: all .2s;

	transition: all .2s
}



@media (min-width:992px) {

	.product-grid .card:hover {

		margin-top: -.25rem;

		margin-bottom: .25rem;

		-webkit-box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .3);

		box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .3)
	}

}



.back-to-top {

	display: none;

	width: 40px;

	height: 40px;

	line-height: 40px;

	text-align: center;

	font-size: 26px;

	color: #fff !important;

	position: fixed;

	border-radius: 10px;

	bottom: 20px;

	right: 12px;

	background-color: #004de6;

	z-index: 5
}



.back-to-top:hover {

	color: #fff;

	background-color: #000;

	transition: all .5s
}



.breadcrumb-title {

	font-size: 20px;

	border-right: 1.5px solid #aaa4a4
}



.page-breadcrumb .breadcrumb li.breadcrumb-item {

	font-size: 16px
}



.page-breadcrumb .breadcrumb-item+.breadcrumb-item::before {

	display: inline-block;

	padding-right: .5rem;

	color: #6c757d;

	font-family: LineIcons;

	content: "\ea5c"

}



.icon-badge {

	width: 45px;

	height: 45px;

	background: #f2f2f2;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 50%
}



.widgets-icons {

	width: 50px;

	height: 50px;

	display: flex;

	align-items: center;

	justify-content: center;

	background-color: #ededed;

	font-size: 26px;

	border-radius: 10px
}



.widgets-icons-2 {

	width: 56px;

	height: 56px;

	display: flex;

	align-items: center;

	justify-content: center;

	background-color: #ededed;

	font-size: 27px;

	border-radius: 10px
}



#geographic-map {

	width: 100%;

	height: 440px
}



#geographic-map-2 {



	width: 100%;



	height: 300px
}



#geographic-map-3 {



	width: 100%;



	height: 350px
}



.product-img {

	width: 60px;

	height: 60px;

	background-color: #fff;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 10px;

	border: 1px solid #e6e6e6
}



.product-img img {

	width: 60px;

	height: 60px;

	padding: 6px
}



.product-img-2 {

	width: 45px;

	height: 45px;

	background-color: #fff;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 10px;

	border: 1px solid #e6e6e6
}



.product-img-2 img {

	width: 45px;

	height: 45px;

	padding: 1px
}



.border-light-2 {

	border-color: rgb(255 255 255 / 12%) !important;

}



.product-list {

	position: relative;

	height: 380px
}



.dashboard-top-countries {

	position: relative;

	height: 360px
}



.customers-list {

	position: relative;

	height: 450px
}



.store-metrics {

	position: relative;

	height: 450px;

}



.product-list-2 {

	position: relative;

	height: 450px;

}



.product-list .row {

	background-color: #f8f9fa;

	-webkit-transition: all .2s;

	-o-transition: all .2s;

	transition: all .2s
}



@media (min-width:992px) {

	.product-list .row:hover {

		background-color: #fff;

		margin-top: -.25rem;

		margin-bottom: .25rem;

		-webkit-box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .2);

		box-shadow: 0 .25rem .5rem 0 rgba(0, 0, 0, .2)
	}

}



.recent-product-img {

	width: 40px;

	height: 40px;

	background-color: #fbfbfb;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 10px;

	border: 1px solid #e6e6e6
}



.recent-product-img img {

	width: 40px;

	height: 40px;

	padding: 6px
}



.theme-icons {

	background-color: #fff
}



.lead-table .table {

	border-collapse: separate;

	border-spacing: 0 10px
}



.fm-menu .list-group a {

	font-size: 16px;

	color: #5f5f5f;

	display: flex;

	align-items: center
}



.fm-menu .list-group a i {

	font-size: 23px
}



.fm-menu .list-group a:hover {

	background: #004de6;

	color: #fff;

	transition: all .2s ease-out
}



.fm-file-box {

	font-size: 25px;

	background: #e9ecef;

	width: 44px;

	height: 44px;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: .25rem
}



.fm-icon-box {

	font-size: 32px;

	background: #fff;

	width: 52px;

	height: 52px;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: .25rem
}



.user-plus {

	width: 33px;

	height: 33px;

	margin-left: -14px;

	line-height: 33px;

	background: #fff;

	border-radius: 50%;

	text-align: center;

	font-size: 22px;

	cursor: pointer;

	border: 1px dotted #a9b2bb;

	color: #404142
}



.user-groups img {

	margin-left: -14px;

	border: 1px solid #e4e4e4;

	padding: 2px;

	cursor: pointer
}



.contacts-social a {

	font-size: 16px;

	width: 36px;

	height: 36px;

	line-height: 36px;

	background: #fff;

	border: 1px solid #eeecec;

	text-align: center;

	border-radius: 50%;

	color: #2b2a2a
}



.customers-contacts a {

	font-size: 16px;

	width: 34px;

	height: 34px;

	display: flex;

	align-items: center;

	justify-content: center;

	background: #fff;

	border: 1px solid #eeecec;

	text-align: center;

	border-radius: 50%;

	color: #2b2a2a
}



/* Global action icons (lists) — match clients-icon-btn */
.client-actions {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 4px;
	white-space: nowrap;
	width: max-content
}

.client-actions > span {
	display: inline-flex;
	flex-shrink: 0
}

.clients-icon-btn,
.order-actions a,
.order-actions-primary a,
.order-actions-danger a,
.order-actions-warning a,
.order-actions-success a {
	width: 28px;
	height: 28px;
	padding: 0;
	margin: 0 !important;
	border: 0;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	background: #fff;
	color: #1a365d !important;
	font-size: 15px;
	line-height: 1;
	text-decoration: none !important;
	box-shadow: inset 0 0 0 1px rgba(26, 54, 93, 0.14);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer
}

.clients-icon-btn .bx,
.order-actions a .bx,
.order-actions-primary a .bx,
.order-actions-danger a .bx,
.order-actions-warning a .bx,
.order-actions-success a .bx {
	font-size: 15px;
	line-height: 1 !important;
	pointer-events: none
}

.clients-icon-btn:hover,
.clients-icon-btn.active,
.clients-icon-btn:focus,
.order-actions a:hover,
.order-actions-primary a:hover,
.order-actions-danger a:hover,
.order-actions-warning a:hover,
.order-actions-success a:hover {
	color: #fff !important;
	background: #1a365d !important;
	box-shadow: none
}

.order-actions-danger a,
.clients-icon-btn.text-danger {
	color: #f62718 !important;
	box-shadow: inset 0 0 0 1px rgba(246, 39, 24, 0.28)
}

.order-actions-danger a:hover,
.clients-icon-btn.text-danger:hover {
	background: #f62718 !important;
	color: #fff !important
}

.order-actions-warning a {
	color: #e6a700 !important;
	box-shadow: inset 0 0 0 1px rgba(255, 193, 7, 0.35)
}

.order-actions-warning a:hover {
	background: #e6a700 !important;
	color: #fff !important
}

.order-actions-success a {
	color: #31802e !important;
	box-shadow: inset 0 0 0 1px rgba(49, 128, 46, 0.3)
}

.order-actions-success a:hover {
	background: #31802e !important;
	color: #fff !important
}

.client-actions .team-direct,
.client-actions a.team-direct,
.clients-icon-btn.team-direct {
	background: rgba(26, 54, 93, 0.12) !important;
	color: #1a365d !important;
	box-shadow: inset 0 0 0 1px rgba(26, 54, 93, 0.2) !important
}

.client-actions .team-left,
.client-actions a.team-left,
.clients-icon-btn.team-left {
	background: rgba(13, 202, 240, 0.18) !important;
	color: #0aa2c0 !important;
	box-shadow: inset 0 0 0 1px rgba(13, 202, 240, 0.35) !important
}

.client-actions .team-right,
.client-actions a.team-right,
.clients-icon-btn.team-right {
	background: rgba(0, 77, 230, 0.12) !important;
	color: #004de6 !important;
	box-shadow: inset 0 0 0 1px rgba(0, 77, 230, 0.28) !important
}

/* Table header Add buttons */
.page-content .btn.btn-primary,
#clientAddPage .btn.btn-primary,
#clientsPage .btn.btn-primary {
	border: 0;
	box-shadow: none
}

.page-content .btn.btn-primary.btn-sm {
	min-height: 32px;
	padding: 6px 12px;
	font-size: 13px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	gap: 4px
}


.auth-cover-left {

	display: flex;

	background-color: #f7f7ff;

	min-height: 100vh;



}



.auth-cover-right {

	display: flex;

	background-color: #ffffff;

	min-height: 100vh;

}



.auth-img-cover-login {

	-webkit-transform: scaleX(-1);

	transform: scaleX(-1);

}







.error {

	color: #dc3545;

}



form select.error,

form textarea.error,

form input.error,

form input.error:focus,

form textarea.error:focus,

form select.error:focus {

	border-color: #ea5455 !important;

}



.customers-list .customers-list-item {

	-webkit-transition: all .2s;

	-o-transition: all .2s;

	transition: all .2s
}



@media (min-width:992px) {

	.customers-list .customers-list-item:hover {

		background-color: #f8f9fa;

		border-radius: 10px;

		margin-top: -.25rem;

		margin-bottom: .25rem;

		-webkit-box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .2);

		box-shadow: 0 .25rem .5rem 0 rgba(0, 0, 0, .2)
	}

}



.right-15 {

	right: 15px !important
}



.font-13 {

	font-size: 13px
}



.font-14 {

	font-size: 14px
}



.font-18 {

	font-size: 18px
}



.font-20 {

	font-size: 20px
}



.font-22 {

	font-size: 22px
}



.font-24 {

	font-size: 24px
}



.font-30 {

	font-size: 30px
}



.font-35 {

	font-size: 35px
}



.font-50 {

	font-size: 50px
}



.font-60 {

	font-size: 60px
}



.radius-30 {

	border-radius: 30px
}



.radius-10 {

	border-radius: 10px
}



.radius-15 {

	border-radius: 15px
}



.card.glass-ui {

	background: rgba(255, 255, 255, 0.52);

	backdrop-filter: blur(18px);

	-webkit-backdrop-filter: blur(18px);

	border: 1px solid rgba(255, 255, 255, 0.78);

	box-shadow: 0 8px 28px rgba(26, 54, 93, 0.1);

	border-radius: 20px

}



.card.glass-ui .table {

	--bs-table-bg: transparent;

	--bs-table-striped-bg: rgba(26, 54, 93, 0.05);

	background-color: transparent

}



.card.glass-ui .table thead th {

	background: rgba(255, 255, 255, 0.42);

	border-color: rgba(26, 54, 93, 0.08);

	color: #1a365d

}



.card.glass-ui .table td {

	border-color: rgba(26, 54, 93, 0.08);

	vertical-align: middle

}



.shimmer {

	position: relative;

	overflow: hidden;

	background: rgba(26, 54, 93, 0.08)

}



.shimmer::after {

	content: "";

	position: absolute;

	inset: 0;

	transform: translateX(-100%);

	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);

	animation: shimmer-move 1.15s infinite

}



@keyframes shimmer-move {

	100% {

		transform: translateX(100%)

	}

}



.shimmer-line {

	height: 12px;

	border-radius: 8px;

	background: rgba(26, 54, 93, 0.1)

}



.shimmer-avatar {

	width: 45px;

	height: 45px;

	border-radius: 10px;

	flex-shrink: 0;

	background: rgba(26, 54, 93, 0.1)

}



.shimmer-row {

	display: flex;

	align-items: center;

	gap: 12px;

	padding: 12px 0;

	border-bottom: 1px solid rgba(26, 54, 93, 0.06)

}



.shimmer-action {

	width: 34px;

	height: 34px;

	border-radius: 20%

}



#clientsListBody.is-loading #clientsShimmer {

	display: block !important

}



#clientsListBody.is-loading #clientsTableWrap,
#clientsListBody.is-loading #example_wrapper,
#clientsListBody.is-loading #clientsCardView,
#clientsListBody.is-loading table.dataTable {

	display: none !important

}



#clientsListBody:not(.is-loading) #clientsShimmer {

	display: none !important

}



#clientsPage .row.row-cols-xl-4 > .col {

	margin-bottom: 1.25rem

}



#clientsPage .card.glass-ui > .card-body {

	padding: 1.25rem

}



#clientsPage .members-panel {

	overflow: hidden;

	margin-bottom: 12px !important

}



#clientsPage .members-panel > .card-body {

	padding: 12px

}



#clientsPage .members-panel .row.row-cols-xl-4 > .col {

	margin-bottom: 0

}



#clientsPage .members-section-title {

	display: flex;

	align-items: center;

	gap: 6px;

	margin: 0 0 8px;

	color: #1a365d;

	font-weight: 600;

	font-size: 13px;

	line-height: 1

}



#clientsPage .members-section-title i {

	font-size: 16px;

	line-height: 1

}



#clientsPage .members-section-title-gap {

	margin-top: 12px

}



#clientsPage .members-stat-card {

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 8px;

	min-height: 0;

	padding: 8px 10px;

	background: rgba(255, 255, 255, 0.42);

	backdrop-filter: blur(12px);

	-webkit-backdrop-filter: blur(12px);

	border: 1px solid rgba(255, 255, 255, 0.7);

	border-radius: 10px;

	border-top: 2px solid #1a365d;

	box-shadow: 0 4px 14px rgba(26, 54, 93, 0.06)

}



#clientsPage .members-stat-active {

	border-top-color: #0dcaf0

}



#clientsPage .members-stat-inactive {

	border-top-color: #f62718

}



#clientsPage .members-stat-new {

	border-top-color: #ffc107

}



#clientsPage .members-stat-card p {

	font-size: 12px;

	line-height: 1.2

}



#clientsPage .members-stat-card h4 {

	color: #32393f;

	margin: 2px 0 0;

	font-size: 18px;

	line-height: 1.2

}



#clientsPage .members-stat-card .widgets-icons {

	width: 32px;

	height: 32px;

	font-size: 16px;

	flex-shrink: 0;

	border-radius: 8px

}



#clientsPage .members-verify-card {

	overflow: hidden;

	background: rgba(255, 255, 255, 0.42);

	backdrop-filter: blur(12px);

	-webkit-backdrop-filter: blur(12px);

	border: 1px solid rgba(255, 255, 255, 0.7);

	border-radius: 10px;

	box-shadow: 0 4px 14px rgba(26, 54, 93, 0.06);

	height: 100%

}



#clientsPage .members-verify-head {

	display: flex;

	align-items: center;

	justify-content: space-between;

	padding: 6px 10px;

	color: #fff;

	font-weight: 600;

	font-size: 13px

}



#clientsPage .members-verify-head i {

	margin-right: 4px;

	font-size: 15px;

	vertical-align: middle

}



#clientsPage .members-verify-head-kyc {

	background: rgba(26, 54, 93, 0.88)

}



#clientsPage .members-verify-head-bank {

	background: rgba(49, 128, 46, 0.88)

}



#clientsPage .members-verify-head-nominee {

	background: rgba(51, 117, 210, 0.88)

}



#clientsPage .members-verify-body {

	padding: 8px 10px 4px

}



#clientsPage .members-verify-row {

	margin-bottom: 6px;

	color: #4c5258;

	font-size: 12px;

	line-height: 1.2

}



#clientsPage .members-verify-dot {

	display: inline-block;

	width: 6px;

	height: 6px;

	border-radius: 50%;

	margin-right: 5px;

	vertical-align: middle

}



#clientsPage .members-verify-bar {

	height: 3px;

	margin-top: 3px;

	background: rgba(26, 54, 93, 0.08);

	border-radius: 3px

}



#clientsPage .members-verify-bar .progress-bar {

	border-radius: 4px

}



#clientsPage .clients-card-title {

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 12px;

	min-height: 40px;

	margin: 0 0 16px;

	padding: 0 0 16px;

	border-bottom: 1px solid rgba(26, 54, 93, 0.1)

}



#clientsPage .clients-card-heading {

	display: flex;

	align-items: center;

	gap: 10px;

	min-height: 40px

}



#clientsPage .clients-card-heading h5 {

	margin: 0;

	padding: 0;

	line-height: 1;

	font-size: 16px;

	font-weight: 600;

	color: #32393f

}



#clientsPage .clients-title-icon {

	width: 40px;

	height: 40px;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 8px;

	background: rgba(26, 54, 93, 0.08);

	color: #1a365d;

	flex-shrink: 0

}



#clientsPage .clients-title-icon .bx {

	font-size: 18px;

	line-height: 1;

	display: flex;

	align-items: center;

	justify-content: center

}



#clientsPage .clients-header-btns {

	display: flex;

	align-items: center;

	flex-wrap: nowrap;

	gap: 8px;

	height: 40px;

	flex-shrink: 0

}



#clientsPage .clients-btn-group {

	display: flex;

	align-items: center;

	height: 40px;

	padding: 4px;

	gap: 4px;

	border: 1px solid rgba(26, 54, 93, 0.16);

	border-radius: 8px;

	background: rgba(26, 54, 93, 0.05);

	box-sizing: border-box;

	flex-shrink: 0

}

#clientsPage .clients-btn-group .btn {
	white-space: nowrap;
	flex-shrink: 0;
	height: 32px;
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	line-height: 1;
	font-size: 13px
}

#clientsPage .clients-btn-group .btn .bx {
	font-size: 15px;
	line-height: 1
}



#clientsPage .clients-icon-btn {
	width: 28px;
	height: 28px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;
	background: #fff;
	color: #1a365d;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0;
	text-decoration: none;
	box-shadow: inset 0 0 0 1px rgba(26, 54, 93, 0.14);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer
}

#clientsPage .clients-icon-btn .bx {
	font-size: 15px;
	line-height: 1 !important;
	pointer-events: none
}

#clientsPage .clients-icon-btn:hover,
#clientsPage .clients-icon-btn.active,
#clientsPage .clients-icon-btn:focus {
	color: #fff !important;
	background: #1a365d;
	background-image: none;
	border: 0;
	outline: 0;
	box-shadow: none
}

#clientsPage a.clients-icon-btn:hover,
#clientsPage a.clients-icon-btn:focus,
#clientsPage a.clients-icon-btn:hover .bx,
#clientsPage a.clients-icon-btn:focus .bx {
	color: #fff !important
}



@media (max-width: 767.98px) {

	#clientsPage .clients-card-title,
	#clientsPage .clients-header-btns {

		flex-wrap: wrap;

		height: auto

	}

}



#clientsPage .dt-buttons {

	display: none !important

}



#clientsPage .client-actions {

	display: flex;

	align-items: center;

	flex-wrap: nowrap;

	gap: 4px;

	white-space: nowrap;
	width: max-content
}

.impersonate-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 16px;
	padding: 10px 14px;
	border-radius: 10px;
	background: rgba(26, 54, 93, 0.1);
	border: 1px solid rgba(26, 54, 93, 0.18);
	color: #1a365d;
	font-size: 14px
}

.impersonate-bar .btn {
	padding: 6px 14px;
	font-size: 13px
}

#clientsPage .client-actions > span {

	display: inline-flex;

	flex-shrink: 0

}



#clientsPage .client-actions a {

	margin: 0 !important;

	width: 28px;

	height: 28px;

	font-size: 15px;

	flex-shrink: 0

}



#clientsPage table.dataTable td.client-action-cell,

#clientsPage table.dataTable th.client-action-cell {

	white-space: nowrap;

	width: 1%;

	padding-left: 10px;

	padding-right: 10px

}



#clientsPage .client-actions .team-direct,
#clientsPage .client-actions a.team-direct,
#clientsPage .clients-icon-btn.team-direct {
	background: rgba(26, 54, 93, 0.12) !important;
	color: #1a365d !important;
	box-shadow: inset 0 0 0 1px rgba(26, 54, 93, 0.2) !important
}

#clientsPage .client-actions .team-left,
#clientsPage .client-actions a.team-left,
#clientsPage .clients-icon-btn.team-left {
	background: rgba(13, 202, 240, 0.18) !important;
	color: #0aa2c0 !important;
	box-shadow: inset 0 0 0 1px rgba(13, 202, 240, 0.35) !important
}

#clientsPage .client-actions .team-right,
#clientsPage .client-actions a.team-right,
#clientsPage .clients-icon-btn.team-right {
	background: rgba(0, 77, 230, 0.12) !important;
	color: #004de6 !important;
	box-shadow: inset 0 0 0 1px rgba(0, 77, 230, 0.28) !important
}

#clientsPage .client-verify-inline {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px
}

#clientsPage .client-verify-inline .btn {
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap
}

#clientsPage .client-actions .client-verify-inline {
	margin-left: 4px
}

#clientAddPage .client-verify-actions,
#clientAddPage .verify-hero-side {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap
}

#clientAddPage .verify-hero-btns {
	display: flex;
	gap: 8px;
	flex-wrap: wrap
}



#clientsPage .member-status-badge {

	display: inline-flex;

	align-items: center;

	font-size: 11px;

	font-weight: 600;

	padding: 4px 10px;

	border-radius: 20px;

	line-height: 1.2;

	white-space: nowrap

}



#clientsPage .member-status-verified {

	background: #004de62f;

	color: #004de6

}



#clientsPage .member-status-pending {

	background: #ffc1072f;

	color: #b38600

}



#clientsPage .member-status-submitted {

	background: rgba(13, 202, 240, 0.18);

	color: #0aa2c0

}



#clientsPage .member-status-rejected {

	background: #f627182f;

	color: #f62718

}



#clientsPage .member-status-none {

	background: rgba(76, 82, 88, 0.12);

	color: #4c5258

}



#clientsPage .card.glass-ui .table,
#clientsPage table.dataTable {

	--bs-table-striped-bg: rgba(26, 54, 93, 0.04);

	--bs-table-bg: #fff;

	border-collapse: separate !important;

	border-spacing: 0 !important;

	margin-top: 16px !important;

	margin-bottom: 16px !important;

	border: 1px solid rgba(26, 54, 93, 0.12);

	border-radius: 12px;

	overflow: hidden

}



#clientsPage .card.glass-ui .table thead th,
#clientsPage table.dataTable thead th {

	background: #1a365d !important;

	color: #fff !important;

	font-weight: 500;

	padding: 12px 14px;

	border: 0 !important;

	border-bottom: 0 !important;

	white-space: nowrap;

	vertical-align: middle;

	box-sizing: border-box

}



#clientsPage table.dataTable thead th:first-child {

	border-top-left-radius: 12px

}



#clientsPage table.dataTable thead th:last-child {

	border-top-right-radius: 12px

}



#clientsPage table.dataTable tbody tr:last-child td:first-child {

	border-bottom-left-radius: 12px

}



#clientsPage table.dataTable tbody tr:last-child td:last-child {

	border-bottom-right-radius: 12px

}



#clientsPage .card.glass-ui .table tbody td,
#clientsPage table.dataTable tbody td {

	padding: 12px 14px;

	vertical-align: middle;

	border: 0 !important;

	border-bottom: 1px solid rgba(26, 54, 93, 0.08) !important;

	box-sizing: border-box

}



#clientsPage table.dataTable tbody tr:last-child td {

	border-bottom: 0 !important

}



#clientsPage table.dataTable thead th.sorting,
#clientsPage table.dataTable thead th.sorting_asc,
#clientsPage table.dataTable thead th.sorting_desc,
#clientsPage table.dataTable thead th.sorting_asc_disabled,
#clientsPage table.dataTable thead th.sorting_desc_disabled,
.card.glass-ui table.dataTable thead th.sorting,
.card.glass-ui table.dataTable thead th.sorting_asc,
.card.glass-ui table.dataTable thead th.sorting_desc,
.card.glass-ui table.dataTable thead th.sorting_asc_disabled,
.card.glass-ui table.dataTable thead th.sorting_desc_disabled {

	padding-right: 30px !important;

	position: relative

}



#clientsPage table.dataTable thead .sorting:before,
#clientsPage table.dataTable thead .sorting:after,
#clientsPage table.dataTable thead .sorting_asc:before,
#clientsPage table.dataTable thead .sorting_asc:after,
#clientsPage table.dataTable thead .sorting_desc:before,
#clientsPage table.dataTable thead .sorting_desc:after,
#clientsPage table.dataTable thead .sorting_asc_disabled:before,
#clientsPage table.dataTable thead .sorting_asc_disabled:after,
#clientsPage table.dataTable thead .sorting_desc_disabled:before,
#clientsPage table.dataTable thead .sorting_desc_disabled:after,
.card.glass-ui table.dataTable thead .sorting:before,
.card.glass-ui table.dataTable thead .sorting:after,
.card.glass-ui table.dataTable thead .sorting_asc:before,
.card.glass-ui table.dataTable thead .sorting_asc:after,
.card.glass-ui table.dataTable thead .sorting_desc:before,
.card.glass-ui table.dataTable thead .sorting_desc:after,
.card.glass-ui table.dataTable thead .sorting_asc_disabled:before,
.card.glass-ui table.dataTable thead .sorting_asc_disabled:after,
.card.glass-ui table.dataTable thead .sorting_desc_disabled:before,
.card.glass-ui table.dataTable thead .sorting_desc_disabled:after {

	bottom: auto !important;

	top: 50% !important;

	right: 10px !important;

	left: auto !important;

	transform: translateY(-50%);

	color: #fff;

	opacity: 0.4

}



#clientsPage table.dataTable thead .sorting_asc:before,
#clientsPage table.dataTable thead .sorting_desc:after,
.card.glass-ui table.dataTable thead .sorting_asc:before,
.card.glass-ui table.dataTable thead .sorting_desc:after {

	opacity: 1

}



#clientsPage .product-img-2 {

	margin-right: 12px !important

}

#clientsPage .kyc-doc-thumbs {
	display: flex;
	align-items: center;
	gap: 4px;
}

#clientsPage .kyc-doc-thumb {
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid rgba(26, 54, 93, 0.18);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	cursor: pointer;
}

#clientsPage .kyc-doc-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

#clientsPage .kyc-doc-thumb.is-empty {
	color: #bbb;
	cursor: default;
	background: #f6f6f6;
	font-size: 12px;
}

#kycImageModalImg {
	max-width: 100%;
	max-height: 80vh;
}



#clientsPage #clientsCardView {

	padding-top: 16px;

	padding-bottom: 0;

	margin-bottom: 0

}



#clientsPage .dataTables_wrapper > .row:first-child {

	align-items: center;

	margin-bottom: 0

}



#clientsPage .dataTables_wrapper > .row:last-child {

	align-items: center;

	margin-top: 0;

	padding-top: 4px

}



#clientsPage .dataTables_length,
#clientsPage .dataTables_filter,
#clientsPage .dataTables_info,
#clientsPage .dataTables_paginate {

	padding-top: 0;

	padding-bottom: 0

}



#clientsPage .dataTables_length label,
#clientsPage .dataTables_filter label {

	display: flex;

	align-items: center;

	gap: 8px;

	margin: 0;

	font-weight: 400;

	font-size: 14px;

	color: #4c5258;

	white-space: nowrap

}



#clientsPage .dataTables_length select {

	width: auto !important;

	min-width: 72px;

	height: 36px;

	display: inline-block;

	padding: 4px 32px 4px 12px;

	border: 1px solid rgba(26, 54, 93, 0.18);

	border-radius: 8px;

	color: #32393f;

	background-color: #fff;

	background-position: right 10px center;

	font-size: 14px;

	line-height: 1.2;

	box-shadow: none

}



#clientsPage .dataTables_length select:focus,
#clientsPage .dataTables_filter input:focus {

	border-color: #1a365d;

	box-shadow: 0 0 0 0.2rem rgba(26, 54, 93, 0.12);

	outline: 0

}



#clientsPage .dataTables_filter {

	display: flex;

	align-items: center;

	justify-content: flex-end

}



#clientsPage .dataTables_filter input {

	height: 36px;

	width: 200px;

	margin: 0;

	border: 1px solid rgba(26, 54, 93, 0.18);

	border-radius: 8px;

	padding: 0 12px;

	color: #4c5258;

	font-size: 14px

}



#clientsPage .dataTables_wrapper .dataTables_paginate .pagination {

	gap: 4px;

	margin: 0

}



#clientsPage .dataTables_wrapper .dataTables_paginate .page-link {

	min-width: 36px;

	height: 36px;

	padding: 0 10px;

	display: inline-flex;

	align-items: center;

	justify-content: center;

	color: #1a365d !important;

	background: #fff;

	border: 1px solid rgba(26, 54, 93, 0.22);

	border-radius: 6px !important;

	margin: 0

}



#clientsPage .dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
#clientsPage .dataTables_wrapper .dataTables_paginate .page-item.active .page-link:hover {

	color: #fff !important;

	background: #1a365d !important;

	border-color: #1a365d !important

}



#clientsPage .dataTables_wrapper .dataTables_paginate .page-link:hover {

	color: #fff !important;

	background: #1a365d;

	border-color: #1a365d

}



#clientsPage .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {

	color: #6c757d !important;

	background: #f3f3f3;

	border-color: #e4e4e4

}



.row.row-group>div {

	border-right: 1px solid rgba(0, 0, 0, 0.12);

}



.row.row-group>div:last-child {

	border-right: none;

}



.cursor-pointer {



	cursor: pointer
}



.dash-wrapper {

	margin: -1.5rem -1.5rem -3.5rem -1.5rem;

	padding: 1.5rem 1.5rem 3.5rem 1.5rem;

}



.dash-array-chart-box {

	width: 105px;

	height: 90px;

	position: relative;

	top: -15px;

	right: 30px;

}



.chart-container-0 {

	position: relative;

	height: 320px;

}



.chart-container-1 {

	position: relative;

	height: 260px;

}



.chart-container-2 {

	position: relative;

	height: 220px;

}



.chart-container-3 {

	position: relative;

	height: 188px;

}



.chart-container-4 {

	position: relative;

	height: 162px;

}



.chart-container-5 {

	position: relative;

	height: 110px;

}



.chart-container-6 {

	position: relative;

	height: 205px;

}



.chart-container-7 {

	position: relative;

	height: 60px;

}

.chart-container-8 {

	position: relative;

	height: 260px;

}

.chart-container-9 {

	position: relative;

	height: 280px;

}

.chart-container-10 {

	position: relative;

	height: 300px;

	top: 20px;

}

.chart-container-11 {

	position: relative;

	height: 280px;

}



.chart-container-12 {

	position: relative;

	height: 160px;

}

.chart-container-13 {

	position: relative;

	height: 240px;

}

.chart-container-14 {

	position: relative;

	height: 40px;

}



.w_chart {

	position: relative;

	display: inline-block;

	width: 65px !important;

	height: 65px !important;

	text-align: center;

	color: #32393f;

}





.w_chart canvas {

	position: absolute;

	top: 0;

	left: 0;

	width: 65px !important;

	height: 65px !important;

}

.w_percent {

	display: inline-block;

	line-height: 65px !important;

	z-index: 2;

}

.w_percent:after {

	content: '%';

	margin-left: 0.1em;

	font-size: .8em;

}



.chip {

	display: inline-block;

	height: 32px;

	padding: 0 12px;

	margin-right: 1rem;

	margin-bottom: 1rem;

	font-size: 14px;

	font-weight: 500;

	line-height: 32px;

	color: rgba(0, 0, 0, .7);

	cursor: pointer;

	background-color: #f1f1f1;

	border: 1px solid rgba(0, 0, 0, .15);

	border-radius: 16px;

	-webkit-transition: all .3s linear;

	transition: all .3s linear;

	box-shadow: none
}



.chip img {

	float: left;

	width: 32px;

	height: 32px;

	margin: 0 8px 0 -12px;

	border-radius: 50%
}



.chip .closebtn {

	padding-left: 10px;

	font-weight: 700;

	float: right;

	font-size: 16px;

	cursor: pointer
}



.chip.chip-md {

	height: 42px;

	line-height: 42px;

	border-radius: 21px
}



.chip.chip-md img {

	height: 42px;

	width: 42px
}



#invoice {

	padding: 0
}



.invoice {

	position: relative;

	background-color: #fff;

	min-height: 680px;

	padding: 15px
}



.invoice header {

	padding: 10px 0;

	margin-bottom: 20px;

	border-bottom: 1px solid #004de6
}



.invoice .company-details {

	text-align: right
}



.invoice .company-details .name {

	margin-top: 0;

	margin-bottom: 0
}



.invoice .contacts {

	margin-bottom: 20px
}



.invoice .invoice-to {

	text-align: left
}



.invoice .invoice-to .to {

	margin-top: 0;

	margin-bottom: 0
}



.invoice .invoice-details {

	text-align: right
}



.invoice .invoice-details .invoice-id {

	margin-top: 0;

	color: #004de6
}



.invoice main {

	padding-bottom: 50px
}



.invoice main .thanks {

	margin-top: -100px;

	font-size: 2em;

	margin-bottom: 50px
}



.invoice main .notices {

	padding-left: 6px;

	border-left: 6px solid #004de6;

	background: #e7f2ff;

	padding: 10px
}



.invoice main .notices .notice {

	font-size: 1.2em
}



.invoice table {

	width: 100%;

	border-collapse: collapse;

	border-spacing: 0;

	margin-bottom: 20px
}



.invoice table td,

.invoice table th {

	padding: 10px;

	background: #eee;

	border-bottom: 1px solid #fff
}



.invoice table th {

	white-space: nowrap;

	font-weight: 400;

	font-size: 16px
}



.invoice table td h3 {

	margin: 0;

	font-weight: 400;

	color: #004de6;

	font-size: 1.2em
}



.invoice table .qty,

.invoice table .total,

.invoice table .unit {

	text-align: left;

	font-size: 1.2em
}



.invoice table .no {

	color: #fff;

	font-size: 1.6em;

	background: #004de6
}



.invoice table .unit {

	background: #ddd
}



.invoice table .total {

	background: #004de6;

	color: #fff
}



.invoice table tbody tr:last-child td {

	border: none
}



.invoice table tfoot td {

	background: 0 0;

	border-bottom: none;

	white-space: nowrap;

	text-align: right;

	padding: 10px 20px;

	font-size: 1.2em;

	border-top: 1px solid #aaa
}



.invoice table tfoot tr:first-child td {

	border-top: none
}



.invoice table tfoot tr:last-child td {

	color: #004de6;

	font-size: 1.4em;

	border-top: 1px solid #004de6
}



.invoice table tfoot tr td:first-child {

	border: none
}



.invoice footer {

	width: 100%;

	text-align: center;

	color: #777;

	border-top: 1px solid #aaa;

	padding: 8px 0
}



@media print {

	.invoice {

		font-size: 11px !important;

		overflow: hidden !important
	}

	.invoice footer {

		position: absolute;

		bottom: 10px;

		page-break-after: always
	}

	.invoice>div:last-child {

		page-break-before: always
	}

}



.main-row {

	height: 100vh
}



.main-col {

	max-width: 500px;

	min-height: 300px
}



.todo-done {

	text-decoration: line-through
}



.chat-wrapper {

	width: auto;

	height: 600px;

	border-radius: .25rem;

	position: relative;

	background: #fff;

	box-shadow: 0 .1rem .7rem rgba(0, 0, 0, .1)
}



.chat-sidebar {

	width: 340px;

	height: 100%;

	position: absolute;

	background: #fff;

	left: 0;

	top: 0;

	bottom: 0;

	z-index: 2;

	overflow: hidden;

	border-right: 1px solid rgba(0, 0, 0, .125);

	border-top-left-radius: .25rem;

	border-bottom-left-radius: .25rem
}



.chat-sidebar-header {

	width: auto;

	height: auto;

	position: relative;

	background: #fff;

	border-bottom: 1px solid rgba(0, 0, 0, .125);

	border-right: 0 solid rgba(0, 0, 0, .125);

	border-top-left-radius: .25rem;

	padding: 15px
}



.chat-sidebar-content {

	padding: 0
}



.chat-user-online {

	position: relative
}



.chat-sidebar-header .chat-user-online:before {

	content: '';

	position: absolute;

	bottom: 7px;

	left: 40px;

	width: 8px;

	height: 8px;

	border-radius: 50%;

	box-shadow: 0 0 0 2px #fff;

	background: #16e15e
}



.chat-list .chat-user-online:before {

	content: '';

	position: absolute;

	bottom: 7px;

	left: 36px;

	width: 8px;

	height: 8px;

	border-radius: 50%;

	box-shadow: 0 0 0 2px #fff;

	background: #16e15e
}



.chat-content {

	margin-left: 340px;

	padding: 85px 15px 15px 15px
}



.chat-header {

	position: absolute;

	height: 70px;

	left: 340px;

	right: 0;

	top: 0;

	padding: 15px;

	background: #fff;

	border-bottom: 1px solid rgba(0, 0, 0, .125);

	border-top-right-radius: .25rem;

	z-index: 1
}



.chat-footer {

	position: absolute;

	height: 70px;

	left: 340px;

	right: 0;

	bottom: 0;

	padding: 15px;

	background: #f8f9fa;

	border-top: 1px solid rgba(0, 0, 0, .125);

	border-bottom-right-radius: .25rem
}



.chat-footer-menu a {

	display: inline-block;

	width: 40px;

	height: 40px;

	line-height: 40px;

	font-size: 18px;

	color: #6c757d;

	text-align: center;

	border-radius: 50%;

	margin: 3px;

	background-color: #fff;

	border: 1px solid rgb(0 0 0 / 15%)
}



.chat-tab-menu li a.nav-link {

	padding: .3rem .2rem;

	line-height: 1.2;

	color: #4a4b4c
}



.chat-tab-menu .nav-pills .nav-link.active,

.chat-tab-menu .nav-pills .show>.nav-link {

	color: #004de6;

	background-color: rgb(0 123 255 / 0%)
}



.chat-title {

	font-size: 14px;

	color: #272b2f
}



.chat-msg {

	font-size: 13px;

	color: #6c757d
}



.chat-time {

	font-size: 13px;

	color: #6c757d
}



.chat-list {
	position: relative;
	height: 450px
}



.chat-list .list-group-item {

	border: 1px solid rgb(0 0 0 / 0%);

	background-color: transparent
}



.chat-list .list-group-item:hover {

	border: 1px solid rgb(0 0 0 / 0%);

	background-color: rgb(13 110 253 / .12)
}



.chat-list .list-group-item.active {

	background-color: rgb(13 110 253 / .12)
}



.chart-online {

	color: #16e15e
}



.chat-top-header-menu a {

	display: inline-block;

	width: 40px;

	height: 40px;

	line-height: 40px;

	font-size: 18px;

	color: #6c757d;

	text-align: center;

	border-radius: 50%;

	margin: 3px;

	background-color: #fff;

	border: 1px solid rgb(0 0 0 / 15%)
}



.chat-content {

	position: relative;

	width: auto;

	height: 520px
}



.chat-content-leftside .chat-left-msg {

	width: fit-content;

	background-color: #eff2f5;

	padding: .8rem;

	border-radius: 12px;

	max-width: 480px;

	text-align: left;

	border-top-left-radius: 0
}



.chat-content-rightside .chat-right-msg {

	width: fit-content;

	background-color: #dcedff;

	padding: .8rem;

	border-radius: 12px;

	float: right;

	max-width: 480px;

	text-align: left;

	border-bottom-right-radius: 0
}



.chat-toggle-btn {

	width: 40px;

	height: 40px;

	line-height: 40px;

	margin-right: 15px;

	text-align: center;

	font-size: 24px;

	color: #6c757d;

	border-radius: 50%;

	cursor: pointer;

	background-color: #fff;

	border: 1px solid rgb(0 0 0 / 15%)
}



.email-wrapper {

	width: auto;

	height: 600px;

	overflow: hidden;

	border-radius: .25rem;

	position: relative;

	background: #fff;

	box-shadow: 0 .1rem .7rem rgba(0, 0, 0, .1)
}



.email-sidebar {

	width: 250px;

	height: 100%;

	position: absolute;

	background: #fff;

	left: 0;

	top: 0;

	bottom: 0;

	z-index: 2;

	overflow: hidden;

	border-right: 1px solid rgba(0, 0, 0, .125);

	border-top-left-radius: .25rem;

	border-bottom-left-radius: .25rem
}



.email-sidebar-header {

	width: auto;

	height: auto;

	position: relative;

	background: #fff;

	border-bottom: 1px solid rgba(0, 0, 0, .125);

	border-right: 0 solid rgba(0, 0, 0, .125);

	border-top-left-radius: .25rem;

	padding: 15px
}



.email-navigation {

	position: relative;

	padding: 0;

	height: 345px;

	border-bottom: 1px solid rgba(0, 0, 0, .125)
}



.email-header {

	position: absolute;

	height: 70px;

	left: 250px;

	right: 0;

	top: 0;

	padding: 15px;

	background: #fff;

	border-bottom: 1px solid rgba(0, 0, 0, .125);

	border-top-right-radius: .25rem;

	z-index: 1
}



.email-content {

	position: absolute;

	left: 0;

	right: 0;

	width: auto;

	top: 70px;

	height: auto;

	margin-left: 250px;

	padding: 0;

	background: #fff;

	border-top-left-radius: .25rem;

	border-top-right-radius: .25rem
}



.email-navigation a.list-group-item {

	color: #404142;

	padding: .35rem 1.25rem;

	background-color: #fff;

	border-bottom: 1px solid rgb(0 0 0 / 0%);

	transition: all .3s ease-out
}



.email-navigation a.list-group-item:hover {

	background-color: rgb(13 110 253 / .12)
}



.email-navigation a.list-group-item.active {

	color: #0b5ed7;

	font-weight: 600;

	background-color: rgb(13 110 253 / .12)
}



.email-meeting {

	position: absolute;

	left: 0;

	right: 0;

	bottom: 0
}



.email-meeting a.list-group-item {

	color: #404142;

	padding: .35rem 1.25rem;

	background-color: #fff;

	border-bottom: 1px solid rgb(0 0 0 / 0%)
}



.email-meeting a.list-group-item:hover {

	background-color: rgb(0 123 255 / 15%);

	transition: all .3s ease-out
}



.email-hangout .chat-user-online:before {

	content: '';

	position: absolute;

	bottom: 8px;

	left: 45px;

	width: 8px;

	height: 8px;

	border-radius: 50%;

	box-shadow: 0 0 0 2px #fff;

	background: #16e15e
}



.email-toggle-btn {

	width: auto;

	height: auto;

	margin-right: 10px;

	text-align: center;

	font-size: 24px;

	color: #404142;

	border-radius: 0;

	cursor: pointer;

	background-color: #fff;

	border: 0 solid rgb(0 0 0 / 15%)
}



.email-actions {

	width: 230px
}



.email-time {

	font-size: 13px;

	color: #6c757d
}



.email-list div.email-message {

	background: #fff;

	border-bottom: 1px solid rgb(0 0 0 / 8%);

	color: #383a3c
}



.email-list div.email-message:hover {

	transition: all .2s ease-out;

	background-color: #eceef1
}



.email-list {

	position: relative;

	height: 530px
}



.email-star {

	color: #6c757d
}



.email-read-box {

	position: relative;

	height: 530px
}



.compose-mail-popup {

	width: 42%;

	position: fixed;

	bottom: -30px;

	right: 30px;

	z-index: 15;

	display: none
}



.compose-mail-toggled {

	display: block
}



.compose-mail-title {

	font-size: 16px
}



.compose-mail-close {

	width: 25px;

	height: 25px;

	line-height: 25px;

	text-align: center;

	font-size: 14px;

	border-radius: 2px;

	background-color: rgb(255 255 255 / 0%)
}



.compose-mail-close:hover {

	background-color: rgb(255 255 255 / 20%)
}



.nav-primary.nav-tabs .nav-link.active {

	color: #004de6;

	border-color: #004de6 #004de6 #fff
}



.nav-danger.nav-tabs .nav-link.active {

	color: #f41127;

	border-color: #f41127 #f41127 #fff
}



.nav-success.nav-tabs .nav-link.active {

	color: #17a00e;

	border-color: #17a00e #17a00e #fff
}



.nav-warning.nav-tabs .nav-link.active {

	color: #ffc107;

	border-color: #ffc107 #ffc107 #fff
}



.nav-pills-danger.nav-pills .nav-link.active {

	color: #fff;

	background-color: #f41127
}



.nav-pills-success.nav-pills .nav-link.active {

	color: #fff;

	background-color: #17a00e
}



.nav-pills-warning.nav-pills .nav-link.active {

	color: #000;

	background-color: #ffc107
}



.nav-search input.form-control {

	background-color: rgb(255 255 255 / 20%);

	border: 1px solid rgb(255 255 255 / 45%);

	color: #fff
}



.nav-search button[type=submit] {

	background-color: rgb(255 255 255 / 20%);

	border: 1px solid rgb(255 255 255 / 32%);

	color: #fff
}



.nav-search input.form-control::placeholder {

	opacity: .5 !important;

	color: #fff !important
}



.nav-search input.form-control::-ms-input-placeholder {

	color: #fff !important
}



.round-pagination.pagination .page-item:first-child .page-link {

	border-top-left-radius: 30px;

	border-bottom-left-radius: 30px
}



.round-pagination.pagination .page-item:last-child .page-link {

	border-top-right-radius: 30px;

	border-bottom-right-radius: 30px
}



.bg-body {

	background-color: #f7f7ff !important;

}



.bg-light-primary {

	background-color: rgb(0 77 230 / 12%) !important
}



.bg-light-success {

	background-color: rgb(23 160 14 / .11) !important
}



.bg-light-danger {

	background-color: rgb(244 17 39 / .11) !important
}



.bg-light-warning {

	background-color: rgb(255 193 7 / .11) !important
}



.bg-light-info {

	background-color: rgb(13 202 240 / 18%) !important
}



.bg-light-transparent {

	background-color: rgb(0 0 0 / 15%) !important
}



.bg-gradient-deepblue {

	background: #6a11cb;

	background: -webkit-linear-gradient(45deg, #6a11cb, #2575fc) !important;

	background: linear-gradient(45deg, #6a11cb, #2575fc) !important;

}





.bg-gradient-orange {

	background: #fc4a1a;

	background: -webkit-linear-gradient(45deg, #fc4a1a, #f7b733) !important;

	background: linear-gradient(45deg, #fc4a1a, #f7b733) !important;

}



.bg-gradient-ohhappiness {

	background: #00b09b;

	background: -webkit-linear-gradient(45deg, #00b09b, #96c93d) !important;

	background: linear-gradient(45deg, #00b09b, #96c93d) !important;

}





.bg-gradient-ibiza {

	background: #ee0979;

	background: -webkit-linear-gradient(45deg, #ee0979, #ff6a00) !important;

	background: linear-gradient(45deg, #ee0979, #ff6a00) !important;

}



.bg-gradient-scooter {

	background: #17ead9;

	background: -webkit-linear-gradient(45deg, #17ead9, #6078ea) !important;

	background: linear-gradient(45deg, #17ead9, #6078ea) !important;

}





.bg-gradient-bloody {

	background: #f54ea2;

	background: -webkit-linear-gradient(45deg, #f54ea2, #ff7676) !important;

	background: linear-gradient(45deg, #f54ea2, #ff7676) !important;

}





.bg-gradient-quepal {

	background: #42e695;

	background: -webkit-linear-gradient(45deg, #42e695, #3bb2b8) !important;

	background: linear-gradient(45deg, #42e695, #3bb2b8) !important;

}





.bg-gradient-blooker {

	background: #ffdf40;

	background: -webkit-linear-gradient(45deg, #ffdf40, #ff8359) !important;

	background: linear-gradient(45deg, #ffdf40, #ff8359) !important;

}





.bg-gradient-cosmic {

	background: linear-gradient(to right, #8e2de2, #4a00e0) !important
}



.bg-gradient-burning {

	background: linear-gradient(to right, #ff416c, #ff4b2b) !important
}



.bg-gradient-lush {

	background: linear-gradient(to right, #56ab2f, #a8e063) !important
}



.bg-gradient-kyoto {

	background: linear-gradient(to right, #f7971e, #ffd200) !important
}



.bg-gradient-blues {

	background: linear-gradient(to right, #56ccf2, #2f80ed) !important
}



.bg-gradient-moonlit {

	background: linear-gradient(to right, #0f2027, #203a43, #2c5364) !important
}



.split-bg-primary {

	background-color: #0c62e0;

	border-color: #0c62e0
}



.split-bg-secondary {

	background-color: #515a62;

	border-color: #515a62
}



.split-bg-success {

	background-color: #128e0a;

	border-color: #128e0a
}



.split-bg-info {

	background-color: #0bb2d3;

	border-color: #0bb2d3
}



.split-bg-warning {

	background-color: #e4ad07;

	border-color: #e4ad07
}



.split-bg-danger {

	background-color: #e20e22;

	border-color: #e20e22
}



.bg-facebook {

	background-color: #3b5998 !important
}



.bg-twitter {

	background-color: #55acee !important
}



.bg-google {

	background-color: #e52d27 !important
}



.bg-linkedin {

	background-color: #0976b4 !important
}



/* Text Color */



.text-option {

	color: #32393f !important
}



.text-facebook {

	color: #3b5998 !important
}



.text-twitter {

	color: #55acee !important
}



.text-youtube {

	color: #e52d27 !important
}



.text-sky-light {

	color: #b4d2ff;

}







.section-authentication-signin {

	height: auto;

	min-height: 100vh;

	position: relative;

	z-index: 1
}

/* Auth page — soft blue+green bg + mixed logo/icon pattern + torch */
body.auth-page {
	min-height: 100vh;
	background: #e8f0f4;
	overflow-x: hidden
}

body.auth-page .wrapper {
	position: relative;
	z-index: 2;
	background: transparent
}

.auth-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	--torch-x: 50%;
	--torch-y: 40%;
	--torch-size: 280px;
	touch-action: none
}

.auth-bg-pattern-wrap,
.auth-bg-torch {
	will-change: mask-image, -webkit-mask-image, background
}

.auth-bg-base {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 15% 10%, rgba(26, 54, 93, 0.16) 0%, transparent 48%),
		radial-gradient(ellipse at 88% 18%, rgba(49, 128, 46, 0.14) 0%, transparent 44%),
		radial-gradient(ellipse at 70% 88%, rgba(26, 54, 93, 0.12) 0%, transparent 50%),
		radial-gradient(ellipse at 12% 78%, rgba(49, 128, 46, 0.10) 0%, transparent 42%),
		linear-gradient(145deg, #dfe8f2 0%, #e6efe8 48%, #dce9e2 100%)
}

/* Untransformed wrap so torch mask tracks cursor correctly */
.auth-bg-pattern-wrap {
	position: absolute;
	inset: 0;
	z-index: 0;
	-webkit-mask-image: radial-gradient(
		circle var(--torch-size) at var(--torch-x) var(--torch-y),
		#000 0%,
		#000 32%,
		rgba(0, 0, 0, 0.55) 52%,
		rgba(0, 0, 0, 0.18) 72%,
		rgba(0, 0, 0, 0.08) 100%
	);
	mask-image: radial-gradient(
		circle var(--torch-size) at var(--torch-x) var(--torch-y),
		#000 0%,
		#000 32%,
		rgba(0, 0, 0, 0.55) 52%,
		rgba(0, 0, 0, 0.18) 72%,
		rgba(0, 0, 0, 0.08) 100%
	)
}

/* Mixed logo + ecommerce icons — full viewport cover */
.auth-bg-pattern {
	position: absolute;
	inset: -40px;
	display: grid;
	grid-template-columns: repeat(auto-fill, 68px);
	grid-auto-rows: 68px;
	gap: 8px 10px;
	padding: 8px;
	justify-content: center;
	align-content: start;
	transform: rotate(-5deg) scale(1.12);
	transform-origin: center;
	min-height: calc(100vh + 80px)
}

.auth-pat-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	transform: rotate(var(--rot, 0deg))
}

.auth-pat-item.is-logo img {
	width: 36px;
	height: 36px;
	object-fit: contain;
	opacity: 0.85
}

.auth-pat-item.is-icon i {
	font-size: 28px;
	line-height: 1;
	color: #1a365d;
	opacity: 0.8
}

.auth-pat-item.is-icon:nth-child(3n) i { color: #31802e }
.auth-pat-item.is-icon:nth-child(4n) i { color: #1a365d }
.auth-pat-item.is-icon:nth-child(6n) i { font-size: 22px }
.auth-pat-item.is-icon:nth-child(7n) i { font-size: 30px; color: #31802e }

/* Soft torch glow on top */
.auth-bg-torch {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(
		circle var(--torch-size) at var(--torch-x) var(--torch-y),
		rgba(255, 255, 255, 0.28) 0%,
		rgba(180, 220, 255, 0.12) 28%,
		rgba(140, 190, 150, 0.06) 48%,
		transparent 70%
	);
	mix-blend-mode: soft-light
}

.section-authentication-signin .auth-card {
	position: relative;
	z-index: 2;
	box-shadow: 0 14px 40px rgba(26, 54, 93, 0.12)
}

@media screen and (max-width: 767px) {
	.auth-bg {
		--torch-size: 210px
	}
	body.auth-page {
		touch-action: pan-y
	}
	.auth-bg-pattern {
		grid-template-columns: repeat(auto-fill, 56px);
		grid-auto-rows: 56px;
		gap: 6px
	}
	.auth-pat-item {
		width: 56px;
		height: 56px
	}
	.auth-pat-item.is-logo img {
		width: 26px;
		height: 26px
	}
	.auth-pat-item.is-icon i {
		font-size: 20px
	}
}

.section-authentication-signin .auth-brand-logo {
	width: 110px;
	height: auto
}

.auth-back-home {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	font-weight: 600;
	color: #1a365d !important;
	text-decoration: none !important;
}
.auth-back-home i {
	font-size: 18px;
	line-height: 1;
}
.auth-back-home:hover {
	color: #31802e !important;
	text-decoration: underline !important;
}

.section-authentication-signin .form-control {
	height: 38px;
	padding: 0.375rem 0.75rem;
	font-size: 14px;
	line-height: 1.5;
	color: #32393f;
	background-color: #fff;
	border: 1px solid #ced4da;
	border-radius: 8px;
	box-shadow: none
}

.section-authentication-signin .form-control:focus {
	border-color: #1a365d;
	box-shadow: 0 0 0 0.2rem rgba(26, 54, 93, 0.12);
	background-color: #fff
}

.section-authentication-signin .input-group {
	flex-wrap: nowrap;
	height: 38px;
	border: 1px solid #ced4da;
	border-radius: 8px;
	overflow: hidden;
	background: #fff
}

.section-authentication-signin .input-group .form-control,
.section-authentication-signin .input-group .input-group-text {
	height: 38px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: #fff
}

.section-authentication-signin .input-group .input-group-text {
	width: 42px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1a365d;
	cursor: pointer
}

.section-authentication-signin .input-group:focus-within {
	border-color: #1a365d;
	box-shadow: 0 0 0 0.2rem rgba(26, 54, 93, 0.12)
}

.authentication-forgot {

	height: 100vh;

	padding: 0 1rem
}



.authentication-reset-password {

	height: 100vh;

	padding: 0 1rem
}



.authentication-lock-screen {

	height: 100vh;

	padding: 0 1rem
}



.error-404 {

	height: 100vh;

	padding: 0 1rem
}



.error-social a {

	display: inline-block;

	width: 40px;

	height: 40px;

	line-height: 40px;

	font-size: 18px;

	color: #fff;

	text-align: center;

	border-radius: 50%;

	margin: 5px;

	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important
}



.bg-login {

	background-image: url(../images/login-images/bg-login-img.jpg);

	background-size: cover;

	background-position: center;

	background-repeat: no-repeat;

	background-attachment: fixed
}



.bg-forgot {

	background-image: url(../images/login-images/bg-forgot-password.jpg);

	background-size: cover;

	background-position: center;

	background-repeat: no-repeat;

	background-attachment: fixed
}



.bg-lock-screen {

	background-image: url(../images/login-images/bg-lock-screen.jpg);

	background-size: cover;

	background-position: center;

	background-repeat: no-repeat;

	background-attachment: fixed
}



.login-separater span {

	position: relative;

	top: 26px;

	margin-top: -10px;

	background-color: #fff;

	padding: 5px;

	font-size: 12px;

	color: #cbcbcb;

	z-index: 1
}



.btn i {

	vertical-align: middle;

	font-size: 1.3rem;

	margin-top: -1em;

	margin-bottom: -1em;

	margin-right: 5px
}





.btn-inverse-primary {

	color: #004de6;

	background-color: rgba(0, 140, 255, 0.18);

	border-color: rgb(209, 234, 255);

}



.btn-inverse-primary:hover {

	color: #004de6;

	background-color: rgba(0, 140, 255, 0.18);

	border-color: rgba(0, 140, 255, 0.18);

}



.btn-inverse-primary:focus {

	color: #004de6;

	background-color: rgba(0, 140, 255, 0.18);

	border-color: rgba(0, 140, 255, 0.18);

	box-shadow: 0 0 0 .25rem rgba(49, 132, 253, .3)
}





.btn-inverse-secondary {

	color: #75808a;

	background-color: rgba(117, 128, 138, 0.18);

	border-color: rgb(230, 232, 234);

}



.btn-inverse-secondary:hover {

	color: #75808a;

	background-color: rgba(117, 128, 138, 0.18);

	border-color: rgba(117, 128, 138, 0.18);

}



.btn-inverse-success {

	color: #3a9b51;

	background-color: rgba(21, 202, 32, 0.18);

	border-color: rgb(212, 246, 214);

}



.btn-inverse-success:hover {

	color: #3a9b51;

	background-color: rgba(21, 202, 32, 0.18);

	border-color: rgba(21, 202, 32, 0.18);

}

.btn-inverse-success:focus {

	color: #3a9b51;

	background-color: rgba(21, 202, 32, 0.18);

	border-color: rgba(21, 202, 32, 0.18);

	box-shadow: 0 0 0 .25rem rgb(23 160 14 / 32%)
}



.btn-inverse-danger {

	color: #fd3550;

	background-color: rgba(253, 53, 80, 0.18);

	border-color: rgb(255, 218, 223);

}



.btn-inverse-danger:hover {

	color: #fd3550;

	background-color: rgba(253, 53, 80, 0.18);

	border-color: rgba(253, 53, 80, 0.18);

}

.btn-inverse-danger:focus {

	color: #fd3550;

	background-color: rgba(253, 53, 80, 0.18);

	border-color: rgba(253, 53, 80, 0.18);

	box-shadow: 0 0 0 .25rem rgba(225, 83, 97, .3)
}





.btn-inverse-warning {

	color: #ff9700;

	background-color: rgba(255, 151, 0, 0.18);

	border-color: rgb(255, 236, 209);

}



.btn-inverse-warning:hover {

	color: #ff9700;

	background-color: rgba(255, 151, 0, 0.18);

	border-color: rgba(255, 151, 0, 0.18);

}



.btn-inverse-warning:focus {

	color: #ff9700;

	background-color: rgba(255, 151, 0, 0.18);

	border-color: rgba(255, 151, 0, 0.18);

	box-shadow: 0 0 0 .25rem rgba(217, 164, 6, .3)
}



.btn-inverse-info {

	color: #0dceec;

	background-color: rgba(13, 206, 236, 0.18);

	border-color: rgb(211, 246, 252);

}



.btn-inverse-info:hover {

	color: #0dceec;

	background-color: rgba(13, 206, 236, 0.18);

	border-color: rgba(13, 206, 236, 0.18);

}



.btn-inverse-light {

	color: #a7aaaa;

	background-color: rgba(233, 234, 234, 0.2);

	border-color: rgb(251, 251, 251);

}



.btn-inverse-light:hover {

	color: #a7aaaa;

	background-color: rgba(233, 234, 234, 0.2);

	border-color: rgba(233, 234, 234, 0.2);

}



.btn-inverse-dark {

	color: #223035;

	background-color: rgba(34, 48, 53, 0.2);

	border-color: #d7d9da;

}



.btn-inverse-dark:hover {

	color: #223035;

	background-color: rgba(34, 48, 53, 0.2);

	border-color: rgba(34, 48, 53, 0.2);

}



.btn-facebook,

.btn-facebook:hover {

	box-shadow: 0 2px 2px 0 rgba(59, 89, 152, .14), 0 3px 1px -2px rgba(59, 89, 152, .2), 0 1px 5px 0 rgba(59, 89, 152, .12);

	background-color: #3b5998;

	border-color: #3b5998;

	color: #fff
}





.btn-white {

	background-color: #fff;

	border-color: #e7eaf3
}



.chart-container1 {

	position: relative;

	height: 380px
}



.gmaps,

.gmaps-panaroma {

	height: 400px;

	background: #eee;

	border-radius: 3px
}



.pricing-table .card {

	-webkit-transition: all .2s;

	-o-transition: all .2s;

	transition: all .2s;

	-webkit-border-radius: 15px;

	border-radius: 15px
}



.pricing-table .card .card-header {

	border-top-left-radius: 15px;

	border-top-right-radius: 15px
}



@media (min-width:992px) {

	.pricing-table .card:hover {

		margin-top: -.25rem;

		margin-bottom: .25rem;

		-webkit-box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .3);

		box-shadow: 0 .5rem 1rem 0 rgba(0, 0, 0, .3)
	}

}



.pricing-table .card .card-title {

	font-size: 1rem;

	letter-spacing: .2rem;

	font-weight: 500
}



.pricing-table .card .card-price {

	font-size: 2.7rem
}



.pricing-table .card .card-price .term {

	font-size: .875rem
}



.pricing-table .card ul li.list-group-item {

	border-bottom: 1px solid rgb(0 0 0 / 0%);

	color: #3b3b3b;

	font-size: 16px
}



input::placeholder {

	color: #000 !important;

	opacity: .3 !important
}



.form-floating>.form-control::-moz-placeholder {

	color: transparent !important
}

.form-floating>.form-control::placeholder {

	color: transparent !important
}



.card-group {

	margin-bottom: 1.5rem
}





.input-icon .form-control {

	padding-left: 2.5rem;

}



.input-icon span {

	font-size: 16px;

	left: 15px;

}





.topbar .navbar .navbar-nav .nav-item {

	display: flex;

	align-items: center;

	justify-content: center;

	width: auto;

	height: 60px;

}



.topbar .navbar .navbar-nav .nav-link {

	color: #212529;

	font-size: 22px;

	border-radius: 50%;

	display: flex;

	align-items: center;

	justify-content: center;

	width: 42px;

	height: 42px;

	transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);

}





.topbar .navbar .navbar-nav .nav-link:hover,
.topbar .navbar .navbar-nav .nav-link:focus {
	background-color: #2f7a2c26;
	color: #004de6;
}



.dropdown-toggle-nocaret:after {

	display: none
}



.alert-count {

	position: absolute;

	top: 2px;

	left: 22px;

	width: 18px;

	height: 18px;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 50%;

	font-size: 12px;

	font-weight: 500;

	color: #fff;

	background: #f62718
}



.user-img {

	width: 42px;

	height: 42px;

	border-radius: 50%;

	border: 0 solid #e5e5e5;

	padding: 0;

}



.user-info .user-name {

	font-size: 15px;

	font-weight: 500;

	color: #413c3c
}



.user-info .designattion {

	font-size: 13px;

	color: #747474
}



.user-box {

	display: flex;

	align-items: center;

	height: 60px;

	border-left: 1px solid #f0f0f0;

	border-right: 1px solid #f0f0f0;

}









.topbar .navbar .dropdown-app .dropdown-menu {

	width: 270px;

	border: 1px solid #dee2e6;

	padding: 0.5rem;

	border-radius: 16px;

	box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);

}



.topbar .navbar .dropdown-app .dropdown-menu .app-container {

	position: relative;

	height: 370px;

}





.topbar .navbar .dropdown-app .dropdown-menu .app-box {

	padding: .5rem;

	border-radius: 1rem;

	transition: .2s;

}



.topbar .navbar .dropdown-app .dropdown-menu .app-box:hover {

	background-color: #edf0f3;

}



.topbar .navbar .dropdown-app .dropdown-menu .app-name {

	color: #212529;

	font-size: .64rem;

	text-decoration: none;

	font-weight: 500;

}



















.dropdown-large {

	position: relative
}



.dropdown-large .dropdown-menu {

	width: 360px;

	border: 0;

	padding: 0 0;

	border-radius: 10px;

	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15)
}



.topbar .navbar .dropdown-large .dropdown-menu::after {

	content: '';

	width: 13px;

	height: 13px;

	background: #fff;

	position: absolute;

	top: -6px;

	right: 16px;

	transform: rotate(45deg);

	border-top: 1px solid #ddd;

	border-left: 1px solid #ddd
}



.topbar .navbar .dropdown-menu::after {

	content: '';

	width: 13px;

	height: 13px;

	background: #ffff;

	position: absolute;

	top: -6px;

	right: 16px;

	transform: rotate(45deg);

	border-top: 1px solid #ddd;

	border-left: 1px solid #ddd
}



.dropdown-large .msg-header {

	padding: .8rem 1rem;

	border-bottom: 1px solid #ededed;

	background-clip: border-box;

	background-color: #ffffff;

	text-align: left;

	display: flex;

	align-items: center;

	justify-content: space-between;

	border-top-left-radius: 10px;

	border-top-right-radius: 10px
}



.dropdown-large .msg-header-badge {

	background-color: rgb(0 140 255 / 12%);

	color: #004de6;

	padding: 2px 8px;

	margin-bottom: 0;

	border-radius: 4px;

}



.dropdown-large .msg-header .msg-header-title {

	font-size: 16px;

	color: #1c1b1b;

	margin-bottom: 0;

	font-weight: 500
}



.dropdown-large .msg-header .msg-header-clear {

	font-size: 13px;

	color: #585858;

	margin-bottom: 0
}



.dropdown-large .msg-footer {

	padding: .8rem 1rem;

	color: #1c1b1b;

	border-top: 1px solid #ededed;

	background-clip: border-box;

	background: 0 0;

	font-size: 14px;

	font-weight: 500;

	border-bottom-left-radius: .25rem;

	border-bottom-right-radius: .25rem
}



.dropdown-large .user-online {

	position: relative
}



.dropdown-large .msg-name {

	font-size: 14px;

	margin-bottom: 0;

	color: #212529;

}



.dropdown-large .msg-info {

	font-size: 13px;

	margin-bottom: 0;

	color: #818189;

}



.dropdown-large .msg-avatar {

	width: 45px;

	height: 45px;

	border-radius: 50%;

	margin-right: 15px
}



.dropdown-large .msg-time {

	font-size: 12px;

	margin-bottom: 0;

	color: #818189
}



.dropdown-large .user-online:after {

	content: '';

	position: absolute;

	bottom: 1px;

	right: 17px;

	width: 8px;

	height: 8px;

	border-radius: 50%;

	box-shadow: 0 0 0 2px #fff;

	background: #16e15e
}



.dropdown-large .dropdown-menu .dropdown-item {

	padding: .5rem 1.3rem;

	border-bottom: 1px solid #ededed
}



.header-message-list {

	position: relative;

	height: 360px
}



.header-notifications-list {

	position: relative;

	height: 360px
}



.dropdown-large .notify {

	width: 45px;

	height: 45px;

	font-size: 20px;

	text-align: center;

	border-radius: 50%;

	background-color: #f1f1f1;

	margin-right: 15px;

	text-transform: uppercase;

	display: flex;

	align-items: center;

	justify-content: center;

}





.dropdown-large .cart-product-title {

	color: #140e22;

	font-size: 14px;

	margin-bottom: 0px;

}



.dropdown-large .cart-product-price {

	color: #818189;

	font-size: 14px;

	margin-bottom: 0;

}



.dropdown-large .cart-product-cancel {

	right: -7px;

	top: -5px;

	font-size: 16px;

	background-color: #fff;

	border: 1px solid #eee;

	width: 1.4rem;

	height: 1.4rem;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 50%;

}



.dropdown-large .cart-product {

	width: 50px;

	height: 50px;

	display: flex;

	align-items: center;

	border-radius: 0px;

	border: 1px solid rgb(231 231 231);

	padding: 4px;

	background-color: rgb(255 255 255);

}



.dropdown-large .cart-product img {

	width: 100%;

}





.user-box .dropdown-menu i {

	vertical-align: middle;

	margin-right: 10px
}



.dropdown-menu {

	-webkit-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);

	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);

	border: 0 solid #e9ecef;

	border-radius: 10px;

	font-size: 14px
}



.topbar .navbar .dropdown-menu {

	-webkit-animation: .6s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 animdropdown;

	animation: .6s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 animdropdown
}



@-webkit-keyframes animdropdown {

	from {

		-webkit-transform: translate3d(0, 6px, 0);

		transform: translate3d(0, 6px, 0);

		opacity: 0
	}

	to {

		-webkit-transform: translate3d(0, 0, 0);

		transform: translate3d(0, 0, 0);

		opacity: 1
	}

}



@keyframes animdropdown {

	from {

		-webkit-transform: translate3d(0, 6px, 0);

		transform: translate3d(0, 6px, 0);

		opacity: 0
	}

	to {

		-webkit-transform: translate3d(0, 0, 0);

		transform: translate3d(0, 0, 0);

		opacity: 1
	}

}


.search-bar {

	width: 30%;

	cursor: pointer;

}


.search-bar a.btn,
.search-bar a.btn:focus {

	color: #7b8288;

	cursor: pointer;

	background-color: #f7f7ff;

	border: 0;

}









.mobile-toggle-menu {

	display: none;

	font-size: 26px;

	color: #404142;

	cursor: pointer
}



.switcher-wrapper {

	width: 280px;

	height: 100%;

	position: fixed;

	right: -280px;

	top: 0;

	bottom: 0;

	z-index: 16;

	background: #fff;

	border-left: 0 solid #d2d2d2;

	box-shadow: 0 .3rem .6rem rgba(0, 0, 0, .13);

	transition: all .2s ease-out
}



.switcher-btn {

	width: 40px;

	height: 40px;

	line-height: 40px;

	font-size: 24px;

	background: #004de6;

	box-shadow: 0 .3rem .6rem rgba(0, 0, 0, .13);

	color: #fff;

	text-align: center;

	border-top-left-radius: 10px;

	border-bottom-left-radius: 10px;

	position: absolute;

	top: 40%;

	right: 100%;

	cursor: pointer
}



.switcher-wrapper.switcher-toggled {

	right: 0
}



.switcher-body {

	padding: 1.25rem
}



.switcher-body .form-check .form-check-input,

.switcher-body .form-check .form-check-label {

	cursor: pointer
}



.header-colors-indigators .indigator {

	width: 45px;

	height: 45px;

	background-color: #f4f2f2;

	border-radius: 10px;

	cursor: pointer
}



@media screen and (max-width:1280px) {

	.email-header {

		height: auto
	}

	.email-content {

		padding: 100px 0 0 0
	}

}



@media only screen and (max-width: 1199px) {



	.row.row-group>div {

		border-right: 0;

		border-bottom: 1px solid rgba(0, 0, 0, 0.12);

	}



	.row.row-group>div:last-child {

		border-right: none;

		border-bottom: 0;

	}



}



@media screen and (max-width:1024px) {

	.topbar {

		left: 0 !important
	}



	.mobile-toggle-menu {

		display: block
	}

	.sidebar-wrapper {

		left: -300px;

		box-shadow: none
	}

	.page-wrapper {

		margin-left: 0
	}

	.page-footer {

		left: 0
	}



	.wrapper.toggled .sidebar-wrapper {

		left: 0
	}

	.wrapper.toggled .page-wrapper {

		margin-left: 0
	}

	.wrapper.toggled .overlay {

		position: fixed;

		top: 0;

		right: 0;

		bottom: 0;

		left: 0;

		background: #000;

		opacity: .6;

		z-index: 10;

		display: block;

		cursor: move;

		transition: all .2s ease-out
	}

	.error-404 {

		height: auto;

		padding: 6rem 1rem
	}

	.chat-header {

		border-top-left-radius: .25rem
	}

	.chat-footer {

		border-bottom-left-radius: .25rem
	}

	.chat-sidebar {

		left: -370px
	}

	.chat-content {

		margin-left: 0
	}

	.chat-header {

		left: 0
	}

	.chat-footer {

		left: 0
	}

	.chat-toggled .chat-sidebar {

		left: 0
	}

	.chat-toggled .overlay {

		position: absolute;

		top: 0;

		right: 0;

		bottom: 0;

		left: 340px;

		background: #000;

		opacity: .5;

		z-index: 11;

		display: block;

		cursor: move;

		transition: all .3s ease-out
	}

	.email-header {

		border-top-left-radius: .25rem
	}

	.email-sidebar {

		left: -280px
	}

	.email-content {

		margin-left: 0
	}

	.email-header {

		left: 0
	}

	.email-toggled .email-sidebar {

		left: 0
	}

	.email-toggled .overlay {

		position: absolute;

		top: 0;

		right: 0;

		bottom: 0;

		left: 250px;

		background: #000;

		opacity: .5;

		z-index: 9;

		display: block;

		cursor: move;

		transition: all .3s ease-out
	}

}



@media screen and (max-width:991px) {

	.section-authentication-signin {

		height: auto;

		min-height: 100vh;

		margin-top: 0;

		margin-bottom: 0
	}

	.authentication-reset-password {

		height: auto;

		padding: 2rem 1rem
	}

	.authentication-lock-screen {

		height: auto;

		padding: 2rem 1rem
	}

	.compose-mail-popup {

		width: auto;

		position: fixed;

		bottom: -30px;

		right: 0;

		left: 0
	}

}



@media screen and (max-width:767px) {

	.user-box .user-info {

		display: none
	}

	.authentication-forgot {

		height: auto;

		padding: 2.5rem 1rem
	}

}



@media screen and (max-width:620px) {

	.topbar .navbar .dropdown-menu::after {

		display: none
	}

	.topbar .navbar .dropdown {

		position: static !important
	}

	.topbar .navbar .dropdown-menu {

		width: 100% !important
	}

}



@media screen and (max-width:520px) {

	.chat-footer-menu,

	.chat-top-header-menu {

		display: none
	}

}




.upload-card {
	width: 100%;
	border: 2px dashed #6c757d;
	padding: 15px;
	border-radius: 12px;
	text-align: center;
	cursor: pointer;
	transition: .3s;
	height: 240px;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.upload-card:hover {
	background: #f8f9fa;
}

.upload-card .icon {
	font-size: 55px;
	color: #6c757d;
}

.preview-img {
	width: 100%;
	margin-top: 15px;
	border-radius: 12px;
	display: none;
}

h6 {
	margin-top: 10px;
}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
input[type=number] {
	-moz-appearance: textfield;
}

a:hover {
	color: #004de6 !important;
}



.join-side-group {

	display: flex;

	position: relative;

	height: 38px;

	border: 1px solid rgba(26, 54, 93, 0.18);

	border-radius: 8px;

	overflow: hidden;

	background: #fff

}



.join-side-group input {

	position: absolute;

	opacity: 0;

	pointer-events: none

}



.join-side-group label {

	flex: 1;

	display: flex;

	align-items: center;

	justify-content: center;

	margin: 0;

	cursor: pointer;

	font-size: 14px;

	font-weight: 500;

	color: #1a365d;

	line-height: 1

}



.join-side-group label + input + label {

	border-left: 1px solid rgba(26, 54, 93, 0.18)

}



.join-side-group input:checked + label {

	background-image: linear-gradient(94deg, #1a365d 0%, #3375d2 32%, #3aa61a 68%, #0e650d 100%);
	background-size: 160% 100%;
	background-position: 0% 50%;
	background-repeat: no-repeat;

	color: #fff

}

.join-side-group input:disabled + label {
	opacity: 0.45;
	cursor: not-allowed;
	background: #eef0f2 !important;
	color: #6c757d !important
}

input[name="position"]:disabled + label {
	opacity: 0.45;
	cursor: not-allowed
}



#clientAddPage .card.glass-ui > .card-body {

	padding: 1.25rem

}



#clientAddPage .client-add-title {

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 12px;

	flex-wrap: wrap;

	margin: 0 0 16px;

	padding: 0 0 14px;

	border-bottom: 1px solid rgba(26, 54, 93, 0.1)

}



#clientAddPage .client-add-title h5 {

	margin: 0;

	font-size: 16px;

	font-weight: 600;

	color: #32393f

}



#clientAddPage .client-add-title-icon {

	width: 36px;

	height: 36px;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 8px;

	background: rgba(26, 54, 93, 0.08);

	color: #1a365d;

	font-size: 18px

}



#clientAddPage .client-add-box {
	background: rgba(26, 54, 93, 0.045);
	border: 1px solid rgba(26, 54, 93, 0.08);
	border-radius: 14px;
	padding: 14px 16px 16px;
	margin-bottom: 14px;
	overflow: visible
}



#clientAddPage .client-add-box-title {

	margin: 0 0 12px;

	font-size: 12px;

	font-weight: 700;

	letter-spacing: 0.5px;

	text-transform: uppercase;

	color: #1a365d

}



#clientAddPage .client-add-hint {

	margin: -6px 0 10px;

	font-size: 12px;

	color: #6c757d

}



#clientAddPage .req {

	color: #f62718;

	font-weight: 700

}



#clientAddPage .client-add-footer {

	display: flex;

	align-items: center;

	justify-content: space-between;

	flex-wrap: wrap;

	gap: 12px;

	padding-top: 4px

}



#clientAddPage .client-add-pass {
	flex-wrap: nowrap;
	align-items: stretch;
	height: 38px;
	background: #fff;
	border: 1px solid #ced4da;
	border-radius: 8px;
	overflow: hidden
}

#clientAddPage .client-add-pass .input-group-text {
	border: 0 !important;
	border-radius: 0 !important;
	color: #1a365d;
	background: #fff !important;
	height: 38px !important;
	min-height: 38px !important;
	width: 42px;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	text-decoration: none;
	box-shadow: none !important
}

#clientAddPage .client-add-pass .form-control {
	height: 38px !important;
	min-height: 38px !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: #fff !important
}

#clientAddPage .client-add-pass:focus-within {
	border-color: #1a365d;
	box-shadow: 0 0 0 0.2rem rgba(26, 54, 93, 0.12)
}

#clientAddPage .client-add-pass .form-control:focus {
	box-shadow: none !important;
	border-color: transparent !important
}

#clientAddPage .form-control:-webkit-autofill,
#clientAddPage .form-control:-webkit-autofill:hover,
#clientAddPage .form-control:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 30px #fff inset;
	-webkit-text-fill-color: #32393f;
	caret-color: #32393f;
	border-radius: 8px
}



#clientAddPage .form-label {

	margin-bottom: 6px;

	font-size: 13px;

	font-weight: 500;

	color: #32393f

}



#clientAddPage .form-label code {

	color: #f62718;

	background: none;

	font-family: inherit;

	font-size: 13px;

	font-weight: 700

}



#clientAddPage .form-control,
#clientAddPage .form-select {
	height: 38px !important;
	padding: 0.375rem 0.75rem !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #32393f !important;
	background-color: #fff !important;
	border: 1px solid #ced4da !important;
	border-radius: 8px !important;
	box-shadow: none !important
}

#clientAddPage .form-select {
	padding-right: 2.25rem
}

#clientAddPage .form-control[readonly] {
	background-color: #fff;
	cursor: pointer
}

#clientAddPage textarea.form-control {
	height: auto;
	min-height: 90px;
	padding-top: 10px
}

#clientAddPage textarea.form-control.address-input {
	height: 38px !important;
	min-height: 38px;
	max-height: 38px;
	padding-top: 0.375rem;
	padding-bottom: 0.375rem;
	resize: none;
	overflow-y: auto
}

#clientAddPage .form-control:focus,
#clientAddPage .form-select:focus {
	border-color: #1a365d !important;
	box-shadow: 0 0 0 0.2rem rgba(26, 54, 93, 0.12) !important;
	background-color: #fff !important
}

#clientAddPage .form-control::placeholder {
	color: #8a9198
}

#clientAddPage .join-side-group {
	height: 38px;
	background: #fff;
	border-color: #ced4da
}

/* Shared date picker (client-add DOB UI — all pages) */
.dob-picker {
	position: relative;
	width: 100%
}

.dob-picker .form-control {
	padding-right: 40px;
	cursor: pointer
}

.dob-picker-btn {
	position: absolute;
	top: 1px;
	right: 1px;
	bottom: 1px;
	width: 36px;
	border: 0;
	background: transparent;
	color: #1a365d;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	padding: 0;
	z-index: 2
}

.dob-picker-panel {
	position: absolute;
	z-index: 1080;
	top: calc(100% + 6px);
	left: 0;
	width: 280px;
	max-width: calc(100vw - 24px);
	padding: 12px;
	background: #fff;
	border: 1px solid rgba(26, 54, 93, 0.12);
	border-radius: 12px;
	box-shadow: 0 12px 28px rgba(26, 54, 93, 0.14)
}

.dob-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	margin-bottom: 8px
}

.dob-cal-head strong {
	font-size: 14px;
	color: #1a365d
}

.dob-month,
.dob-year {
	height: 28px;
	padding: 0 6px;
	font-size: 13px;
	color: #1a365d;
	background: #fff;
	border: 1px solid #ced4da;
	border-radius: 6px
}

.dob-day.is-disabled {
	opacity: 0.35;
	pointer-events: none
}

.dob-nav {
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #1a365d;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 20px
}

.dob-nav:hover {
	background: rgba(26, 54, 93, 0.08)
}

.dob-cal-week,
.dob-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	text-align: center
}

.dob-cal-week span {
	font-size: 11px;
	color: #6c757d;
	padding: 4px 0
}

.dob-day {
	height: 32px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #32393f;
	font-size: 13px;
	padding: 0
}

.dob-day:hover {
	background: rgba(26, 54, 93, 0.08);
	color: #1a365d
}

.dob-day.is-today {
	font-weight: 700;
	color: #1a365d;
	box-shadow: inset 0 0 0 1px #1a365d
}

.dob-day.is-selected,
.dob-day.is-selected:hover {
	background: #1a365d;
	color: #fff;
	box-shadow: none
}

#clientAddPage .select2-container {
	width: 100% !important
}

#clientAddPage .select2-container .select2-selection--single {
	height: 38px !important;
	border: 1px solid #ced4da !important;
	border-radius: 8px !important;
	background-color: #fff !important;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%233a0b54' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.75rem center !important;
	background-size: 16px 12px !important
}

#clientAddPage .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
	line-height: 36px;
	color: #32393f;
	padding-left: 12px;
	padding-right: 2.25rem;
	font-size: 14px
}

#clientAddPage .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
	display: none
}

#clientAddPage .select2-container--bootstrap4.select2-container--focus .select2-selection--single,
#clientAddPage .select2-container--bootstrap4.select2-container--open .select2-selection--single,
#clientAddPage .select2-container--bootstrap4.select2-container--focus.select2-container--open .select2-selection--single {
	border: 1px solid #1a365d !important;
	border-radius: 8px !important;
	box-shadow: 0 0 0 0.2rem rgba(26, 54, 93, 0.12)
}



#clientAddPage .upload-card {

	height: 160px;

	border-color: rgba(26, 54, 93, 0.22);

	background: rgba(255, 255, 255, 0.4);

	backdrop-filter: blur(8px)

}



#clientAddPage .upload-card:hover {

	background: rgba(26, 54, 93, 0.06);

	border-color: #1a365d

}



#clientAddPage .upload-card .icon {

	font-size: 36px;

	color: #1a365d

}



#clientAddPage .upload-card p {

	margin: 6px 0 0;

	font-size: 13px;

	color: #4c5258

}



#clientAddPage .btn-primary {

	padding: 8px 18px;

	border-radius: 8px

}

#clientAddPage .product-gallery-item {
	position: relative
}

#clientAddPage .product-gallery-item .preview-img {
	display: block;
	margin-top: 0;
	height: 160px;
	object-fit: cover
}

#clientAddPage .product-gallery-remove {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #f62718;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2
}

#clientAddPage .product-gallery-add {
	margin: 0
}

#clientAddPage .client-add-title {
	display: flex !important;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px
}

#clientAddPage .client-add-title h5 {
	width: auto
}

#clientAddPage .client-add-title .btn {
	width: auto;
	white-space: nowrap;
	flex-shrink: 0
}



.select2-dropdown.client-add-select-drop,
.select2-container--open .select2-dropdown.client-add-select-drop,
.select2-container--bootstrap4 .select2-dropdown.client-add-select-drop,
.select2-container--open .select2-dropdown.client-add-select-drop.select2-dropdown--below,
.select2-container--open .select2-dropdown.client-add-select-drop.select2-dropdown--above,
.select2-container--bootstrap4 .select2-dropdown.client-add-select-drop.select2-dropdown--below,
.select2-container--bootstrap4 .select2-dropdown.client-add-select-drop.select2-dropdown--above {
	border: 1px solid rgba(26, 54, 93, 0.12) !important;
	border-radius: 12px !important;
	box-shadow: 0 12px 28px rgba(26, 54, 93, 0.14) !important;
	background: #fff !important;
	overflow: hidden;
	padding: 8px;
	margin-top: 6px
}

.select2-dropdown.client-add-select-drop.select2-dropdown--above {
	margin-top: 0;
	margin-bottom: 6px
}

.select2-dropdown.client-add-select-drop .select2-search--dropdown {
	padding: 0 0 8px
}

.select2-dropdown.client-add-select-drop .select2-search__field {
	border: 1px solid #ced4da !important;
	border-radius: 6px !important;
	padding: 6px 10px !important;
	height: 34px !important;
	font-size: 13px;
	color: #32393f;
	outline: 0;
	box-shadow: none
}

.select2-dropdown.client-add-select-drop .select2-search__field:focus {
	border-color: #1a365d !important
}

.select2-container--bootstrap4 .select2-dropdown.client-add-select-drop .select2-results > .select2-results__options {
	max-height: 220px;
	padding: 0
}

.select2-dropdown.client-add-select-drop .select2-results__option {
	padding: 8px 10px !important;
	margin: 1px 0;
	border-radius: 6px;
	font-size: 13px;
	color: #32393f;
	background: transparent
}

.select2-container--bootstrap4 .select2-dropdown.client-add-select-drop .select2-results__option[aria-selected=true] {
	background: #1a365d !important;
	color: #fff !important
}

.select2-container--bootstrap4 .select2-dropdown.client-add-select-drop .select2-results__option--highlighted,
.select2-dropdown.client-add-select-drop .select2-results__option--highlighted[aria-selected],
.select2-dropdown.client-add-select-drop .select2-results__option--highlighted[aria-selected=false] {
	background: rgba(26, 54, 93, 0.08) !important;
	color: #1a365d !important
}

.select2-container--bootstrap4 .select2-dropdown.client-add-select-drop .select2-results__option--highlighted[aria-selected=true],
.select2-container--bootstrap4 .select2-dropdown.client-add-select-drop .select2-results__option--highlighted.select2-results__option[aria-selected=true],
.select2-dropdown.client-add-select-drop .select2-results__option--highlighted[aria-selected=true] {
	background: #1a365d !important;
	color: #fff !important
}

.team-tree-page .clients-card-heading h5 {
	margin-bottom: 2px
}

.team-tree-page .tree-search-wrap {
	padding: 4px 8px
}

.team-tree-page .tree-search-input {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 220px;
	height: 32px;
	padding: 0 10px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid rgba(26, 54, 93, 0.14)
}

.team-tree-page .tree-search-input i {
	color: #1a365d;
	font-size: 16px
}

.team-tree-page .tree-search-input input {
	border: 0;
	outline: 0;
	width: 100%;
	font-size: 13px;
	background: transparent;
	color: #32393f
}

.team-tree-page .tree-search-results {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 240px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid rgba(26, 54, 93, 0.12);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(26, 54, 93, 0.12)
}

.team-tree-page .search-item {
	padding: 8px 12px;
	cursor: pointer;
	border-bottom: 1px solid rgba(26, 54, 93, 0.06);
	font-size: 13px;
	color: #32393f
}

.team-tree-page .search-item:last-child {
	border-bottom: 0
}

.team-tree-page .search-item:hover {
	background: rgba(26, 54, 93, 0.06)
}

.team-tree-page .tree-container {
	overflow: auto;
	overflow-x: auto;
	overflow-y: auto;
	text-align: center;
	cursor: grab;
	height: calc(100vh - 240px);
	min-height: 420px;
	max-height: calc(100vh - 220px);
	padding: 28px 16px 48px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid rgba(26, 54, 93, 0.1);
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: auto
}

.team-tree-page .tree-container.is-grabbing {
	cursor: grabbing
}

.team-tree-page .tree {
	display: block;
	width: max-content;
	min-width: 100%;
	margin: 0 auto
}

.team-tree-page .tree ul {
	padding-top: 28px;
	position: relative;
	display: block;
	width: max-content;
	margin: 0 auto;
	text-align: center;
	white-space: nowrap;
	font-size: 0
}

.team-tree-page .tree > ul {
	padding-top: 0
}

.team-tree-page .tree li,
.team-tree-page .tree-li {
	display: inline-block;
	vertical-align: top;
	text-align: center;
	list-style: none;
	position: relative;
	padding: 28px 12px 0;
	font-size: 14px;
	white-space: normal
}

.team-tree-page .tree li::before,
.team-tree-page .tree li::after {
	content: '';
	position: absolute;
	top: 0;
	right: 50%;
	border-top: 2px solid rgba(26, 54, 93, 0.22);
	width: 50%;
	height: 28px
}

.team-tree-page .tree li::after {
	right: auto;
	left: 50%;
	border-left: 2px solid rgba(26, 54, 93, 0.22)
}

.team-tree-page .tree li:only-child::after,
.team-tree-page .tree li:only-child::before {
	display: none
}

.team-tree-page .tree li:only-child {
	padding-top: 0
}

.team-tree-page .tree li:first-child::before,
.team-tree-page .tree li:last-child::after {
	border: 0 none
}

.team-tree-page .tree li:last-child::before {
	border-right: 2px solid rgba(26, 54, 93, 0.22);
	border-radius: 0 8px 0 0
}

.team-tree-page .tree li:first-child::after {
	border-radius: 8px 0 0 0
}

.team-tree-page .tree ul ul::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	border-left: 2px solid rgba(26, 54, 93, 0.22);
	width: 0;
	height: 28px
}

.team-tree-page .tree-node {
	width: 168px;
	min-width: 168px;
	max-width: 168px;
	height: 168px;
	box-sizing: border-box;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 18px 12px 14px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid rgba(26, 54, 93, 0.12);
	box-shadow: 0 4px 14px rgba(26, 54, 93, 0.06);
	position: relative;
	z-index: 5;
	vertical-align: top
}

.team-tree-page .tree-node.is-left {
	border-top: 3px solid #0aa2c0
}

.team-tree-page .tree-node.is-right {
	border-top: 3px solid #004de6
}

.team-tree-page .tree-node.is-root,
.team-tree-page .tree-node.active {
	border: 1px solid rgba(26, 54, 93, 0.2);
	border-top: 3px solid #1a365d;
	background: linear-gradient(180deg, rgba(26, 54, 93, 0.06), #fff 42%)
}

.team-tree-page .tree-node.empty {
	border-style: dashed;
	background: #f8f6fa;
	opacity: 1;
	color: #4c5258
}

.team-tree-page .tree-node.empty .tree-name-na,
.team-tree-page .tree-node.empty .tree-name {
	color: #6c757d;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.06em;
	cursor: default;
	overflow: visible
}

.team-tree-page .tree-node.empty .tree-code {
	color: #98a2ad;
	cursor: default
}

.team-tree-page .tree-node:hover:not(.empty) {
	box-shadow: 0 8px 20px rgba(26, 54, 93, 0.12)
}

.team-tree-page .tree-avatar {
	width: 52px !important;
	height: 52px !important;
	min-width: 52px;
	min-height: 52px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(26, 54, 93, 0.16);
	margin-bottom: 8px
}

.team-tree-page .tree-node.is-left .tree-avatar {
	border-color: rgba(13, 202, 240, 0.5)
}

.team-tree-page .tree-node.is-right .tree-avatar {
	border-color: rgba(0, 77, 230, 0.45)
}

.team-tree-page .tree-avatar-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(26, 54, 93, 0.06);
	color: #4c5258;
	font-size: 22px
}

.team-tree-page .tree-name {
	max-width: 140px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: #32393f;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer
}

.team-tree-page .tree-code {
	max-width: 140px;
	margin-top: 2px;
	font-size: 11px;
	line-height: 1.3;
	color: #4c5258;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.team-tree-page .tree-pos {
	position: absolute;
	top: 8px;
	left: 8px;
	min-width: 22px;
	height: 18px;
	padding: 0 6px;
	border-radius: 20px;
	font-size: 10px;
	font-weight: 700;
	line-height: 18px;
	text-align: center
}

.team-tree-page .tree-pos-left {
	background: rgba(13, 202, 240, 0.18);
	color: #0aa2c0
}

.team-tree-page .tree-pos-right {
	background: #004de62f;
	color: #004de6
}

.team-tree-page .tree-pos-root {
	background: rgba(26, 54, 93, 0.12);
	color: #1a365d
}

.team-tree-page .view-icon {
	position: absolute;
	top: 8px;
	right: 8px;
	font-size: 16px;
	color: #1a365d;
	cursor: pointer;
	z-index: 10
}

.team-tree-page .expand-icon,
.team-tree-page .expand-node .expand-icon {
	position: absolute;
	bottom: -12px;
	left: 50%;
	transform: translateX(-50%);
	width: 22px;
	height: 22px;
	line-height: 22px;
	border-radius: 50%;
	background: #1a365d;
	color: #fff;
	font-size: 14px;
	cursor: pointer;
	z-index: 20;
	box-shadow: 0 2px 6px rgba(26, 54, 93, 0.25)
}

.team-tree-page .expand-node:hover .expand-icon {
	background: #3375d2
}

.team-tree-page .tree-hint {
	margin-top: 14px;
	font-size: 12px;
	color: #4c5258
}

.team-tree-page .tree-hint i {
	color: #1a365d;
	margin-right: 4px;
	vertical-align: middle
}

.team-tree-page .tree-modal-avatar {
	width: 96px;
	height: 96px;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid rgba(26, 54, 93, 0.16)
}

.team-tree-page .tree-modal-box {
	padding: 10px 12px;
	border-radius: 10px;
	background: rgba(26, 54, 93, 0.04);
	border: 1px solid rgba(26, 54, 93, 0.08);
	color: #4c5258;
	font-size: 13px
}

.team-tree-page .tree-modal-box.is-left {
	border-color: rgba(13, 202, 240, 0.35)
}

.team-tree-page .tree-modal-box.is-right {
	border-color: rgba(0, 77, 230, 0.35)
}

@media (max-width: 768px) {
	.team-tree-page .tree-search-input {
		min-width: 160px
	}

	.team-tree-page .tree-container {
		height: calc(100vh - 200px);
		min-height: 320px;
		max-height: calc(100vh - 180px);
		padding: 16px 10px 28px
	}

	.team-tree-page .tree ul {
		padding-top: 16px
	}

	.team-tree-page .tree li,
	.team-tree-page .tree-li {
		padding: 16px 6px 0;
		font-size: 12px
	}

	.team-tree-page .tree li::before,
	.team-tree-page .tree li::after {
		height: 16px
	}

	.team-tree-page .tree ul ul::before {
		height: 16px
	}

	.team-tree-page .tree-node {
		width: 104px;
		min-width: 104px;
		max-width: 104px;
		height: 112px;
		padding: 12px 6px 8px;
		border-radius: 10px
	}

	.team-tree-page .tree-avatar {
		width: 34px !important;
		height: 34px !important;
		min-width: 34px;
		min-height: 34px;
		margin-bottom: 4px;
		border-width: 1.5px
	}

	.team-tree-page .tree-avatar-empty {
		font-size: 16px
	}

	.team-tree-page .tree-name {
		max-width: 92px;
		font-size: 9px;
		line-height: 1.15;
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis
	}

	.team-tree-page .tree-node.empty .tree-name-na,
	.team-tree-page .tree-node.empty .tree-name {
		font-size: 12px;
		white-space: nowrap;
		display: block;
		-webkit-line-clamp: unset
	}

	.team-tree-page .tree-code {
		max-width: 92px;
		font-size: 9px
	}

	.team-tree-page .tree-pos {
		font-size: 9px;
		padding: 1px 5px;
		top: 4px;
		left: 4px
	}

	.team-tree-page .view-icon {
		font-size: 14px;
		top: 4px;
		right: 4px
	}

	.team-tree-page .expand-icon,
	.team-tree-page .expand-node .expand-icon {
		font-size: 16px;
		width: 20px;
		height: 20px;
		line-height: 20px;
		bottom: -10px
	}
}

@media (max-width: 480px) {
	.team-tree-page .tree-node {
		width: 92px;
		min-width: 92px;
		max-width: 92px;
		height: 100px;
		padding: 10px 4px 6px
	}

	.team-tree-page .tree-avatar {
		width: 30px !important;
		height: 30px !important;
		min-width: 30px;
		min-height: 30px
	}

	.team-tree-page .tree-name {
		max-width: 84px;
		font-size: 8px;
		line-height: 1.1
	}

	.team-tree-page .tree-code {
		max-width: 84px;
		font-size: 8px
	}

	.team-tree-page .tree li,
	.team-tree-page .tree-li {
		padding: 14px 4px 0
	}
}

.modal-backdrop {
	background: #1a0724
}

.modal-backdrop.show {
	opacity: 0.55
}

.modal-content {
	border: 0 !important;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 22px 56px rgba(26, 54, 93, 0.22)
}

.modal-header {
	position: relative;
	align-items: center;
	gap: 12px;
	padding: 16px 22px;
	background: rgba(26, 54, 93, 0.05);
	border-bottom: 1px solid rgba(26, 54, 93, 0.1)
}

.modal-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background-image: linear-gradient(94deg, #1a365d 0%, #3375d2 32%, #3aa61a 68%, #0e650d 100%);
	background-size: 160% 100%;
	background-position: 0% 50%;
	background-repeat: no-repeat
}

.modal-title {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: #32393f;
	letter-spacing: 0
}

.modal-header .btn-close {
	width: 32px;
	height: 32px;
	margin: 0;
	padding: 0;
	opacity: 1;
	border-radius: 8px;
	background-color: rgba(26, 54, 93, 0.08);
	background-size: 12px;
	box-shadow: none
}

.modal-header .btn-close:hover {
	background-color: #f627182f
}

.modal-body {
	padding: 20px 22px;
	color: #4c5258;
	font-size: 14px
}

.modal-body.p-0 {
	padding: 0 !important
}

.modal-body > p:last-child,
.modal-body > .row:last-child {
	margin-bottom: 0
}

.modal-body .form-label,
.modal-body label {
	font-size: 13px;
	font-weight: 500;
	color: #32393f;
	margin-bottom: 6px
}

.modal-body .form-control,
.modal-body .form-select,
.modal-body textarea {
	border-radius: 8px;
	border-color: rgba(26, 54, 93, 0.16);
	color: #32393f
}

.modal-body .form-control:focus,
.modal-body .form-select:focus,
.modal-body textarea:focus {
	border-color: #1a365d;
	box-shadow: 0 0 0 .2rem rgba(26, 54, 93, 0.14)
}

.modal-body .input-group-text {
	border-color: rgba(26, 54, 93, 0.16);
	color: #1a365d
}

.modal-footer {
	gap: 8px;
	padding: 14px 22px;
	background: rgba(26, 54, 93, 0.03);
	border-top: 1px solid rgba(26, 54, 93, 0.1)
}

.modal-body .modal-footer {
	margin: 18px -22px -20px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0
}

.modal-footer .btn,
.modal-body .btn {
	border-radius: 8px;
	min-height: 38px;
	padding: 8px 16px;
	font-weight: 500
}

.modal-footer .btn-secondary,
.modal-body .btn-secondary {
	background: #fff;
	color: #1a365d !important;
	border: 1px solid rgba(26, 54, 93, 0.2)
}

.modal-footer .btn-secondary:hover,
.modal-body .btn-secondary:hover {
	background: rgba(26, 54, 93, 0.06);
	border-color: #1a365d
}

.modal-footer .btn-danger,
.modal-body .btn-danger {
	background: #f62718;
	border-color: #f62718;
	color: #fff !important
}

.modal-footer .btn-success,
.modal-body .btn-success {
	background: #004de6;
	border-color: #004de6;
	color: #fff !important
}

.swal2-popup {
	border-radius: 16px !important;
	padding: 22px 22px 18px !important;
	background: rgba(255, 255, 255, 0.72) !important;
	backdrop-filter: blur(18px) !important;
	-webkit-backdrop-filter: blur(18px) !important;
	border: 1px solid rgba(255, 255, 255, 0.78) !important;
	box-shadow: 0 22px 56px rgba(26, 54, 93, 0.22) !important
}

.swal2-title {
	color: #32393f !important;
	font-size: 18px !important;
	font-weight: 600 !important
}

.swal2-html-container,
.swal2-content {
	color: #4c5258 !important;
	font-size: 14px !important
}

.swal2-styled.swal2-confirm {
	border: 0 !important;
	border-radius: 8px !important;
	background-image: linear-gradient(94deg, #1a365d 0%, #3375d2 32%, #3aa61a 68%, #0e650d 100%) !important;
	background-size: 160% 100% !important;
	background-position: 0% 50% !important;
	background-repeat: no-repeat !important;
	background-color: #1a365d !important
}

.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
	border-radius: 8px !important
}

/* Glass alerts — all page alerts (incl. solid bg-success / alert-glass) */
.page-content .alert,
.alert.alert-glass {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border-radius: 14px !important;
	border: 1px solid rgba(255, 255, 255, 0.7) !important;
	box-shadow: 0 8px 26px rgba(26, 54, 93, 0.12);
	padding: 12px 16px;
	font-size: 0.8125rem;
	font-weight: 500;
	line-height: 1.4;
	margin-bottom: 14px;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.42)) !important;
	color: #32393f !important
}

.page-content .alert > i:first-child,
.page-content .alert > .bx:first-child,
.alert.alert-glass > i:first-child,
.alert.alert-glass > .bx:first-child {
	width: 32px;
	height: 32px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 1.05rem;
	line-height: 1;
	background: rgba(255, 255, 255, 0.65);
	box-shadow: 0 2px 8px rgba(26, 54, 93, 0.08)
}

.page-content .alert.alert-danger,
.page-content .alert.bg-danger,
.alert-glass.alert-danger {
	background: linear-gradient(145deg, rgba(246, 39, 24, 0.22), rgba(255, 255, 255, 0.55)) !important;
	border-color: rgba(246, 39, 24, 0.28) !important;
	color: #7a160e !important
}

.page-content .alert.alert-danger > i:first-child,
.page-content .alert.alert-danger > .bx:first-child,
.page-content .alert.bg-danger > i:first-child,
.alert-glass.alert-danger > i:first-child,
.alert-glass.alert-danger > .bx:first-child {
	color: #f62718;
	background: rgba(246, 39, 24, 0.12)
}

.page-content .alert.alert-success,
.page-content .alert.bg-success,
.alert-glass.alert-success {
	background: linear-gradient(145deg, rgba(49, 128, 46, 0.22), rgba(255, 255, 255, 0.55)) !important;
	border-color: rgba(49, 128, 46, 0.28) !important;
	color: #164814 !important
}

.page-content .alert.alert-success > i:first-child,
.page-content .alert.alert-success > .bx:first-child,
.page-content .alert.bg-success > i:first-child,
.alert-glass.alert-success > i:first-child,
.alert-glass.alert-success > .bx:first-child {
	color: #31802e;
	background: rgba(49, 128, 46, 0.12)
}

.page-content .alert.alert-warning,
.page-content .alert.bg-warning,
.alert-glass.alert-warning {
	background: linear-gradient(145deg, rgba(230, 126, 34, 0.24), rgba(255, 255, 255, 0.55)) !important;
	border-color: rgba(230, 126, 34, 0.32) !important;
	color: #7a3d0c !important
}

.page-content .alert.alert-warning > i:first-child,
.page-content .alert.alert-warning > .bx:first-child,
.alert-glass.alert-warning > i:first-child,
.alert-glass.alert-warning > .bx:first-child {
	color: #e67e22;
	background: rgba(230, 126, 34, 0.14)
}

.page-content .alert.alert-info,
.page-content .alert.bg-info,
.page-content .alert.alert-primary,
.alert-glass.alert-info {
	background: linear-gradient(145deg, rgba(26, 54, 93, 0.22), rgba(255, 255, 255, 0.55)) !important;
	border-color: rgba(26, 54, 93, 0.28) !important;
	color: #1a365d !important
}

.page-content .alert.alert-info > i:first-child,
.page-content .alert.alert-info > .bx:first-child,
.alert-glass.alert-info > i:first-child,
.alert-glass.alert-info > .bx:first-child {
	color: #1a365d;
	background: rgba(26, 54, 93, 0.12)
}

.page-content .alert.alert-secondary,
.page-content .alert.bg-secondary {
	background: linear-gradient(145deg, rgba(108, 117, 125, 0.18), rgba(255, 255, 255, 0.55)) !important;
	border-color: rgba(108, 117, 125, 0.28) !important;
	color: #3d454d !important
}

/* Kill solid Bootstrap text-white inside glass alerts */
.page-content .alert .text-white,
.page-content .alert h6.text-white,
.page-content .alert .font-35.text-white {
	color: inherit !important
}

.page-content .alert .btn-close,
.alert-glass .btn-close {
	font-size: 0.7rem;
	padding: 0.55rem;
	opacity: 0.55;
	margin-left: auto;
	filter: none
}

.page-content .alert .btn-close:hover,
.alert-glass .btn-close:hover {
	opacity: 0.9
}

.page-content .alert.alert-dismissible {
	padding-right: 2.75rem
}

.page-content .alert ul {
	margin-bottom: 0;
	padding-left: 1.1rem
}

/* Payout verify icons (KYC / bank) */
#clientsPage .payout-verify-ok {
	color: #31802e;
	font-size: 1.35rem;
	line-height: 1;
	vertical-align: middle
}

#clientsPage .payout-verify-no {
	color: #f62718;
	font-size: 1.35rem;
	line-height: 1;
	vertical-align: middle
}

#clientsPage .payout-bank-stack {
	line-height: 1.35;
	font-size: 0.8125rem
}

#clientsPage .payout-bank-stack > div + div {
	margin-top: 2px;
	color: #5c6770
}

#clientsPage .payout-select-col {
	width: 36px;
	min-width: 36px;
	max-width: 42px;
	vertical-align: middle
}

#clientsPage .payout-select-col .form-check-input {
	margin: 0;
	cursor: pointer
}

/* Glass Lobibox toasts — icon + text one row */
.lobibox-notify {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	min-height: 52px !important;
	padding: 12px 36px 12px 14px !important;
	border-radius: 16px !important;
	border: 1px solid rgba(255, 255, 255, 0.75) !important;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.48)) !important;
	backdrop-filter: blur(18px) !important;
	-webkit-backdrop-filter: blur(18px) !important;
	box-shadow: 0 12px 36px rgba(26, 54, 93, 0.16) !important;
	overflow: hidden
}

.lobibox-notify.notify-mini {
	min-height: 44px !important;
	padding: 10px 34px 10px 12px !important;
	gap: 10px !important
}

.lobibox-notify.lobibox-notify-success {
	border-color: rgba(49, 128, 46, 0.35) !important;
	background: linear-gradient(145deg, rgba(49, 128, 46, 0.28), rgba(255, 255, 255, 0.55)) !important
}

.lobibox-notify.lobibox-notify-error {
	border-color: rgba(246, 39, 24, 0.35) !important;
	background: linear-gradient(145deg, rgba(246, 39, 24, 0.26), rgba(255, 255, 255, 0.55)) !important
}

.lobibox-notify.lobibox-notify-warning {
	border-color: rgba(230, 126, 34, 0.38) !important;
	background: linear-gradient(145deg, rgba(230, 126, 34, 0.28), rgba(255, 255, 255, 0.55)) !important
}

.lobibox-notify.lobibox-notify-info {
	border-color: rgba(26, 54, 93, 0.35) !important;
	background: linear-gradient(145deg, rgba(26, 54, 93, 0.26), rgba(255, 255, 255, 0.55)) !important
}

.lobibox-notify .lobibox-notify-title {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #1a365d !important;
	margin: 0 0 2px !important;
	line-height: 1.25 !important
}

.lobibox-notify .lobibox-notify-msg {
	font-size: 13px !important;
	color: #4c5258 !important;
	max-height: none !important;
	line-height: 1.35 !important;
	overflow: visible !important;
	white-space: normal !important
}

.lobibox-notify .lobibox-notify-icon-wrapper {
	position: static !important;
	left: auto !important;
	width: auto !important;
	height: auto !important;
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important
}

.lobibox-notify .lobibox-notify-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	height: auto !important
}

.lobibox-notify .lobibox-notify-icon > div {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important
}

.lobibox-notify .lobibox-notify-icon > div .icon-el {
	font-size: 22px !important;
	line-height: 1 !important;
	color: #1a365d !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important
}

.lobibox-notify .lobibox-notify-icon > div .icon-el i {
	font-size: inherit !important;
	line-height: 1 !important
}

.lobibox-notify.lobibox-notify-success .icon-el { color: #31802e !important }
.lobibox-notify.lobibox-notify-error .icon-el { color: #f62718 !important }
.lobibox-notify.lobibox-notify-warning .icon-el { color: #e67e22 !important }

.lobibox-notify .lobibox-notify-body {
	position: relative !important;
	margin: 0 !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	padding-right: 4px !important
}

.lobibox-notify.notify-mini .lobibox-notify-icon > div .icon-el {
	font-size: 20px !important
}

.lobibox-notify.notify-mini .lobibox-notify-body {
	margin: 0 !important
}

.lobibox-notify.rounded {
	border-radius: 14px !important
}

.lobibox-notify .lobibox-close {
	top: 50% !important;
	transform: translateY(-50%) !important;
	right: 10px !important
}

.team-level-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px
}

/* Change Team preview — Left/Right binary tree */
.tc-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.tc-summary-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 8px;
	background: rgba(26, 54, 93, 0.06);
	border: 1px solid rgba(26, 54, 93, 0.12);
	color: #1a365d;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
}
.tc-compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
@media (max-width: 991.98px) {
	.tc-compare {
		grid-template-columns: 1fr;
	}
}
.tc-panel {
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.75);
	overflow: hidden;
	min-width: 0;
}
.tc-panel-old { border-top: 3px solid #f62718; }
.tc-panel-new { border-top: 3px solid #31802e; }
.tc-panel-head {
	padding: 8px 12px;
	font-size: 13px;
	font-weight: 800;
	color: #1a365d;
	background: rgba(26, 54, 93, 0.04);
	border-bottom: 1px solid #e2e8f0;
}
.tc-panel-head small {
	font-weight: 600;
	color: #64748b;
}
.tc-panel-body {
	padding: 12px;
}
.tc-panel-body + .tc-panel-body {
	border-top: 1px dashed #e2e8f0;
}
.tc-note {
	font-size: 11px;
	color: #64748b;
	margin-bottom: 8px;
}
.tc-bin-wrap {
	overflow-x: auto;
	padding: 4px 2px 8px;
	text-align: center;
}
.tc-bin {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	vertical-align: top;
}
.tc-bin-node {
	min-width: 92px;
	max-width: 120px;
	padding: 6px 8px;
	border: 1px solid #d7dee8;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 1px 0 rgba(26, 54, 93, 0.04);
}
.tc-bin-code {
	font-size: 11px;
	font-weight: 800;
	color: #1a365d;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tc-bin-name {
	font-size: 10px;
	color: #64748b;
	line-height: 1.2;
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tc-bin-fork {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 10px;
	margin-top: 6px;
	padding-top: 10px;
	position: relative;
}
.tc-bin-fork::before {
	content: "";
	position: absolute;
	top: 0;
	left: 25%;
	right: 25%;
	height: 1px;
	background: #cbd5e1;
}
.tc-bin-arm {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 96px;
	position: relative;
	padding-top: 2px;
}
.tc-bin-arm::before {
	content: "";
	position: absolute;
	top: -10px;
	left: 50%;
	width: 1px;
	height: 10px;
	background: #cbd5e1;
}
.tc-bin-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 16px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 800;
	margin-bottom: 4px;
	line-height: 1;
}
.tc-bin-tag-l {
	background: rgba(49, 128, 46, 0.14);
	color: #31802e;
}
.tc-bin-tag-r {
	background: rgba(246, 39, 24, 0.12);
	color: #f62718;
}
.tc-bin-empty {
	min-width: 72px;
	padding: 8px 6px;
	border: 1px dashed #cbd5e1;
	border-radius: 8px;
	color: #94a3b8;
	font-size: 10px;
	font-style: italic;
	background: #f8fafc;
}

.team-level-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid rgba(26, 54, 93, 0.14);
	background: #fff;
	color: #4c5258;
	border-radius: 8px;
	padding: 8px 12px;
	min-height: 40px;
	font-size: 13px
}

.team-level-tab strong {
	color: #1a365d;
	font-size: 14px
}

.team-level-tab.active {
	background: rgba(26, 54, 93, 0.08);
	border-color: #1a365d;
	color: #1a365d
}

.team-level-tab:hover {
	border-color: #1a365d
}

#clientsPage .members-list-tabs {
	margin-top: 4px
}

#clientsPage .members-stat-card[data-list],
#clientsPage .members-verify-head,
#clientsPage .members-verify-row {
	cursor: pointer
}

#clientsPage .members-stat-card.is-active,
#clientsPage .members-verify-card.is-active {
	border-color: rgba(26, 54, 93, 0.35);
	box-shadow: 0 4px 16px rgba(26, 54, 93, 0.12)
}

#clientsPage .members-verify-row {
	padding: 4px 4px 2px;
	border-radius: 6px
}

#clientsPage .members-verify-row:hover,
#clientsPage .members-verify-row.is-active {
	background: rgba(26, 54, 93, 0.07)
}

.nominee-guardian-box {
	border-left: 4px solid #ffc107;
	background: rgba(255, 193, 7, 0.08);
	border-radius: 8px;
	padding: 12px 14px
}

#nomineeEditPage .nominee-edit-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(26, 54, 93, 0.08);
	overflow: hidden
}

#nomineeEditPage .nominee-edit-head {
	display: flex;
	align-items: center;
	gap: 10px;
	background: #1a365d;
	color: #fff;
	padding: 14px 18px
}

#nomineeEditPage .nominee-edit-head h5 {
	color: #fff;
	font-size: 16px;
	letter-spacing: 0.3px
}

#nomineeEditPage .nominee-edit-body {
	padding: 22px
}

#nomineeEditPage .nominee-section-title {
	color: #1a365d;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	margin-bottom: 12px
}

#nomineeEditPage .nominee-doc-card {
	border: 1px solid rgba(26, 54, 93, 0.1);
	border-radius: 10px;
	padding: 10px;
	background: #faf8fc;
	height: 100%
}

#nomineeEditPage .nominee-doc-card img {
	width: 100%;
	height: 90px;
	object-fit: cover;
	border-radius: 6px
}

#nomineeEditPage .nominee-doc-empty {
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px dashed rgba(26, 54, 93, 0.2);
	border-radius: 6px;
	color: #8a8a8a
}

#nomineeEditPage .nominee-doc-card a {
	display: block;
	font-size: 12px;
	margin-top: 6px
}

#acmPage .card.glass-ui > .card-body {
	padding: 12px 14px
}

#acmPage .clients-card-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 10px;
	padding: 0 0 10px;
	border-bottom: 1px solid rgba(26, 54, 93, 0.1)
}

#acmPage .clients-card-heading {
	display: flex;
	align-items: center;
	gap: 8px
}

#acmPage .clients-card-heading h5 {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #32393f
}

#acmPage .acm-hint {
	margin-top: 2px;
	font-size: 11px;
	color: #6c757d
}

#acmPage .clients-title-icon {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background: rgba(26, 54, 93, 0.08);
	color: #1a365d;
	flex-shrink: 0
}

#acmPage .clients-title-icon .bx {
	font-size: 15px
}

#acmPage .clients-header-btns {
	display: flex;
	align-items: center
}

#acmPage .select2-container {
	width: 180px !important
}

#acmPage .select2-container .select2-selection--single {
	height: 32px !important;
	border: 1px solid rgba(26, 54, 93, 0.16) !important;
	border-radius: 6px !important;
	background-color: #fff !important;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%233a0b54' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.6rem center !important;
	background-size: 12px 10px !important
}

#acmPage .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
	line-height: 30px;
	color: #32393f;
	padding-left: 10px;
	padding-right: 1.8rem;
	font-size: 13px
}

#acmPage .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
	display: none
}

#acmPage .select2-container--bootstrap4.select2-container--focus .select2-selection--single,
#acmPage .select2-container--bootstrap4.select2-container--open .select2-selection--single {
	border: 1px solid #1a365d !important;
	box-shadow: 0 0 0 0.15rem rgba(26, 54, 93, 0.12)
}

#acmPage .acm-list-wrap {
	overflow-x: auto
}

#acmPage .acm-row {
	display: grid;
	grid-template-columns: 26px minmax(140px, 1fr) auto;
	align-items: center;
	gap: 4px;
	min-width: 640px;
	min-height: 34px;
	padding: 2px 6px;
	border-radius: 6px
}

#acmPage .acm-row-head {
	position: sticky;
	top: 0;
	z-index: 2;
	min-height: 28px;
	margin-bottom: 4px;
	padding-top: 4px;
	padding-bottom: 4px;
	background: rgba(255, 255, 255, 0.88);
	color: #6c757d;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em
}

#acmPage .acm-parent {
	margin-bottom: 4px;
	border: 1px solid rgba(26, 54, 93, 0.08);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.45)
}

#acmPage .acm-parent > .acm-row {
	background: rgba(26, 54, 93, 0.04);
	min-height: 36px
}

#acmPage .acm-child-list {
	padding: 0 4px 4px 12px
}

#acmPage .acm-child {
	margin-top: 3px;
	border: 1px dashed rgba(26, 54, 93, 0.12);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.7)
}

#acmPage .acm-child .acm-row {
	min-height: 30px
}

#acmPage .acm-handle,
#acmPage .acm-handle-spacer {
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #1a365d;
	border-radius: 4px
}

#acmPage .acm-handle {
	cursor: grab;
	background: rgba(26, 54, 93, 0.08);
	user-select: none;
	-webkit-user-select: none
}

#acmPage .acm-handle:active {
	cursor: grabbing
}

#acmPage .acm-handle .bx {
	font-size: 15px
}

#acmPage .acm-name {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #32393f;
	line-height: 1.2
}

#acmPage .acm-child .acm-name {
	font-size: 12px;
	font-weight: 500
}

#acmPage .acm-name .bx {
	color: #1a365d;
	font-size: 14px
}

#acmPage .acm-perms {
	display: grid;
	grid-template-columns: repeat(5, 64px);
	justify-items: center;
	align-items: center
}

#acmPage .acm-perm {
	width: 64px;
	text-align: center
}

#acmPage .form-check-input {
	width: 1.7em;
	height: 0.95em;
	margin: 0;
	cursor: pointer
}

#acmPage .form-check-input:checked {
	background-color: #004de6;
	border-color: #004de6
}

#acmPage .is-dragging {
	opacity: .55
}

.verify-reject-alert {
	background: linear-gradient(145deg, rgba(246, 39, 24, 0.22), rgba(255, 255, 255, 0.55));
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(246, 39, 24, 0.28);
	border-radius: 14px;
	padding: 12px 16px;
	color: #7a160e;
	box-shadow: 0 8px 24px rgba(26, 54, 93, 0.1)
}

.verify-reject-alert h6 {
	color: #f62718;
	font-size: 14px;
	font-weight: 700
}

.verify-reject-alert p {
	color: #4c5258;
	margin: 0
}

.verify-reject-alert > .d-flex > i {
	width: 32px;
	height: 32px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(246, 39, 24, 0.12);
	color: #f62718;
	font-size: 1.05rem;
	flex-shrink: 0;
	margin-right: 10px !important
}

#nomineeEditPage .nominee-edit-footer {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	padding: 16px 22px;
	border-top: 1px solid rgba(26, 54, 93, 0.1);
	background: #fafafa
}

#verifyEditPage .verify-page-nav {
	margin-bottom: 12px
}

#verifyEditPage .verify-back-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #1a365d;
	font-weight: 600
}

#verifyEditPage .verify-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	background: #fff;
	border-radius: 12px;
	padding: 16px 18px;
	margin-bottom: 16px;
	box-shadow: 0 8px 24px rgba(26, 54, 93, 0.08)
}

#verifyEditPage .verify-hero-member {
	display: flex;
	align-items: center;
	gap: 14px
}

#verifyEditPage .verify-hero-avatar {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid rgba(26, 54, 93, 0.12)
}

#verifyEditPage .verify-hero-member h4 {
	margin: 0;
	font-size: 18px;
	color: #1a365d
}

#verifyEditPage .verify-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	color: #6c757d;
	font-size: 13px
}

#verifyEditPage .verify-hero-side {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap
}

#verifyEditPage .verify-hero-btns {
	display: flex;
	gap: 8px
}

#verifyEditPage .verify-hero-wait {
	font-size: 12px;
	color: #6c757d
}

#verifyEditPage .verify-btn-verify,
#verifyEditPage .verify-btn-reject {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	color: #fff;
	padding: 8px 16px;
	border-radius: 8px;
	font-weight: 600
}

#verifyEditPage .verify-btn-verify {
	background: #004de6
}

#verifyEditPage .verify-btn-reject {
	background: #f62718
}

#verifyEditPage .verify-shell {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(26, 54, 93, 0.08);
	overflow: hidden
}

#verifyEditPage .verify-grid {
	padding: 20px;
	display: grid;
	gap: 16px
}

#verifyEditPage .verify-card-title {
	color: #1a365d;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	margin-bottom: 14px
}

#verifyEditPage .verify-doc {
	border: 1px solid rgba(26, 54, 93, 0.1);
	border-radius: 10px;
	padding: 10px;
	background: #faf8fc;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px
}

#verifyEditPage .verify-doc-label {
	font-size: 12px;
	font-weight: 700;
	color: #1a365d
}

#verifyEditPage .verify-doc-preview {
	position: relative;
	display: block;
	border-radius: 8px;
	overflow: hidden
}

#verifyEditPage .verify-doc-preview img {
	width: 100%;
	height: 220px;
	object-fit: cover
}

#verifyEditPage .verify-doc-view {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(26, 54, 93, 0.35);
	color: #fff;
	opacity: 0;
	transition: opacity .2s
}

#verifyEditPage .verify-doc-preview:hover .verify-doc-view {
	opacity: 1
}

#verifyEditPage .verify-doc-empty {
	height: 220px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px dashed rgba(26, 54, 93, 0.2);
	border-radius: 8px;
	color: #8a8a8a;
	gap: 4px
}

#verifyEditPage .verify-doc-upload {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: #1a365d;
	cursor: pointer;
	margin: 0
}

#verifyEditPage .verify-form-footer {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
	padding: 16px 20px;
	border-top: 1px solid rgba(26, 54, 93, 0.1);
	background: #fafafa
}

.verify-status-modal .modal-header {
	background: #1a365d;
	color: #fff
}

.verify-status-modal .modal-title {
	color: #fff
}

.verify-status-modal .btn-close {
	filter: invert(1)
}

@media (max-width: 767.98px) {
	#verifyEditPage .verify-hero {
		align-items: flex-start
	}
	#verifyEditPage .verify-doc-preview img,
	#verifyEditPage .verify-doc-empty {
		height: 180px
	}
}

#franchisePurchasePage .fp-table-wrap {
	max-height: 520px;
	overflow: auto;
	border-radius: 8px;
	border: 1px solid rgba(26, 54, 93, 0.12)
}

#franchisePurchasePage .fp-table {
	margin: 0;
	font-size: 13px;
	border-collapse: separate;
	border-spacing: 0
}

#franchisePurchasePage .fp-table thead th {
	background: #1a365d;
	color: #fff;
	font-weight: 600;
	white-space: nowrap;
	text-align: center;
	vertical-align: middle;
	position: sticky;
	top: 0;
	z-index: 1;
	border: none
}

#franchisePurchasePage .fp-table thead th:first-child {
	border-top-left-radius: 8px
}

#franchisePurchasePage .fp-table thead th:last-child {
	border-top-right-radius: 8px
}

#franchisePurchasePage .fp-table tbody td {
	vertical-align: middle;
	text-align: center
}

#franchisePurchasePage .fp-table tbody td:nth-child(2),
#franchisePurchasePage .fp-table tbody td.fp-pname-cell {
	text-align: left
}

#franchisePurchasePage .fp-table tbody td.fp-qty-cell {
	text-align: center;
	min-width: 88px
}

#franchisePurchasePage .fp-pname {
	font-weight: 600;
	color: #32393f;
	margin-bottom: 6px
}

#franchisePurchasePage .fp-qty-cell .fp-pname {
	margin-bottom: 0
}

#franchisePurchasePage .fp-qty {
	max-width: 90px;
	height: 32px;
	padding: 4px 8px;
	margin: 0 auto
}

#franchisePurchasePage .fp-summary-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 16px
}

#franchisePurchasePage .fp-summary-card {
	border: 1px solid rgba(26, 54, 93, 0.12);
	border-radius: 8px;
	padding: 12px;
	background: #fff
}

#franchisePurchasePage .fp-summary-head {
	background: #1a365d;
	color: #fff;
	font-weight: 600;
	text-align: center;
	padding: 8px;
	margin: -12px -12px 12px;
	border-radius: 8px 8px 0 0
}

#franchisePurchasePage .fp-summary-card th {
	width: 45%;
	font-size: 13px
}

@media (max-width: 991.98px) {
	#franchisePurchasePage .fp-summary-grid {
		grid-template-columns: 1fr
	}
}

#franchisePurchasePage .fp-pos-name {
	color: #f62718;
	font-weight: 700
}

#franchisePurchasePage .fp-avail {
	font-size: 12px;
	color: #6c757d;
	margin-top: 4px
}

#franchisePurchasePage .fp-stock-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 12px
}

#franchisePurchasePage .fp-leg {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 8px;
	border-radius: 4px;
	font-weight: 600
}

#franchisePurchasePage .fp-leg::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 2px;
	display: inline-block
}

#franchisePurchasePage .fp-leg-out {
	background: #fdecea;
	color: #9b1c1c
}

#franchisePurchasePage .fp-leg-out::before {
	background: #f5b5b0
}

#franchisePurchasePage .fp-leg-low {
	background: #e8f8ea;
	color: #1e6b2f
}

#franchisePurchasePage .fp-leg-low::before {
	background: #a8e6b0
}

#franchisePurchasePage .fp-leg-ok {
	background: #d4edda;
	color: #155724
}

#franchisePurchasePage .fp-leg-ok::before {
	background: #28a745
}

#franchisePurchasePage .fp-table tbody tr.fp-stock-out {
	background: #fdecea
}

#franchisePurchasePage .fp-table tbody tr.fp-stock-low {
	background: #e8f8ea
}

#franchisePurchasePage .fp-table tbody tr.fp-stock-ok {
	background: #d4edda
}

/* Franchise inventory list */
.franchise-stock-page .fp-stock-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 12px
}
.franchise-stock-page .fp-leg {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 6px;
	font-weight: 600
}
.franchise-stock-page .fp-leg::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 2px;
	display: inline-block
}
.franchise-stock-page .fp-leg-out {
	background: #fdecea;
	color: #9b1c1c
}
.franchise-stock-page .fp-leg-out::before {
	background: #f5b5b0
}
.franchise-stock-page .fp-leg-ok {
	background: #e8f8ea;
	color: #1e6b2f
}
.franchise-stock-page .fp-leg-ok::before {
	background: #28a745
}
.franchise-stock-page #example tbody tr.fs-stock-low,
.franchise-stock-page #example tbody tr.fs-stock-low > td {
	background-color: #fdecea !important
}
.franchise-stock-page #example tbody tr.fs-stock-ok,
.franchise-stock-page #example tbody tr.fs-stock-ok > td {
	background-color: #e8f8ea !important
}
.franchise-stock-page #example.table-striped > tbody > tr.fs-stock-low:nth-of-type(odd) > *,
.franchise-stock-page #example.table-striped > tbody > tr.fs-stock-ok:nth-of-type(odd) > * {
	box-shadow: none !important
}

#franchisePurchasePage .fp-float-total {
	position: sticky;
	bottom: 12px;
	margin-left: auto;
	margin-top: 12px;
	width: fit-content;
	background: #e67e22;
	color: #fff;
	font-weight: 700;
	padding: 8px 18px;
	border-radius: 6px
}

/* Member billing form — compact */
#clientAddPage.member-bill-form .card-body {
	padding: 14px 16px
}

#clientAddPage.member-bill-form .client-add-title {
	margin-bottom: 10px
}

#clientAddPage.member-bill-form .client-add-title h5 {
	font-size: 0.95rem
}

#clientAddPage.member-bill-form .client-add-title-icon {
	width: 28px;
	height: 28px;
	font-size: 14px
}

#clientAddPage.member-bill-form .client-add-box {
	padding: 10px 12px 12px;
	margin-bottom: 10px;
	border-radius: 10px
}

#clientAddPage.member-bill-form .client-add-box-title {
	margin-bottom: 8px;
	font-size: 11px
}

#clientAddPage.member-bill-form .row.g-3 {
	--bs-gutter-y: 0.55rem;
	--bs-gutter-x: 0.65rem
}

#clientAddPage.member-bill-form .form-label {
	margin-bottom: 2px;
	font-size: 0.72rem
}

#clientAddPage.member-bill-form .form-control,
#clientAddPage.member-bill-form .form-select {
	min-height: 28px !important;
	height: 28px !important;
	padding: 2px 8px !important;
	font-size: 0.75rem !important;
	border-radius: 6px !important;
	line-height: 1.3 !important
}

#clientAddPage.member-bill-form .form-select {
	padding-right: 28px !important;
	background-position: right 6px center
}

#clientAddPage.member-bill-form .btn {
	padding: 4px 10px;
	font-size: 0.75rem;
	min-height: 28px;
	height: 28px;
	line-height: 1.2
}

#franchisePurchasePage.fp-compact .fp-qty {
	min-height: 26px !important;
	height: 26px !important;
	max-width: 64px;
	padding: 1px 4px !important;
	font-size: 0.75rem !important
}

#franchisePurchasePage.fp-compact .fp-table-wrap {
	max-height: 380px
}

#franchisePurchasePage.fp-compact .fp-table {
	font-size: 12px
}

#franchisePurchasePage.fp-compact .fp-table thead th {
	padding: 6px 8px;
	font-size: 11px
}

#franchisePurchasePage.fp-compact .fp-table tbody td {
	padding: 4px 6px
}

#franchisePurchasePage.fp-compact .fp-table tbody td.fp-qty-cell {
	min-width: 72px
}

#franchisePurchasePage.fp-compact .fp-pname {
	font-size: 12px;
	margin-bottom: 2px
}

#franchisePurchasePage.fp-compact .fp-summary-grid {
	gap: 10px;
	margin-top: 10px
}

#franchisePurchasePage.fp-compact .fp-summary-card {
	padding: 8px;
	border-radius: 6px
}

#franchisePurchasePage.fp-compact .fp-summary-head {
	padding: 5px 8px;
	font-size: 12px;
	margin: -8px -8px 8px;
	border-radius: 6px 6px 0 0
}

#franchisePurchasePage.fp-compact .fp-summary-card th,
#franchisePurchasePage.fp-compact .fp-summary-card td {
	font-size: 12px;
	padding: 4px 8px
}

#franchisePurchasePage.fp-compact .fp-float-total {
	padding: 5px 12px;
	font-size: 13px;
	margin-top: 8px;
	bottom: 8px
}

/* ===== User member dashboard (glass-ui) ===== */
#userDashboardPage .clients-card-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 8px;
	padding: 0 0 8px;
	border-bottom: 1px solid rgba(26, 54, 93, 0.1)
}
#userDashboardPage .clients-card-heading {
	display: flex;
	align-items: center;
	gap: 8px
}
#userDashboardPage .clients-card-heading h5,
#userDashboardPage .clients-card-heading h6 {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: #1a365d
}
#userDashboardPage .clients-title-icon {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(26, 54, 93, 0.1);
	color: #1a365d;
	font-size: 15px;
	flex-shrink: 0
}
#userDashboardPage .member-status-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 20px;
	line-height: 1.2;
	white-space: nowrap
}
#userDashboardPage .member-status-verified {
	background: rgba(49, 128, 46, 0.14);
	color: #31802e
}
#userDashboardPage .member-status-pending {
	background: rgba(26, 54, 93, 0.1);
	color: #1a365d
}

#userDashboardPage .ud-profile-card-body {
	display: flex;
	flex-direction: column;
	height: 100%
}
#userDashboardPage .ud-profile-grid {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 14px;
	align-items: center
}
#userDashboardPage .ud-avatar-block {
	text-align: center
}
#userDashboardPage .ud-avatar-wrap {
	position: relative;
	display: inline-block
}
#userDashboardPage .ud-avatar {
	width: 78px;
	height: 78px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid #1a365d;
	padding: 2px;
	background: #fff
}
#userDashboardPage .ud-rank {
	color: #1a365d;
	font-weight: 700;
	font-size: 11px;
	margin-top: 2px
}
#userDashboardPage .ud-info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 12px
}
#userDashboardPage .ud-info-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: 13px;
	color: #333;
	word-break: break-word
}
#userDashboardPage .ud-info-icon {
	width: 28px;
	height: 28px;
	border-radius: 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(26, 54, 93, 0.1);
	color: #1a365d;
	flex-shrink: 0;
	font-size: 14px
}
#userDashboardPage .ud-actions {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid rgba(26, 54, 93, 0.08);
	min-width: 0
}
#userDashboardPage .ud-action-btn {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: #1a365d !important;
	color: #fff !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	transition: .2s ease;
	line-height: 1;
	padding: 0;
	border: 0
}
#userDashboardPage .ud-action-btn .bx,
#userDashboardPage .ud-action-btn i {
	font-family: boxicons !important;
	font-size: 15px !important;
	line-height: 1 !important;
	color: #fff !important;
	display: inline-block !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	-webkit-font-smoothing: antialiased
}
#userDashboardPage .ud-action-btn:hover {
	background: #31802e !important;
	color: #fff !important;
	transform: translateY(-1px)
}
#userDashboardPage .ud-action-btn:hover .bx,
#userDashboardPage .ud-action-btn:hover i {
	color: #fff !important
}

#userDashboardPage .ud-kyc-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px
}
#userDashboardPage .ud-kyc-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px
}
@media (max-width: 992px) {
	#userDashboardPage .ud-kyc-grid {
		grid-template-columns: 1fr
	}
}
#userDashboardPage .ud-greet-bar .card-body {
	background-image: linear-gradient(94deg, #1a365d 0%, #3375d2 32%, #3aa61a 68%, #0e650d 100%);
	background-size: 160% 100%;
	background-position: 0% 50%;
	background-repeat: no-repeat;
	border-radius: 10px
}
#userDashboardPage .ud-greet-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 12px;
	text-align: center;
	color: #fff;
	font-weight: 700;
	letter-spacing: .3px
}
#userDashboardPage .ud-greet-icon {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .16);
	color: #ffd54f;
	flex-shrink: 0
}
#userDashboardPage .ud-greet-icon .bx {
	font-size: 18px;
	line-height: 1
}
#userDashboardPage .ud-greet-text {
	font-size: 16px
}
#userDashboardPage .ud-greet-meta {
	font-size: 14px;
	opacity: .95;
	display: inline-flex;
	align-items: center;
	gap: 5px
}
#userDashboardPage .ud-greet-rank {
	font-size: 16px;
	color: #ffd54f;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	gap: 5px
}
#userDashboardPage .ud-top-cards > [class*="col-"] {
	display: flex
}
#userDashboardPage .ud-equal-card {
	width: 100%;
	min-height: 320px
}
#userDashboardPage .ud-profile-compact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px
}
#userDashboardPage .ud-info-grid-compact {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px
}
#userDashboardPage .ud-info-grid-compact .ud-info-item {
	font-size: 12px
}
#userDashboardPage .ud-notice-card .card-body,
#franchiseDashboardPage .ud-notice-card .card-body {
	display: flex;
	flex-direction: column
}
#userDashboardPage .ud-notice-board,
#franchiseDashboardPage .ud-notice-board {
	flex: 1;
	min-height: 210px;
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(26, 54, 93, .06), rgba(49, 128, 46, .06));
	border: 1px solid rgba(26, 54, 93, .1);
	padding: 10px;
	overflow: hidden
}
#userDashboardPage .ud-notice-marquee-wrap,
#franchiseDashboardPage .ud-notice-marquee-wrap {
	height: 100%;
	min-height: 190px
}
#userDashboardPage .ud-notice-marquee,
#franchiseDashboardPage .ud-notice-marquee {
	height: 190px;
	width: 100%
}
#userDashboardPage .ud-notice-item,
#franchiseDashboardPage .ud-notice-item {
	background: #fff;
	border-left: 3px solid #31802e;
	border-radius: 8px;
	padding: 10px 12px;
	margin: 0 4px 10px;
	box-shadow: 0 2px 8px rgba(26, 54, 93, .06)
}
#userDashboardPage .ud-notice-title,
#franchiseDashboardPage .ud-notice-title {
	font-weight: 700;
	color: #1a365d;
	font-size: 13px;
	margin-bottom: 4px;
	display: flex;
	align-items: center;
	gap: 6px
}
#userDashboardPage .ud-notice-msg,
#franchiseDashboardPage .ud-notice-msg {
	font-size: 12px;
	color: #475569;
	line-height: 1.45
}
#userDashboardPage .ud-notice-empty,
#franchiseDashboardPage .ud-notice-empty {
	height: 100%;
	min-height: 190px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	color: #64748b;
	font-size: 13px;
	text-align: center
}
#userDashboardPage .ud-notice-empty .bx,
#franchiseDashboardPage .ud-notice-empty .bx {
	font-size: 28px;
	color: #1a365d;
	opacity: .7
}
#userDashboardPage .ud-kyc-card {
	border-radius: 12px;
	padding: 12px;
	border: 1px solid rgba(26, 54, 93, .1);
	background: rgba(255, 255, 255, .45);
	transition: transform .25s ease, box-shadow .25s ease
}
#userDashboardPage .ud-kyc-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(26, 54, 93, .1)
}
#userDashboardPage .ud-kyc-card.is-ok {
	border-color: rgba(49, 128, 46, .35)
}
#userDashboardPage .ud-kyc-card.is-bad {
	border-color: rgba(246, 39, 24, .28)
}
#userDashboardPage .ud-kyc-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px
}
#userDashboardPage .ud-kyc-status {
	font-size: 11px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	border-radius: 999px
}
#userDashboardPage .ud-kyc-status.ok {
	color: #31802e;
	background: rgba(49, 128, 46, .12)
}
#userDashboardPage .ud-kyc-status.bad {
	color: #f62718;
	background: rgba(246, 39, 24, .1)
}
#userDashboardPage .ud-kyc-label {
	font-weight: 700;
	margin: 0;
	font-size: 13px;
	color: #1a365d;
	display: flex;
	align-items: center;
	gap: 6px
}
#userDashboardPage .ud-kyc-imgs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px
}
#userDashboardPage .ud-kyc-imgs-single {
	grid-template-columns: 1fr;
	max-width: 180px
}
#userDashboardPage .ud-kyc-img-box {
	position: relative
}
#userDashboardPage .ud-kyc-img-tag {
	position: absolute;
	left: 6px;
	top: 6px;
	z-index: 1;
	background: rgba(26, 54, 93, .85);
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 999px
}
#userDashboardPage .ud-kyc-thumb,
#userDashboardPage .ud-kyc-placeholder {
	width: 100%;
	height: 84px;
	object-fit: cover;
	border-radius: 10px;
	border: 1px solid rgba(26, 54, 93, .12);
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.55);
	color: #6c757d;
	font-size: 22px
}
#userDashboardPage .ud-kyc-thumb.ud-kyc-open {
	cursor: zoom-in;
	transition: transform .2s ease, box-shadow .2s ease
}
#userDashboardPage .ud-kyc-thumb.ud-kyc-open:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(26, 54, 93, .16)
}
#udKycViewerModal .ud-kyc-viewer {
	border: 0;
	border-radius: 14px;
	overflow: hidden
}
#udKycViewerModal .ud-kyc-viewer-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 12px
}
#udKycViewerModal .ud-kyc-zoom-label {
	min-width: 52px;
	text-align: center;
	font-weight: 700;
	color: #1a365d;
	font-size: 13px
}
#udKycViewerModal .ud-kyc-viewer-stage {
	position: relative;
	height: min(62vh, 520px);
	overflow: auto;
	border-radius: 12px;
	background: #0f172a;
	border: 1px solid rgba(26, 54, 93, .12)
}
#udKycViewerModal #udKycViewerImg {
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: min(90%, 720px);
	max-height: 90%;
	transform: translate(-50%, -50%) scale(1) rotate(0deg);
	transform-origin: center center;
	transition: transform .15s ease;
	user-select: none;
	-webkit-user-drag: none
}
#userDashboardPage .ud-kyc-number {
	margin-top: 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 8px;
	background: rgba(26, 54, 93, .05);
	font-size: 12px
}
#userDashboardPage .ud-kyc-number span {
	color: #666;
	font-weight: 600
}
#userDashboardPage .ud-kyc-number strong {
	color: #1a365d;
	letter-spacing: .3px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px
}

#userDashboardPage .ud-metric-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px
}
#userDashboardPage .ud-metric {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid rgba(26, 54, 93, 0.1);
	background: rgba(255, 255, 255, 0.55);
	min-height: 62px;
	transition: transform .2s ease, box-shadow .2s ease
}
#userDashboardPage .ud-metric:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(26, 54, 93, 0.1)
}
#userDashboardPage .ud-metric-ico {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(26, 54, 93, 0.12);
	color: #1a365d;
	font-size: 16px;
	flex-shrink: 0
}
#userDashboardPage .ud-metric-left {
	background: rgba(26, 54, 93, 0.14);
	color: #1a365d
}
#userDashboardPage .ud-metric-right {
	background: rgba(49, 128, 46, 0.14);
	color: #31802e
}
#userDashboardPage .ud-metric-income {
	background: rgba(49, 128, 46, 0.16);
	color: #31802e
}
#userDashboardPage .ud-metric-remain {
	background: rgba(246, 39, 24, 0.08);
	color: #c62828
}
#userDashboardPage .ud-metric-label {
	font-size: 10px;
	font-weight: 700;
	color: #6c757d;
	letter-spacing: .25px;
	text-transform: uppercase
}
#userDashboardPage .ud-metric-value {
	font-size: 0.95rem;
	font-weight: 800;
	color: #1a365d;
	line-height: 1.2;
	margin-top: 1px
}

#userDashboardPage .card.glass-ui > .card-body {
	padding: 14px 16px
}
#userDashboardPage .card.glass-ui.mb-3 {
	margin-bottom: 12px !important
}
#userDashboardPage .mt-3 {
	margin-top: 12px !important
}
#userDashboardPage .row.g-3 {
	--bs-gutter-y: 0.75rem;
	--bs-gutter-x: 0.75rem
}

@media (max-width: 991.98px) {
	#userDashboardPage .ud-kyc-grid,
	#userDashboardPage .ud-metric-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}
	#userDashboardPage .ud-profile-grid {
		grid-template-columns: 1fr;
		text-align: center
	}
	#userDashboardPage .ud-actions {
		justify-content: center
	}
}
@media (max-width: 575.98px) {
	#userDashboardPage .ud-kyc-grid,
	#userDashboardPage .ud-metric-grid,
	#userDashboardPage .ud-kyc-imgs {
		grid-template-columns: 1fr
	}
	#userDashboardPage .ud-kyc-imgs-single {
		max-width: none
	}
}

/* ===== Franchise panel dashboard ===== */
#franchiseDashboardPage {
	padding-bottom: 8px
}

#franchiseDashboardPage .fd-card {
	overflow: hidden;
	min-height: 148px;
	height: 100%;
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	box-shadow: 0 4px 18px rgba(26, 54, 93, 0.08);
	transition: transform .18s ease, box-shadow .18s ease
}

#franchiseDashboardPage .fd-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px rgba(26, 54, 93, 0.12)
}

#franchiseDashboardPage .fd-body {
	flex: 1;
	padding: 18px 18px 14px;
	display: flex;
	flex-direction: column;
	justify-content: space-between
}

#franchiseDashboardPage .fd-profile {
	flex-direction: row;
	align-items: center;
	gap: 14px;
	justify-content: flex-start
}

#franchiseDashboardPage .fd-avatar-wrap {
	flex-shrink: 0;
	width: 78px;
	height: 78px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid rgba(26, 54, 93, 0.1);
	background: #f5f5f7;
	box-shadow: inset 0 0 0 3px #fff
}

#franchiseDashboardPage .fd-avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

#franchiseDashboardPage .fd-meta {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.6;
	color: #2f3542
}

#franchiseDashboardPage .fd-meta li span {
	font-weight: 600;
	color: #5a6270;
	margin-right: 2px
}

#franchiseDashboardPage .fd-slab {
	color: #f62718;
	font-weight: 700;
	font-style: normal
}

#franchiseDashboardPage .fd-link {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	color: #2f6fed;
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-bottom: 14px;
	line-height: 1.3
}

#franchiseDashboardPage .fd-link:hover {
	color: #1a365d
}

#franchiseDashboardPage .fd-link-plain {
	text-decoration: none;
	color: #2f6fed;
	cursor: default
}

#franchiseDashboardPage .fd-amount {
	font-size: 26px;
	font-weight: 600;
	color: #6b7280;
	line-height: 1.2;
	letter-spacing: 0.2px;
	word-break: break-word
}

#franchiseDashboardPage .fd-curr {
	font-size: 22px;
	font-weight: 600;
	color: #2f6fed;
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-right: 2px
}

#franchiseDashboardPage .fd-curr-green {
	color: #004de6
}

#franchiseDashboardPage .fd-amount-link {
	color: inherit;
	text-decoration: none
}

#franchiseDashboardPage .fd-amount-link .fd-curr,
#franchiseDashboardPage .fd-amount-link {
	color: #2f6fed;
	text-decoration: underline;
	text-underline-offset: 3px
}

#franchiseDashboardPage .fd-metric {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 42px
}

#franchiseDashboardPage .fd-metric-icon {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: #eef1f4;
	color: #8a939e;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	flex-shrink: 0
}

#franchiseDashboardPage .fd-metric-icon-danger {
	background: rgba(246, 39, 24, 0.1);
	color: #f62718;
	font-size: 26px;
	font-weight: 700
}

#franchiseDashboardPage .fd-metric-num {
	font-size: 28px;
	font-weight: 600;
	color: #2f6fed;
	text-decoration: underline;
	text-underline-offset: 3px;
	line-height: 1
}

#franchiseDashboardPage .fd-track {
	height: 8px;
	width: 100%;
	background: #eceff3;
	margin-top: auto
}

#franchiseDashboardPage .fd-fill {
	display: block;
	height: 100%;
	border-radius: 0 3px 3px 0
}

#franchiseDashboardPage .fd-fill-blue { background: linear-gradient(90deg, #3a7bfd, #2f6fed) }
#franchiseDashboardPage .fd-fill-green { background: linear-gradient(90deg, #3f9a3c, #004de6) }
#franchiseDashboardPage .fd-fill-red { background: linear-gradient(90deg, #ff5a4d, #f62718) }
#franchiseDashboardPage .fd-fill-orange { background: linear-gradient(90deg, #ff9f43, #fd7e14) }

@media (max-width: 575.98px) {
	#franchiseDashboardPage .fd-amount {
		font-size: 22px
	}

	#franchiseDashboardPage .fd-avatar-wrap {
		width: 64px;
		height: 64px
	}
}

/* ===== Admin + User dashboard shared glass cards ===== */
#adminDashboardPage .clients-card-title,
#userDashboardPage .clients-card-title,
#franchiseDashboardPage .clients-card-title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 12px;
	padding: 0 0 8px;
	border-bottom: 1px solid rgba(26, 54, 93, 0.1)
}

#adminDashboardPage .clients-card-heading,
#userDashboardPage .clients-card-heading,
#franchiseDashboardPage .clients-card-heading{
	display: flex;
	align-items: center;
	gap: 8px
}

#adminDashboardPage .clients-card-heading h5,
#adminDashboardPage .clients-card-heading h6,
#userDashboardPage .clients-card-heading h5,
#franchiseDashboardPage .clients-card-heading h5,
#userDashboardPage .clients-card-heading h6,
#franchiseDashboardPage .clients-card-heading h6{
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: #1a365d
}

#adminDashboardPage .clients-title-icon,
#userDashboardPage .clients-title-icon,
#franchiseDashboardPage .clients-title-icon{
	width: 30px;
	height: 30px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(26, 54, 93, 0.12);
	color: #1a365d;
	font-size: 15px
}

#adminDashboardPage .member-status-badge,
#userDashboardPage .member-status-badge,
#franchiseDashboardPage .member-status-badge{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: 8px;
	font-size: 11px;
	font-weight: 600
}

#adminDashboardPage .member-status-verified,
#userDashboardPage .member-status-verified,
#franchiseDashboardPage .member-status-verified{
	background: rgba(49, 128, 46, 0.12);
	color: #31802e
}

#adminDashboardPage .member-status-pending,
#userDashboardPage .member-status-pending,
#franchiseDashboardPage .member-status-pending{
	background: rgba(26, 54, 93, 0.1);
	color: #1a365d
}

#adminDashboardPage .card.glass-ui.ad-stat-card,
#adminDashboardPage .card.glass-ui.ad-panel,
#userDashboardPage .card.glass-ui.ad-stat-card,
#franchiseDashboardPage .card.glass-ui.ad-stat-card,
#userDashboardPage .card.glass-ui.ad-panel,
#franchiseDashboardPage .card.glass-ui.ad-panel{
	border: 1px solid transparent !important;
	border-top: 1px solid transparent !important;
	border-radius: 20px !important;
	box-shadow: 0 8px 22px rgba(26, 54, 93, 0.14);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	overflow: hidden
}

#adminDashboardPage .ad-stat-card,
#userDashboardPage .ad-stat-card,
#franchiseDashboardPage .ad-stat-card{
	display: block;
	height: 100%;
	text-decoration: none;
	color: inherit;
	transition: transform 0.18s ease, box-shadow 0.18s ease
}

#adminDashboardPage a.ad-stat-card:hover,
#userDashboardPage a.ad-stat-card:hover,
#franchiseDashboardPage a.ad-stat-card:hover{
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(26, 54, 93, 0.14);
	color: inherit
}

#adminDashboardPage .ad-stat-card .card-body,
#userDashboardPage .ad-stat-card .card-body,
#franchiseDashboardPage .ad-stat-card .card-body{
	padding: 8px 12px
}

#adminDashboardPage .ad-stat-top,
#userDashboardPage .ad-stat-top,
#franchiseDashboardPage .ad-stat-top{
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px
}

#adminDashboardPage .ad-stat-icon,
#userDashboardPage .ad-stat-icon,
#franchiseDashboardPage .ad-stat-icon{
	width: 26px;
	height: 26px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.55);
	color: inherit
}

#adminDashboardPage .ad-stat-label,
#userDashboardPage .ad-stat-label,
#franchiseDashboardPage .ad-stat-label{
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
	opacity: 0.88
}

#adminDashboardPage .ad-stat-value,
#userDashboardPage .ad-stat-value,
#franchiseDashboardPage .ad-stat-value{
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.15;
	word-break: break-word
}

#adminDashboardPage .ad-stat-sub,
#userDashboardPage .ad-stat-sub,
#franchiseDashboardPage .ad-stat-sub{
	margin-top: 2px;
	font-size: 0.65rem;
	line-height: 1.25;
	opacity: 0.75
}

#adminDashboardPage .ad-stat-grid,
#userDashboardPage .ad-stat-grid,
#franchiseDashboardPage .ad-stat-grid{
	--bs-gutter-y: 0.55rem;
	--bs-gutter-x: 0.55rem
}

#adminDashboardPage > .card.glass-ui.mb-3 .card-body,
#userDashboardPage > .card.glass-ui.mb-3 .card-body,
#franchiseDashboardPage > .card.glass-ui.mb-3 .card-body{
	padding-top: 10px;
	padding-bottom: 10px
}

#adminDashboardPage .ad-c-navy,
#userDashboardPage .ad-c-navy,
#franchiseDashboardPage .ad-c-navy{
	background: linear-gradient(145deg, rgba(26, 54, 93, 0.42), rgba(255, 255, 255, 0.48)) !important;
	border-color: rgba(26, 54, 93, 0.38) !important;
	color: #1a365d
}

#adminDashboardPage .ad-c-blue,
#userDashboardPage .ad-c-blue,
#franchiseDashboardPage .ad-c-blue{
	background: linear-gradient(145deg, rgba(58, 123, 253, 0.45), rgba(255, 255, 255, 0.45)) !important;
	border-color: rgba(58, 123, 253, 0.42) !important;
	color: #153d7a
}

#adminDashboardPage .ad-c-green,
#userDashboardPage .ad-c-green,
#franchiseDashboardPage .ad-c-green{
	background: linear-gradient(145deg, rgba(49, 128, 46, 0.42), rgba(255, 255, 255, 0.45)) !important;
	border-color: rgba(49, 128, 46, 0.4) !important;
	color: #164814
}

#adminDashboardPage .ad-c-orange,
#userDashboardPage .ad-c-orange,
#franchiseDashboardPage .ad-c-orange{
	background: linear-gradient(145deg, rgba(230, 126, 34, 0.45), rgba(255, 255, 255, 0.45)) !important;
	border-color: rgba(230, 126, 34, 0.44) !important;
	color: #7a3d0c
}

#adminDashboardPage .ad-c-teal,
#userDashboardPage .ad-c-teal,
#franchiseDashboardPage .ad-c-teal{
	background: linear-gradient(145deg, rgba(13, 148, 136, 0.42), rgba(255, 255, 255, 0.45)) !important;
	border-color: rgba(13, 148, 136, 0.42) !important;
	color: #0a4a44
}

#adminDashboardPage .ad-c-purple,
#userDashboardPage .ad-c-purple,
#franchiseDashboardPage .ad-c-purple{
	background: linear-gradient(145deg, rgba(124, 58, 237, 0.4), rgba(255, 255, 255, 0.45)) !important;
	border-color: rgba(124, 58, 237, 0.4) !important;
	color: #4c1d95
}

#adminDashboardPage .ad-c-red,
#userDashboardPage .ad-c-red,
#franchiseDashboardPage .ad-c-red{
	background: linear-gradient(145deg, rgba(246, 39, 24, 0.4), rgba(255, 255, 255, 0.45)) !important;
	border-color: rgba(246, 39, 24, 0.4) !important;
	color: #7a160e
}

#adminDashboardPage .ad-c-blue .ad-stat-icon,
#adminDashboardPage .ad-c-blue .clients-title-icon,
#userDashboardPage .ad-c-blue .ad-stat-icon,
#franchiseDashboardPage .ad-c-blue .ad-stat-icon,
#userDashboardPage .ad-c-blue .clients-title-icon,
#franchiseDashboardPage .ad-c-blue .clients-title-icon{ color: #1a4f9c }

#adminDashboardPage .ad-c-green .ad-stat-icon,
#userDashboardPage .ad-c-green .ad-stat-icon,
#franchiseDashboardPage .ad-c-green .ad-stat-icon{ color: #31802e }

#adminDashboardPage .ad-c-orange .ad-stat-icon,
#adminDashboardPage .ad-c-orange .clients-title-icon,
#userDashboardPage .ad-c-orange .ad-stat-icon,
#franchiseDashboardPage .ad-c-orange .ad-stat-icon,
#userDashboardPage .ad-c-orange .clients-title-icon,
#franchiseDashboardPage .ad-c-orange .clients-title-icon{ color: #e67e22 }

#adminDashboardPage .ad-c-teal .ad-stat-icon,
#userDashboardPage .ad-c-teal .ad-stat-icon,
#franchiseDashboardPage .ad-c-teal .ad-stat-icon{ color: #0d9488 }

#adminDashboardPage .ad-c-purple .ad-stat-icon,
#userDashboardPage .ad-c-purple .ad-stat-icon,
#franchiseDashboardPage .ad-c-purple .ad-stat-icon{ color: #7c3aed }

#adminDashboardPage .ad-c-red .ad-stat-icon,
#userDashboardPage .ad-c-red .ad-stat-icon,
#franchiseDashboardPage .ad-c-red .ad-stat-icon{ color: #f62718 }

#adminDashboardPage .ad-c-navy .ad-stat-icon,
#adminDashboardPage .ad-c-navy .clients-title-icon,
#userDashboardPage .ad-c-navy .ad-stat-icon,
#franchiseDashboardPage .ad-c-navy .ad-stat-icon,
#userDashboardPage .ad-c-navy .clients-title-icon,
#franchiseDashboardPage .ad-c-navy .clients-title-icon{ color: #1a365d }

#adminDashboardPage .ad-table,
#userDashboardPage .ad-table,
#franchiseDashboardPage .ad-table{
	--bs-table-bg: transparent;
	font-size: 0.8125rem
}

#adminDashboardPage .ad-table thead th,
#userDashboardPage .ad-table thead th,
#franchiseDashboardPage .ad-table thead th{
	background: rgba(26, 54, 93, 0.06);
	color: #1a365d;
	font-weight: 600;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-bottom: 1px solid rgba(26, 54, 93, 0.1);
	white-space: nowrap
}

#adminDashboardPage .ad-table tbody td,
#userDashboardPage .ad-table tbody td,
#franchiseDashboardPage .ad-table tbody td{
	border-color: rgba(26, 54, 93, 0.06);
	vertical-align: middle
}

#adminDashboardPage .ad-table a,
#userDashboardPage .ad-table a,
#franchiseDashboardPage .ad-table a{
	color: #1a365d !important;
	font-weight: 600;
	text-decoration: none
}

#adminDashboardPage .ad-table a:hover,
#userDashboardPage .ad-table a:hover,
#franchiseDashboardPage .ad-table a:hover{
	color: #31802e !important
}

#adminDashboardPage .ad-quick-list,
#userDashboardPage .ad-quick-list,
#franchiseDashboardPage .ad-quick-list{
	display: flex;
	flex-direction: column;
	gap: 8px
}

#adminDashboardPage .ad-quick-item,
#userDashboardPage .ad-quick-item,
#franchiseDashboardPage .ad-quick-item{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.45);
	border: 1px solid rgba(26, 54, 93, 0.1);
	color: #32393f;
	text-decoration: none;
	font-size: 0.8125rem;
	font-weight: 600;
	transition: background 0.15s ease, border-color 0.15s ease
}

#adminDashboardPage .ad-quick-item:hover,
#userDashboardPage .ad-quick-item:hover,
#franchiseDashboardPage .ad-quick-item:hover{
	background: rgba(255, 255, 255, 0.7);
	border-color: rgba(26, 54, 93, 0.18);
	color: #1a365d
}

#adminDashboardPage .ad-quick-item i,
#userDashboardPage .ad-quick-item i,
#franchiseDashboardPage .ad-quick-item i{
	font-size: 1.1rem;
	color: #1a365d
}

#adminDashboardPage .ad-quick-item .badge,
#userDashboardPage .ad-quick-item .badge,
#franchiseDashboardPage .ad-quick-item .badge{
	margin-left: auto;
	background: rgba(26, 54, 93, 0.1);
	color: #1a365d;
	font-weight: 700;
	font-size: 0.7rem;
	border-radius: 8px;
	padding: 4px 8px
}

@media (max-width: 575.98px) {
	#adminDashboardPage .ad-stat-value,
	#userDashboardPage .ad-stat-value,
#franchiseDashboardPage .ad-stat-value{
		font-size: 0.95rem
	}

	#adminDashboardPage .ad-stat-card .card-body,
	#userDashboardPage .ad-stat-card .card-body,
#franchiseDashboardPage .ad-stat-card .card-body{
		padding: 7px 10px
	}
}

/* Admin dashboard verification summary */
#adminDashboardPage .ad-verify-card {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: 12px;
	border: 1px solid rgba(26, 54, 93, .1);
	background: rgba(255, 255, 255, .55);
	overflow: hidden;
	height: 100%;
	transition: transform .18s ease, box-shadow .18s ease
}
#adminDashboardPage .ad-verify-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(26, 54, 93, .1);
	color: inherit
}
#adminDashboardPage .ad-verify-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 14px;
	font-weight: 700;
	color: #fff
}
#adminDashboardPage .ad-verify-head i { margin-right: 6px }
#adminDashboardPage .ad-verify-kyc .ad-verify-head { background: #1a365d }
#adminDashboardPage .ad-verify-bank .ad-verify-head { background: #31802e }
#adminDashboardPage .ad-verify-nominee .ad-verify-head { background: #0d6efd }
#adminDashboardPage .ad-verify-body { padding: 12px 14px }
#adminDashboardPage .ad-verify-row { margin-bottom: 10px }
#adminDashboardPage .ad-verify-row:last-child { margin-bottom: 0 }
#adminDashboardPage .ad-verify-row span {
	font-size: 12px;
	font-weight: 600;
	color: #334155
}
#adminDashboardPage .ad-verify-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin-right: 6px
}
#adminDashboardPage .ad-verify-bar {
	height: 6px;
	border-radius: 999px;
	background: rgba(26, 54, 93, .08);
	margin-top: 4px;
	overflow: hidden
}
#adminDashboardPage .ad-verify-bar .progress-bar {
	height: 100%;
	border-radius: 999px
}

/* Admin dashboard redesign: hero / spotlight / tiles */
#adminDashboardPage .card.glass-ui.ad-hero,
#adminDashboardPage .ad-hero {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 18px 20px;
	background:
		radial-gradient(circle at 92% 18%, rgba(49, 128, 46, .14), transparent 42%),
		linear-gradient(120deg, rgba(26, 54, 93, .08), rgba(255, 255, 255, .72) 55%);
}
#adminDashboardPage .ad-hero-main {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1 1 auto;
	min-width: 0
}
#adminDashboardPage .ad-hero-icon {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-image: linear-gradient(94deg, #1a365d 0%, #3375d2 32%, #3aa61a 68%, #0e650d 100%);
	color: #fff;
	font-size: 28px;
	box-shadow: 0 8px 18px rgba(26, 54, 93, .22)
}
#adminDashboardPage .ad-hero-greet {
	font-size: 11px;
	letter-spacing: .08em;
	font-weight: 700;
	color: #31802e;
	margin-bottom: 2px
}
#adminDashboardPage .ad-hero-name {
	font-size: 1.35rem;
	font-weight: 800;
	color: #1a365d;
	line-height: 1.2
}
#adminDashboardPage .ad-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin-top: 6px;
	font-size: 12px;
	color: #64748b;
	font-weight: 600
}
#adminDashboardPage .ad-hero-meta i {
	color: #1a365d;
	margin-right: 3px;
	vertical-align: -1px
}
#adminDashboardPage .ad-hero-kpis {
	display: flex;
	flex-wrap: nowrap;
	flex: 0 0 auto;
	align-items: stretch;
	gap: 10px
}
#adminDashboardPage .ad-hero-kpi {
	min-width: 78px;
	padding: 10px 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .72);
	border: 1px solid rgba(26, 54, 93, .1);
	text-align: center
}
#adminDashboardPage .ad-hero-kpi span {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: .04em
}
#adminDashboardPage .ad-hero-kpi strong {
	display: block;
	margin-top: 2px;
	font-size: 1.2rem;
	font-weight: 800;
	color: #1a365d
}

#adminDashboardPage .ad-section-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #1a365d;
	margin: 0 0 10px
}
#adminDashboardPage .ad-section-label i {
	font-size: 16px;
	color: #31802e
}

#adminDashboardPage a.ad-spotlight,
#adminDashboardPage a.ad-tile {
	text-decoration: none;
	color: #1a365d
}
#adminDashboardPage .ad-spotlight {
	min-height: 112px;
	transition: transform .18s ease, box-shadow .18s ease
}
#adminDashboardPage .ad-spotlight:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(26, 54, 93, .12);
	color: #1a365d
}
#adminDashboardPage .ad-spotlight-inner {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px !important
}
#adminDashboardPage .ad-spotlight-icon {
	width: 54px;
	height: 54px;
	border-radius: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	flex-shrink: 0
}
#adminDashboardPage .ad-spotlight-label {
	font-size: 12px;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: .04em
}
#adminDashboardPage .ad-spotlight-value {
	font-size: 1.55rem;
	font-weight: 800;
	line-height: 1.15;
	margin: 2px 0 4px;
	color: #1a365d !important
}
#adminDashboardPage .ad-spotlight-sub {
	font-size: 12px;
	font-weight: 600;
	color: #64748b
}
#adminDashboardPage .ad-spot-navy { border-top-color: #1a365d !important }
#adminDashboardPage .ad-spot-navy .ad-spotlight-icon {
	background: rgba(26, 54, 93, .12);
	color: #1a365d
}
#adminDashboardPage .ad-spot-green { border-top-color: #31802e !important }
#adminDashboardPage .ad-spot-green .ad-spotlight-icon {
	background: rgba(49, 128, 46, .12);
	color: #31802e
}
#adminDashboardPage .ad-spot-teal { border-top-color: #0d9488 !important }
#adminDashboardPage .ad-spot-teal .ad-spotlight-icon {
	background: rgba(13, 148, 136, .12);
	color: #0d9488
}

#adminDashboardPage .ad-alert-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 10px
}
#adminDashboardPage .ad-alert-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border-radius: 12px;
	text-decoration: none;
	min-width: 148px;
	flex: 1 1 148px;
	border: 1px solid transparent;
	transition: transform .15s ease, box-shadow .15s ease
}
#adminDashboardPage .ad-alert-chip:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 16px rgba(15, 23, 42, .08);
	color: inherit
}
#adminDashboardPage .ad-alert-chip i {
	font-size: 22px;
	flex-shrink: 0
}
#adminDashboardPage .ad-alert-chip strong {
	display: block;
	font-size: 1.15rem;
	font-weight: 800;
	line-height: 1.1;
	color: #0f172a
}
#adminDashboardPage .ad-alert-chip span {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: .03em
}
#adminDashboardPage .ad-alert-chip.is-danger {
	background: rgba(246, 39, 24, .08);
	border-color: rgba(246, 39, 24, .18);
	color: #f62718
}
#adminDashboardPage .ad-alert-chip.is-warn {
	background: rgba(255, 193, 7, .14);
	border-color: rgba(255, 193, 7, .35);
	color: #b78103
}
#adminDashboardPage .ad-alert-chip.is-info {
	background: rgba(13, 110, 253, .08);
	border-color: rgba(13, 110, 253, .18);
	color: #0d6efd
}
#adminDashboardPage .ad-alert-chip.is-orange {
	background: rgba(253, 126, 20, .1);
	border-color: rgba(253, 126, 20, .22);
	color: #fd7e14
}

#adminDashboardPage .ad-tile {
	transition: transform .15s ease, box-shadow .15s ease
}
#adminDashboardPage a.ad-tile:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(26, 54, 93, .1);
	color: #1a365d
}
#adminDashboardPage .ad-tile > .card-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px !important
}
#adminDashboardPage .ad-tile-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	margin-bottom: 4px;
	background: rgba(26, 54, 93, .08);
	color: #1a365d
}
#adminDashboardPage .ad-tile-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #64748b
}
#adminDashboardPage .ad-tile-value {
	display: block;
	font-size: 1.35rem;
	font-weight: 800;
	color: #1a365d !important;
	line-height: 1.15
}
#adminDashboardPage .ad-tile-sub {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: #94a3b8
}
#adminDashboardPage .ad-tile.tone-navy { border-top-color: #1a365d !important }
#adminDashboardPage .ad-tile.tone-navy .ad-tile-icon { background: rgba(26, 54, 93, .1); color: #1a365d }
#adminDashboardPage .ad-tile.tone-green { border-top-color: #31802e !important }
#adminDashboardPage .ad-tile.tone-green .ad-tile-icon { background: rgba(49, 128, 46, .12); color: #31802e }
#adminDashboardPage .ad-tile.tone-orange { border-top-color: #fd7e14 !important }
#adminDashboardPage .ad-tile.tone-orange .ad-tile-icon { background: rgba(253, 126, 20, .12); color: #fd7e14 }
#adminDashboardPage .ad-tile.tone-teal { border-top-color: #0d9488 !important }
#adminDashboardPage .ad-tile.tone-teal .ad-tile-icon { background: rgba(13, 148, 136, .12); color: #0d9488 }
#adminDashboardPage .ad-tile.tone-purple { border-top-color: #7c3aed !important }
#adminDashboardPage .ad-tile.tone-purple .ad-tile-icon { background: rgba(124, 58, 237, .12); color: #7c3aed }

@media (max-width: 991.98px) {
	#adminDashboardPage .card.glass-ui.ad-hero,
	#adminDashboardPage .ad-hero {
		flex-wrap: wrap
	}
	#adminDashboardPage .ad-hero-kpis {
		width: 100%;
		justify-content: stretch
	}
	#adminDashboardPage .ad-hero-kpi {
		flex: 1 1 0;
		min-width: 0
	}
}
@media (max-width: 767.98px) {
	#adminDashboardPage .ad-hero { padding: 14px }
	#adminDashboardPage .ad-hero-name { font-size: 1.15rem }
	#adminDashboardPage .ad-spotlight-value { font-size: 1.3rem }
	#adminDashboardPage .ad-hero-kpi { padding: 8px 8px }
	#adminDashboardPage .ad-hero-kpi strong { font-size: 1.05rem }
}

/* Franchise dashboard profile card */
#franchiseDashboardPage .fd-profile-modern {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	min-height: 100%
}

#franchiseDashboardPage .fd-avatar-modern {
	width: 72px;
	height: 72px;
	border-radius: 16px;
	overflow: hidden;
	flex-shrink: 0;
	border: 2px solid rgba(255, 255, 255, 0.65);
	box-shadow: 0 6px 16px rgba(26, 54, 93, 0.18);
	background: rgba(255, 255, 255, 0.5)
}

#franchiseDashboardPage .fd-avatar-modern img {
	width: 100%;
	height: 100%;
	object-fit: cover
}

#franchiseDashboardPage .fd-profile-info h6 {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: inherit
}

#franchiseDashboardPage .fd-profile-line {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	opacity: 0.9;
	margin-top: 2px
}

#franchiseDashboardPage .fd-profile-line i {
	font-size: 14px
}

#franchiseDashboardPage .member-status-rejected {
	background: rgba(246, 39, 24, 0.12);
	color: #f62718
}

/* ===== Fund Add page ===== */
#clientAddPage.fund-add-page .fund-bank-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px
}

#clientAddPage.fund-add-page .fund-bank-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(26, 54, 93, 0.12);
	color: #1a365d;
	font-size: 18px;
	flex-shrink: 0
}

#clientAddPage.fund-add-page .fund-bank-name {
	font-weight: 700;
	color: #1a365d;
	font-size: 0.95rem;
	line-height: 1.2
}

#clientAddPage.fund-add-page .fund-bank-meta {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px
}

#clientAddPage.fund-add-page .fund-bank-meta li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(26, 54, 93, 0.08);
	font-size: 0.8125rem
}

#clientAddPage.fund-add-page .fund-bank-meta li span {
	color: #6c757d;
	font-weight: 600
}

#clientAddPage.fund-add-page .fund-bank-meta li strong {
	color: #1a365d;
	font-weight: 700;
	text-align: right;
	word-break: break-all
}

#clientAddPage.fund-add-page .fund-bank-qr {
	text-align: center;
	padding-top: 4px
}

#clientAddPage.fund-add-page .fund-bank-qr img {
	width: 140px !important;
	height: 140px !important;
	max-width: 140px !important;
	object-fit: contain;
	border-radius: 12px;
	background: #fff;
	padding: 8px;
	border: 1px solid rgba(26, 54, 93, 0.12);
	box-shadow: 0 4px 14px rgba(26, 54, 93, 0.08)
}

#clientAddPage.fund-add-page .fund-bank-qr-label {
	margin-top: 8px;
	font-size: 0.75rem;
	font-weight: 700;
	color: #31802e;
	display: inline-flex;
	align-items: center;
	gap: 4px
}

#clientAddPage.fund-add-page .fund-empty-inner {
	text-align: center;
	padding: 28px 12px;
	color: #6c757d
}

#clientAddPage.fund-add-page .fund-empty-inner i {
	font-size: 2rem;
	color: #1a365d;
	opacity: 0.55;
	display: block;
	margin-bottom: 8px
}

#clientAddPage.fund-add-page .fund-empty-inner p {
	font-size: 0.8125rem
}

#clientAddPage.fund-send-page .fund-send-avatar {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: rgba(26, 54, 93, 0.12);
	color: #1a365d;
	font-size: 1.05rem;
	font-weight: 700;
	text-transform: uppercase
}

#clientAddPage.fund-send-page .fund-amount-words {
	min-height: 1.25rem
}

#clientAddPage.fund-send-page .fund-bank-meta li strong {
	word-break: break-word;
	text-align: right;
	max-width: 62%
}

/* ===== Profile edit page ===== */
#clientAddPage.profile-edit-page .profile-avatar-wrap {
	display: inline-block;
	position: relative
}

#clientAddPage.profile-edit-page .profile-avatar {
	width: 110px;
	height: 110px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #1a365d;
	padding: 3px;
	background: #fff
}

#clientAddPage.profile-edit-page .profile-role {
	margin-top: 4px;
	font-size: 0.78rem;
	font-weight: 600;
	color: #1a365d;
	opacity: 0.8
}

#clientAddPage.profile-edit-page .profile-meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px
}

#clientAddPage.profile-edit-page .profile-meta li {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 10px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.55);
	border: 1px solid rgba(26, 54, 93, 0.08);
	font-size: 0.8125rem
}

#clientAddPage.profile-edit-page .profile-meta li span {
	color: #6c757d;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0
}

#clientAddPage.profile-edit-page .profile-meta li strong {
	color: #1a365d;
	font-weight: 700;
	text-align: right;
	word-break: break-word
}

#clientAddPage.profile-edit-page .client-add-hint {
	display: block;
	margin-top: 4px
}

#clientsPage.security-sessions .clients-card-title {
	margin-bottom: 12px
}

#clientsPage.security-sessions .clients-card-heading h5 {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: #1a365d
}

/* ===== Training sessions grid ===== */
#clientsPage.training-sessions-page .training-card {
	overflow: hidden
}

#clientsPage.training-sessions-page .training-media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: rgba(26, 54, 93, 0.08);
	overflow: hidden
}

#clientsPage.training-sessions-page .training-media iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block
}

#clientsPage.training-sessions-page .training-media-empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1a365d;
	opacity: 0.45;
	font-size: 2rem
}

#clientsPage.training-sessions-page .training-card .card-body {
	padding: 12px 14px 14px
}

#clientsPage.training-sessions-page .training-card-title {
	font-size: 0.9rem;
	font-weight: 700;
	color: #1a365d;
	line-height: 1.35;
	margin-bottom: 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.4em
}

#clientsPage.training-sessions-page .training-card-meta {
	margin-bottom: 10px
}

#clientsPage.training-sessions-page .training-card-actions {
	padding-top: 8px;
	border-top: 1px solid rgba(26, 54, 93, 0.08)
}

#clientsPage.training-sessions-page .training-card-actions .clients-icon-btn.text-danger {
	color: #f62718 !important
}

/* Filter cards with date picker — above sibling glass totals/table, but BELOW .topbar (z-index 10) */
#clientsPage .clients-filter-card,
#clientsPage .bills-approved-filter,
#clientsPage > .card.glass-ui:has(.clients-filter-acc) {
	position: relative;
	z-index: 5;
	overflow: visible !important
}

#clientsPage .clients-filter-card > .card-body,
#clientsPage .clients-filter-card .clients-filter-form,
#clientsPage .clients-filter-card [class*="col-"],
#clientsPage .clients-filter-card .accordion,
#clientsPage .clients-filter-card .accordion-item,
#clientsPage .clients-filter-card .accordion-collapse,
#clientsPage .clients-filter-card .dob-picker,
#clientsPage .bills-approved-filter > .card-body,
#clientsPage .bills-approved-filter .clients-filter-form,
#clientsPage .bills-approved-filter [class*="col-"],
#clientsPage > .card.glass-ui:has(.clients-filter-acc) > .card-body,
#clientsPage > .card.glass-ui:has(.clients-filter-acc) .clients-filter-form,
#clientsPage > .card.glass-ui:has(.clients-filter-acc) [class*="col-"],
#clientsPage > .card.glass-ui:has(.clients-filter-acc) .accordion,
#clientsPage > .card.glass-ui:has(.clients-filter-acc) .accordion-item,
#clientsPage > .card.glass-ui:has(.clients-filter-acc) .accordion-collapse,
#clientsPage > .card.glass-ui:has(.clients-filter-acc) .dob-picker {
	overflow: visible !important;
	position: relative;
	z-index: 6
}

#clientsPage .clients-filter-card input[type="date"],
#clientsPage .clients-filter-card input[type="month"],
#clientsPage .bills-approved-filter input[type="date"],
#clientsPage .bills-approved-filter input[type="month"],
#clientsPage > .card.glass-ui:has(.clients-filter-acc) input[type="date"],
#clientsPage > .card.glass-ui:has(.clients-filter-acc) input[type="month"] {
	position: relative;
	z-index: 7
}

#clientsPage .clients-filter-card .dob-picker-panel,
#clientsPage .bills-approved-filter .dob-picker-panel,
#clientsPage > .card.glass-ui:has(.clients-filter-acc) .dob-picker-panel {
	z-index: 1080
}

/* List/table card under filter — keep date panel above glass sibling */
#clientsPage > .card.glass-ui:not(.clients-filter-card):not(.bills-approved-filter):not(:has(.clients-filter-acc)) {
	position: relative;
	z-index: 1
}

/* Totals/stat cards row — must stay under fixed header (.topbar z-index 10) */
#clientsPage .bills-approved-top {
	position: relative;
	z-index: 1
}

#clientsPage .bills-approved-top > [class*="col-"] > .card.glass-ui {
	position: relative;
	z-index: 1
}

#clientsPage .bills-approved-top .card-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 64px
}

#clientsPage .bills-approved-top .form-label {
	font-size: 0.78rem;
	margin-bottom: 0.2rem
}

#clientsPage .bills-approved-top .form-control,
#clientsPage .bills-approved-top .form-select,
#clientsPage .bills-approved-top input[type="date"].form-control {
	min-height: 32px !important;
	height: 32px !important;
	font-size: 0.85rem !important;
	padding: 0.2rem 0.55rem !important
}

#clientsPage .bills-approved-stat-label {
	font-size: 0.78rem;
	line-height: 1.2
}

#clientsPage .bills-approved-stat-value {
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.25;
	margin-top: 0.15rem
}

#clientsPage .bills-approved-stat-value.payout-check-stat-triple {
	font-size: 0.95rem
}

#clientsPage .payout-check-meta th {
	width: 18%;
	white-space: nowrap;
	font-weight: 600;
	color: #1a365d;
	background: rgba(26, 54, 93, 0.04)
}

#clientsPage .payout-check-meta td {
	vertical-align: middle
}

html.dark-theme #clientsPage .payout-check-meta th {
	color: #c0c6ce;
	background: rgba(255, 255, 255, 0.04)
}

#clientsPage .bills-approved-count {
	position: absolute;
	top: 0.45rem;
	right: 0.75rem;
	font-size: 0.8rem;
	font-weight: 700;
	color: #1a365d;
	line-height: 1
}

html.dark-theme #clientsPage .bills-approved-count {
	color: #c0c6ce
}

/* Global filter accordion UI (all list pages) */
.page-content .accordion .accordion-item,
.page-content .clients-filter-acc .accordion-item {
	border: 0 !important;
	background: transparent !important;
	border-radius: 0 !important
}

.page-content .accordion .accordion-header,
.page-content .clients-filter-acc .accordion-header {
	margin: 0;
	background: transparent
}

.page-content .accordion .accordion-button,
.page-content .clients-filter-acc .accordion-button {
	color: #1a365d !important;
	font-weight: 600;
	font-size: 0.9rem;
	background: transparent !important;
	box-shadow: none !important;
	padding: 14px 18px;
	gap: 6px
}

.page-content .accordion .accordion-button:not(.collapsed),
.page-content .clients-filter-acc .accordion-button:not(.collapsed) {
	color: #1a365d !important;
	background: transparent !important;
	box-shadow: none !important
}

.page-content .accordion .accordion-button:focus,
.page-content .clients-filter-acc .accordion-button:focus {
	box-shadow: none !important;
	border-color: transparent
}

.page-content .accordion .accordion-button::after,
.page-content .clients-filter-acc .accordion-button::after {
	margin-left: auto
}

.page-content .accordion .accordion-body,
.page-content .clients-filter-acc .accordion-body {
	padding: 0 18px 18px;
	background: transparent
}

.page-content .accordion .form-label,
.page-content .clients-filter-acc .form-label,
#clientsPage .clients-filter-form .form-label {
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 600;
	color: #1a365d
}

.page-content .accordion .form-control,
.page-content .accordion .form-select,
.page-content .clients-filter-acc .form-control,
.page-content .clients-filter-acc .form-select,
#clientsPage .clients-filter-form .form-control,
#clientsPage .clients-filter-form .form-select {
	height: 38px !important;
	min-height: 38px !important;
	padding: 0.375rem 0.75rem !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: #32393f !important;
	background-color: #fff !important;
	border: 1px solid #ced4da !important;
	border-radius: 8px !important;
	box-shadow: none !important
}

.page-content .accordion .form-select,
.page-content .clients-filter-acc .form-select,
#clientsPage .clients-filter-form .form-select {
	padding-right: 2.25rem !important
}

.page-content .accordion .form-control:focus,
.page-content .accordion .form-select:focus,
.page-content .clients-filter-acc .form-control:focus,
.page-content .clients-filter-acc .form-select:focus,
#clientsPage .clients-filter-form .form-control:focus,
#clientsPage .clients-filter-form .form-select:focus {
	border-color: #1a365d !important;
	box-shadow: 0 0 0 0.2rem rgba(26, 54, 93, 0.12) !important
}

.page-content .accordion .btn,
.page-content .clients-filter-acc .btn,
#clientsPage .clients-filter-form .btn {
	height: 38px;
	display: inline-flex;
	align-items: center;
	gap: 4px
}

/* Filter date / month inputs — light */
.page-content .clients-filter-acc input[type="date"],
.page-content .clients-filter-acc input[type="month"],
.page-content .accordion input[type="date"],
.page-content .accordion input[type="month"],
#clientsPage .clients-filter-form input[type="date"],
#clientsPage .clients-filter-form input[type="month"],
#clientsPage input[type="date"],
#clientsPage input[type="month"],
.page-content input[type="date"].form-control,
.page-content input[type="month"].form-control {
	color-scheme: light;
	color: #32393f !important;
	background-color: #fff !important;
	border: 1px solid #ced4da !important;
	border-radius: 8px !important;
	min-height: 38px !important;
	height: 38px !important;
	line-height: 1.4 !important;
	padding: 0.375rem 0.75rem !important;
	position: relative;
	width: 100%;
	max-width: 100%;
	appearance: none;
	-webkit-appearance: none
}

.page-content .clients-filter-acc input[type="date"]:focus,
.page-content .clients-filter-acc input[type="month"]:focus,
.page-content .accordion input[type="date"]:focus,
.page-content .accordion input[type="month"]:focus,
#clientsPage input[type="date"].form-control:focus,
#clientsPage input[type="month"].form-control:focus,
.page-content input[type="date"].form-control:focus,
.page-content input[type="month"].form-control:focus {
	border-color: #1a365d !important;
	box-shadow: 0 0 0 0.2rem rgba(26, 54, 93, 0.12) !important;
	outline: 0
}

.page-content .clients-filter-acc input[type="date"]::-webkit-calendar-picker-indicator,
.page-content .clients-filter-acc input[type="month"]::-webkit-calendar-picker-indicator,
.page-content .accordion input[type="date"]::-webkit-calendar-picker-indicator,
.page-content .accordion input[type="month"]::-webkit-calendar-picker-indicator,
#clientsPage input[type="date"]::-webkit-calendar-picker-indicator,
#clientsPage input[type="month"]::-webkit-calendar-picker-indicator,
.page-content input[type="date"].form-control::-webkit-calendar-picker-indicator,
.page-content input[type="month"].form-control::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: 0.85;
	width: 18px;
	height: 18px;
	padding: 2px;
	margin-left: 4px;
	border-radius: 4px;
	filter: invert(16%) sepia(28%) saturate(1200%) hue-rotate(185deg) brightness(90%) contrast(95%)
}

.page-content .clients-filter-acc input[type="date"]::-webkit-calendar-picker-indicator:hover,
.page-content .clients-filter-acc input[type="month"]::-webkit-calendar-picker-indicator:hover,
.page-content .accordion input[type="date"]::-webkit-calendar-picker-indicator:hover,
.page-content .accordion input[type="month"]::-webkit-calendar-picker-indicator:hover,
#clientsPage input[type="date"]::-webkit-calendar-picker-indicator:hover,
#clientsPage input[type="month"]::-webkit-calendar-picker-indicator:hover,
.page-content input[type="date"].form-control::-webkit-calendar-picker-indicator:hover,
.page-content input[type="month"].form-control::-webkit-calendar-picker-indicator:hover {
	opacity: 1;
	background: rgba(26, 54, 93, 0.08)
}

.page-content .clients-filter-acc input[type="date"]::-webkit-datetime-edit,
.page-content .clients-filter-acc input[type="month"]::-webkit-datetime-edit,
.page-content .accordion input[type="date"]::-webkit-datetime-edit,
.page-content .accordion input[type="month"]::-webkit-datetime-edit,
#clientsPage input[type="date"]::-webkit-datetime-edit,
#clientsPage input[type="month"]::-webkit-datetime-edit,
.page-content input[type="date"].form-control::-webkit-datetime-edit,
.page-content input[type="month"].form-control::-webkit-datetime-edit {
	color: #32393f;
	padding: 0
}

.page-content .clients-filter-acc input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.page-content .clients-filter-acc input[type="month"]::-webkit-datetime-edit-fields-wrapper,
.page-content input[type="date"].form-control::-webkit-datetime-edit-fields-wrapper,
.page-content input[type="month"].form-control::-webkit-datetime-edit-fields-wrapper {
	padding: 0
}

.page-content .clients-filter-acc .accordion-button .bx,
.page-content .accordion .accordion-button .bx {
	color: #1a365d;
	font-size: 1.1rem
}

#clientsPage .fund-req-thumb {
	width: 28px !important;
	height: 28px !important;
	object-fit: cover;
	border-radius: 6px;
	cursor: pointer;
	border: 1px solid rgba(26, 54, 93, 0.12)
}

#clientsPage .client-actions .clients-icon-btn.text-danger {
	color: #f62718 !important
}

/* ===== Welcome Letter ===== */
#welcomeLetterPage {
	--wl-ink: #1f2933;
	--wl-muted: #5c6b7a;
	--wl-brand: #1a365d;
	--wl-accent: #0b6e99;
	--wl-line: rgba(26, 54, 93, 0.12);
	max-width: 920px;
	margin: 0 auto
}

#welcomeLetterPage .wl-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px
}

#welcomeLetterPage .wl-sheet {
	overflow: hidden
}

#welcomeLetterPage .wl-body {
	position: relative;
	padding: 28px 32px 24px;
	color: var(--wl-ink);
	background:
		radial-gradient(1200px 280px at 50% -40%, rgba(26, 54, 93, 0.08), transparent 60%),
		linear-gradient(180deg, #fff 0%, #fbfafc 100%)
}

#welcomeLetterPage .wl-body::before,
#welcomeLetterPage .wl-body::after {
	content: "";
	position: absolute;
	top: 12%;
	bottom: 12%;
	width: 18px;
	opacity: 0.18;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='120' viewBox='0 0 18 120'%3E%3Cpath d='M9 0v28l4 6-4 6 4 6-4 6v68' fill='none' stroke='%23c0392b' stroke-width='1.4'/%3E%3C/svg%3E");
	background-repeat: repeat-y;
	background-position: center
}

#welcomeLetterPage .wl-body::before { left: 8px }
#welcomeLetterPage .wl-body::after { right: 8px }

#welcomeLetterPage .wl-header {
	text-align: center;
	margin-bottom: 22px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--wl-line)
}

#welcomeLetterPage .wl-brand {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(22px, 3.2vw, 30px);
	font-weight: 700;
	color: #9b1c1c;
	letter-spacing: 0.01em;
	line-height: 1.25
}

#welcomeLetterPage .wl-contacts {
	margin-top: 6px;
	font-size: 13px;
	color: var(--wl-muted)
}

#welcomeLetterPage .wl-dot {
	margin: 0 8px;
	opacity: 0.5
}

#welcomeLetterPage .wl-hero-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	margin-bottom: 18px
}

#welcomeLetterPage .wl-hero-info {
	width: 78%;
	vertical-align: top;
	padding-right: 16px;
	text-align: left
}

#welcomeLetterPage .wl-hero-photo {
	width: 22%;
	vertical-align: top;
	text-align: right
}

#welcomeLetterPage .wl-kicker {
	margin: 0 0 4px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wl-brand)
}

#welcomeLetterPage .wl-congrats {
	margin: 0 0 12px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(26px, 4vw, 34px);
	font-weight: 700;
	color: var(--wl-accent);
	line-height: 1.15
}

#welcomeLetterPage .wl-member-table {
	width: 100%;
	border-collapse: collapse
}

#welcomeLetterPage .wl-m-label {
	width: 96px;
	padding: 3px 8px 3px 0;
	color: var(--wl-muted);
	font-size: 14px;
	vertical-align: top
}

#welcomeLetterPage .wl-m-value {
	padding: 3px 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--wl-ink);
	vertical-align: top
}

#welcomeLetterPage .wl-photo {
	width: 112px;
	height: 112px;
	object-fit: cover;
	border-radius: 16px;
	border: 3px solid rgba(26, 54, 93, 0.16);
	box-shadow: 0 8px 22px rgba(26, 54, 93, 0.12);
	background: #fff
}

#welcomeLetterPage .wl-intro,
#welcomeLetterPage .wl-note,
#welcomeLetterPage .wl-wish {
	font-size: 14.5px;
	line-height: 1.65;
	color: #334155;
	margin: 0 0 16px
}

#welcomeLetterPage .wl-table-wrap {
	margin: 18px 0 20px;
	border: 1px solid rgba(26, 54, 93, 0.16);
	border-radius: 12px;
	overflow: hidden;
	background: #fff
}

#welcomeLetterPage .wl-table-title {
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wl-brand);
	background: linear-gradient(90deg, rgba(26, 54, 93, 0.08), rgba(26, 54, 93, 0.03))
}

#welcomeLetterPage .wl-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px
}

#welcomeLetterPage .wl-table th,
#welcomeLetterPage .wl-table td {
	padding: 11px 14px;
	border-top: 1px solid var(--wl-line);
	text-align: left;
	vertical-align: top
}

#welcomeLetterPage .wl-table th {
	width: 18%;
	color: var(--wl-muted);
	font-weight: 600;
	background: rgba(26, 54, 93, 0.02)
}

#welcomeLetterPage .wl-table td {
	width: 32%;
	font-weight: 600;
	color: var(--wl-ink)
}

#welcomeLetterPage .wl-signoff {
	margin-top: 22px
}

#welcomeLetterPage .wl-sign-name {
	font-weight: 700;
	font-size: 15px;
	color: var(--wl-brand)
}

#welcomeLetterPage .wl-sign-sub {
	font-size: 12px;
	color: var(--wl-muted)
}

#welcomeLetterPage .wl-disclaimer {
	margin: 18px 0 0;
	font-size: 11.5px;
	color: #7b8794;
	font-style: italic
}

@media (max-width: 767.98px) {
	#welcomeLetterPage .wl-body {
		padding: 20px 16px 18px
	}

	#welcomeLetterPage .wl-body::before,
	#welcomeLetterPage .wl-body::after {
		display: none
	}

	#welcomeLetterPage .wl-hero-info {
		width: 70%;
		padding-right: 10px
	}

	#welcomeLetterPage .wl-hero-photo {
		width: 30%
	}

	#welcomeLetterPage .wl-m-label {
		width: 78px;
		font-size: 12px
	}

	#welcomeLetterPage .wl-m-value {
		font-size: 12px
	}

	#welcomeLetterPage .wl-photo {
		width: 84px;
		height: 84px;
		border-radius: 12px
	}

	#welcomeLetterPage .wl-congrats {
		font-size: 22px
	}
}

@media print {
	.no-print,
	.sidebar-wrapper,
	.topbar,
	.page-footer,
	.overlay,
	.toggle-icon,
	.back-to-top,
	.impersonate-bar,
	.mobile-toggle-menu,
	.search-bar,
	.nav-item.dropdown,
	.wl-print-actions {
		display: none !important
	}

	body {
		background: #fff !important
	}

	.wrapper,
	.page-wrapper,
	.page-content {
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		min-height: 0 !important;
		background: #fff !important
	}

	body * {
		visibility: hidden !important
	}

	#welcomeLetterPage,
	#welcomeLetterPage *,
	#monthlyPayoutInvoice,
	#monthlyPayoutInvoice *,
	#payoutReceiveInvoice,
	#payoutReceiveInvoice *,
	#memberBillInvoice,
	#memberBillInvoice *,
	#idCardPage,
	#idCardPage * {
		visibility: visible !important
	}

	#welcomeLetterPage,
	#monthlyPayoutInvoice,
	#payoutReceiveInvoice,
	#memberBillInvoice {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0
	}

	#welcomeLetterPage .wl-toolbar,
	#welcomeLetterPage .no-print {
		display: none !important
	}

	#welcomeLetterPage .wl-sheet {
		box-shadow: none !important;
		border: 0 !important;
		background: #fff !important
	}

	#welcomeLetterPage .wl-body {
		padding: 8px 12px !important;
		background: #fff !important
	}

	#welcomeLetterPage .wl-body::before,
	#welcomeLetterPage .wl-body::after {
		display: none !important
	}

	#welcomeLetterPage .wl-hero-table {
		display: table !important;
		width: 100% !important;
		table-layout: fixed !important
	}

	#welcomeLetterPage .wl-hero-table tr {
		display: table-row !important
	}

	#welcomeLetterPage .wl-hero-info,
	#welcomeLetterPage .wl-hero-photo {
		display: table-cell !important;
		vertical-align: top !important
	}

	#welcomeLetterPage .wl-hero-info {
		width: 78% !important;
		text-align: left !important
	}

	#welcomeLetterPage .wl-hero-photo {
		width: 22% !important;
		text-align: right !important
	}

	#welcomeLetterPage .wl-member-table {
		width: 100% !important;
		display: table !important
	}

	#welcomeLetterPage .wl-member-table tr {
		display: table-row !important
	}

	#welcomeLetterPage .wl-member-table td {
		display: table-cell !important
	}

	#welcomeLetterPage .wl-photo {
		width: 100px !important;
		height: 100px !important;
		box-shadow: none !important
	}

	#welcomeLetterPage .wl-table {
		width: 100% !important;
		display: table !important
	}

	#welcomeLetterPage .wl-table tbody {
		display: table-row-group !important
	}

	#welcomeLetterPage .wl-table tr {
		display: table-row !important
	}

	#welcomeLetterPage .wl-table th,
	#welcomeLetterPage .wl-table td {
		display: table-cell !important;
		padding: 8px 10px !important;
		width: auto !important
	}

	@page {
		size: A4;
		margin: 12mm
	}
}

/* ========== Member ID Card ========== */
#idCardPage .clients-card-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	border: 0
}

#idCardPage .clients-card-heading {
	display: flex;
	align-items: center;
	gap: 10px
}

#idCardPage .clients-card-heading h5 {
	margin: 0;
	font-weight: 700;
	color: #1a365d
}

#idCardPage .clients-title-icon {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(26, 54, 93, 0.1);
	color: #1a365d;
	font-size: 18px
}

#idCardPage .idc-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
	justify-content: flex-end;
	align-items: center
}

#idCardPage .idc-face-btns {
	display: inline-flex;
	gap: 8px
}

#idCardPage .idc-face-btns .btn.active {
	box-shadow: 0 2px 8px rgba(26, 54, 93, 0.25)
}

#idCardPage .idc-stage {
	display: flex;
	justify-content: center;
	padding: 8px 0 28px;
	perspective: 1400px
}

.idc-flip-scene {
	width: 320px;
	height: 480px;
	perspective: 1400px
}

.idc-flip-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transition: transform .7s cubic-bezier(.4, .05, .2, 1)
}

.idc-flip-inner.is-flipped {
	transform: rotateY(180deg)
}

.idc-card,
.idc-face {
	position: absolute;
	inset: 0;
	width: 320px;
	min-height: 480px;
	height: 480px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 10px 28px rgba(26, 54, 93, .18);
	overflow: hidden;
	text-align: center;
	padding: 0 16px 10px;
	box-sizing: border-box;
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden
}

.idc-front {
	transform: rotateY(0deg);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center
}

.idc-back {
	transform: rotateY(180deg);
	z-index: 1;
	padding: 0;
	display: flex;
	flex-direction: column;
	text-align: left;
	background: linear-gradient(165deg, #f7fbfa 0%, #ffffff 45%, #f3f8f6 100%)
}

.idc-waves {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 108px;
	pointer-events: none;
	overflow: hidden
}

.idc-wave {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 108px
}

.idc-wave-1 { z-index: 1 }
.idc-wave-2 { z-index: 2 }
.idc-wave-3 { z-index: 3 }

.idc-watermark {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	overflow: hidden
}

.idc-watermark img {
	width: 72%;
	max-width: 220px;
	opacity: .1;
	filter: grayscale(1);
	object-fit: contain;
	transform: rotate(-18deg);
	user-select: none
}

.idc-logo-top {
	position: absolute;
	top: 8px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 6;
	background: rgba(255, 255, 255, 0.96);
	border-radius: 10px;
	padding: 5px 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
	line-height: 0;
	max-width: calc(100% - 36px)
}

.idc-logo-top-text {
	line-height: 1.2;
	font-size: 13px;
	font-weight: 800;
	color: #1a365d;
	letter-spacing: .3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.idc-logo-img {
	max-height: 32px;
	max-width: 150px;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	margin: 0 auto
}

.idc-photo-wrap {
	position: relative;
	z-index: 5;
	width: 108px;
	height: 108px;
	margin: 52px auto 0;
	border-radius: 50%;
	padding: 4px;
	background: #31802e;
	box-shadow: 0 3px 12px rgba(26, 54, 93, .22);
	flex-shrink: 0
}

.idc-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	background: #eef2f5;
	display: block
}

.idc-front-body {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	flex: 1 1 auto;
	min-height: 0
}

.idc-front .idc-name,
.idc-front .idc-rank-row,
.idc-front .idc-rank,
.idc-front .idc-dots,
.idc-front .idc-meta,
.idc-front .idc-qr-block,
.idc-front .idc-front-terms {
	position: relative;
	z-index: 2
}

.idc-name {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	color: #1a365d;
	letter-spacing: .45px;
	line-height: 1.2;
	text-transform: uppercase
}

.idc-rank-row {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px
}

.idc-rank-icon {
	width: 28px;
	height: 28px;
	object-fit: contain;
	flex-shrink: 0;
	border-radius: 50%;
	background: rgba(26, 54, 93, 0.08);
	padding: 2px
}

.idc-rank-icon-fallback {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(49, 128, 46, 0.12);
	color: #31802e;
	font-size: 16px;
	flex-shrink: 0
}

.idc-rank {
	margin: 0;
	font-size: 13px;
	font-style: italic;
	font-weight: 600;
	color: #1a365d;
	letter-spacing: .3px;
	text-transform: uppercase
}

.idc-dots {
	margin: 2px auto;
	width: 78%;
	border-top: 1.5px dotted #b0bec5;
	flex-shrink: 0
}

.idc-meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: center;
	flex-shrink: 0
}

.idc-meta li {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #546e7a;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.25;
	max-width: 100%
}

.idc-ico {
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #1a365d;
	font-size: 16px;
	line-height: 1;
	flex-shrink: 0
}

.idc-ico .bx {
	font-size: 16px;
	line-height: 1;
	display: block
}

.idc-meta-ellip {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 220px;
	display: inline-block
}

.idc-qr-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin: 2px 0 0;
	flex-shrink: 0;
	z-index: 3
}

.idc-qr {
	width: 68px;
	height: 68px;
	object-fit: contain;
	display: block;
	background: #fff;
	border: 1px solid rgba(26, 54, 93, 0.12);
	border-radius: 6px;
	padding: 3px;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact
}

.idc-qr-web {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11.5px;
	font-weight: 600;
	color: #1a365d;
	line-height: 1.2
}

.idc-qr-web .bx {
	font-size: 13px
}

.idc-front-terms {
	position: relative;
	z-index: 3;
	display: block;
	width: 100%;
	max-width: 100%;
	margin-top: auto;
	margin-bottom: 0;
	padding: 8px 2px 2px;
	box-sizing: border-box;
	font-size: 8.5px;
	line-height: 1.35;
	color: #78909c;
	text-align: center;
	font-weight: 400;
	white-space: normal;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	flex-shrink: 0;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact
}

/* ----- ID Card BACK (rules / support only) ----- */
.idc-back-stripe {
	height: 10px;
	background-image: linear-gradient(94deg, #1a365d 0%, #3375d2 32%, #3aa61a 68%, #0e650d 100%);
	flex-shrink: 0
}

.idc-back-body {
	padding: 14px 16px 12px;
	flex: 1;
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 2
}

.idc-back-title {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .8px;
	color: #1a365d;
	margin-bottom: 8px;
	text-align: left
}

.idc-back-rules {
	margin: 0;
	padding-left: 16px;
	color: #546e7a;
	font-size: 11px;
	line-height: 1.45;
	text-align: left
}

.idc-back-rules li {
	margin-bottom: 8px
}

.idc-back-rules strong {
	color: #1a365d
}

.idc-back-dots {
	margin: 14px auto
}

.idc-back-help {
	text-align: center;
	margin-bottom: 18px
}

.idc-back-help-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .7px;
	color: #90a4ae
}

.idc-back-help-val {
	margin-top: 4px;
	font-size: 13px;
	font-weight: 600;
	color: #1a365d;
	word-break: break-all
}

.idc-back-sign {
	margin-top: auto;
	text-align: center;
	padding-top: 8px
}

.idc-sign-line {
	width: 140px;
	margin: 0 auto 8px;
	border-top: 1.5px solid #90a4ae
}

.idc-auth {
	font-size: 12px;
	font-weight: 700;
	color: #1a365d;
	text-transform: uppercase;
	letter-spacing: .6px
}

.idc-auth-sub {
	margin-top: 2px;
	font-size: 12px;
	color: #78909c
}

@media print {
	#idCardPage .idc-toolbar,
	.idc-print-actions {
		display: none !important
	}

	.idc-flip-scene {
		perspective: none !important;
		height: auto !important;
		width: auto !important
	}

	.idc-flip-inner {
		transform: none !important;
		transition: none !important;
		display: flex !important;
		flex-direction: column;
		gap: 12mm;
		height: auto !important
	}

	.idc-card,
	.idc-face {
		position: relative !important;
		transform: none !important;
		backface-visibility: visible !important;
		-webkit-backface-visibility: visible !important;
		box-shadow: none !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		overflow: hidden !important
	}

	.idc-front-terms {
		position: relative !important;
		margin-top: auto !important;
		padding: 8px 2px 2px !important;
		font-size: 8.5px !important;
		line-height: 1.35 !important;
		color: #546e7a !important;
		text-align: center !important;
		font-weight: 400 !important;
		opacity: 1 !important;
		visibility: visible !important;
		display: block !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact
	}

	.idc-front {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		height: 480px !important;
		min-height: 480px !important
	}

	.idc-flip-scene {
		height: auto !important
	}

	.idc-card,
	.idc-face {
		height: 480px !important;
		min-height: 480px !important;
		width: 320px !important
	}

	.idc-qr {
		width: 68px !important;
		height: 68px !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact
	}

	@page {
		size: auto;
		margin: 8mm
	}
}

/* ========== Member Bill Tax Invoice ========== */
.mbi-body { margin: 0; padding: 0; background: #eef2f5; font-family: Arial, Helvetica, sans-serif; color: #222 }
.mbi-page { padding: 16px; }
.mbi-toolbar { display: flex; gap: 10px; justify-content: center; margin-bottom: 14px }
.mbi-sheet {
	max-width: 980px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid #333;
	padding: 12px 14px 18px;
	box-sizing: border-box
}
.mbi-title { text-align: center; font-weight: 700; font-size: 18px; letter-spacing: .5px; margin-bottom: 8px }
.mbi-header {
	display: grid;
	grid-template-columns: 90px 1fr 90px;
	gap: 8px;
	align-items: start;
	border: 1px solid #333;
	padding: 8px;
	margin-bottom: 8px
}
.mbi-logo-left img,
.mbi-logo-right img { max-width: 88px; max-height: 70px; object-fit: contain }
.mbi-company { text-align: center }
.mbi-company-name { color: #c62828; font-weight: 800; font-size: 16px; line-height: 1.25; margin-bottom: 4px }
.mbi-company-meta { font-size: 11px; line-height: 1.35 }
.mbi-parties {
	display: grid;
	grid-template-columns: 1.35fr .9fr;
	gap: 0;
	margin-bottom: 8px;
	border: 1px solid #333
}
.mbi-party-left { border-right: 1px solid #333 }
.mbi-box { padding: 8px 10px; font-size: 11px; line-height: 1.4 }
.mbi-box-buyer { border-top: 1px solid #333 }
.mbi-box-label { font-weight: 700; margin-bottom: 2px }
.mbi-box-name { font-weight: 700; font-size: 12px; margin-bottom: 2px }
.mbi-meta-box { height: 100%; box-sizing: border-box }
.mbi-meta-table { width: 100%; border-collapse: collapse; font-size: 11px }
.mbi-meta-table th,
.mbi-meta-table td { border-bottom: 1px solid #ddd; padding: 5px 6px; vertical-align: top }
.mbi-meta-table th { width: 48%; text-align: left; font-weight: 700; background: #f7f7f7 }
.mbi-meta-table tr:last-child th,
.mbi-meta-table tr:last-child td { border-bottom: 0 }
.mbi-items { width: 100%; border-collapse: collapse; font-size: 10.5px; margin-bottom: 8px }
.mbi-items th,
.mbi-items td { border: 1px solid #333; padding: 4px 5px }
.mbi-items th { background: #f0f0f0; font-weight: 700; text-align: center; white-space: nowrap }
.mbi-items .t-c { text-align: center }
.mbi-items .t-r { text-align: right }
.mbi-items .t-l { text-align: left }
.mbi-bottom { display: grid; grid-template-columns: 1.2fr .9fr; gap: 10px; margin-bottom: 10px }
.mbi-words { font-size: 11px; margin-bottom: 8px; line-height: 1.45 }
.mbi-gst-sum { width: 100%; border-collapse: collapse; font-size: 11px }
.mbi-gst-sum th,
.mbi-gst-sum td { border: 1px solid #333; padding: 4px 6px }
.mbi-gst-sum th { background: #f0f0f0 }
.mbi-totals { width: 100%; border-collapse: collapse; font-size: 11px }
.mbi-totals th,
.mbi-totals td { border: 1px solid #333; padding: 5px 6px }
.mbi-totals th { text-align: left; background: #f7f7f7; font-weight: 600 }
.mbi-totals td { text-align: right }
.mbi-payable th,
.mbi-payable td { font-weight: 800 }
.mbi-footer { display: grid; grid-template-columns: 1.4fr .8fr; gap: 12px; border-top: 1px solid #333; padding-top: 8px }
.mbi-terms { font-size: 10.5px; line-height: 1.4 }
.mbi-terms-title { font-weight: 700; margin-bottom: 4px }
.mbi-terms ol { margin: 0; padding-left: 16px }
.mbi-sign { text-align: center; font-size: 11px; border: 1px solid #333; padding: 8px; min-height: 110px }
.mbi-sign-space { height: 54px }
@media print {
	.mbi-body { background: #fff !important }
	.mbi-toolbar,
	.no-print { display: none !important }
	.mbi-page { padding: 0 }
	.mbi-sheet { border: 0; max-width: none }
	@page { size: A4; margin: 8mm }
}
@media (max-width: 768px) {
	.mbi-header,
	.mbi-parties,
	.mbi-bottom,
	.mbi-footer { grid-template-columns: 1fr }
	.mbi-party-left { border-right: 0 }
	.mbi-logo-right { display: none }
}

/* User dashboard rank badge + rank card */
#userDashboardPage .ud-avatar-block { position: relative }
#userDashboardPage .ud-rank-badge {
	position: absolute;
	right: -4px;
	bottom: -2px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid #fff;
	background: #fff;
	box-shadow: 0 2px 10px rgba(26, 54, 93, .3);
	margin-top: 0
}
#userDashboardPage .ud-rank-card-title {
	font-size: 13px;
	font-weight: 700;
	color: #1a365d;
	letter-spacing: .3px;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px
}
#userDashboardPage .ud-rank-hero-wrap {
	position: relative;
	display: inline-block;
	line-height: 0;
	margin-bottom: 4px
}
#userDashboardPage .ud-rank-badge-lg {
	width: 72px !important;
	height: 72px !important;
	max-width: 72px !important;
	max-height: 72px !important;
	object-fit: contain !important;
	border-radius: 12px;
	background: #fff;
	border: 2px solid rgba(26, 54, 93, .1);
	box-shadow: 0 4px 12px rgba(26, 54, 93, .12)
}
#userDashboardPage .ud-rank-badge-lg.is-profile-fallback {
	object-fit: cover !important;
	border-radius: 50%;
	background: #fff;
	padding: 6px;
	border: 1px solid rgba(26, 54, 93, 0.12);
	box-shadow: 0 3px 10px rgba(26, 54, 93, .12)
}
#userDashboardPage .ud-rank-hero-name {
	margin: 8px 0 4px;
	color: #1a365d;
	font-weight: 800;
	font-size: 0.95rem
}
#userDashboardPage .ud-next-box {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: rgba(26, 54, 93, .05);
	border-radius: 12px;
	padding: 10px 12px;
	margin: 8px 0 12px;
	text-align: left
}
#userDashboardPage .ud-next-thumb,
#userDashboardPage .ud-next-box img.ud-next-thumb,
#userDashboardPage .ud-next-box img {
	width: 36px !important;
	height: 36px !important;
	max-width: 36px !important;
	max-height: 36px !important;
	object-fit: contain !important;
	flex: 0 0 36px !important;
	flex-shrink: 0 !important;
	border-radius: 8px;
	background: #fff;
	padding: 3px;
	border: 1px solid rgba(26, 54, 93, 0.1);
	display: block
}
#userDashboardPage .ud-next-label {
	font-size: 11px;
	color: #777;
	font-weight: 600
}
#userDashboardPage .ud-next-name {
	font-size: 13px;
	font-weight: 700;
	color: #1a365d
}
#userDashboardPage .ud-progress-list { text-align: left }
#userDashboardPage .ud-progress-item {
	margin-bottom: 10px;
	font-size: 12px;
	color: #555
}
#userDashboardPage .ud-progress-bar {
	height: 7px;
	border-radius: 999px;
	background: #eee;
	margin-top: 4px;
	overflow: hidden
}
#userDashboardPage .ud-progress-bar .progress-bar {
	background-image: linear-gradient(94deg, #1a365d 0%, #3375d2 32%, #3aa61a 68%, #0e650d 100%);
	border-radius: 999px
}
#userDashboardPage .ud-next-rank {
	margin-top: 4px;
	font-size: 12px;
	font-weight: 600;
	color: #1a365d;
	opacity: .85
}
@media (max-width: 991.98px) {
	#userDashboardPage .ud-rank-card { margin-top: 0 }
}

#userDashboardPage .ud-email-warn .clients-card-title {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0
}

#userDashboardPage .ud-email-warn .clients-title-icon {
	background: rgba(230, 126, 34, 0.18);
	color: #e67e22
}

.bill-process-overlay {
	position: fixed;
	inset: 0;
	z-index: 20000;
	background: rgba(20, 10, 30, 0.55);
	display: flex;
	align-items: center;
	justify-content: center
}
.bill-process-overlay .bill-process-box {
	background: #1a365d;
	color: #fff;
	border-radius: 12px;
	padding: 22px 28px;
	text-align: center;
	min-width: 220px;
	box-shadow: 0 10px 30px rgba(0,0,0,.25)
}
.bill-process-overlay .bill-process-box small {
	opacity: .8;
	display: block;
	margin-top: 6px
}

/* ===== My Business / Royalty report (member) ===== */
#myBusinessPage .clients-card-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 40px;
	margin: 0 0 16px;
	padding: 0 0 16px;
	border-bottom: 1px solid rgba(26, 54, 93, 0.1);
	flex-wrap: nowrap
}

#myBusinessPage .clients-card-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	min-width: 0;
	flex: 1 1 auto
}

#myBusinessPage .clients-card-heading h5 {
	margin: 0;
	padding: 0;
	line-height: 1.25;
	font-size: 16px;
	font-weight: 600;
	color: #32393f;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

#myBusinessPage .clients-title-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: rgba(26, 54, 93, 0.08);
	color: #1a365d;
	flex-shrink: 0
}

#myBusinessPage .clients-title-icon .bx {
	font-size: 18px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center
}

#myBusinessPage .clients-header-btns {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 8px;
	height: 40px;
	flex-shrink: 0;
	margin-left: auto
}

#myBusinessPage .clients-btn-group {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 6px
}

#myBusinessPage .clients-icon-btn {
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	border: 1px solid rgba(26, 54, 93, 0.14);
	background: #fff;
	color: #1a365d;
	flex-shrink: 0
}

#myBusinessPage .client-actions {
	display: inline-flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 6px;
	white-space: nowrap
}

#myBusinessPage .mb-tree-node {
	background: #fff8dc;
	border: 1px solid #e6d58a;
	border-radius: 8px;
	padding: 12px 16px;
	display: inline-block;
	max-width: 100%;
	min-width: min(280px, 100%)
}

#myBusinessPage .mb-side-box {
	background: #f7f8fc;
	border: 1px solid rgba(26, 54, 93,.12);
	border-radius: 8px;
	padding: 10px;
	text-align: center
}

#myBusinessPage .mb-side-title { font-size: 12px; color: #666; font-weight: 600 }
#myBusinessPage .mb-side-val { font-size: 18px; font-weight: 700; color: #1a365d }

#myBusinessPage .mb-month-card {
	border: 1px solid rgba(26, 54, 93,.12);
	border-radius: 10px;
	overflow: hidden;
	height: 100%;
	background: rgba(255, 255, 255, 0.55)
}

#myBusinessPage .mb-month-head {
	background: #1a365d;
	color: #fff;
	font-weight: 600;
	padding: 10px 12px;
	font-size: 13px
}

#myBusinessPage .mb-month-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.18);
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap
}

#myBusinessPage .mb-month-body { padding: 12px }

#myBusinessPage .mb-month-note {
	font-size: 12px;
	color: #f62718;
	margin-bottom: 10px
}

#myBusinessPage .mb-metric {
	background: rgba(26, 54, 93, 0.04);
	border: 1px solid rgba(26, 54, 93, 0.08);
	border-radius: 8px;
	padding: 10px 8px;
	text-align: center;
	height: 100%
}

#myBusinessPage .mb-metric span {
	display: block;
	font-size: 11px;
	color: #6c757d;
	font-weight: 600;
	margin-bottom: 4px
}

#myBusinessPage .mb-metric strong {
	display: block;
	font-size: 14px;
	color: #1a365d;
	font-weight: 700;
	word-break: break-word
}

#myBusinessPage .mb-month-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px
}

#myBusinessPage .mb-month-actions .btn {
	flex: 1 1 auto;
	min-width: 120px;
	justify-content: center
}

#myBusinessPage .mb-status-ok { color: #31802e; font-weight: 700 }
#myBusinessPage .mb-status-pending { color: #f62718; font-weight: 700 }

#myBusinessPage .mb-stage-table-wrap {
	border-radius: 8px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid rgba(26, 54, 93, 0.12)
}

#myBusinessPage .mb-stage-table {
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	min-width: 900px
}

#myBusinessPage .mb-stage-table thead th {
	white-space: nowrap;
	font-size: 12px;
	font-weight: 600;
	background: #1a365d;
	color: #fff;
	border: none;
	text-align: center;
	vertical-align: middle;
	padding: 8px 10px
}

#myBusinessPage .mb-stage-table thead th:first-child {
	border-top-left-radius: 8px
}

#myBusinessPage .mb-stage-table thead th:last-child {
	border-top-right-radius: 8px
}

#myBusinessPage .mb-stage-table td {
	font-size: 12px;
	white-space: nowrap;
	vertical-align: middle
}

@media (max-width: 767.98px) {
	#myBusinessPage .clients-card-title {
		gap: 8px;
		padding-bottom: 12px;
		margin-bottom: 12px
	}

	#myBusinessPage .clients-card-heading h5 {
		font-size: 14px
	}

	#myBusinessPage .clients-title-icon {
		width: 34px;
		height: 34px
	}

	#myBusinessPage .mb-side-val {
		font-size: 15px
	}

	#myBusinessPage .mb-metric strong {
		font-size: 12px
	}

	#myBusinessPage .mb-month-actions .btn {
		min-width: 0;
		flex: 1 1 calc(50% - 4px);
		font-size: 12px;
		padding: 0.35rem 0.5rem
	}

	#myBusinessPage .mb-page-head .clients-card-heading > div small {
		display: block
	}
}

html.dark-theme #myBusinessPage .clients-card-heading h5 {
	color: #e4e5e6
}

html.dark-theme #myBusinessPage .clients-title-icon {
	background: rgba(255, 255, 255, 0.08);
	color: #c0c6ce
}

html.dark-theme #myBusinessPage .clients-icon-btn {
	background: #14171c;
	border-color: rgba(255, 255, 255, 0.14);
	color: #c0c6ce
}

html.dark-theme #myBusinessPage .mb-side-box,
html.dark-theme #myBusinessPage .mb-metric {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.1)
}

html.dark-theme #myBusinessPage .mb-side-val,
html.dark-theme #myBusinessPage .mb-metric strong {
	color: #e4e5e6
}

html.dark-theme #myBusinessPage .mb-month-card {
	background: rgba(20, 23, 28, 0.55);
	border-color: rgba(255, 255, 255, 0.1)
}

#welcomeLetterPage .wl-logo-wrap {
	margin-bottom: 10px
}
#welcomeLetterPage .wl-logo {
	display: inline-block;
	max-height: 72px;
	max-width: min(240px, 70vw);
	width: auto;
	height: auto;
	object-fit: contain
}

/* Monthly / receive payout invoice (mpi-*) */
.mpi-body {
	margin: 0;
	padding: 0;
	background: #e8eef5;
	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
	color: #1e293b
}
.mpi-page { padding: 20px 12px }
.mpi-toolbar {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-bottom: 16px
}
.mpi-toolbar .btn {
	display: inline-block;
	padding: 8px 18px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	line-height: 1.4
}
.mpi-toolbar .btn-primary {
	background-image: linear-gradient(94deg, #1a365d 0%, #3375d2 32%, #3aa61a 68%, #0e650d 100%);
	background-size: 160% 100%;
	background-position: 0% 50%;
	background-repeat: no-repeat;
	color: #fff;
	border-color: transparent
}
.mpi-toolbar .btn-outline-secondary {
	background: #fff;
	color: #1a365d;
	border-color: #c5d0de
}
.mpi-sheet {
	position: relative;
	max-width: 780px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid #d5dde8;
	border-radius: 12px;
	padding: 28px 32px 24px;
	box-shadow: 0 8px 28px rgba(26, 54, 93, .08);
	overflow: hidden
}
.mpi-accent {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background-image: linear-gradient(94deg, #1a365d 0%, #3375d2 32%, #3aa61a 68%, #0e650d 100%)
}
.mpi-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
	padding-bottom: 16px;
	border-bottom: 1px solid #e2e8f0;
	margin-bottom: 18px
}
.mpi-logo {
	display: block;
	max-height: 72px;
	max-width: 160px;
	margin: 0 auto;
	object-fit: contain
}
.mpi-company-name {
	color: #1a365d;
	font-weight: 800;
	font-size: 20px;
	letter-spacing: .3px;
	line-height: 1.25;
	text-align: center
}
.mpi-company-footer {
	text-align: center;
	font-size: 12px;
	line-height: 1.55;
	color: #475569;
	padding: 14px 10px;
	margin-bottom: 10px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px
}
.mpi-meta-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 14px;
	margin-top: 4px
}
.mpi-doc-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px
}
.mpi-doc-title {
	font-size: 18px;
	font-weight: 700;
	color: #1a365d;
	letter-spacing: .2px
}
.mpi-period-badge {
	background: #e8f0e8;
	color: #31802e;
	font-weight: 700;
	font-size: 12px;
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid #c5dbc4;
	white-space: nowrap
}
.mpi-member { margin-bottom: 16px }
.mpi-cheers {
	color: #1a365d;
	font-weight: 800;
	font-size: 15px;
	letter-spacing: .4px;
	margin-bottom: 4px
}
.mpi-who {
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 4px
}
.mpi-code {
	color: #64748b;
	font-weight: 600;
	margin-left: 4px
}
.mpi-earn-line {
	font-size: 13px;
	color: #475569
}
.mpi-month {
	color: #31802e;
	font-weight: 700
}
.mpi-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 18px;
	font-size: 13.5px
}
.mpi-table th,
.mpi-table td {
	border: 1px solid #d5dde8;
	padding: 10px 12px
}
.mpi-table th {
	background: #f3f6fa;
	color: #1a365d;
	font-weight: 700;
	text-align: left
}
.mpi-table .t-r { text-align: right; white-space: nowrap }
.mpi-total-row td {
	background: #f8fafc;
	font-weight: 700;
	color: #1a365d
}
.mpi-deduct-grid {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 14px;
	margin-bottom: 18px
}
.mpi-deduct {
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 14px 16px;
	background: #fafbfc
}
.mpi-deduct-title {
	font-weight: 700;
	color: #1a365d;
	margin-bottom: 10px;
	font-size: 13px
}
.mpi-deduct-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	padding: 5px 0;
	border-bottom: 1px dashed #e2e8f0;
	color: #334155
}
.mpi-deduct-row:last-child { border-bottom: 0 }
.mpi-net-box {
	border-radius: 10px;
	padding: 16px 18px;
	background: #eef6ee;
	border: 1px solid #c5dbc4;
	color: #1a365d;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 110px
}
.mpi-net-label {
	font-size: 12px;
	color: #31802e;
	text-transform: uppercase;
	letter-spacing: .6px;
	font-weight: 700;
	margin-bottom: 4px
}
.mpi-net-amt {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.2;
	margin-bottom: 6px;
	color: #1a365d
}
.mpi-net-words {
	font-size: 11.5px;
	line-height: 1.4;
	color: #475569
}
.mpi-receive-amt {
	margin-bottom: 16px;
	text-align: center;
	align-items: center
}
.mpi-detail-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	margin-bottom: 18px
}
.mpi-detail-table th,
.mpi-detail-table td {
	border: 1px solid #d5dde8;
	padding: 9px 12px;
	vertical-align: top
}
.mpi-detail-table th {
	width: 36%;
	text-align: left;
	background: #f3f6fa;
	color: #1a365d;
	font-weight: 700
}
.mpi-note {
	font-size: 12.5px;
	line-height: 1.55;
	color: #475569;
	background: #f8fafc;
	border-left: 3px solid #31802e;
	padding: 10px 14px;
	margin-bottom: 16px;
	border-radius: 0 8px 8px 0
}
.mpi-footer {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 11px;
	color: #94a3b8;
	padding-top: 4px
}
@media print {
	.mpi-body { background: #fff !important }
	.mpi-toolbar,
	.no-print { display: none !important }
	.mpi-page { padding: 0 !important; visibility: visible !important }
	.mpi-sheet {
		border: 0 !important;
		box-shadow: none !important;
		max-width: none !important;
		border-radius: 0 !important;
		padding: 12px 8px !important;
		overflow: visible !important;
		visibility: visible !important
	}
	.mpi-accent { display: none !important }
	.mpi-net-box,
	.mpi-period-badge,
	.mpi-company-footer {
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact
	}
	@page { size: A4; margin: 10mm }
}
@media (max-width: 700px) {
	.mpi-doc-bar { flex-direction: column; align-items: flex-start }
	.mpi-deduct-grid { grid-template-columns: 1fr }
	.mpi-sheet { padding: 22px 16px 18px }
}

/* ===== Agreement documents ===== */
.agreement-show-page,
.agreement-show-page .client-add-box,
#agrDocsGrid {
	overflow: hidden
}
.agreement-show-page .agr-doc-item {
	max-width: 100%
}
.agreement-show-page .agr-doc-card {
	position: relative;
	width: 100%;
	max-width: 100%;
	border: 1px solid rgba(26, 54, 93, 0.12);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 4px 14px rgba(26, 54, 93, 0.08)
}
.agreement-show-page .agr-doc-num {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	min-width: 26px;
	height: 26px;
	padding: 0 6px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #1a365d;
	color: #fff;
	font-size: 12px;
	font-weight: 700
}
.agreement-show-page .agr-doc-thumb {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 140px;
	padding: 0;
	border: 0;
	background: #f0f3f7;
	cursor: pointer;
	overflow: hidden
}
.agreement-show-page .agr-doc-thumb img {
	display: block !important;
	width: 100% !important;
	height: 140px !important;
	max-width: 100% !important;
	object-fit: cover !important;
	margin: 0 !important
}
.agreement-show-page .agr-doc-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	padding: 8px 10px;
	font-size: 12px;
	font-weight: 600;
	color: #1a365d
}
.agreement-show-page .agr-order-btns {
	display: inline-flex;
	gap: 4px
}
.agreement-show-page .agr-move-btn {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid rgba(26, 54, 93, 0.2);
	border-radius: 8px;
	background: #fff;
	color: #1a365d;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer
}
.agreement-show-page .agr-move-btn:hover {
	background: #1a365d;
	color: #fff;
	border-color: #1a365d
}
.agreement-show-page .agr-reorder-hint {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: #4c5258;
	font-size: 12px;
	font-weight: 600
}
#agrDocModal .agr-modal-dialog {
	max-width: min(720px, 94vw);
	margin: 1rem auto
}
#agrDocModal .modal-content {
	max-height: 90vh;
	overflow: hidden
}
#agrDocModal .agr-modal-body {
	padding: 12px 16px 18px;
	overflow: hidden
}
#agrDocModal .agr-modal-viewer {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	max-height: calc(90vh - 120px)
}
#agrDocModal .agr-modal-img-wrap {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
	max-height: calc(90vh - 130px);
	overflow: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f4f6f9;
	border-radius: 10px;
	padding: 8px
}
#agrDocModal .agr-modal-img {
	display: block !important;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: calc(90vh - 150px) !important;
	object-fit: contain !important;
	margin: 0 auto !important
}
#agrDocModal .agr-nav {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: #1a365d;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 2
}
.agr-print-frame {
	position: fixed;
	right: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border: 0;
	opacity: 0;
	pointer-events: none
}
#clientAddPage .agr-form-sortable .product-gallery-item .preview-img,
#clientAddPage.agreement-show-page img {
	max-width: 100%
}
#clientAddPage .agr-form-sortable .product-gallery-item .preview-img {
	height: 140px !important;
	object-fit: cover !important;
	margin-top: 0 !important
}

/* Brand gradient — light + dark (admin panel) */
html.dark-theme body {
	background: linear-gradient(160deg, rgba(10, 14, 24, 0.98) 0%, #0a0c10 48%, rgba(8, 16, 10, 0.98) 100%) !important
}

html.dark-theme .btn-primary,
html.dark-theme .btn-primary:hover,
html.dark-theme .btn-primary:focus,
html.dark-theme .btn-primary:active,
html.dark-theme .swal2-styled.swal2-confirm,
html.light-theme .btn-primary {
	background-image: linear-gradient(94deg, #1a365d 0%, #3375d2 32%, #3aa61a 68%, #0e650d 100%) !important;
	background-size: 160% 100% !important;
	background-repeat: no-repeat !important;
	border-color: transparent !important
}

html.dark-theme .btn-primary:hover,
html.light-theme .btn-primary:hover {
	background-position: 100% 50% !important
}

html.dark-theme .border-primary,
html.light-theme .border-primary {
	border-color: #1a365d !important
}

html.dark-theme .text-primary {
	color: #6ea8ff !important
}

html.light-theme .text-primary {
	color: #1a365d !important
}

html.dark-theme .bg-primary,
html.light-theme .bg-primary {
	background-color: #1a365d !important
}

html.dark-theme .sidebar-wrapper {
	background: #0c0e12 !important;
	border-right: 1px solid rgba(255, 255, 255, 0.08) !important
}

html.dark-theme .sidebar-wrapper .sidebar-header {
	background: #0c0e12 !important;
	border-color: rgba(255, 255, 255, 0.08) !important
}

html.dark-theme .sidebar-wrapper .metismenu a,
html.dark-theme .sidebar-wrapper .metismenu a .menu-title,
html.dark-theme .sidebar-wrapper .metismenu a .parent-icon,
html.dark-theme .sidebar-wrapper .metismenu a .parent-icon i,
html.dark-theme .sidebar-wrapper .metismenu ul a,
html.dark-theme .sidebar-wrapper .metismenu ul a i {
	color: #c0c6ce !important
}

html.dark-theme .sidebar-wrapper .metismenu .mm-active>a,
html.dark-theme .sidebar-wrapper .metismenu a:active,
html.dark-theme .sidebar-wrapper .metismenu a:focus,
html.dark-theme .sidebar-wrapper .metismenu a:hover {
	color: #c0c6ce !important;
	background: rgba(255, 255, 255, 0.12) !important;
	background-color: rgba(255, 255, 255, 0.12) !important
}

html.dark-theme .sidebar-wrapper .metismenu .mm-active>a .menu-title,
html.dark-theme .sidebar-wrapper .metismenu .mm-active>a .parent-icon,
html.dark-theme .sidebar-wrapper .metismenu .mm-active>a .parent-icon i,
html.dark-theme .sidebar-wrapper .metismenu a:hover .menu-title,
html.dark-theme .sidebar-wrapper .metismenu a:hover .parent-icon,
html.dark-theme .sidebar-wrapper .metismenu a:hover .parent-icon i,
html.dark-theme .sidebar-wrapper .metismenu a:focus .menu-title,
html.dark-theme .sidebar-wrapper .metismenu a:focus .parent-icon,
html.dark-theme .sidebar-wrapper .metismenu a:focus .parent-icon i {
	color: #c0c6ce !important;
	background: transparent !important;
	background-color: transparent !important
}

html.dark-theme .sidebar-wrapper .metismenu ul {
	background: rgba(0, 0, 0, 0.35) !important;
	border-color: transparent !important
}

html.dark-theme .sidebar-wrapper .metismenu .has-arrow:after,
html.dark-theme .sidebar-wrapper .metismenu .mm-active>a.has-arrow:after,
html.dark-theme .sidebar-wrapper .metismenu a.has-arrow:hover:after,
html.dark-theme .sidebar-wrapper .metismenu a.has-arrow:focus:after {
	border-color: #c0c6ce transparent transparent #c0c6ce !important
}

html.dark-theme .sidebar-wrapper .menu-label {
	color: #8a919a !important
}

html.dark-theme .toggle-icon,
html.dark-theme .logo-text {
	color: #c0c6ce !important
}

html.dark-theme #adminDashboardPage .ad-table a,
html.dark-theme #userDashboardPage .ad-table a,
html.dark-theme #franchiseDashboardPage .ad-table a {
	color: #c5d2e0 !important
}

html.dark-theme #adminDashboardPage .ad-table a:hover,
html.dark-theme #userDashboardPage .ad-table a:hover,
html.dark-theme #franchiseDashboardPage .ad-table a:hover {
	color: #6fdb5a !important
}

html.dark-theme .modal-header::before,
html.light-theme .modal-header::before {
	background-image: linear-gradient(94deg, #1a365d 0%, #3375d2 32%, #3aa61a 68%, #0e650d 100%)
}

html.dark-theme .card.border-primary,
html.dark-theme .card.glass-ui.border-primary {
	border-top-color: #3375d2 !important
}

html.dark-theme .form-check-input:checked {
	background-color: #1a365d;
	border-color: #3375d2
}

html.dark-theme .join-side-group input:checked + label {
	background-image: linear-gradient(94deg, #1a365d 0%, #3375d2 32%, #3aa61a 68%, #0e650d 100%);
	color: #fff
}

/* Dark mode — black glass UI */
html.dark-theme .card.glass-ui {
	background: rgba(8, 10, 14, 0.78) !important;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55) !important
}

html.dark-theme .card.glass-ui.border-primary,
html.dark-theme .card.glass-ui.border-top {
	border-top-width: 4px !important;
	border-top-style: solid !important
}

html.dark-theme .card.glass-ui .table {
	--bs-table-bg: transparent;
	--bs-table-striped-bg: rgba(255, 255, 255, 0.03);
	--bs-table-hover-bg: rgba(255, 255, 255, 0.05);
	color: #e4e5e6
}

html.dark-theme .card.glass-ui .table thead th {
	background: rgba(255, 255, 255, 0.04) !important;
	border-color: rgba(255, 255, 255, 0.08) !important;
	color: #e8eef8 !important
}

html.dark-theme .card.glass-ui .table td {
	border-color: rgba(255, 255, 255, 0.06) !important;
	color: #d5d9de
}

html.dark-theme .page-content .alert,
html.dark-theme .alert.alert-glass {
	background: linear-gradient(145deg, rgba(20, 24, 32, 0.88), rgba(12, 14, 20, 0.72)) !important;
	border-color: rgba(255, 255, 255, 0.12) !important;
	box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
	color: #d5d9de !important
}

html.dark-theme .page-content .alert.alert-success,
html.dark-theme .page-content .alert.bg-success,
html.dark-theme .alert-glass.alert-success {
	background: linear-gradient(145deg, rgba(49, 128, 46, 0.28), rgba(12, 14, 20, 0.75)) !important;
	border-color: rgba(49, 128, 46, 0.35) !important;
	color: #b8e0b4 !important
}

html.dark-theme .page-content .alert.alert-danger,
html.dark-theme .page-content .alert.bg-danger,
html.dark-theme .alert-glass.alert-danger {
	background: linear-gradient(145deg, rgba(246, 39, 24, 0.28), rgba(12, 14, 20, 0.75)) !important;
	border-color: rgba(246, 39, 24, 0.35) !important;
	color: #f5b4ae !important
}

html.dark-theme .page-content .alert.alert-warning,
html.dark-theme .alert-glass.alert-warning {
	background: linear-gradient(145deg, rgba(230, 126, 34, 0.28), rgba(12, 14, 20, 0.75)) !important;
	border-color: rgba(230, 126, 34, 0.35) !important;
	color: #f0c9a0 !important
}

html.dark-theme .page-content .alert.alert-info,
html.dark-theme .alert-glass.alert-info {
	background: linear-gradient(145deg, rgba(26, 54, 93, 0.4), rgba(12, 14, 20, 0.75)) !important;
	border-color: rgba(90, 140, 210, 0.35) !important;
	color: #c5d6ef !important
}

html.dark-theme .page-content .alert .btn-close,
html.dark-theme .alert-glass .btn-close {
	filter: invert(1) grayscale(100%) brightness(180%)
}

html.dark-theme .clients-card-heading h5,
html.dark-theme .clients-card-heading h6,
html.dark-theme .clients-title-icon {
	color: #e8eef8 !important
}

/* Dark mode — dashboard text + surfaces */
html.dark-theme #adminDashboardPage .card.glass-ui.ad-hero,
html.dark-theme #adminDashboardPage .ad-hero {
	background:
		radial-gradient(circle at 92% 18%, rgba(49, 128, 46, .18), transparent 42%),
		linear-gradient(120deg, rgba(12, 18, 32, .92), rgba(8, 10, 14, .88) 55%) !important;
	border-color: rgba(255, 255, 255, 0.08) !important
}

html.dark-theme #adminDashboardPage .ad-hero-name,
html.dark-theme #adminDashboardPage .ad-hero-kpi strong,
html.dark-theme #adminDashboardPage .ad-section-label,
html.dark-theme #adminDashboardPage .ad-spotlight-value,
html.dark-theme #adminDashboardPage .ad-tile-value,
html.dark-theme #adminDashboardPage a.ad-spotlight,
html.dark-theme #adminDashboardPage a.ad-tile,
html.dark-theme #adminDashboardPage a.ad-spotlight:hover,
html.dark-theme #adminDashboardPage a.ad-tile:hover {
	color: #f1f5f9 !important
}

html.dark-theme #adminDashboardPage .ad-hero-greet {
	color: #6fdb5a !important
}

html.dark-theme #adminDashboardPage .ad-hero-meta,
html.dark-theme #adminDashboardPage .ad-hero-kpi span,
html.dark-theme #adminDashboardPage .ad-spotlight-label,
html.dark-theme #adminDashboardPage .ad-spotlight-sub,
html.dark-theme #adminDashboardPage .ad-tile-label,
html.dark-theme #adminDashboardPage .ad-tile-sub,
html.dark-theme #adminDashboardPage .ad-alert-chip span {
	color: #94a3b8 !important
}

html.dark-theme #adminDashboardPage .ad-hero-meta i {
	color: #6ea8ff !important
}

html.dark-theme #adminDashboardPage .ad-hero-kpi {
	background: rgba(0, 0, 0, 0.45) !important;
	border-color: rgba(255, 255, 255, 0.1) !important
}

html.dark-theme #adminDashboardPage .ad-c-navy,
html.dark-theme #userDashboardPage .ad-c-navy,
html.dark-theme #franchiseDashboardPage .ad-c-navy {
	background: linear-gradient(145deg, rgba(26, 54, 93, 0.55), rgba(8, 10, 14, 0.72)) !important;
	border-color: rgba(51, 117, 210, 0.35) !important;
	color: #e8eef8 !important
}

html.dark-theme #adminDashboardPage .ad-c-blue,
html.dark-theme #userDashboardPage .ad-c-blue,
html.dark-theme #franchiseDashboardPage .ad-c-blue {
	background: linear-gradient(145deg, rgba(58, 123, 253, 0.4), rgba(8, 10, 14, 0.72)) !important;
	border-color: rgba(58, 123, 253, 0.35) !important;
	color: #dbeafe !important
}

html.dark-theme #adminDashboardPage .ad-c-green,
html.dark-theme #userDashboardPage .ad-c-green,
html.dark-theme #franchiseDashboardPage .ad-c-green {
	background: linear-gradient(145deg, rgba(49, 128, 46, 0.4), rgba(8, 10, 14, 0.72)) !important;
	border-color: rgba(49, 128, 46, 0.35) !important;
	color: #dcfce7 !important
}

html.dark-theme #adminDashboardPage .ad-c-orange,
html.dark-theme #userDashboardPage .ad-c-orange,
html.dark-theme #franchiseDashboardPage .ad-c-orange {
	background: linear-gradient(145deg, rgba(230, 126, 34, 0.4), rgba(8, 10, 14, 0.72)) !important;
	border-color: rgba(230, 126, 34, 0.35) !important;
	color: #ffedd5 !important
}

html.dark-theme #adminDashboardPage .ad-c-teal,
html.dark-theme #userDashboardPage .ad-c-teal,
html.dark-theme #franchiseDashboardPage .ad-c-teal {
	background: linear-gradient(145deg, rgba(13, 148, 136, 0.4), rgba(8, 10, 14, 0.72)) !important;
	border-color: rgba(13, 148, 136, 0.35) !important;
	color: #ccfbf1 !important
}

html.dark-theme #adminDashboardPage .ad-c-purple,
html.dark-theme #userDashboardPage .ad-c-purple,
html.dark-theme #franchiseDashboardPage .ad-c-purple {
	background: linear-gradient(145deg, rgba(124, 58, 237, 0.38), rgba(8, 10, 14, 0.72)) !important;
	border-color: rgba(124, 58, 237, 0.35) !important;
	color: #ede9fe !important
}

html.dark-theme #adminDashboardPage .ad-c-red,
html.dark-theme #userDashboardPage .ad-c-red,
html.dark-theme #franchiseDashboardPage .ad-c-red {
	background: linear-gradient(145deg, rgba(246, 39, 24, 0.38), rgba(8, 10, 14, 0.72)) !important;
	border-color: rgba(246, 39, 24, 0.35) !important;
	color: #fee2e2 !important
}

html.dark-theme #adminDashboardPage .ad-stat-icon,
html.dark-theme #userDashboardPage .ad-stat-icon,
html.dark-theme #franchiseDashboardPage .ad-stat-icon {
	background: rgba(0, 0, 0, 0.35) !important
}

html.dark-theme #adminDashboardPage .ad-stat-label,
html.dark-theme #userDashboardPage .ad-stat-label,
html.dark-theme #franchiseDashboardPage .ad-stat-label,
html.dark-theme #adminDashboardPage .ad-stat-sub,
html.dark-theme #userDashboardPage .ad-stat-sub,
html.dark-theme #franchiseDashboardPage .ad-stat-sub {
	color: #94a3b8 !important
}

html.dark-theme #adminDashboardPage .ad-stat-value,
html.dark-theme #userDashboardPage .ad-stat-value,
html.dark-theme #franchiseDashboardPage .ad-stat-value {
	color: #f1f5f9 !important
}

html.dark-theme #adminDashboardPage .ad-c-navy .ad-stat-icon,
html.dark-theme #adminDashboardPage .ad-c-navy .clients-title-icon,
html.dark-theme #userDashboardPage .ad-c-navy .ad-stat-icon,
html.dark-theme #franchiseDashboardPage .ad-c-navy .ad-stat-icon,
html.dark-theme #userDashboardPage .ad-c-navy .clients-title-icon,
html.dark-theme #franchiseDashboardPage .ad-c-navy .clients-title-icon {
	color: #6ea8ff !important
}

html.dark-theme #adminDashboardPage .ad-table thead th,
html.dark-theme #userDashboardPage .ad-table thead th,
html.dark-theme #franchiseDashboardPage .ad-table thead th {
	background: rgba(255, 255, 255, 0.04) !important;
	color: #e8eef8 !important;
	border-bottom-color: rgba(255, 255, 255, 0.1) !important
}

html.dark-theme #adminDashboardPage .ad-table tbody td,
html.dark-theme #userDashboardPage .ad-table tbody td,
html.dark-theme #franchiseDashboardPage .ad-table tbody td {
	border-color: rgba(255, 255, 255, 0.06) !important;
	color: #d5d9de
}

html.dark-theme #adminDashboardPage .ad-quick-item,
html.dark-theme #userDashboardPage .ad-quick-item,
html.dark-theme #franchiseDashboardPage .ad-quick-item {
	background: rgba(0, 0, 0, 0.4) !important;
	border-color: rgba(255, 255, 255, 0.1) !important;
	color: #e8eef8 !important
}

html.dark-theme #adminDashboardPage .ad-quick-item:hover,
html.dark-theme #userDashboardPage .ad-quick-item:hover,
html.dark-theme #franchiseDashboardPage .ad-quick-item:hover {
	background: rgba(0, 0, 0, 0.55) !important;
	border-color: rgba(110, 168, 255, 0.35) !important;
	color: #fff !important
}

html.dark-theme #adminDashboardPage .ad-quick-item i,
html.dark-theme #userDashboardPage .ad-quick-item i,
html.dark-theme #franchiseDashboardPage .ad-quick-item i,
html.dark-theme #adminDashboardPage .ad-quick-item .badge,
html.dark-theme #userDashboardPage .ad-quick-item .badge,
html.dark-theme #franchiseDashboardPage .ad-quick-item .badge {
	color: #6ea8ff !important
}

html.dark-theme #adminDashboardPage .ad-quick-item .badge {
	background: rgba(51, 117, 210, 0.22) !important
}

html.dark-theme #adminDashboardPage .ad-verify-card {
	background: rgba(0, 0, 0, 0.4) !important;
	border-color: rgba(255, 255, 255, 0.1) !important
}

html.dark-theme #adminDashboardPage .ad-verify-row span {
	color: #cbd5e1 !important
}

html.dark-theme #adminDashboardPage .ad-verify-bar {
	background: rgba(255, 255, 255, 0.08) !important
}

html.dark-theme #adminDashboardPage .ad-spot-navy .ad-spotlight-icon {
	background: rgba(51, 117, 210, 0.2) !important;
	color: #6ea8ff !important
}

html.dark-theme #adminDashboardPage .ad-spot-green .ad-spotlight-icon {
	background: rgba(49, 128, 46, 0.22) !important;
	color: #6fdb5a !important
}

html.dark-theme #adminDashboardPage .ad-spot-teal .ad-spotlight-icon {
	background: rgba(13, 148, 136, 0.22) !important;
	color: #2dd4bf !important
}

html.dark-theme #adminDashboardPage .ad-alert-chip {
	background: rgba(0, 0, 0, 0.4) !important
}

html.dark-theme #adminDashboardPage .ad-alert-chip strong {
	color: #f1f5f9 !important
}

html.dark-theme #adminDashboardPage .ad-alert-chip.is-danger {
	background: rgba(246, 39, 24, 0.16) !important;
	border-color: rgba(246, 39, 24, 0.35) !important
}

html.dark-theme #adminDashboardPage .ad-alert-chip.is-warn {
	background: rgba(255, 193, 7, 0.14) !important;
	border-color: rgba(255, 193, 7, 0.3) !important
}

html.dark-theme #adminDashboardPage .ad-alert-chip.is-info {
	background: rgba(13, 110, 253, 0.16) !important;
	border-color: rgba(13, 110, 253, 0.3) !important
}

html.dark-theme #adminDashboardPage .ad-alert-chip.is-orange {
	background: rgba(253, 126, 20, 0.16) !important;
	border-color: rgba(253, 126, 20, 0.3) !important
}

html.dark-theme #adminDashboardPage .ad-tile-icon,
html.dark-theme #adminDashboardPage .ad-tile.tone-navy .ad-tile-icon {
	background: rgba(51, 117, 210, 0.18) !important;
	color: #6ea8ff !important
}

html.dark-theme #adminDashboardPage .ad-tile.tone-green .ad-tile-icon {
	background: rgba(49, 128, 46, 0.2) !important;
	color: #6fdb5a !important
}

html.dark-theme #adminDashboardPage .ad-tile.tone-orange .ad-tile-icon {
	background: rgba(253, 126, 20, 0.18) !important;
	color: #fdba74 !important
}

html.dark-theme #adminDashboardPage .ad-tile.tone-teal .ad-tile-icon {
	background: rgba(13, 148, 136, 0.18) !important;
	color: #2dd4bf !important
}

html.dark-theme #adminDashboardPage .ad-tile.tone-purple .ad-tile-icon {
	background: rgba(124, 58, 237, 0.18) !important;
	color: #c4b5fd !important
}

html.dark-theme #adminDashboardPage .clients-card-heading h5,
html.dark-theme #adminDashboardPage .clients-card-heading h6,
html.dark-theme #userDashboardPage .clients-card-heading h5,
html.dark-theme #userDashboardPage .clients-card-heading h6,
html.dark-theme #franchiseDashboardPage .clients-card-heading h5,
html.dark-theme #franchiseDashboardPage .clients-card-heading h6 {
	color: #f1f5f9 !important
}

html.dark-theme #adminDashboardPage .clients-title-icon,
html.dark-theme #userDashboardPage .clients-title-icon,
html.dark-theme #franchiseDashboardPage .clients-title-icon {
	color: #6ea8ff !important
}

html.dark-theme #adminDashboardPage .clients-card-title,
html.dark-theme #userDashboardPage .clients-card-title,
html.dark-theme #franchiseDashboardPage .clients-card-title {
	border-bottom-color: rgba(255, 255, 255, 0.1) !important
}

html.dark-theme #franchiseDashboardPage .fd-meta,
html.dark-theme #franchiseDashboardPage .fd-meta li span,
html.dark-theme #franchiseDashboardPage .fd-amount,
html.dark-theme #franchiseDashboardPage .fd-metric-num {
	color: #e8eef8 !important
}

html.dark-theme #franchiseDashboardPage .fd-slab,
html.dark-theme #franchiseDashboardPage .fd-card {
	background: rgba(0, 0, 0, 0.35) !important;
	border-color: rgba(255, 255, 255, 0.08) !important
}

html.dark-theme #franchiseDashboardPage .fd-track {
	background: rgba(255, 255, 255, 0.08) !important
}

html.dark-theme .page-content h6,
html.dark-theme .breadcrumb-title,
html.dark-theme .breadcrumb-item,
html.dark-theme .breadcrumb-item a {
	color: #e8eef8 !important
}

html.dark-theme .modal-content {
	background: rgba(12, 14, 18, 0.92) !important;
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 22px 56px rgba(0, 0, 0, 0.65) !important
}

html.dark-theme .modal-header,
html.dark-theme .modal-footer {
	background: rgba(0, 0, 0, 0.35) !important;
	border-color: rgba(255, 255, 255, 0.08) !important
}

html.dark-theme .modal-title,
html.dark-theme .modal-body .form-label,
html.dark-theme .modal-body label {
	color: #e8eef8 !important
}

html.dark-theme .modal-body {
	color: #c9ced6 !important
}

/* Dark mode — forms / inputs */
html.dark-theme .form-label,
html.dark-theme label.form-label,
html.dark-theme .page-content .form-label,
html.dark-theme .page-content label,
html.dark-theme #clientAddPage .form-label,
html.dark-theme #clientAddPage .client-add-box-title,
html.dark-theme #clientAddPage .client-add-title h5,
html.dark-theme .page-content .accordion .form-label,
html.dark-theme .page-content .clients-filter-acc .form-label,
html.dark-theme #clientsPage .clients-filter-form .form-label {
	color: #c0c6ce !important
}

html.dark-theme #clientAddPage .client-add-hint,
html.dark-theme .form-text,
html.dark-theme .text-muted {
	color: #8a919a !important
}

html.dark-theme .form-control,
html.dark-theme .form-select,
html.dark-theme #clientAddPage .form-control,
html.dark-theme #clientAddPage .form-select,
html.dark-theme .page-content .clients-filter-acc .form-control,
html.dark-theme .page-content .clients-filter-acc .form-select,
html.dark-theme #clientsPage .clients-filter-form .form-control,
html.dark-theme #clientsPage .clients-filter-form .form-select,
html.dark-theme .modal-body .form-control,
html.dark-theme .modal-body .form-select,
html.dark-theme .modal-body textarea {
	color: #e4e5e6 !important;
	background-color: #14171c !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	box-shadow: none !important
}

html.dark-theme .form-control:focus,
html.dark-theme .form-select:focus,
html.dark-theme #clientAddPage .form-control:focus,
html.dark-theme #clientAddPage .form-select:focus,
html.dark-theme .modal-body .form-control:focus,
html.dark-theme .modal-body .form-select:focus,
html.dark-theme .modal-body textarea:focus {
	color: #e8eef8 !important;
	background-color: #14171c !important;
	border-color: #3375d2 !important;
	box-shadow: 0 0 0 0.2rem rgba(51, 117, 210, 0.2) !important
}

html.dark-theme .form-control::placeholder,
html.dark-theme #clientAddPage .form-control::placeholder,
html.dark-theme .modal-body .form-control::placeholder {
	color: #7a8491 !important;
	opacity: 1 !important
}

html.dark-theme .form-control:disabled,
html.dark-theme .form-control[readonly],
html.dark-theme #clientAddPage .form-control[readonly],
html.dark-theme .form-select:disabled {
	background-color: rgba(255, 255, 255, 0.06) !important;
	color: #9ea4aa !important;
	border-color: rgba(255, 255, 255, 0.12) !important
}

html.dark-theme .form-control.is-invalid,
html.dark-theme .form-select.is-invalid,
html.dark-theme #clientAddPage .form-control.is-invalid,
html.dark-theme #clientAddPage .form-select.is-invalid {
	border-color: #f62718 !important
}

html.dark-theme .invalid-feedback {
	color: #ff6b5e !important
}

html.dark-theme .input-group-text,
html.dark-theme #clientAddPage .client-add-pass .input-group-text,
html.dark-theme .modal-body .input-group-text {
	color: #c0c6ce !important;
	background-color: #1a1f26 !important;
	border-color: rgba(255, 255, 255, 0.16) !important
}

html.dark-theme #clientAddPage .client-add-pass {
	background: #14171c !important;
	border-color: rgba(255, 255, 255, 0.16) !important
}

html.dark-theme #clientAddPage .client-add-pass .form-control {
	background: #14171c !important;
	color: #e4e5e6 !important
}

html.dark-theme #clientAddPage .client-add-pass:focus-within {
	border-color: #3375d2 !important;
	box-shadow: 0 0 0 0.2rem rgba(51, 117, 210, 0.2) !important
}

html.dark-theme #clientAddPage .form-control:-webkit-autofill,
html.dark-theme #clientAddPage .form-control:-webkit-autofill:hover,
html.dark-theme #clientAddPage .form-control:-webkit-autofill:focus,
html.dark-theme .form-control:-webkit-autofill,
html.dark-theme .form-control:-webkit-autofill:hover,
html.dark-theme .form-control:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 30px #14171c inset !important;
	-webkit-text-fill-color: #e4e5e6 !important;
	caret-color: #e4e5e6 !important
}

html.dark-theme #clientAddPage .client-add-box {
	background: rgba(0, 0, 0, 0.35) !important;
	border-color: rgba(255, 255, 255, 0.08) !important
}

html.dark-theme #clientAddPage .join-side-group,
html.dark-theme .join-side-group {
	background: #14171c !important;
	border-color: rgba(255, 255, 255, 0.16) !important
}

html.dark-theme #clientAddPage .join-side-group label,
html.dark-theme .join-side-group label {
	color: #c0c6ce !important;
	background: transparent
}

html.dark-theme #clientAddPage .join-side-group label + input + label,
html.dark-theme .join-side-group label + input + label {
	border-left-color: rgba(255, 255, 255, 0.16) !important
}

html.dark-theme #clientAddPage .join-side-group input:checked + label,
html.dark-theme .join-side-group input:checked + label {
	background-image: linear-gradient(94deg, #1a365d 0%, #3375d2 32%, #3aa61a 68%, #0e650d 100%) !important;
	background-size: 160% 100% !important;
	background-position: 0% 50% !important;
	background-repeat: no-repeat !important;
	background-color: transparent !important;
	color: #fff !important
}

html.dark-theme #clientAddPage .join-side-group input:disabled + label,
html.dark-theme .join-side-group input:disabled + label {
	background: rgba(255, 255, 255, 0.06) !important;
	color: #7a8491 !important
}

html.dark-theme #clientAddPage .client-add-title {
	border-bottom-color: rgba(255, 255, 255, 0.1) !important
}

html.dark-theme .form-check-label {
	color: #c0c6ce !important
}

html.dark-theme .form-select {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c0c6ce' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important
}

/* Shared date picker (dark only) */
html.dark-theme .dob-picker-btn {
	color: #c0c6ce !important
}

html.dark-theme .dob-picker-panel {
	background: #14171c !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55) !important
}

html.dark-theme .dob-cal-head strong,
html.dark-theme .dob-nav {
	color: #c0c6ce !important
}

html.dark-theme .dob-nav:hover {
	background: rgba(255, 255, 255, 0.08) !important
}

html.dark-theme .dob-month,
html.dark-theme .dob-year {
	color: #e4e5e6 !important;
	background: #0c0e12 !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important
}

html.dark-theme .dob-cal-week span {
	color: #8a919a !important
}

html.dark-theme .dob-day {
	color: #e4e5e6 !important;
	background: transparent !important
}

html.dark-theme .dob-day:hover {
	background: rgba(51, 117, 210, 0.2) !important;
	color: #e8eef8 !important
}

html.dark-theme .dob-day.is-today {
	color: #6ea8ff !important;
	box-shadow: inset 0 0 0 1px #3375d2 !important
}

html.dark-theme .dob-day.is-selected,
html.dark-theme .dob-day.is-selected:hover {
	background: #1a365d !important;
	color: #fff !important;
	box-shadow: none !important
}

html.dark-theme .dob-picker .form-control {
	color: #e4e5e6 !important;
	background-color: #14171c !important;
	border-color: rgba(255, 255, 255, 0.16) !important
}

/* Select2 closed field (Gender / Country) */
html.dark-theme #clientAddPage .select2-container .select2-selection--single,
html.dark-theme .select2-container--bootstrap4 .select2-selection,
html.dark-theme .select2-container--bootstrap4 .select2-selection--single {
	background-color: #14171c !important;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c0c6ce' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.75rem center !important;
	background-size: 16px 12px !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	color: #e4e5e6 !important
}

html.dark-theme #clientAddPage .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered,
html.dark-theme .select2-container--bootstrap4 .select2-selection__rendered {
	color: #e4e5e6 !important
}

html.dark-theme #clientAddPage .select2-container--bootstrap4.select2-container--focus .select2-selection--single,
html.dark-theme #clientAddPage .select2-container--bootstrap4.select2-container--open .select2-selection--single {
	border-color: #3375d2 !important;
	box-shadow: 0 0 0 0.2rem rgba(51, 117, 210, 0.2) !important
}

/* Select2 dropdown panel (appended to body) */
html.dark-theme .select2-dropdown,
html.dark-theme .select2-dropdown.client-add-select-drop,
html.dark-theme .select2-container--open .select2-dropdown.client-add-select-drop,
html.dark-theme .select2-container--bootstrap4 .select2-dropdown.client-add-select-drop {
	background: #14171c !important;
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55) !important;
	color: #e4e5e6 !important
}

html.dark-theme .select2-dropdown.client-add-select-drop .select2-search__field,
html.dark-theme .select2-search--dropdown .select2-search__field {
	background-color: #0c0e12 !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	color: #e4e5e6 !important
}

html.dark-theme .select2-dropdown.client-add-select-drop .select2-search__field:focus {
	border-color: #3375d2 !important
}

html.dark-theme .select2-dropdown.client-add-select-drop .select2-results__option,
html.dark-theme .select2-container--bootstrap4 .select2-results__option {
	color: #c0c6ce !important;
	background: transparent !important
}

html.dark-theme .select2-container--bootstrap4 .select2-dropdown.client-add-select-drop .select2-results__option--highlighted,
html.dark-theme .select2-dropdown.client-add-select-drop .select2-results__option--highlighted[aria-selected],
html.dark-theme .select2-dropdown.client-add-select-drop .select2-results__option--highlighted[aria-selected=false],
html.dark-theme .select2-container--bootstrap4 .select2-results__option--highlighted {
	background: rgba(51, 117, 210, 0.22) !important;
	color: #e8eef8 !important
}

html.dark-theme .select2-container--bootstrap4 .select2-dropdown.client-add-select-drop .select2-results__option[aria-selected=true],
html.dark-theme .select2-container--bootstrap4 .select2-dropdown.client-add-select-drop .select2-results__option--highlighted[aria-selected=true],
html.dark-theme .select2-container--bootstrap4 .select2-results__option[aria-selected=true] {
	background: #1a365d !important;
	color: #fff !important
}

/* Upload profile / docs cards */
html.dark-theme #clientAddPage .upload-card,
html.dark-theme .upload-card {
	background: rgba(0, 0, 0, 0.35) !important;
	border-color: rgba(255, 255, 255, 0.18) !important;
	color: #c0c6ce !important
}

html.dark-theme #clientAddPage .upload-card:hover,
html.dark-theme .upload-card:hover {
	background: rgba(51, 117, 210, 0.12) !important;
	border-color: #3375d2 !important
}

html.dark-theme #clientAddPage .upload-card .icon,
html.dark-theme .upload-card .icon {
	color: #c0c6ce !important
}

html.dark-theme #clientAddPage .upload-card p,
html.dark-theme #clientAddPage .upload-card p small,
html.dark-theme .upload-card p,
html.dark-theme .upload-card small {
	color: #9ea4aa !important
}

html.dark-theme .page-content .clients-filter-acc .accordion-button,
html.dark-theme .page-content .accordion .accordion-button {
	background: transparent !important;
	color: #c0c6ce !important;
	box-shadow: none !important
}

html.dark-theme .page-content .clients-filter-acc .accordion-button:not(.collapsed),
html.dark-theme .page-content .accordion .accordion-button:not(.collapsed) {
	color: #e4e5e6 !important;
	background: transparent !important
}

html.dark-theme .page-content .clients-filter-acc .accordion-button .bx,
html.dark-theme .page-content .accordion .accordion-button .bx {
	color: #c0c6ce !important
}

html.dark-theme .page-content .clients-filter-acc .accordion-button::after,
html.dark-theme .page-content .accordion .accordion-button::after {
	filter: invert(1) brightness(1.4)
}

html.dark-theme .page-content .clients-filter-acc .accordion-item,
html.dark-theme .page-content .accordion .accordion-item {
	background: transparent !important;
	border-color: rgba(255, 255, 255, 0.08) !important
}

html.dark-theme .page-content .clients-filter-acc .accordion-body,
html.dark-theme .page-content .accordion .accordion-body {
	background: transparent !important
}

/* Filter From/To Date — dark */
html.dark-theme .page-content .clients-filter-acc input[type="date"],
html.dark-theme .page-content .accordion input[type="date"],
html.dark-theme #clientsPage .clients-filter-form input[type="date"],
html.dark-theme #clientsPage input[type="date"],
html.dark-theme .page-content input[type="date"].form-control,
html.dark-theme input[type="date"].form-control {
	color-scheme: dark !important;
	color: #e4e5e6 !important;
	background-color: #14171c !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	caret-color: #e4e5e6
}

html.dark-theme .page-content .clients-filter-acc input[type="date"]:focus,
html.dark-theme .page-content .accordion input[type="date"]:focus,
html.dark-theme #clientsPage input[type="date"].form-control:focus,
html.dark-theme .page-content input[type="date"].form-control:focus,
html.dark-theme input[type="date"].form-control:focus {
	border-color: #3375d2 !important;
	box-shadow: 0 0 0 0.2rem rgba(51, 117, 210, 0.2) !important;
	background-color: #14171c !important;
	color: #e8eef8 !important
}

html.dark-theme .page-content .clients-filter-acc input[type="date"]::-webkit-calendar-picker-indicator,
html.dark-theme .page-content .accordion input[type="date"]::-webkit-calendar-picker-indicator,
html.dark-theme #clientsPage input[type="date"]::-webkit-calendar-picker-indicator,
html.dark-theme .page-content input[type="date"].form-control::-webkit-calendar-picker-indicator,
html.dark-theme input[type="date"].form-control::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: 0.9;
	filter: invert(1) brightness(1.35);
	background-color: transparent
}

html.dark-theme .page-content .clients-filter-acc input[type="date"]::-webkit-calendar-picker-indicator:hover,
html.dark-theme #clientsPage input[type="date"]::-webkit-calendar-picker-indicator:hover,
html.dark-theme input[type="date"].form-control::-webkit-calendar-picker-indicator:hover {
	opacity: 1;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 4px
}

html.dark-theme .page-content .clients-filter-acc input[type="date"]::-webkit-datetime-edit,
html.dark-theme .page-content .accordion input[type="date"]::-webkit-datetime-edit,
html.dark-theme #clientsPage input[type="date"]::-webkit-datetime-edit,
html.dark-theme .page-content input[type="date"].form-control::-webkit-datetime-edit,
html.dark-theme input[type="date"].form-control::-webkit-datetime-edit,
html.dark-theme input[type="date"]::-webkit-datetime-edit-year-field,
html.dark-theme input[type="date"]::-webkit-datetime-edit-month-field,
html.dark-theme input[type="date"]::-webkit-datetime-edit-day-field {
	color: #e4e5e6 !important
}

html.dark-theme .page-content .clients-filter-acc .form-label,
html.dark-theme .page-content .accordion .form-label,
html.dark-theme #clientsPage .clients-filter-form .form-label,
html.dark-theme #clientsPage .form-label {
	color: #c0c6ce !important
}

/* Dark mode — ACM menu icons + role select (light mode untouched) */
html.dark-theme #acmPage .acm-name i,
html.dark-theme #acmPage .acm-name .bx,
html.dark-theme #acmPage .acm-name [class^="bx"],
html.dark-theme #acmPage .acm-name [class*=" bx"] {
	color: #c0c6ce !important
}

html.dark-theme #acmPage .acm-handle,
html.dark-theme #acmPage .acm-handle-spacer {
	color: #c0c6ce !important;
	background: rgba(255, 255, 255, 0.08) !important
}

html.dark-theme #acmPage .acm-handle .bx,
html.dark-theme #acmPage .acm-handle i {
	color: #c0c6ce !important
}

html.dark-theme #acmPage .clients-title-icon {
	background: rgba(255, 255, 255, 0.08) !important;
	color: #c0c6ce !important
}

html.dark-theme #acmPage .clients-title-icon .bx,
html.dark-theme #acmPage .clients-title-icon i {
	color: #c0c6ce !important
}

html.dark-theme #acmPage .acm-name {
	color: #c0c6ce !important
}

html.dark-theme #acmPage .select2-container .select2-selection--single {
	background-color: #14171c !important;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c0c6ce' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.6rem center !important;
	background-size: 12px 10px !important;
	border: 1px solid rgba(255, 255, 255, 0.16) !important;
	color: #e4e5e6 !important
}

html.dark-theme #acmPage .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
	color: #e4e5e6 !important
}

html.dark-theme #acmPage .select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
	color: #8a919a !important
}

html.dark-theme #acmPage .select2-container--bootstrap4.select2-container--focus .select2-selection--single,
html.dark-theme #acmPage .select2-container--bootstrap4.select2-container--open .select2-selection--single {
	border-color: #3375d2 !important;
	box-shadow: 0 0 0 0.15rem rgba(51, 117, 210, 0.2) !important
}

html.dark-theme #acmPage .select2-container--bootstrap4 .select2-selection--single .select2-selection__clear {
	color: #c0c6ce !important
}

/* Dark mode — list pages: cards + table rows (light mode untouched) */
html.dark-theme #clientsPage .card.glass-ui .table,
html.dark-theme #clientsPage table.dataTable,
html.dark-theme .card.glass-ui table.dataTable,
html.dark-theme .card.glass-ui .table.dataTable,
html.dark-theme table.dataTable {
	--bs-table-bg: transparent !important;
	--bs-table-striped-bg: rgba(255, 255, 255, 0.03) !important;
	--bs-table-hover-bg: rgba(255, 255, 255, 0.06) !important;
	--bs-table-striped-color: #e4e5e6 !important;
	--bs-table-color: #e4e5e6 !important;
	background-color: transparent !important;
	color: #e4e5e6 !important;
	border-color: rgba(255, 255, 255, 0.1) !important
}

html.dark-theme #clientsPage .card.glass-ui .table thead th,
html.dark-theme #clientsPage table.dataTable thead th,
html.dark-theme .card.glass-ui table.dataTable thead th,
html.dark-theme table.dataTable thead th {
	background: #1a365d !important;
	color: #fff !important;
	border-color: transparent !important
}

html.dark-theme #clientsPage .card.glass-ui .table tbody td,
html.dark-theme #clientsPage table.dataTable tbody td,
html.dark-theme .card.glass-ui table.dataTable tbody td,
html.dark-theme table.dataTable tbody td,
html.dark-theme .card.glass-ui .table tbody td {
	background-color: transparent !important;
	color: #d5d9de !important;
	border-bottom-color: rgba(255, 255, 255, 0.08) !important
}

html.dark-theme #clientsPage table.dataTable tbody tr,
html.dark-theme table.dataTable tbody tr,
html.dark-theme .card.glass-ui .table tbody tr {
	background-color: transparent !important;
	color: #d5d9de !important
}

html.dark-theme #clientsPage table.dataTable tbody tr.odd,
html.dark-theme #clientsPage table.dataTable tbody tr.even,
html.dark-theme table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > *,
html.dark-theme table.dataTable.table-striped > tbody > tr:nth-of-type(even) > *,
html.dark-theme .table-striped > tbody > tr:nth-of-type(odd) > * {
	--bs-table-accent-bg: rgba(255, 255, 255, 0.03) !important;
	background-color: rgba(255, 255, 255, 0.02) !important;
	color: #d5d9de !important;
	box-shadow: none !important
}

html.dark-theme #clientsPage table.dataTable tbody tr:hover > *,
html.dark-theme table.dataTable tbody tr:hover > *,
html.dark-theme .card.glass-ui .table tbody tr:hover > * {
	--bs-table-accent-bg: rgba(255, 255, 255, 0.06) !important;
	background-color: rgba(255, 255, 255, 0.05) !important;
	color: #e8eef8 !important
}

html.dark-theme #clientsPage table.dataTable tbody tr a,
html.dark-theme .card.glass-ui .table tbody td a,
html.dark-theme table.dataTable tbody td a {
	color: #c0c6ce !important
}

html.dark-theme #clientsPage table.dataTable tbody tr a:hover,
html.dark-theme .card.glass-ui .table tbody td a:hover {
	color: #6ea8ff !important
}

html.dark-theme #clientsPage .members-stat-card,
html.dark-theme #clientsPage .members-verify-card {
	background: rgba(0, 0, 0, 0.4) !important;
	border-color: rgba(255, 255, 255, 0.1) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important
}

html.dark-theme #clientsPage .members-stat-card h4,
html.dark-theme #clientsPage .members-stat-card p,
html.dark-theme #clientsPage .members-section-title {
	color: #e4e5e6 !important
}

html.dark-theme #clientsPage .members-verify-row span,
html.dark-theme #clientsPage .members-verify-body {
	color: #c0c6ce !important
}

html.dark-theme #clientsPage .members-verify-bar {
	background: rgba(255, 255, 255, 0.08) !important
}

html.dark-theme #clientsPage .clients-card-heading h5,
html.dark-theme #clientsPage .clients-title-icon {
	color: #e8eef8 !important
}

html.dark-theme #clientsPage .clients-card-title {
	border-bottom-color: rgba(255, 255, 255, 0.1) !important
}

html.dark-theme .clients-icon-btn,
html.dark-theme #clientsPage .clients-icon-btn,
html.dark-theme .order-actions a,
html.dark-theme .order-actions-primary a,
html.dark-theme .order-actions-danger a,
html.dark-theme .order-actions-warning a,
html.dark-theme .order-actions-success a {
	background: rgba(0, 0, 0, 0.35) !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14) !important;
	color: #c0c6ce !important
}

html.dark-theme .clients-icon-btn:hover,
html.dark-theme .clients-icon-btn.active,
html.dark-theme .clients-icon-btn:focus,
html.dark-theme #clientsPage .clients-icon-btn:hover,
html.dark-theme #clientsPage .clients-icon-btn.active,
html.dark-theme #clientsPage .clients-icon-btn:focus,
html.dark-theme .order-actions a:hover,
html.dark-theme .order-actions-primary a:hover,
html.dark-theme .order-actions-danger a:hover,
html.dark-theme .order-actions-warning a:hover,
html.dark-theme .order-actions-success a:hover {
	background: rgba(51, 117, 210, 0.28) !important;
	box-shadow: inset 0 0 0 1px #3375d2 !important;
	color: #e8eef8 !important
}

html.dark-theme .order-actions-danger a,
html.dark-theme .clients-icon-btn.text-danger {
	color: #ff6b5e !important;
	box-shadow: inset 0 0 0 1px rgba(246, 39, 24, 0.4) !important
}

html.dark-theme .order-actions-danger a:hover,
html.dark-theme .clients-icon-btn.text-danger:hover {
	background: #f62718 !important;
	color: #fff !important
}

html.dark-theme #clientsPage .dataTables_length label,
html.dark-theme #clientsPage .dataTables_filter label,
html.dark-theme #clientsPage .dataTables_info,
html.dark-theme .dataTables_wrapper .dataTables_length label,
html.dark-theme .dataTables_wrapper .dataTables_filter label,
html.dark-theme .dataTables_wrapper .dataTables_info {
	color: #c0c6ce !important
}

html.dark-theme #clientsPage .dataTables_length select,
html.dark-theme #clientsPage .dataTables_filter input,
html.dark-theme .dataTables_wrapper .dataTables_length select,
html.dark-theme .dataTables_wrapper .dataTables_filter input {
	color: #e4e5e6 !important;
	background-color: #14171c !important;
	border-color: rgba(255, 255, 255, 0.16) !important
}

html.dark-theme #clientsPage .dataTables_wrapper .dataTables_paginate .page-link,
html.dark-theme .dataTables_wrapper .dataTables_paginate .page-link {
	color: #c0c6ce !important;
	background: #14171c !important;
	border-color: rgba(255, 255, 255, 0.14) !important
}

html.dark-theme #clientsPage .dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
html.dark-theme #clientsPage .dataTables_wrapper .dataTables_paginate .page-link:hover,
html.dark-theme .dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
html.dark-theme .dataTables_wrapper .dataTables_paginate .page-link:hover {
	color: #fff !important;
	background: #1a365d !important;
	border-color: #1a365d !important
}

html.dark-theme #clientsPage .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link,
html.dark-theme .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
	color: #7a8491 !important;
	background: rgba(255, 255, 255, 0.04) !important;
	border-color: rgba(255, 255, 255, 0.08) !important
}

html.dark-theme #clientsPage .kyc-doc-thumb {
	background: #14171c !important;
	border-color: rgba(255, 255, 255, 0.14) !important
}

html.dark-theme #clientsPage .kyc-doc-thumb.is-empty {
	background: rgba(255, 255, 255, 0.06) !important;
	color: #7a8491 !important
}

html.dark-theme #clientsPage .member-status-none {
	background: rgba(255, 255, 255, 0.08) !important;
	color: #c0c6ce !important
}

html.dark-theme .page-content .card.glass-ui .table tbody td,
html.dark-theme .page-content table.dataTable tbody td {
	color: #d5d9de !important
}

/* ===== Client full profile (admin) ===== */
#clientProfilePage .client-profile-side {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center
}

#clientProfilePage .client-profile-avatar {
	width: 96px !important;
	height: 96px !important;
	max-width: 96px !important;
	min-width: 96px !important;
	min-height: 96px !important;
	aspect-ratio: 1 / 1;
	border-radius: 50% !important;
	object-fit: cover !important;
	object-position: center center;
	display: block;
	margin-left: auto;
	margin-right: auto;
	flex-shrink: 0;
	border: 3px solid rgba(26, 54, 93, 0.15);
	background: #fff
}

@media (max-width: 991.98px) {
	#clientProfilePage .client-profile-avatar {
		width: 88px !important;
		height: 88px !important;
		max-width: 88px !important;
		min-width: 88px !important;
		min-height: 88px !important
	}
}

@media (max-width: 575.98px) {
	#clientProfilePage .client-profile-avatar {
		width: 80px !important;
		height: 80px !important;
		max-width: 80px !important;
		min-width: 80px !important;
		min-height: 80px !important
	}

	#clientProfilePage .clients-card-title {
		flex-wrap: wrap;
		gap: 8px
	}

	#clientProfilePage .clients-header-btns {
		width: 100%;
		justify-content: flex-start
	}
}
#clientProfilePage .client-profile-meta {
	list-style: none;
	margin: 0;
	padding: 0;
}
#clientProfilePage .client-profile-meta li {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid rgba(26, 54, 93, 0.08);
	font-size: 0.9rem;
}
#clientProfilePage .client-profile-meta li:last-child { border-bottom: 0; }
#clientProfilePage .client-profile-meta span { color: #6c757d; flex-shrink: 0; }
#clientProfilePage .client-profile-meta strong {
	text-align: right;
	font-weight: 600;
	color: #1a365d;
	word-break: break-word;
}
#clientProfilePage .client-profile-stat {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 72px;
}
#clientProfilePage .client-profile-stat strong {
	font-size: 1.15rem;
	color: #1a365d;
}
#clientProfilePage .client-profile-kv {
	background: rgba(26, 54, 93, 0.04);
	border-radius: 10px;
	padding: 10px 12px;
	height: 100%;
}
#clientProfilePage .client-profile-kv span {
	display: block;
	font-size: 0.78rem;
	color: #6c757d;
	margin-bottom: 2px;
}
#clientProfilePage .client-profile-kv strong {
	color: #1a365d;
	font-size: 0.95rem;
	word-break: break-word;
}
#clientProfilePage .kyc-doc-thumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 10px
}

#clientProfilePage .kyc-doc-thumb {
	width: 72px !important;
	height: 72px !important;
	max-width: 72px !important;
	min-width: 72px !important;
	min-height: 72px !important;
	aspect-ratio: 1 / 1;
	border-radius: 8px !important;
	border: 1px solid rgba(26, 54, 93, 0.15);
	overflow: hidden !important;
	padding: 0 !important;
	margin: 0;
	background: #fff;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 0;
	cursor: pointer;
	vertical-align: top
}

#clientProfilePage .kyc-doc-thumb img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover !important;
	object-position: center center;
	display: block !important;
	border-radius: 0 !important;
	flex-shrink: 0
}

#clientProfilePage .kyc-doc-thumb.is-empty {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	color: #9aa3af;
	background: rgba(26, 54, 93, 0.04);
	cursor: default;
	font-size: 1.25rem
}

#kycImageModal .modal-dialog {
	max-width: min(720px, calc(100vw - 1.5rem));
	margin: 0.75rem auto
}

#kycImageModal .modal-body {
	padding: 0.75rem;
	overflow: hidden;
	max-height: min(85vh, 780px);
	display: flex;
	flex-direction: column;
	gap: 0.65rem
}

#kycImageModal .kyc-modal-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex-shrink: 0
}

#kycImageModal .kyc-viewer-zoom-label {
	min-width: 48px;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	color: #1a365d
}

#kycImageModal .kyc-modal-viewport {
	flex: 1 1 auto;
	min-height: 220px;
	max-height: min(62vh, 560px);
	overflow: auto;
	border: 1px solid rgba(26, 54, 93, 0.12);
	border-radius: 10px;
	background: rgba(26, 54, 93, 0.03);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	touch-action: pan-x pan-y
}

#kycImageModalImg {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: min(56vh, 500px) !important;
	object-fit: contain !important;
	margin: 0 auto;
	transform-origin: center center;
	transition: transform 0.15s ease;
	user-select: none;
	-webkit-user-drag: none
}

html.dark-theme #kycImageModal .kyc-viewer-zoom-label {
	color: #e8eef7
}

html.dark-theme #kycImageModal .kyc-modal-viewport {
	background: rgba(255, 255, 255, 0.03);
	border-color: rgba(255, 255, 255, 0.1)
}

#kycImageModal .kyc-modal-bank-info {
	margin-bottom: 0.75rem;
	padding: 0.75rem 0.85rem;
	border: 1px solid rgba(26, 54, 93, 0.12);
	border-radius: 10px;
	background: rgba(26, 54, 93, 0.04)
}

#kycImageModal .kyc-modal-bank-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.55rem 1rem
}

#kycImageModal .kyc-modal-bank-grid > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0
}

#kycImageModal .kyc-modal-bank-grid span {
	font-size: 11px;
	line-height: 1.2
}

#kycImageModal .kyc-modal-bank-grid strong {
	font-size: 13px;
	font-weight: 700;
	color: #1a365d;
	word-break: break-word
}

#kycImageModal .kyc-modal-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 0.85rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(26, 54, 93, 0.1)
}

html.dark-theme #kycImageModal .kyc-modal-bank-info {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.1)
}

html.dark-theme #kycImageModal .kyc-modal-bank-grid strong {
	color: #e8eef7
}

@media (max-width: 991.98px) {
	#clientProfilePage .kyc-doc-thumb {
		width: 64px !important;
		height: 64px !important;
		max-width: 64px !important;
		min-width: 64px !important;
		min-height: 64px !important
	}
}

@media (max-width: 575.98px) {
	#clientProfilePage .kyc-doc-thumbs {
		gap: 8px
	}

	#clientProfilePage .kyc-doc-thumb {
		width: 56px !important;
		height: 56px !important;
		max-width: 56px !important;
		min-width: 56px !important;
		min-height: 56px !important
	}

	#kycImageModal .modal-dialog {
		max-width: calc(100vw - 1rem);
		margin: 0.5rem auto
	}

	#kycImageModal .kyc-modal-viewport {
		max-height: 48vh
	}

	#kycImageModalImg {
		max-height: 42vh !important
	}

	#kycImageModal .kyc-modal-bank-grid {
		grid-template-columns: 1fr
	}
}

/* Member / franchise billing type radios */
.mb-billing-type {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.75rem;
	min-height: 38px;
	padding: 0.35rem 0.65rem;
	border: 1px solid rgba(26, 54, 93, 0.18);
	border-radius: 0.375rem;
	background: #fff;
}
.mb-billing-type .form-check-input {
	margin-top: 0.15rem;
}
.mb-billing-type .form-check-label {
	color: #1a365d;
	font-weight: 500;
}