:root {
	--blue(#007bfc);
}

.page-content {
	/* max-width: 1170px; */
}

body[data-sidebar=dark].vertical-collpsed {
	min-height: inherit;
}

/* body {
	padding-right: 17px !important;
} */

.hide,
.hidden {
	display: none !important;
}

.h100p {
	height: 100%;
}

.w100p {
	width: 100%;
}

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

.flex1 {
	flex: 1;
}

.fs-12 {
	font-size: 12px;
}

.fs-14 {
	font-size: 14px;
}

.fs-16 {
	font-size: 16px;
}

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

.fs-20 {
	font-size: 20px;
}

.fs-22 {
	font-size: 22px;
}

.fs-24 {
	font-size: 24px;
}

.fs-26 {
	font-size: 26px;
}

.fs-28 {
	font-size: 28px;
}

.fs-30 {
	font-size: 30px;
}

.fs-50 {
	font-size: 50px !important;
}

.fw-200 {
	font-weight: 200;
}

.fw-300 {
	font-weight: 300;
}

.fw-400 {
	font-weight: 400;
}

.fw-500 {
	font-weight: 500;
}

.fw-600 {
	font-weight: 600;
}

.color-999 {
	color: #999 !important;
}

.btn-default {
	background-color: #FFF;
	border-color: #ced4da;
}

.btn-default.active,
.btn-default:hover {
	transition: all .4s;
	background-color: #f8f9fa;
}

.form-control:disabled,
.form-control[readonly] {
	background-color: #FAFAFA;
}

.input-group-append {
	height: 36px;
}

.custom-control {
	display: flex;
	align-items: center;
	min-height: calc(1.5em + .94rem + 2px);
}

.custom-control>*:first-child {
	margin-right: 15px;
}

select.form-control {
	padding-top: 0;
	padding-bottom: 0;
	appearance: none;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIyLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IldhcnN0d2FfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDYgNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNCOUJEQzU7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNS41LDFoLTVDMC4yMiwxLDAsMS4yMiwwLDEuNVYyYzAsMC4xMywwLjA1LDAuMjYsMC4xNSwwLjM1bDIuNSwyLjVDMi43NCw0Ljk1LDIuODcsNSwzLDVzMC4yNi0wLjA1LDAuMzUtMC4xNQoJbDIuNS0yLjVDNS45NSwyLjI2LDYsMi4xMyw2LDJWMS41QzYsMS4yMiw1Ljc4LDEsNS41LDF6Ii8+Cjwvc3ZnPgo=);
	background-position-y: 50%;
	background-position-x: calc(100% - 11px);
	background-repeat: no-repeat;
	padding-right: 24px;
	-webkit-appearance: none;
}

.status {
	color: #FFF;
	padding: 4px 8px
}

.status:before {
	width: 8px;
	height: 8px;
	border: 0 none;
	border-radius: 50%;
	margin-right: 5px;
	display: inline-block;
}

.status-suspended {
	color: #fff;
	background-color: #e31519;
	border-color: #e31519;
	padding: 5px 10px;
}

.status-unpaid,
.status-pending {
	color: #fff;
	background-color: #fca426;
	border-color: #fca426;
	padding: 5px 10px;
}

.status-deleted {
	color: #fff;
	background-color: #2d2d2d;
	border-color: #2d2d2d;
	padding: 5px 10px;
}

.status-active,
.status-paid,
.status-refunded,
.status-cancelled,
.status-success {
	color: #fff;
	background-color: #3fbf70;
	border-color: #3fbf70;
	padding: 5px 10px;
}
/*已退款*/
.status-refunded{
	background-color: #999999;
	border-color: #999999;
}

.status-cancelled {
	background-color: #959799;
}

.security-header {
	border-radius: 15px;
	background-image: url(../img/security_top.png), linear-gradient(87deg, #4d83ff, #3656ff);
	background-repeat: no-repeat;
	background-position: 100%;
}

.security-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 10px #4677fb, inset 0 0 0 20px #527ef5;
}

.security-logo {
	width: 60px;
	height: 60px;
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 14px 2px rgb(6 31 179 / 26%);
}

.security-info {
	padding: 20px;
	border-radius: 4px;
	background-color: #2f54ea;
}

.security-username {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
	font-size: 18px;
}

.security-username .badge {
	font-size: 12px;
}

.security-label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
	color: #FFF;
	opacity: .5;
}

.security-text .progress {
	height: 2px;
	border-radius: 5px;
}

.security-meta .list-inline-item {
	margin-right: 15px;
	line-height: 38px;
}

.security-items {
	display: flex;
	flex-direction: column;
}

.security-items .security-item:hover {
	border-radius: 4px;
	box-shadow: 0 4px 20px 2px rgb(6 75 179 / 8%);
}

.security-items .security-item {
	padding: 15px 0px;
}

.security-item {
	padding: 15px 0;
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	transition: all .3s ease;
}

.security-item:last-child {
	margin-bottom: 0;
}

.security-item-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFF;
	border-radius: 50%;
	margin-right: 15px;
	font-size: 20px;
}

.security-item-info {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.security-item-title {
	color: #000;
	font-size: 14px;
	font-weight: 400;
}

.security-item-title small {
	margin-left: 15px;
	color: #999;
}

.security-item-title small i {
	color: #20b759;
}

.security-item-desc {
	color: #999;
	font-size: 12px;
}

.security-item-image {
	width: 100%;
	background-color: #fff;
	border-radius: 4px;
	height: calc(100% - 300px);
	background-position: center bottom;
	background-repeat: no-repeat;
	background-image: url("../img/security_bottom_left.png");
	background-size: cover;
	display: none;
}

.not_certified_title {
	font-size: 28px;
	color: #333;
	text-align: center;
}

.not_certified_text {
	color: #70757d;
	margin-top: 15px;
	line-height: 30px;
	margin-bottom: 30px;
}

.type-item {
	padding: 50px 80px;
	border-radius: 4px;
	border: 1px solid #eff2f7;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.type-item a {
	width: 200px;
	white-space: nowrap;
}

.min-95 {
	min-height: 95px;
}

.type-icon {
	width: 49px;
	height: 36px;
	/* margin: 0 auto 30px; */
	background-size: cover;
}

.personal {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAAqCAYAAADibUizAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjVEQzc4NzVDOEY2MzExRUE4RUNEQkVCQ0I5NzlBREU4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjVEQzc4NzVEOEY2MzExRUE4RUNEQkVCQ0I5NzlBREU4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NURDNzg3NUE4RjYzMTFFQThFQ0RCRUJDQjk3OUFERTgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NURDNzg3NUI4RjYzMTFFQThFQ0RCRUJDQjk3OUFERTgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz44qZ6BAAAG8klEQVR42txae2xTVRhvb9u1W7u269q9GBt7OMZjEDQaNQgo8YUiYHgkmpDgFEVRJBEFAyFGFBIE/QcUmQYFSYxEkaAGEZg4wVfIpmQ8xqDQja1r19fWx/r0d+ZpPbus7dYV1/rBL+fcc797e373e5zvHBDOPPGyICwP/jVrPJq5QBHACdJTOoHvgTPsoJghuQXNq4BQkP6yGdgNrAACgrDVQPIFNK/9T0iG5RlgI9+iaxmFBuB1wJCG5NTAUmA1vSbtW0CfGNbUoVNMb3iAeUdq6i3pwgzz5w81AlOA2YACKAfOEdeVM0qX0olkDPmV6UsHJCMqgQS+KEe/Wh5gBfT4WO5RJurjD4hH4DLE5dcBTwD5zC0X7h1G+yYIn00VE3MJkrwXzXka7Pm821nAYqAJeqvTligmfweabwENa0WgGTDz3r0d+i+mAlHxMElK0HwGyOiQm66/deG4hM49aHYANVRnG8a+w/1LUd4p4y1vicgHtCJKDlHIEqCSSVxzQKCeVcD1T5j8dHRPAxMBCSXydJR3ytiFPUE5GI/ocF13PtPfzyfJkHWgeYUZmpdWrgupYvqH4uiSwtoLZABaWFmND2AbRI/E97IR8riWbKIypt8TSxGkAiAXJkokE7ANokd09iSxMkqK67Yz/VvjTKCClmDheO5KJ9c9DoQ/4UqQ2QmL2KPormP6PxILp1PW3UN3NjK6OT+EiS4CiS5eSbgeqGWe+yROONz0rDssoiBkAJFN6G6iQzOAFox9QSslLbCAl7RO0bX3pklIGBLib1Jdlwg5iXgEuIteK3nWY4Ukn4XR3JaKk36cQSXABTmv2Nuf0MQBkZ8LcSGBQBgKU/RzAc6T4bmmcimTWhmVodnFkBzKRrgez60A2eNRvMRHXS/hrCv1ZyQv6+KFc+iB0/28W0bgGPA5XTv1g6y9R/H8WsF/JAEuIErIopTkQVrO9fsMsJfWtL/DKiGe/kR6ZvM8XUfJB92McTl0N/B0pfQQixUT9BKOa4vcptb15A6PKF0P9zMkO0jNS2raGEmL7GRW49kP0R6gNS+R9Rg7g/tfMeqkkHiX94qmwRJYuamkyi3p2+aUuqa7MzxKn8jHHZ18UiDzSfsUHnlzple2s7qjss4ldW+0BRx5apdy8XBcl0xWxZCcEYskj/A5NHfTiYdlF8gqY7tecEAKregaJy605R2+mtt+oUNtfNSR2aMmJMm9oDAocGW4pV1K87Sr2rbdv1ScMXlFviqQXIKxfXBjLq5FMaEH0NzHuOviaNutGGTteM8CSjYb0NEN+xv8WpcsEyS+emTOPoakwiK3XrTK7YVD+T17lkMLi57Ce2rFQXEtMray2FIU13WfY/qfYtINicQMnrsCsuRQ+W06VItrctQSjFfr2rLsfw6VZOTASOQTtud0fjTWUqQHyRMxXRcTIUnkYWZoxwiT4S7m8G0sMDXeA5jolm6FtSyRH/OL/EJztuXgpXw9Fy9GpzK7FRKbf4yEJT1GZWP7tnjPdMutq0bymz2yXpKwNsQjWsL0z/OXkASlkekXxVIcZx67CLEmG+4PKN3ZtlJz8ZMFdt1Jct0rc9bGS0atTMJoTtJa/jXJF7R/OpYiMufC4b4cZaBZ26uZUGkcZ75Q2Eoqrhm9UteYmERhwUaeBUYs9OilfogxVs5ek6I9JIzuVGqXypjbm1MJkr0tBZerTdnd/TsmZF0OcapJ5X8DjRgh26NwlJtKVXDJ5ZKAJMhX1DjVbWGSFwsu396pMjWiqMiM7G4EIXnKEhUFuQ6m39eap3eQgmCMtWARS1bTm6PPcaor/iHZOrNT3fUzKSAiFVGIE9xiLDPwiYpShajULz3y71rq0OU7tP0xrdcaviRkM/ySoLZHcz7HpRoPkl6QfOh6jvGYW+KRsO+R92X1hLOuixmvxPqpTQWiSCzvY5L+yBZJab5T58htRKXEEbIoBKap3MpJhCQSz+Ntms5v+sTeGwyl8GT1Z18h+T8MIHcd/UKmoH4HaBstkqh1/T9MOtkAEh9f0RmWoZyL3MOupBlLSA1cud99EbdPtWs66rABv+GIQRwUhUrMxWVw3avhgN8KbGcKhb2jHJ+C2c3TlyDWnrXKHfO7FZacyP4tu3sikstZWHYWioEVbZqOjYFBSBLJt+v2EZJsZnuPrNHASymTjAKinaKg6Lc8Ry62ZO5GkI7EHkq7CYAx1vNw86bJbdVLB6RwWvWsggvXoX2M7jBGVYT4A6KzzhW17KnoKq0xK6wNZGcS9zmstwX2vMNTDBPmDhhn/59RqguK/K3IwMtJDTtYPKqdqhasuSurOsuPJuMUcNTEoLm+Bs2aclNJNZLPPGy6S2F5JyzfBBxA8vJEe/ZvAQYAfI6/mqk2QpEAAAAASUVORK5CYII=");
}

.enterprises {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAApCAYAAABgDOogAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjUzMTcxRjY2OEY2MzExRUFBRjZFOEI5MTE1RkU0QTQ2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjUzMTcxRjY3OEY2MzExRUFBRjZFOEI5MTE1RkU0QTQ2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTMxNzFGNjQ4RjYzMTFFQUFGNkU4QjkxMTVGRTRBNDYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTMxNzFGNjU4RjYzMTFFQUFGNkU4QjkxMTVGRTRBNDYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz6QjG2PAAAF3UlEQVR42txZC2xTVRi+bW/bPbqt7R7s/WbAFgdERVCCk+k0GhJFF4yiJkgkkihbWNQYQ5QoRgFFsqDBoGQjIYbFGCQhGI1EjagkvJnbZBt7dese7Vb6fvqdcjqPd7drt86181++3HvuOff0fvf85/v//06y5+A3HCwdeBeoBTTcwjULcAp4E+giF3ggAzgHFHML3xKBTUANcC/QRgi+LyD3G6BfoOTW0CPxwkbgQULwCWZQA7B/Aa/gYuAPQA2sJ0cps+fMwMcL3EX/Ar6l55IAwYCNAd7/wT40sA1+FhMkA08C9wFpIv1OYJC6ygnajprNlOBW4CMgKczxbwOPA9ejRVA6g7HPAp/PgByxUuBsNENQuCtYBHwmuDYKDIiMlQF5QAptEzc+Tl3aHYsEyQM3ASra9gDbgC8A3zTzvsqEnFXALgrWyEvoiZBDJdAbCUESG9cy7deAIyHucdO9mg/soNdI+nSaZk0cI+Up/+U2C0VwObCbaZ8JEiurgUKqmibm+hskmwAqqCcco3OaaT/xgIkICXojIXgQUDBxcouIW25j9ich+gzTZwc205Ahp2Kzn97DUXLqaKqogjl/CdCJjIlnzhNE+i/RcBGwe2JJZF6nLnYN+DqC3/mAljLZwMmoETxzx1lh/08UQe3hq1VciDkCyvuJyL0xoaKBh2nwSXwbJT7JKZDYE2SYHOOC7SkT7hMKQtRVlLW99FgOBCP4KGCcJtwIS7Goq+hc2johQaxoxCoq3CKR5KLB85bwrDXmqwmJf8tMa5eBuiB9F+aDkA9/7HPOtYuOw+3OzsC9SGXys+ByO+bYFDTrH8mrccs8D3kl3lQQcbZl37jEe/ijpfpCuz+zUDha45xKD/pk870HgyXyy0MNKhkuVNkUtmZjwsRj3el98ilu6OEPTcSbOlJsSS+W6osOW5TW7nhnXIvUJ406walZutTzL10oHM3bMKjWn7AqbMqg98jcktEkwxJj4sQvTpmrqVxX9gLaW5UupTSqBOGK4zQWihrIbezXDLYQAuHM55F6uL5U3fNw4bzKvmXrw3JR7JMSQRUvw7UVTDuHOVcJ+oTWB1Jj4Txs8XBBjk4z9FW45FjDij8g88r2VQyUNfAhyGnp9xTWPUjhezHILXdO00eMfFReE85DWuKsLXa5Y9YeNpw8Uq9wy/eGioOVAnKR2iq8NGkYoqIdUxlmVXUkOhLsWD3OybukeEEHQv3YFcAxhwTPi+SjU8wlc22H2MzINUnsyzFmfrm2Y1U8jjtue4Glhg8hAga88bs48e+fs7Eb4QwCwXUzJmfI/LRiYMl2Kjb+0GNR2DR8GEp3bb7V1SP1pk8+vE/CaSzqm3aFPUssVJB+rFgjyL1C2tdzOvbp1PotgfAh5WLTXIETrUXdaVAZi7LGF+Um25KMQnK5xqz3/iHXfmhAO7gTZd0sk+35SpA9fMekmipt+cUj+Us7M26Opt9KzVdbU/QsufKBsrdI+2pu2/F+7eDLPqYiQKB3swSTYoWg0q1onvxqJbfLh5JHLlKS5lSzphSr2ptnyG7o0+r85K7k/XkSMfNpEUXtl4JxQCW1EJTaWCDYnd57BnnlZCFsVdriWJKGxPGC3tQBf215Ob/1ewT2DWLzqBwJRyS7G1tO817+EebbyQ/c7f8ORcXwwp0u3lUPoXiqI7PrKLufEhzx9syJjLu7Mnr8wrfIlHZOnzy6WmyeJLvKnGFKS+HNcZZ3sHnXIfNOoNl9TTRXj0i+3C23tmd11sENn4MbVrMrqdPoL0A1jyGIV4Fckege9sp8abc0m1BCeWV8fWE/Nu+vSGtWYPLMWHBRPMfqkpGC81iBXbfizbUof9KZykGGayttCrsmGLlsY+bOpYOlzZPJ9u8lF0iRurK6dW0JFCybrmR0SfokpHgm/lmBFWvCam0OlXgn21QmiFBt2VDJd5Pz3P9jHbcQDNVFAYL9AbPSWmVVWlNIKkfcWelSuKGWPcDhZbrFHwrv+1uAAQCgZQwfwnBhuwAAAABJRU5ErkJggg==");
}

.type-title {
	font-size: 22px;
	color: #333;
	margin-bottom: 15px;
	text-align: center;
	white-space: nowrap;
}

.type-desc {
	color: #70757d;
	text-align: center;
	margin-bottom: 25px;
	white-space: nowrap;
}

.type-info {
	margin-bottom: 40px;
	white-space: nowrap;
}

.type-info li {
	font-size: 14px;
	line-height: 40px;
}

.type-info li i {
	color: #007bfc;
}

.addfunds-payment {
	padding: 1rem;
	margin-bottom: 1.5rem;
	border: 1px solid #eff2f7;
	text-align: center;
}

.addfunds-payment.active,
.addfunds-payment:hover {
	cursor: pointer;
	border-color: #007bfc;
}

.addfunds-payment img {
	height: 42px;
}

.table-container,
.table-responsive,
.table-header {
	margin-bottom: 1rem;
}

.table-responsive {
	min-height: calc(100vh - 650px);
}

.table-container {
	position: relative;
}

.table-responsive {
	background: #fff;
	/*
    border-radius: 4px;
    border: 1px solid #ced4da;
*/
}

.table-responsive .table {
	margin-bottom: 0;
}

/*
.table-responsive thead th {
	border-top: 0 none;
	background-color: #f8f9fa;
}
.table-responsive tbody {
	
}
*/
.table-responsive tbody tr:hover td {
	transition: all .4s;
	background-color: #f5f7fa;
}

.table-responsive .custom-control {
	min-height: inherit;
}

.table-header,
.table-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.table-header>* {
	flex: 1;
}

.table-pagination {
	display: flex;
	align-items: center;
}

.table-pagination .pagination {
	margin-bottom: 0;
}

.no-data {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 150px;
}

.note-editor .note-toolbar {
	border-radius: 4px 4px 0 0;
	overflow: hidden;
}

.note-btn-group .note-btn {
	border-color: #ced4da !important;
}

.form-control-label {
	font-size: 14px;
	color: #999;
	font-weight: 400;
}

.ticket-item {
	border-radius: 4px;
	margin-bottom: 1.5rem;
	min-height: 90px;
	max-height: 120px;
	padding: 1.5rem;
	border: 1px solid #eff2f7;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFsAAABOCAYAAABPLWqxAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjFGMzVCMTNEOTM1MzExRUE5ODA2OENFOUE3NDE1NzI3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjFGMzVCMTNFOTM1MzExRUE5ODA2OENFOUE3NDE1NzI3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MUYzNUIxM0I5MzUzMTFFQTk4MDY4Q0U5QTc0MTU3MjciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MUYzNUIxM0M5MzUzMTFFQTk4MDY4Q0U5QTc0MTU3MjciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4d0eM2AAAEC0lEQVR42uyciY7jIAxADUl6zHzy/vaqTdoc20i2ykahuQyYgiWkmZHGgRfj2OZQ8KcFh1JgexzQoV6terWxoz1ELKUjwBXqVvi3DtseGXWdsY2wn7GCL5l1nRD2VC6vdnu1YaNOjTrN3wl8izOmSwl2iYPXC9Cur3bfAFzh/6gPzy0RehODpXPAXgJtupcfBN6v6NflA+i5MdwZufyufLZ32O1kqi+5hV/D73aGpSt8ITZXtNQHTlFSYe+ZvhU2QNhHBxaF39YMOgYGKwrdh2hgSxCVCmydjcZfJ0sB4yhTgF3siBxcwRbvSo5axFmQzx77UjPpu0mDfRFi1WY42WEMHyKcdeJGFIKuBM7Uy4YES4QbKfDNDjOQqQ4i2T+e0RAaS2ZJ2WEfGrbG+gVNpX6SSsciVPiCSUlAYxt//xsa9rSc+Q1JT2Gx7nGsD98WYP5cQTpyCjHdzK95SqJ8jzll2BAKdhQZmCN/rn3DTtGqubLozbBDhXUDhmZzcf3XwSb30Xl86IAh19x2hALeq/S+pPcJexz8HQd6dey7n5jZ2ay4M+obrmsvPaxbfHYSjYyDvDl8+AiwXukuCISrtUXXY12EbQ7SxeDqHe5myz6T0Ho3wybg3GlsfQBMzdyXJtTH2BZjcsI+ui+vZYQzAE+9mxX2wOgvWyE6OPWwwuYMiXohOgACb+bRC1OOa+pK0BFcPsHmireVEB2iYWsPz/CpI2RZ4uMgOJfBSiE6vNZBtjz8xPwMfeAjx1n+pUXrpaik8gVbA38h6LwzM6XNN9x96RY+uk52EOiZwV0dvdQ90C7AX9zXsP5UgzPYdAzD1crFacMgFfbFlY8t0ai87h4ojanqY7WGjuw9MG0eZl4+nUpwbXlkXFT29QJ78PyVppdL5xrNDTS+p7bXzUelkcaGCIskbAJqfQ+2hXSl9W3ZVMZMbTtDZ4n/O3B4NG9A4KltabDVtl2sVv3nMx+Jgfa+kGDC7hPz3d6NaxqBNMbfzP3ZMW8ftu3PDg57hHsD+8mDCjNB6R9SWrRuLYlTkP6XFkuw+TjK/C4g9+zhYyEjDHZVxh7XQPsungJBN75Sb98ZXA2ybkN4So+oNIMlSQnjGhAuR2F3QqybcyOPWNggCDZk2P5CvSRgS/HZScCWkOBEUa0sA72wFkO1aSpNt10WO/qQxL1+W3T0H+JzqsU8Ydu9fgDvu1q/3o2svS2SjlZ0Ky3/tkHvIxU30sJ74eEE9tMMW49W0P/8LkCOpizMWUx6Ypu7ZXjv0Yoe//dsRB30nKRvGZ7LKunCrvbgS1Twvk40WnFdJuVI56Ooe6SU1GTYWTLs6H32D6R5X0kQ2DrDzm4kw86ws2TYGXaWDDuV0K/OKJflnwADAPXK+SsHnQQHAAAAAElFTkSuQmCC");
	background-position: right bottom;
	background-size: 91px 78px;
	background-repeat: no-repeat;
}

.ticket-item h4 {
	font-weight: 400;
}

.ticket-item p {
	margin-bottom: 0;
}

.ticket-item:hover {
	box-shadow: 0 4px 20px 2px rgb(6 75 179 / 8%);
}

.knowledgebase .card-title a {
	display: block;
	color: #666;
	font-weight: 400;
	padding-bottom: 15px;
	border-bottom: 1px solid #eff2f7;
}

.kb-items {
	margin-bottom: 0;
}

.kb-item {
	line-height: 28px;
}

.kb-item>* {
	flex: 1;
}

.kb-item:last-child {
	border-bottom: 0 none;
}

.kb-item .date {
	color: #999;
	text-align: right;
}

.kb-link {
	color: #666;
	font-size: 14px;
}

.ticket-reply .post-by {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 15px;
	/* background-color: #f0f2f6; */
}

.ticket-reply.admin .post-by {
	background-color: #f6faff;
}

.idcsmart.layui-layer {
	border-radius: 4px;
}

.idcsmart .layui-layer-title {
	display: flex;
	align-items: center;
	border-radius: 4px 4px 0 0;
}

.idcsmart .layui-layer-title:before {
	content: '';
	width: 2px;
	height: 14px;
	display: inline-block;
	background-color: #2f54ea;
	margin-right: 10px;
}

.idcsmart .layui-layer-btn {
	padding: 12px 15px;
	border-top: 1px solid #eee;
}

.idcsmart .layui-layer-btn>a {
	min-height: 34px;
	min-width: 80px;
	border-radius: 4px;
	margin-top: 0;
	line-height: 34px;
	text-align: center;
}

.idcsmart .layui-layer-btn .layui-layer-btn0 {
	color: #fff;
	background-color: #6064ff;
	border-color: #6064ff;
}

.idcsmart .layui-layer-btn .layui-layer-btn0:hover {
	color: #fff;
	background-color: #3452e1;
	border-color: #2948df;
}

.idcsmart .layui-layer-setwin {
	top: 13px;
}

.pay-body {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.pay-title {
	color: #999;
	font-size: 14px;
}

.pay-amount {
	display: inline-block;
	margin-top: 18px;
	font-size: 20px;
	font-weight: 700;
	color: #333;
}

.pay-area {
	margin-top: 20px;
	margin-bottom: 60px;
	position: relative;
}

.pay-html,
.pay-jump {
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pay-html,
.pay-insert,
.pay-jump,
.pay-none,
.pay-url {
	width: 200px;
	height: 200px;
}

.pay-text {
	text-align: center;
}

.pay-tools .form-control {
	width: 200px;
}

.affiliates-item-title {
	font-size: 16px;
	font-weight: 400;
}

.affiliates-item-text {
	margin-bottom: 0;
	color: #999;
}

.bg-promote {
	color: #FFF;
	background-color: #f78400;
	box-shadow: 0 6px 14px 2px #ded7c7;
}

.aff-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	padding: 15px 20px;
}

.aff-item>* {
	flex: 1;
}

.aff-item-title {
	display: flex;
	align-items: center;
}

.aff-item-title>i {
	font-size: 18px;
}

.aff-item-num {
	font-size: 18px;
	text-align: right;
	font-family: DINCondensed-Bold;
	margin-top: 8px;
	line-height: 1;
}

.aff-amo-num {
	margin-top: 8px;
	font-family: DINCondensed-Bold;
	font-size: 22px;
	display: flex;
	align-items: baseline;
	line-height: 1;
}

.aff-amo-num small {
	font-size: 12px;
	margin-left: 5px;
}

.aff-amo-nums {
	margin-top: 0;
	font-size: 40px;
	line-height: 2;
	position: relative;
}

.aff-amo-nums:before {
	content: '';
	position: absolute;
	top: 10px;
	right: 20px;
	background-image: url("../img/withdrawal.svg");
	background-repeat: no-repeat;
	background-size: cover;
	width: 48px;
	height: 48px;
	opacity: 0.2;
}

.affs-nav.nav-tabs-custom .nav-item .nav-link {
	line-height: 32px;
}

.news-items {}

.news-item {
	padding: 1.5rem 0;
	border-bottom: 1px solid #f0f2f7;
}

.news-item a {
	color: #333;
}



.user-center_header {
	width: 56px;
	height: 56px;
	font-size: 30px;
	border-radius: 50%;
	background-color: #ff5f62;
	color: #fff;
}

.user-center_safety_wrapper {
	width: 200px;
}

.user-center_safety_wrapper .user-center_safety {
	width: 30px;
	height: 30px;
	background-color: #228cfc;
	color: #fff;
	font-size: 20px;
	border-radius: 50%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.user-center_name {
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
}

.user-center_product_grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 12px 20px;
}

.user-center_product_grid .user-center_product {
	height: 52px;
	padding: 0 20px;
	cursor: pointer;
	background-color: #ffffff;
	border: 1px solid #f5f6f7;
	border-radius: 2px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.user-center_h300 {
	height: 300px;
}

.user-center_calc {
	height: calc(100vh - 505px);
	min-height: 400px;
}

.user-center_notice_ul {
	height: calc(100% - 30px);
	overflow: auto;
}

.user-center_dot {
	width: 10px;
	height: 10px;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	border-radius: 50%;
}

.user-center_resources {
	overflow-y: auto;
}

.user-center_notice_item {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	height: 30px;
}

.user-center_notice_item .notice_item_time {
	width: 150px;
}

.user-center_notice_item .notice_item_title {
	font-weight: 500;
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-break: keep-all;
	cursor: pointer;
}

.bx {
	line-height: 0.6;
}

.offset-3 {
	position: relative;
	top: -3px;
}

.pointer {
	cursor: pointer;
}

.note-editor.note-frame .note-editing-area .note-editable {
	color: #333;
}

.not-allowed {
	cursor: not-allowed;
}

/* 服务器内页 电源状态 */
.bx-loader {
	font-size: 24px;
	color: #4a7ffc;
	animation: rotate 2s linear infinite;
}

@keyframes rotate {
	0% {
		transform: rotateZ(0deg);
		/*从0度开始*/
	}

	100% {
		transform: rotateZ(360deg);
		/*360度结束*/
	}
}

.power-detail-box {
	min-height: 94px;
}

.powerimg {
	width: 50px;
	height: 50px;
	background-color: #edf0f5;
	box-shadow: 0 6px 14px 2px rgba(6, 31, 179, .26);
	border-radius: 4px;
}

.sprite {
	background-image: url("../img/status2.png");
	background-size: 48px;
	background-repeat: repeat-y;
	width: 48px;
	height: 48px;
	display: inline-block;
}

.sprite.start {
	background-position: 0px 0px;
}

.sprite.closed {
	background-position: 0px -55px;
}

.sprite.waitOn {
	background-position: 0px -218px;
}

.sprite.waitOff {
	background-position: 0px -272px;
}

.sprite.pause {
	background-position: 0px -485px;
}

.sprite.unknown {
	background-position: 0px -163px;
}

.sprite.waiting {
	background-position: 0px -859px;
}

.sprite2 {
	background-image: url("../img/status3.0.png");
	background-size: 48px;
	background-repeat: repeat-y;
	width: 48px;
	height: 48px;
	display: inline-block;
}

.sprite2.Pending {
	background-position: 0px 0px;
}

.sprite2.Fraud {
	background-position: 0px -230px;
}

.sprite2.Deleted {
	background-position: 0px -77px;
}

.sprite2.Cancelled {
	background-position: 0px -154px;
}

.sprite2.Active {
	background-position: 0px -307px;
}

.sprite2.Suspended {
	background-position: 0px 48px;
}

/* 取消任务按钮 */
.cancelBtn {
	background-color: rgba(255, 255, 255, 0.3);
	box-shadow: 0px 6px 14px 2px rgba(6, 31, 179, 0.26);
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	padding: 3px 10px;
	margin-left: 10px;
}

/* ============================================================
   SIDEBAR — Astrenix bright control-panel theme
   Scope: only sidebar selectors below (.vertical-menu, #sidebar-menu,
   .navbar-brand-box, .menu-title, .mm-active). No global side effects.
   Body keeps data-sidebar="dark" so the existing logo-switching
   logic in header.tpl/app.css continues to work; we override the
   dark rules with higher / later-cascade light rules.
   ============================================================ */

/* 1. Panel surface — cool off-white, hairline divider */
body[data-sidebar="dark"] .vertical-menu,
.vertical-menu {
	background: #FBFBFE !important;
	border-right: 1px solid #ECEEF5;
	box-shadow: none;
}

/* Brand cap — quiet white with hairline rule */
body[data-sidebar="dark"] .navbar-brand-box,
.navbar-brand-box {
	background: #FFFFFF !important;
	border-right: 1px solid #ECEEF5;
	border-bottom: 1px solid #ECEEF5;
}

/* 2. Group titles — tracked-out micro eyebrow with a tick */
body[data-sidebar="dark"] #sidebar-menu .menu-title,
#sidebar-menu .menu-title {
	color: #9AA0B8 !important;
	font-size: 10px !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
	padding: 18px 22px 8px !important;
}
#sidebar-menu .menu-title::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 1px;
	background: #C9CCDB;
	vertical-align: middle;
	margin-right: 10px;
}

/* 3. Row baseline */
body[data-sidebar="dark"] #sidebar-menu ul li a,
#sidebar-menu ul li a {
	color: #5B6178 !important;
	font-size: 13px;
	font-weight: 500;
	padding: 9px 18px 9px 20px !important;
	position: relative;
	transition: color .18s ease, background-color .18s ease, padding-left .18s ease;
}

/* Icon "chip" — reads like a status LED holder */
body[data-sidebar="dark"] #sidebar-menu ul li a i,
#sidebar-menu ul li a > i {
	color: #7A8099 !important;
	font-size: 16px !important;
	min-width: 28px !important;
	height: 28px;
	line-height: 28px !important;
	text-align: center;
	border-radius: 8px;
	margin-right: 6px;
	transition: color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

/* 4. Hover — subtle wash + 2px slide */
body[data-sidebar="dark"] #sidebar-menu ul li a:hover,
#sidebar-menu ul li a:hover {
	color: #1B1F2E !important;
	background: #F2F3FA;
	padding-left: 22px !important;
}
body[data-sidebar="dark"] #sidebar-menu ul li a:hover i,
#sidebar-menu ul li a:hover > i {
	color: #4A5BFF !important;
}

/* 5. Active — luminous left rail + chip glow (the signature) */
body[data-sidebar="dark"] #sidebar-menu .mm-active > a,
#sidebar-menu .mm-active > a,
#sidebar-menu ul li a.active {
	color: #4A5BFF !important;
	background: #EEF0FF;
	font-weight: 600;
}
body[data-sidebar="dark"] #sidebar-menu .mm-active > a i,
#sidebar-menu .mm-active > a > i,
#sidebar-menu ul li a.active > i {
	color: #4A5BFF !important;
	background: rgba(74, 91, 255, 0.12);
	box-shadow: 0 0 0 1px rgba(74, 91, 255, 0.18) inset,
	            0 4px 10px -4px rgba(74, 91, 255, 0.40);
}
#sidebar-menu .mm-active > a::before,
#sidebar-menu ul li a.active::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: linear-gradient(180deg, #4A5BFF 0%, #8A6BFF 100%);
	box-shadow: 0 0 12px rgba(74, 91, 255, 0.45);
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
	        mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

/* Caret on parents with children */
#sidebar-menu .has-arrow:after {
	color: #B9BDD0;
	transition: transform .25s ease, color .18s ease;
}
#sidebar-menu .mm-active > .has-arrow:after {
	color: #4A5BFF;
}

/* 6. Submenu — vertical guide line + dot tick on active */
body[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu li a,
#sidebar-menu ul li ul.sub-menu li a {
	color: #6B7088 !important;
	font-size: 12.5px;
	padding: 7px 18px 7px 50px !important;
	position: relative;
}
#sidebar-menu ul li ul.sub-menu {
	position: relative;
}
#sidebar-menu ul li ul.sub-menu::before {
	content: "";
	position: absolute;
	left: 33px;
	top: 4px;
	bottom: 4px;
	width: 1px;
	background: #E4E6F0;
}
body[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu li a:hover,
#sidebar-menu ul li ul.sub-menu li a:hover {
	color: #1B1F2E !important;
	background: transparent;
	padding-left: 52px !important;
}
#sidebar-menu ul li ul.sub-menu .mm-active > a,
#sidebar-menu ul li ul.sub-menu li a.active {
	color: #4A5BFF !important;
	background: transparent;
	font-weight: 600;
}
/* override: no rail in submenu — small luminous dot at the guide line */
#sidebar-menu ul li ul.sub-menu .mm-active > a::before,
#sidebar-menu ul li ul.sub-menu li a.active::before {
	content: "";
	position: absolute;
	left: 30px;
	top: 50%;
	right: auto;
	bottom: auto;
	transform: translateY(-50%);
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: linear-gradient(180deg, #4A5BFF, #8A6BFF);
	box-shadow: 0 0 0 3px rgba(74, 91, 255, 0.14),
	            0 0 8px rgba(74, 91, 255, 0.45);
	-webkit-mask-image: none;
	        mask-image: none;
}

/* 7. Badges inside menu rows */
#sidebar-menu ul li .badge {
	background: rgba(74, 91, 255, 0.12);
	color: #4A5BFF;
	font-weight: 600;
	border-radius: 999px;
	padding: 2px 8px;
}

/* 8. Collapsed (mini) state — bright flyout panels */
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a,
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a {
	background: #FFFFFF !important;
	color: #4A5BFF !important;
	box-shadow: 4px 6px 16px -6px rgba(27, 31, 46, 0.10);
}
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a i,
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > a i {
	color: #4A5BFF !important;
}
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul,
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul {
	background: #FFFFFF !important;
	border: 1px solid #ECEEF5;
	border-radius: 0 10px 10px 0;
	box-shadow: 8px 12px 28px -8px rgba(27, 31, 46, 0.12) !important;
	padding: 8px 0;
}
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a,
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a {
	color: #5B6178 !important;
	padding: 7px 18px !important;
}
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a:hover,
.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a:hover {
	color: #4A5BFF !important;
	background: #F2F3FA;
}
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul ul,
.vertical-collpsed .vertical-menu #sidebar-menu > ul ul {
	background: #FFFFFF !important;
}
.vertical-collpsed #sidebar-menu .mm-active > a::before,
.vertical-collpsed #sidebar-menu ul li a.active::before {
	top: 12px;
	bottom: 12px;
}

/* 9. Active sibling color */
body[data-sidebar="dark"] .vertical-menu .mm-active,
.vertical-menu .mm-active {
	color: #4A5BFF !important;
}
body[data-sidebar="dark"] .vertical-menu .mm-active > a,
.vertical-menu .mm-active > a {
	color: #4A5BFF !important;
}
body[data-sidebar="dark"] .vertical-menu .mm-active > a i,
.vertical-menu .mm-active > a i {
	color: #4A5BFF !important;
}

/* 10. Scrollbar inside the menu */
.vertical-menu .simplebar-scrollbar:before {
	background: #C9CCDB !important;
}

/* 续费弹窗周期样式 */
.btn-radio-bill {
	white-space: nowrap;
	padding: .47rem .2rem;
}

/* 评分插件数量隐藏 */
.badge.badge-info {
	display: none;
}


/* slider */
.irs--square .irs-handle {
	border: 2px solid #6064ff !important;
	width: 12px !important;
	height: 12px !important;
	top: 26px !important;
}

.irs--square {
	width: 80%;
	float: left;
	margin-right: 20px;
}

/* selct2 */
.btn-light,
.btn-light:hover {
	background-color: #fff;
}

.dropdown-item {
	padding: .35rem 0.5rem;
}

/* 购物车注册登录方式切换样式更改 */
.cart-login .btn-primary,
.cart-login .btn-primary:not(:disabled):not(.disabled).active,
.cart-login .btn-primary:not(:disabled):not(.disabled):active,
.cart-register .btn-primary,
.cart-register .btn-primary:not(:disabled):not(.disabled).active {
	color: #333;
	background-color: #fff;
	border-color: #fff;
}

.cart-login .btn-primary:not(:disabled):not(.disabled).active,
.cart-register .btn-primary:not(:disabled):not(.disabled).active {
	border-bottom: 1px solid #2040db;
}

.cart-login .btn-primary.focus,
.cart-login .btn-primary:focus,
.cart-login .btn-primary:not(:disabled):not(.disabled).active:focus,
.cart-register .btn-primary.focus,
.cart-register .btn-primary:focus,
.cart-register .btn-primary:not(:disabled):not(.disabled).active:focus {
	box-shadow: none;
}

.bootstrap-select{
	position: relative;
}
.bootstrap-select::after{
	content: '';
	width: 0;
	height: 0;
	border-top: 4px solid rgb(185, 189, 197);
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	position: absolute;
	right: 10px;
	top: 16px;
}

.bootstrap-select .dropdown-menu {
	min-width: 100% !important;
}

.dropdown-menu {
	min-width: 5rem !important;
}


.btn-group-toggle .btn-primary {
	background: #eaeaea;
	color: #666;
	border: 1px solid #eaeaea;
}

.btn-group-toggle.cart-login .btn-primary {
	background: none;
	border: none;
	padding: .25rem 2rem;
	border-radius: 0;
}



.btn-group-toggle .btn-primary input[type="radio"]:disabled::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	color: #CED1E2;
	cursor: not-allowed;
	background-image: none;
	background-color: #FFF;
	border-color: #EBEEF5;
	box-shadow: none;

}

.btn-group-toggle .btn-primary.disabled {
	color: #CED1E2;
	cursor: not-allowed;
	background-image: none;
	background-color: #fff;
	border-color: #fff;
	box-shadow: none;
}

.btn-group-toggle .btn-sm {
	padding: .25rem .95rem;
}

.text-gray {
	color: #999;
}

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

/*取消模态对话框弹出隐藏滚动条操作*/
.modal-open {
	overflow: auto !important;
}

/*增加强制换行*/
.col-form-label {
	word-break: break-all;
}

.table td,
.table th {
  vertical-align: middle !important;
}

.label-color{
	color: #495057 !important;
}

/* ssl证书待验证 */
.status-verifiy_active{
	color: #fff;
	background-color: #fca426;
	border-color: #fca426;
	padding: 5px 10px;
}
/* ssl证书即将过期 */
.status-overdue_active{
	color: #fff;
	background-color: #6064FF;
	border-color: #6064FF;
	padding: 5px 10px;
}
/* ssl证书已签发 */
.status-issue_active{
	color: #fff;
	background-color: #3FBF70;
	border-color: #3FBF70;
	padding: 5px 10px;
}

.zd-cascader-wrap .zd-input__inner{
	height: 36px;
}

.zd-cascader-wrap.is-focus .zd-input .zd-input__inner{
	border-color: #ced4da  !important;
}

.zd-cascader-wrap:focus-within .zd-input__inner{
	border-color: #ced4da  !important;
}
.btn-light:not(:disabled):not(.disabled).active:focus, .btn-light:not(:disabled):not(.disabled):active:focus, .show > .btn-light.dropdown-toggle:focus{
	box-shadow: none  !important;
}
.btn.focus, .btn:focus{
	box-shadow: none !important;
}
.btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle{
	background-color: #fff !important;
	border-color: #ced4da !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
     -webkit-transition-delay: 99999s !important; 
     -webkit-transition: color 99999s ease-out, background-color 99999s ease-out !important; 
}

input:-webkit-autofill {
    box-shadow: none !important; 
     -webkit-box-shadow: none !important; 

}


/* ============================================================
   FOOTER — Astrenix quiet horizon band
   Scope: only .footer and its children. No global side effects.
   Pairs with the bright sidebar so the bottom + left edges form
   one continuous off-white frame around the content.
   ============================================================ */
.footer {
	background-color: #FBFBFE !important;
	color: #7A8099 !important;
	padding: 20px 28px !important;
	border-top: none;
}
/* Tapered hairline along the top edge */
.footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, #DCDFEC 22%, #DCDFEC 78%, transparent 100%);
	pointer-events: none;
}
.footer .row > [class*="col-"] {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 20px;
	color: #7A8099;
}
/* 4-point asterism mark — brand signature (Astrenix → asterism) */
.footer .text-sm-right::before,
.footer .text-end::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 8px;
	vertical-align: -1px;
	background: linear-gradient(135deg, #4A5BFF 0%, #8A6BFF 100%);
	-webkit-clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
	        clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
}


/* ============================================================
   HEADER — Astrenix bright quiet chrome
   Scope: only #page-topbar, .navbar-header and its descendants
   (.header-item, .noti-icon, .user-center_header, #vertical-menu-btn,
   #page-header-user-dropdown). No global side effects.
   Pairs with the sidebar — same surface, hairline frame instead of
   soft shadow. The header itself carries NO signature element so
   the sidebar's active rail remains the sole accent.
   ============================================================ */
#page-topbar {
	background-color: #FBFBFE !important;
	box-shadow: none !important;
	border-bottom: 1px solid #ECEEF5;
}

/* Header items: hamburger + language + cart + bell + user pill */
.navbar-header .header-item {
	color: #5B6178 !important;
	border-radius: 0;
	transition: background-color .18s ease, color .18s ease;
}
.navbar-header .header-item:hover,
.navbar-header .header-item:focus {
	background-color: #F2F3FA !important;
	color: #1B1F2E !important;
}
.navbar-header .dropdown.show > .header-item {
	background-color: #EEF0FF !important;
	color: #4A5BFF !important;
}

/* Icons inside header items */
.navbar-header .header-item i,
.navbar-header .noti-icon i,
.navbar-header .header-item .mdi {
	color: inherit;
	font-size: 20px;
}
.navbar-header .noti-icon i {
	font-size: 22px;
}

/* Notification badge — soft warm-pink satellite, not flat red */
.navbar-header .noti-icon .badge,
.navbar-header .noti-icon .badge.badge-danger,
.navbar-header .noti-icon .badge.badge-pill {
	background: linear-gradient(135deg, #FF5872 0%, #FF7A8F 100%) !important;
	color: #FFFFFF !important;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0;
	min-width: 16px;
	height: 16px;
	line-height: 14px;
	padding: 0 5px;
	border-radius: 999px;
	box-shadow: 0 0 0 2px #FBFBFE,
	            0 2px 6px rgba(255, 88, 114, 0.40);
	top: 14px !important;
	right: 6px !important;
}

/* Avatar initial chip — quiet indigo tint, signals "you" (scoped to topbar) */
.navbar-header .user-center_header {
	background-color: #EEF0FF !important;
	color: #4A5BFF !important;
	font-weight: 600 !important;
	border-radius: 50% !important;
	width: 32px !important;
	height: 32px !important;
	line-height: 32px !important;
	font-size: 13px !important;
	box-shadow: 0 0 0 1px rgba(74, 91, 255, 0.18) inset;
}

/* Username + caret in user dropdown trigger */
#page-header-user-dropdown {
	font-weight: 500;
	letter-spacing: 0.01em;
}
#page-header-user-dropdown .mdi-chevron-down {
	color: #9AA0B8;
	font-size: 18px;
}

/* Header dropdown menus — soft floating card */
.navbar-header .dropdown-menu {
	border: 1px solid #ECEEF5 !important;
	border-radius: 12px !important;
	padding: 6px !important;
	box-shadow: 0 12px 32px -10px rgba(27, 31, 46, 0.12),
	            0 4px 10px -2px rgba(27, 31, 46, 0.05) !important;
	margin-top: 8px;
	background-color: #FFFFFF;
}
.navbar-header .dropdown-menu .dropdown-item {
	border-radius: 8px;
	padding: 8px 12px !important;
	font-size: 13px;
	color: #5B6178;
	transition: background-color .15s ease, color .15s ease;
}
.navbar-header .dropdown-menu .dropdown-item:hover {
	background-color: #F2F3FA;
	color: #1B1F2E;
}
.navbar-header .dropdown-menu .dropdown-item i {
	color: #7A8099;
}
.navbar-header .dropdown-menu .dropdown-item:hover i {
	color: #4A5BFF;
}
.navbar-header .dropdown-menu .dropdown-item.text-danger,
.navbar-header .dropdown-menu .dropdown-item.text-danger i {
	color: #E04562 !important;
}
.navbar-header .dropdown-menu .dropdown-item.text-danger:hover {
	background-color: #FFF0F2;
	color: #C82846 !important;
}


/* ============================================================
   CLIENTAREA (dashboard home) — apply the system palette consistently
   Scope: only .user-center_* classes, #balanceCharts, #sourceListBox,
   the .card.user-center_h300 / .card.user-center_calc combos, and
   .tablelist inside #sourceListBox. Bootstrap text-warning/primary/
   danger are overridden ONLY inside the .user-center_h300 card so
   the rest of the site is untouched.
   ============================================================ */

/* --- 1. Cards: unified surface, hairline + soft shadow ------- */
.card.user-center_h300,
.card.user-center_calc {
	background-color: #FFFFFF;
	border: 1px solid #ECEEF5;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(27, 31, 46, 0.03),
	            0 8px 24px -16px rgba(27, 31, 46, 0.08);
}
.card.user-center_h300 .card-title,
.card.user-center_calc .card-title {
	font-size: 14px;
	font-weight: 600;
	color: #1B1F2E;
	letter-spacing: 0.01em;
}
.card.user-center_calc .card-title a {
	color: #7A8099;
	font-weight: 500;
	transition: color .15s ease;
}
.card.user-center_calc .card-title a:hover {
	color: #4A5BFF;
}

/* --- 2. "You" card: gradient avatar + green/gray security chips - */
.user-center_h300 .user-center_header {
	background: linear-gradient(135deg, #4A5BFF 0%, #8A6BFF 100%) !important;
	color: #FFFFFF !important;
	font-weight: 700;
	letter-spacing: 0.02em;
	width: 56px;
	height: 56px;
	font-size: 22px;
	line-height: 56px;
	border-radius: 50%;
	box-shadow: 0 6px 18px -6px rgba(74, 91, 255, 0.45);
}
/* The 62px white ring around it: hairline + cleaner padding */
.user-center_h300 [style*="width: 62px"][style*="height: 62px"][style*="border-radius: 50%"] {
	background-color: #FFFFFF !important;
	box-shadow: 0 0 0 1px #ECEEF5;
}

.user-center_name {
	font-size: 16px;
	font-weight: 600;
	color: #1B1F2E;
	letter-spacing: 0.005em;
}
.user-center_h300 .ml-20 span:not(.user-center_name) {
	color: #9AA0B8;
	font-size: 12px;
}
.user-center_h300 .ml-20 div + span {
	display: inline-block;
	margin-top: 4px;
}

/* Security chips: green-when-set, gray-when-missing — not red/blue */
.user-center_safety_wrapper .user-center_safety {
	background-color: #10B981 !important;
	color: #FFFFFF !important;
	width: 32px;
	height: 32px;
	font-size: 16px;
	box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12),
	            0 2px 6px rgba(16, 185, 129, 0.25);
	transition: transform .15s ease;
}
.user-center_safety_wrapper .user-center_safety:hover {
	transform: translateY(-1px);
}
/* Inline style="background-color:#aaa" marks the "missing" state */
.user-center_safety_wrapper .user-center_safety[style*="#aaa"] {
	background-color: #E4E6F0 !important;
	color: #9AA0B8 !important;
	box-shadow: 0 0 0 1px #DCDFEC inset;
}

/* HR between top half and counters */
.card.user-center_h300 hr {
	border-top: 1px solid #ECEEF5;
	margin: 0;
}

/* Counters at bottom (待办/未支付/产品数) — uniform style, only highlight when > 0 */
.card.user-center_h300 .h-25 a,
.card.user-center_h300 .h-25 > div {
	text-align: center;
}
.card.user-center_h300 .h-25 .text-center {
	font-size: 22px;
	font-weight: 700;
	color: #1B1F2E !important;
	letter-spacing: 0.01em;
	line-height: 1.2;
}
.card.user-center_h300 .h-25 span {
	font-size: 11px;
	color: #9AA0B8;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
/* Override Bootstrap text-* utilities ONLY inside this card */
.card.user-center_h300 .text-warning,
.card.user-center_h300 .text-primary,
.card.user-center_h300 .text-danger {
	color: #1B1F2E !important;
}

/* --- 3. Finance card: surrounding typography (echarts left alone) - */
#balanceCharts {
	min-height: 200px;
}
.card.user-center_h300 .fz-12 {
	font-size: 11px;
	color: #9AA0B8;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 600;
}
.card.user-center_h300 .fz-14 {
	font-size: 14px;
	color: #1B1F2E;
	font-weight: 500;
}
.card.user-center_h300 .text-black-80 {
	color: #1B1F2E !important;
}
.card.user-center_h300 .text-black-50 {
	color: #9AA0B8 !important;
}

/* --- 4. Products grid: chip tiles with indigo count pill ----- */
.user-center_product_grid .user-center_product {
	background-color: #FFFFFF;
	border: 1px solid #ECEEF5 !important;
	border-radius: 10px;
	padding: 0 14px;
	height: 52px;
	color: #1B1F2E;
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.user-center_product_grid .user-center_product:hover {
	border-color: #C9CFFF !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -8px rgba(74, 91, 255, 0.20);
	color: #1B1F2E;
}
.user-center_product_grid .user-center_product > span:first-child {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
}
.user-center_product_grid .user-center_product > span:first-child i {
	width: 28px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	border-radius: 8px;
	background-color: #F2F3FA;
	color: #7A8099;
	font-size: 14px;
	transition: background-color .18s ease, color .18s ease;
}
.user-center_product_grid .user-center_product:hover > span:first-child i {
	background-color: #EEF0FF;
	color: #4A5BFF;
}
.user-center_product_grid .user-center_product > span:last-child {
	font-size: 11px;
	font-weight: 600;
	color: #4A5BFF;
	background-color: #EEF0FF;
	padding: 2px 8px;
	border-radius: 999px;
	letter-spacing: 0.02em;
}

/* --- 5. Resource list table -------------------------------- */
#sourceListBox .tablelist thead.bg-light {
	background-color: #F8F9FD !important;
}
#sourceListBox .tablelist thead.bg-light th {
	font-size: 11px;
	font-weight: 600;
	color: #7A8099;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 12px 14px;
	border: none;
}
#sourceListBox .tablelist tbody td {
	padding: 14px;
	border-top: 1px solid #F0F2F8;
	font-size: 13px;
	color: #1B1F2E;
	vertical-align: middle;
}
#sourceListBox .tablelist tbody td a.text-dark {
	color: #1B1F2E !important;
	font-weight: 500;
	transition: color .15s ease;
}
#sourceListBox .tablelist tbody td a.text-dark:hover {
	color: #4A5BFF !important;
}
/* Status LED dot — luminous green */
#sourceListBox .user-center_dot {
	width: 8px;
	height: 8px;
	vertical-align: middle;
	margin-right: 6px !important;
}
#sourceListBox .user-center_dot.bg-success {
	background-color: #10B981 !important;
	box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15),
	            0 0 6px rgba(16, 185, 129, 0.45);
}
/* No-data cell */
#sourceListBox .no-data {
	color: #9AA0B8;
	padding: 24px 0;
	text-align: center;
	font-size: 13px;
}

/* Pagination inside the resource list */
#sourceListBox .table-footer {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid #ECEEF5;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}
#sourceListBox .table-pageinfo {
	font-size: 12px;
	color: #7A8099;
}
#sourceListBox .table-pageinfo select {
	border: 1px solid #ECEEF5;
	border-radius: 6px;
	padding: 2px 6px;
	font-size: 12px;
	color: #1B1F2E;
	background-color: #FFFFFF;
}
#sourceListBox .pagination .page-link {
	border: 1px solid #ECEEF5;
	color: #5B6178;
	border-radius: 8px;
	margin: 0 2px;
	padding: 4px 10px;
	font-size: 12px;
}
#sourceListBox .pagination .page-link:hover {
	background-color: #F2F3FA;
	color: #4A5BFF;
}
#sourceListBox .pagination .page-item.active .page-link {
	background: linear-gradient(135deg, #4A5BFF, #8A6BFF);
	border-color: transparent;
	color: #FFFFFF;
}

/* --- 6. Announcements list --------------------------------- */
.user-center_notice_ul .user-center_notice_item {
	height: auto;
	padding: 10px 0;
	border-bottom: 1px dashed #ECEEF5;
	align-items: center;
	position: relative;
	padding-left: 14px;
}
.user-center_notice_ul .user-center_notice_item:last-child {
	border-bottom: none;
}
.user-center_notice_ul .user-center_notice_item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: linear-gradient(135deg, #4A5BFF, #8A6BFF);
	opacity: 0.6;
}
.user-center_notice_item .notice_item_time {
	color: #9AA0B8 !important;
	font-size: 12px;
	width: 130px;
	flex-shrink: 0;
}
.user-center_notice_item .notice_item_title {
	color: #1B1F2E;
	font-size: 13px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
	transition: color .15s ease;
}
.user-center_notice_item .notice_item_title:hover {
	color: #4A5BFF;
}


/* ============================================================
   CLIENTAREA — merged "You + Finance + Counters" card layout
   Scope: only .user-center_combined and its descendants, the new
   .user-center_avatar / _who / _finance* / _counter* classes, and
   a 3-col override for .user-center_product_grid on xl+ screens.
   ============================================================ */

/* Card itself: auto-height container (was hard 300px) */
.user-center_h300 {
	height: auto !important;
	min-height: 300px;
}
.card.user-center_combined {
	display: flex;
	flex-direction: column;
	padding: 22px !important;
	height: 100%;
}

/* Identity row */
.user-center_combined .user-center_identity {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 18px;
}
.user-center_combined .user-center_avatar {
	width: 60px;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #FFFFFF;
	box-shadow: 0 0 0 1px #ECEEF5;
	flex-shrink: 0;
}
.user-center_combined .user-center_avatar .user-center_header {
	width: 52px !important;
	height: 52px !important;
	font-size: 18px !important;
	line-height: 52px !important;
}
.user-center_combined .user-center_who {
	margin-left: 14px;
	flex: 1;
	min-width: 0;
}
.user-center_combined .user-center_who-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 2px;
	flex-wrap: wrap;
}
.user-center_combined .user-center_id {
	font-size: 12px;
	color: #9AA0B8;
	font-weight: 500;
	letter-spacing: 0.02em;
}
.user-center_combined .user-center_phone {
	font-size: 12px;
	color: #7A8099;
}
.user-center_combined .user-center_safety_wrapper {
	width: auto;
	display: flex;
	gap: 12px;
	justify-content: flex-start;
}

/* Finance area: balance + meta */
.user-center_combined .user-center_finance {
	padding: 16px 0;
	border-top: 1px solid #ECEEF5;
	border-bottom: 1px solid #ECEEF5;
	margin-bottom: 18px;
}
.user-center_combined .user-center_finance-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 10px;
	gap: 12px;
}
.user-center_combined .user-center_finance-balance {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.user-center_combined .user-center_finance-label {
	font-size: 10px;
	font-weight: 700;
	color: #9AA0B8;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.user-center_combined .user-center_finance-amount {
	font-size: 22px;
	font-weight: 700;
	color: #1B1F2E;
	letter-spacing: 0.01em;
	line-height: 1.1;
}
.user-center_combined .user-center_recharge-btn {
	background: linear-gradient(135deg, #4A5BFF 0%, #8A6BFF 100%);
	color: #FFFFFF !important;
	border: none;
	border-radius: 8px;
	padding: 8px 18px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	box-shadow: 0 4px 12px -4px rgba(74, 91, 255, 0.40);
	transition: transform .15s ease, box-shadow .15s ease;
	flex-shrink: 0;
	white-space: nowrap;
}
.user-center_combined .user-center_recharge-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -4px rgba(74, 91, 255, 0.50);
	color: #FFFFFF !important;
}
.user-center_combined .user-center_finance-meta {
	font-size: 12px;
	color: #5B6178;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}
.user-center_combined .user-center_finance-meta .user-center_finance-label {
	margin-right: 4px;
}
.user-center_combined .user-center_finance-divider {
	color: #C9CCDB;
}

/* Counters row */
.user-center_combined .user-center_counters {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
}
.user-center_combined .user-center_counter {
	flex: 1;
	text-align: center;
	display: block;
	color: #1B1F2E !important;
	transition: transform .15s ease, color .15s ease;
	text-decoration: none;
}
.user-center_combined .user-center_counter:hover {
	transform: translateY(-1px);
	color: #4A5BFF !important;
	text-decoration: none;
}
.user-center_combined .user-center_counter-num {
	font-size: 22px;
	font-weight: 700;
	color: inherit;
	letter-spacing: 0.01em;
	line-height: 1.2;
}
.user-center_combined .user-center_counter-label {
	font-size: 11px;
	color: #9AA0B8;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-top: 2px;
}
.user-center_combined .user-center_counter-divider {
	width: 1px;
	height: 32px;
	background: #ECEEF5;
	flex-shrink: 0;
}

/* Products grid: 3 cols on xl+ thanks to the wider column */
@media (min-width: 1200px) {
	.user-center_product_grid {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}


/* ============================================================
   CLIENTAREA v2 — refined identity row + gem avatar
   - Identity becomes a single flex row: [avatar] | (name+ID,
     phone, safety chips) stacked on the right of the avatar
   - Avatar is now a luminous gem (radial gradient + inset
     highlight + colored drop shadow), no more white outer ring
   - Finance-meta line was removed from the template; balance
     row stretches to a clean single line w/ recharge button
   Scope: only .user-center_combined and its descendants.
   ============================================================ */

/* Identity: single flex row */
.user-center_combined .user-center_identity {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 18px;
}

/* Avatar — luminous gem */
.user-center_combined .user-center_avatar {
	position: relative;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	flex-shrink: 0;
	background: radial-gradient(circle at 32% 28%, #9D7AFF 0%, #5C6BFF 55%, #3744D6 100%);
	box-shadow:
		0 0 0 1px rgba(74, 91, 255, 0.20),
		0 12px 22px -10px rgba(74, 91, 255, 0.55),
		inset 0 2px 4px rgba(255, 255, 255, 0.28),
		inset 0 -6px 10px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}
.user-center_combined .user-center_avatar .user-center_avatar-shine {
	position: absolute;
	top: 4px;
	left: 10px;
	right: 10px;
	height: 18px;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0) 70%);
	pointer-events: none;
	z-index: 1;
}
.user-center_combined .user-center_avatar .user-center_header {
	position: relative;
	z-index: 2;
	background: transparent !important;
	box-shadow: none !important;
	color: #FFFFFF !important;
	width: 100% !important;
	height: 100% !important;
	font-size: 24px !important;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 64px !important;
	text-align: center;
	text-shadow: 0 1px 2px rgba(20, 26, 70, 0.25);
	border-radius: 50% !important;
}

/* Who: stack name/ID + phone + safety chips */
.user-center_combined .user-center_who {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 2px;
	margin-left: 0;
}
.user-center_combined .user-center_who-row {
	margin-bottom: 0;
}

/* Safety chips inside who-column — compact 26px */
.user-center_combined .user-center_safety_wrapper {
	width: auto;
	display: flex;
	gap: 8px;
	justify-content: flex-start;
	margin-top: 4px;
}
.user-center_combined .user-center_safety_wrapper .user-center_safety {
	width: 26px !important;
	height: 26px !important;
	font-size: 13px !important;
}

/* Finance: single-line row only (meta removed) */
.user-center_combined .user-center_finance-row {
	margin-bottom: 0 !important;
}


/* ============================================================
   SYSTEM CARD — universal card surface upgrade
   Bare .card gets 12px radius + 1px hairline + soft double-shadow
   so all list/detail cards across the site read as one family.
   Existing scoped overrides (.user-center_h300 etc.) still win.
   ============================================================ */
.card {
	background-color: #FFFFFF;
	border: 1px solid #ECEEF5;
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(27, 31, 46, 0.03),
	            0 8px 24px -16px rgba(27, 31, 46, 0.08);
}
.card > .card-body {
	padding: 24px;
}

/* ============================================================
   SERVICE CARD HEAD — eyebrow + title (replaces the deleted
   page-title-box for non-dashboard pages that opt in via .service-card)
   ============================================================ */
.service-card .service-card-head {
	margin: 0 0 18px;
	padding: 0 0 16px;
	border-bottom: 1px solid #F0F2F8;
}
.service-card .service-card-eyebrow {
	font-size: 10px;
	font-weight: 700;
	color: #9AA0B8;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 6px;
	position: relative;
	padding-left: 22px;
}
.service-card .service-card-eyebrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 1px;
	background: linear-gradient(90deg, #4A5BFF, #8A6BFF);
}
.service-card .service-card-title {
	font-size: 20px;
	font-weight: 700;
	color: #1B1F2E;
	letter-spacing: 0.005em;
	margin: 0;
	line-height: 1.2;
}

/* ============================================================
   STATUS BADGES — soft tinted tag style with hairline ring
   Replaces the flat red/yellow/green blobs site-wide for any
   .badge.status-* combination (service / invoice / ticket / etc).
   ============================================================ */
.badge.status-active,
.badge.status-paid,
.badge.status-success,
.status-active.badge,
.status-paid.badge,
.status-success.badge {
	background-color: #ECFDF5 !important;
	color: #047857 !important;
	border: 1px solid #A7F3D0 !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em;
	padding: 4px 10px !important;
	border-radius: 999px !important;
	font-size: 11px !important;
}
.badge.status-pending,
.badge.status-unpaid,
.status-pending.badge,
.status-unpaid.badge {
	background-color: #FFFBEB !important;
	color: #B45309 !important;
	border: 1px solid #FDE68A !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em;
	padding: 4px 10px !important;
	border-radius: 999px !important;
	font-size: 11px !important;
}
.badge.status-suspended,
.status-suspended.badge {
	background-color: #FFF1F2 !important;
	color: #BE123C !important;
	border: 1px solid #FECDD3 !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em;
	padding: 4px 10px !important;
	border-radius: 999px !important;
	font-size: 11px !important;
}
.badge.status-cancelled,
.badge.status-deleted,
.badge.status-refunded,
.status-cancelled.badge,
.status-deleted.badge,
.status-refunded.badge {
	background-color: #F3F4F6 !important;
	color: #6B7280 !important;
	border: 1px solid #E5E7EB !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em;
	padding: 4px 10px !important;
	border-radius: 999px !important;
	font-size: 11px !important;
}

/* ============================================================
   TABLE CONTAINER — applies to service / billing / etc list pages
   Scoped to .table-container so dashboard tables get their own
   styling and other layouts stay untouched.
   ============================================================ */

/* Table header (column row) */
.table-container .tablelist thead.bg-light,
.table-container .tablelist thead {
	background-color: #F8F9FD !important;
}
.table-container .tablelist thead th {
	font-size: 11px !important;
	font-weight: 700 !important;
	color: #7A8099 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase;
	padding: 12px 14px !important;
	border: none !important;
	vertical-align: middle;
}
.table-container .tablelist thead th .text-black-50 {
	color: #C9CCDB !important;
}

/* Body cells */
.table-container .tablelist tbody td {
	padding: 14px !important;
	border-top: 1px solid #F0F2F8 !important;
	font-size: 13px;
	color: #1B1F2E;
	vertical-align: middle;
}
.table-container .tablelist tbody tr:hover td {
	background-color: #FAFBFF !important;
	transition: background-color .15s ease;
}
.table-container .tablelist tbody td a.text-dark {
	color: #1B1F2E !important;
	transition: color .15s ease;
}
.table-container .tablelist tbody td a.text-dark:hover {
	color: #4A5BFF !important;
}
.table-container .tablelist tbody td a.text-dark strong {
	font-weight: 600;
}
.table-container .tablelist tbody td small.text-muted {
	color: #9AA0B8 !important;
	font-size: 11px;
	letter-spacing: 0.02em;
}
.table-container .tablelist tbody td .text-black-50 {
	color: #9AA0B8 !important;
	font-size: 11px;
}

/* Status power-dot indicators — LED metaphor (override service.tpl inline <style>) */
.table-container .dots {
	width: 10px !important;
	height: 10px !important;
	border: 2px solid #FFFFFF !important;
	position: absolute;
	top: 8px;
	left: 8px;
}
.table-container .dots.on_color {
	background-color: #10B981 !important;
	box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.30),
	            0 0 6px rgba(16, 185, 129, 0.50);
}
.table-container .dots.off_color {
	background-color: #9AA0B8 !important;
	box-shadow: 0 0 0 1px rgba(154, 160, 184, 0.40);
}
.table-container .dots.ing_color {
	background-color: #4A5BFF !important;
	box-shadow: 0 0 0 1px rgba(74, 91, 255, 0.30),
	            0 0 6px rgba(74, 91, 255, 0.45);
	animation: dots-pulse 1.6s ease-in-out infinite;
}
@keyframes dots-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.15); opacity: 0.7; }
}
.table-container .dots.unknown_color {
	background-color: #C9CCDB !important;
}
.table-container .dots.error_color {
	background-color: #6B7280 !important;
}
.table-container .dots.not_support_color {
	background-color: #2D2D2D !important;
}

/* No-data state */
.table-container .no-data {
	color: #9AA0B8;
	font-size: 13px;
	letter-spacing: 0.02em;
}

/* Filter / search row */
.table-container .table-header {
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid #F0F2F8;
	align-items: flex-start;
	gap: 12px;
}
.table-container .search-box .form-control {
	border: 1px solid #ECEEF5;
	border-radius: 8px;
	height: 38px;
	padding-left: 36px;
	font-size: 13px;
	color: #1B1F2E;
	background-color: #FFFFFF;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.table-container .search-box .form-control:focus {
	border-color: #C9CFFF;
	box-shadow: 0 0 0 3px rgba(74, 91, 255, 0.12);
	outline: none;
}
.table-container .search-box .search-icon {
	color: #9AA0B8;
	font-size: 16px;
	top: 11px;
	left: 12px;
}

/* Selectpicker (bootstrap-select) — match palette */
.table-container .bootstrap-select > .btn,
.table-container .bootstrap-select > .dropdown-toggle {
	border: 1px solid #ECEEF5 !important;
	border-radius: 8px !important;
	background-color: #FFFFFF !important;
	color: #1B1F2E !important;
	font-size: 13px !important;
	height: 38px;
	line-height: 1;
	padding: 0 36px 0 12px !important;
	box-shadow: none !important;
}
.table-container .bootstrap-select .filter-option {
	color: #1B1F2E !important;
	font-weight: 500;
}
.table-container .bootstrap-select > .btn:hover,
.table-container .bootstrap-select.open > .btn {
	border-color: #C9CFFF !important;
}

/* Primary action buttons inside table containers — gradient */
.table-container .btn-primary,
.table-container .btn-primary:not(:disabled):not(.disabled),
.table-container .btn-outline-primary {
	background: linear-gradient(135deg, #4A5BFF 0%, #8A6BFF 100%) !important;
	border: none !important;
	color: #FFFFFF !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: 8px !important;
	padding: 8px 16px !important;
	font-size: 12px !important;
	box-shadow: 0 4px 12px -4px rgba(74, 91, 255, 0.40);
	transition: transform .15s ease, box-shadow .15s ease;
}
.table-container .btn-primary:hover,
.table-container .btn-outline-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -4px rgba(74, 91, 255, 0.50);
	color: #FFFFFF !important;
}
.table-container .btn-primary.disabled,
.table-container .btn-primary:disabled,
.table-container .btn-primary.not-allowed,
.table-container .btn-outline-primary.disabled,
.table-container .btn-outline-primary:disabled {
	background: #E4E6F0 !important;
	color: #9AA0B8 !important;
	box-shadow: none !important;
}
.table-container .btn-secondary {
	background-color: #FFFFFF !important;
	color: #5B6178 !important;
	border: 1px solid #ECEEF5 !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: 8px !important;
	padding: 8px 16px !important;
	font-size: 12px !important;
	box-shadow: none !important;
}
.table-container .btn-secondary:hover {
	background-color: #F2F3FA !important;
	color: #1B1F2E !important;
}

/* Table footer + pagination chips */
.table-container .table-footer {
	padding-top: 16px;
	border-top: 1px solid #F0F2F8;
	margin-top: 16px;
}
.table-container .table-pageinfo {
	font-size: 12px;
	color: #7A8099;
}
.table-container .table-pageinfo select {
	border: 1px solid #ECEEF5;
	border-radius: 6px;
	padding: 2px 6px;
	font-size: 12px;
	color: #1B1F2E;
	background-color: #FFFFFF;
}
.table-container .pagination .page-link {
	border: 1px solid #ECEEF5;
	color: #5B6178;
	border-radius: 8px;
	margin: 0 2px;
	padding: 4px 10px;
	font-size: 12px;
	transition: background-color .15s ease, color .15s ease;
}
.table-container .pagination .page-link:hover {
	background-color: #F2F3FA;
	color: #4A5BFF;
}
.table-container .pagination .page-item.active .page-link {
	background: linear-gradient(135deg, #4A5BFF, #8A6BFF);
	border-color: transparent;
	color: #FFFFFF;
	box-shadow: 0 4px 10px -4px rgba(74, 91, 255, 0.40);
}

/* Notes edit icon — quieter */
.table-container .tablelist .bx-edit-alt.text-primary {
	color: #9AA0B8 !important;
	cursor: pointer;
	transition: color .15s ease;
}
.table-container .tablelist .bx-edit-alt.text-primary:hover {
	color: #4A5BFF !important;
}

/* Checkboxes — soften */
.table-container .custom-control-label::before {
	border-color: #C9CCDB;
	background-color: #FFFFFF;
}
.table-container .custom-control-input:checked ~ .custom-control-label::before {
	border-color: #4A5BFF;
	background-color: #4A5BFF;
}


/* Selectpicker filter-option vertical centering fix
   .filter-option is absolutely-positioned inside the button;
   without flex its inner text glues to the top in a 38px button. */
.table-container .bootstrap-select .filter-option {
	display: flex !important;
	align-items: center !important;
	overflow: hidden;
}
.table-container .bootstrap-select .filter-option-inner {
	display: flex;
	align-items: center;
	flex: 1;
	min-width: 0;
}
.table-container .bootstrap-select .filter-option-inner-inner {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.table-container .bootstrap-select > .btn,
.table-container .bootstrap-select > .dropdown-toggle {
	line-height: normal !important;
}

/* Search icon true vertical centering — translate trick instead
   of a hardcoded top px that depends on icon glyph metrics */
.table-container .search-box .position-relative,
.table-container .search-box {
	position: relative;
}
.table-container .search-box .search-icon,
.table-container .search-box .bx-search-alt {
	position: absolute !important;
	top: 50% !important;
	left: 12px !important;
	transform: translateY(-50%) !important;
	color: #9AA0B8 !important;
	font-size: 16px !important;
	line-height: 1 !important;
	cursor: pointer;
}


/* ============================================================
   CLIENTAREA — image-based avatar (replaces the gem gradient
   look for users that have an avatar image). The .user-center_
   avatar--img modifier neutralizes the gradient/shine/shadow
   stack and turns the 64px wrapper into an image frame.
   ============================================================ */
.user-center_combined .user-center_avatar.user-center_avatar--img {
	background: #FFFFFF !important;
	box-shadow:
		0 0 0 1px #ECEEF5,
		0 8px 18px -10px rgba(27, 31, 46, 0.18) !important;
	overflow: hidden;
	padding: 0;
}
.user-center_combined .user-center_avatar.user-center_avatar--img .user-center_avatar-shine {
	display: none !important;
}
.user-center_combined .user-center_avatar.user-center_avatar--img .user-center_avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
	display: block;
}


/* ============================================================
   CLIENTAREA avatar — <picture> wrapper fills the circular frame
   so WebP-or-PNG fallback both render identically.
   ============================================================ */
.user-center_combined .user-center_avatar.user-center_avatar--img picture {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
}

/* ============================================================
   DETAILS form — single card, 3 sections separated by hairlines,
   hairline inputs with indigo focus ring, readonly fields obviously
   mute, micro-label typography, gradient submit chip.
   Scope: only .details-form descendants — other forms untouched.
   ============================================================ */

/* Outer container nudge — card-body w-75 px-5 still applies */
.details-form .card > .card-body {
	padding-top: 28px;
	padding-bottom: 28px;
}
/* Section dividers: hairline between consecutive card-body siblings */
.details-form .card > .card-body + .card-body {
	border-top: 1px solid #F0F2F8;
}

/* Section titles */
.details-form .card-title {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: #1B1F2E !important;
	letter-spacing: 0.005em !important;
	margin-bottom: 18px !important;
	position: relative;
	padding-left: 22px;
}
.details-form .card-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 1px;
	background: linear-gradient(90deg, #4A5BFF, #8A6BFF);
}

/* Labels — micro uppercase */
.details-form .form-group label,
.details-form label[for] {
	font-size: 11px !important;
	font-weight: 600 !important;
	color: #7A8099 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase;
	margin-bottom: 6px !important;
}

/* Inputs */
.details-form .form-control,
.details-form select.form-control {
	border: 1px solid #ECEEF5 !important;
	border-radius: 8px !important;
	height: 40px !important;
	padding: 0 12px !important;
	font-size: 13px !important;
	color: #1B1F2E !important;
	background-color: #FFFFFF !important;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.details-form textarea.form-control {
	height: auto !important;
	padding: 10px 12px !important;
	line-height: 1.5;
}
.details-form .form-control:focus,
.details-form select.form-control:focus {
	border-color: #C9CFFF !important;
	box-shadow: 0 0 0 3px rgba(74, 91, 255, 0.12) !important;
	outline: none !important;
}

/* Readonly fields — muted bg + mute ink */
.details-form .form-control[readonly] {
	background-color: #FAFBFD !important;
	color: #7A8099 !important;
	cursor: not-allowed;
}

/* Custom checkboxes — indigo accent */
.details-form .custom-control-label {
	font-size: 13px;
	color: #5B6178;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 500 !important;
	padding-top: 1px;
	cursor: pointer;
}
.details-form .custom-control-label::before {
	border: 1px solid #C9CCDB !important;
	background-color: #FFFFFF !important;
	border-radius: 4px !important;
	width: 16px;
	height: 16px;
	top: 4px;
}
.details-form .custom-control-label::after {
	width: 16px;
	height: 16px;
	top: 4px;
}
.details-form .custom-control-input:checked ~ .custom-control-label::before {
	border-color: #4A5BFF !important;
	background-color: #4A5BFF !important;
}
.details-form .custom-control-input:focus ~ .custom-control-label::before {
	box-shadow: 0 0 0 3px rgba(74, 91, 255, 0.15) !important;
}

/* Submit button — gradient chip (same as recharge / table actions) */
.details-form .btn-primary,
.details-form .submitBtn {
	background: linear-gradient(135deg, #4A5BFF 0%, #8A6BFF 100%) !important;
	border: none !important;
	color: #FFFFFF !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	border-radius: 8px !important;
	height: 42px;
	padding: 0 28px !important;
	font-size: 13px !important;
	box-shadow: 0 6px 16px -6px rgba(74, 91, 255, 0.45) !important;
	transition: transform .15s ease, box-shadow .15s ease;
}
.details-form .btn-primary:hover,
.details-form .submitBtn:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 22px -6px rgba(74, 91, 255, 0.55) !important;
	color: #FFFFFF !important;
}
.details-form .btn-primary:focus,
.details-form .submitBtn:focus {
	box-shadow: 0 6px 16px -6px rgba(74, 91, 255, 0.45),
	            0 0 0 4px rgba(74, 91, 255, 0.18) !important;
}

/* Form-group bottom rhythm */
.details-form .form-group {
	margin-bottom: 20px;
}
.details-form .form-group.mb-0 {
	margin-bottom: 0;
}


/* ============================================================
   DETAILS form — horizontal tab navigation
   Replaces the 3-section stacked card with 3 tab panes.
   Scope: only .details-form descendants.
   ============================================================ */
.details-form .details-nav-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid #F0F2F8;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}
.details-form .details-nav-tabs .nav-item {
	margin: 0;
}
.details-form .details-nav-tabs .nav-link {
	display: inline-block;
	position: relative;
	padding: 12px 18px;
	margin-bottom: -1px;
	font-size: 13px;
	font-weight: 500;
	color: #7A8099;
	letter-spacing: 0.02em;
	background: transparent;
	border: none !important;
	border-radius: 0;
	transition: color .18s ease;
	cursor: pointer;
}
.details-form .details-nav-tabs .nav-link:hover {
	color: #1B1F2E;
}
.details-form .details-nav-tabs .nav-link.active {
	color: #4A5BFF;
	font-weight: 600;
	background: transparent;
}
.details-form .details-nav-tabs .nav-link.active::after {
	content: "";
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: -1px;
	height: 2px;
	border-radius: 2px 2px 0 0;
	background: linear-gradient(90deg, #4A5BFF, #8A6BFF);
	box-shadow: 0 -2px 8px rgba(74, 91, 255, 0.30);
}

/* Tab content padding */
.details-form .details-tab-content {
	padding-top: 8px;
	min-height: 280px;
}
.details-form .details-tab-content .tab-pane.fade {
	transition: opacity .25s ease;
}

/* Actions row (single submit at the bottom for all tabs) */
.details-form .details-actions {
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid #F0F2F8;
	display: flex;
	justify-content: flex-start;
}


/* ============================================================
   GLOBAL NAV-TABS — replaces Bootstrap's default grey underline
   with our indigo gradient indicator. Scoped to nav-tabs inside
   .card-body / .table-container / .table-header so generic Bootstrap
   tabs elsewhere stay default.
   Used by: message.tpl, systemlog.tpl, billing.tpl, etc.
   ============================================================ */
.card-body > .nav-tabs,
.table-container .nav-tabs,
.table-header > .nav-tabs,
.table-header .nav-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid #F0F2F8 !important;
	margin: 0 0 16px !important;
	padding: 0 !important;
	list-style: none;
}
.card-body > .nav-tabs .nav-item,
.table-container .nav-tabs .nav-item,
.table-header .nav-tabs .nav-item {
	margin: 0;
}
.card-body > .nav-tabs .nav-link,
.table-container .nav-tabs .nav-link,
.table-header .nav-tabs .nav-link {
	display: inline-block;
	position: relative;
	padding: 10px 16px !important;
	margin-bottom: -1px;
	font-size: 13px;
	font-weight: 500;
	color: #7A8099 !important;
	letter-spacing: 0.02em;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	transition: color .15s ease;
}
.card-body > .nav-tabs .nav-link:hover,
.table-container .nav-tabs .nav-link:hover,
.table-header .nav-tabs .nav-link:hover {
	color: #1B1F2E !important;
}
.card-body > .nav-tabs .nav-link.active,
.table-container .nav-tabs .nav-link.active,
.table-header .nav-tabs .nav-link.active {
	color: #4A5BFF !important;
	font-weight: 600;
}
.card-body > .nav-tabs .nav-link.active::after,
.table-container .nav-tabs .nav-link.active::after,
.table-header .nav-tabs .nav-link.active::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: -1px;
	height: 2px;
	border-radius: 2px 2px 0 0;
	background: linear-gradient(90deg, #4A5BFF, #8A6BFF);
	box-shadow: 0 -2px 8px rgba(74, 91, 255, 0.30);
}

/* ============================================================
   TABLE-CONTAINER native <select> filters (billing / transaction)
   — these aren't bootstrap-select; they're bare <select.form-control>.
   ============================================================ */
.table-container select.form-control,
.table-container .table-search select.form-control,
.table-container .table-filter select.form-control {
	border: 1px solid #ECEEF5 !important;
	border-radius: 8px !important;
	height: 38px !important;
	line-height: 1;
	padding: 0 32px 0 12px !important;
	font-size: 13px !important;
	color: #1B1F2E !important;
	background-color: #FFFFFF !important;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.table-container select.form-control:focus {
	border-color: #C9CFFF !important;
	box-shadow: 0 0 0 3px rgba(74, 91, 255, 0.12) !important;
	outline: none !important;
}

/* ============================================================
   ADDFUNDS — recharge page
   Payment tiles, balance display, amount input, confirm button,
   alert. Standalone form page (no .table-container scope).
   ============================================================ */

/* Big balance number — gradient text */
.card-body .fs-28.text-primary {
	font-size: 30px !important;
	font-weight: 800 !important;
	letter-spacing: -0.01em;
	background: linear-gradient(135deg, #4A5BFF 0%, #8A6BFF 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent !important;
	vertical-align: middle;
	line-height: 1.2;
}

/* col-form-label — micro uppercase pattern for recharge labels */
.card-body .col-form-label {
	font-size: 11px !important;
	font-weight: 700 !important;
	color: #7A8099 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase;
	padding-top: 12px;
}

/* Recharge amount input — prominent */
#addfundsInp {
	border: 1px solid #ECEEF5 !important;
	border-radius: 10px !important;
	height: 48px !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #1B1F2E !important;
	text-align: center !important;
	background-color: #FFFFFF !important;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
#addfundsInp:focus {
	border-color: #C9CFFF !important;
	box-shadow: 0 0 0 3px rgba(74, 91, 255, 0.12) !important;
	outline: none !important;
}

/* Payment method tiles */
.addfunds-payment {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 66px;
	border: 1px solid #ECEEF5;
	border-radius: 10px;
	background-color: #FFFFFF;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease,
	            transform .15s ease, box-shadow .15s ease;
	margin-bottom: 12px;
	padding: 8px 12px;
	position: relative;
}
.addfunds-payment:hover {
	border-color: #C9CFFF;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px -4px rgba(74, 91, 255, 0.18);
}
.addfunds-payment.active {
	border-color: #4A5BFF;
	background-color: #EEF0FF;
	box-shadow: 0 0 0 1px #4A5BFF inset,
	            0 6px 18px -6px rgba(74, 91, 255, 0.30);
}
.addfunds-payment.active::before {
	content: "";
	position: absolute;
	top: 6px;
	right: 6px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: linear-gradient(135deg, #4A5BFF, #8A6BFF);
	box-shadow: 0 0 0 2px #FFFFFF,
	            0 2px 6px rgba(74, 91, 255, 0.40);
}
.addfunds-payment.active::after {
	content: "";
	position: absolute;
	top: 10px;
	right: 10px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #FFFFFF;
	z-index: 1;
}
.addfunds-payment img {
	max-height: 32px;
	object-fit: contain;
}

/* Confirm recharge button */
.pay-now-btn {
	background: linear-gradient(135deg, #4A5BFF 0%, #8A6BFF 100%) !important;
	border: none !important;
	color: #FFFFFF !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	border-radius: 10px !important;
	height: 46px;
	padding: 0 32px !important;
	font-size: 14px !important;
	box-shadow: 0 6px 16px -6px rgba(74, 91, 255, 0.45) !important;
	transition: transform .15s ease, box-shadow .15s ease;
}
.pay-now-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 22px -6px rgba(74, 91, 255, 0.55) !important;
	color: #FFFFFF !important;
}

/* Alert in beforecheck-box — soften the red-danger flash */
.beforecheck-box .alert.alert-danger {
	background-color: #FFF1F2 !important;
	color: #BE123C !important;
	border: 1px solid #FECDD3 !important;
	border-radius: 10px !important;
	padding: 12px 16px !important;
	font-size: 13px !important;
}
.beforecheck-box .alert .close {
	color: #BE123C !important;
	opacity: 0.6;
	text-shadow: none;
}
.beforecheck-box .alert .close:hover {
	opacity: 1;
}

/* ============================================================
   BILLING — extra: "combinebilling" submit button + status combo
   ============================================================ */
.table-tools .btn-primary,
.table-tools .btn-outline-primary {
	background: linear-gradient(135deg, #4A5BFF 0%, #8A6BFF 100%) !important;
	border: none !important;
	color: #FFFFFF !important;
	font-weight: 600 !important;
	border-radius: 8px !important;
	padding: 8px 16px !important;
	font-size: 12px !important;
	letter-spacing: 0.02em;
	box-shadow: 0 4px 12px -4px rgba(74, 91, 255, 0.40) !important;
	transition: transform .15s ease, box-shadow .15s ease;
}
.table-tools .btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -4px rgba(74, 91, 255, 0.50) !important;
}
.table-tools .btn-primary:disabled,
.table-tools .btn-primary.disabled {
	background: #E4E6F0 !important;
	color: #9AA0B8 !important;
	box-shadow: none !important;
}

/* In-row status badge for billing (uses bare .status class) */
.tablelist .status.badge,
.tablelist .badge.status {
	letter-spacing: 0.02em;
}


/* ============================================================
   SECURITY page — quiet white frame, indigo language consistent
   with sidebar / dashboard. Pure CSS override of existing markup
   (no .tpl changes). High specificity needed to beat Bootstrap
   utility classes (.bg-primary / .bg-info / .text-white).
   Scope: only .security-* descendants.
   ============================================================ */

/* --- 1. HEADER BANNER — kill blue card, kill white text ---- */
.security-header.card,
.card.security-header {
	background-image: none !important;
	background: #FFFFFF !important;
	border: 1px solid #ECEEF5 !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 2px rgba(27, 31, 46, 0.03),
	            0 8px 24px -16px rgba(27, 31, 46, 0.08) !important;
	color: #1B1F2E !important;
}
.security-header .row.text-white,
.security-header .text-white {
	color: #1B1F2E !important;
}
.security-header .card-body {
	padding: 28px 32px;
}

/* Avatar — drop the heavy ring stack, become a clean luminous gem */
.security-header .security-avatar {
	width: 72px !important;
	height: 72px !important;
	box-shadow: 0 0 0 1px #ECEEF5,
	            0 10px 24px -10px rgba(74, 91, 255, 0.40) !important;
	background: #FFFFFF !important;
	overflow: visible;
}
.security-header .security-logo,
.security-header .security-logo.bg-info,
.security-header .security-logo.bg-primary {
	width: 60px !important;
	height: 60px !important;
	padding: 0 !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	color: #FFFFFF !important;
	background: radial-gradient(circle at 32% 28%, #9D7AFF 0%, #5C6BFF 55%, #3744D6 100%) !important;
	box-shadow:
		inset 0 2px 4px rgba(255, 255, 255, 0.28),
		inset 0 -6px 10px rgba(0, 0, 0, 0.10) !important;
	text-shadow: 0 1px 2px rgba(20, 26, 70, 0.25);
	letter-spacing: 0.02em;
}

/* Info column — kill the blue inner box */
.security-header .security-info {
	background-color: transparent !important;
	padding: 0 !important;
}

/* Username + cert badge */
.security-header .security-username {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #1B1F2E !important;
	margin-bottom: 14px !important;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
}
.security-header .security-username .badge {
	font-size: 10px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em;
	padding: 4px 10px !important;
	border-radius: 999px !important;
}
.security-header .security-username .badge.badge-success {
	background-color: #ECFDF5 !important;
	color: #047857 !important;
	border: 1px solid #A7F3D0 !important;
}
.security-header .security-username .badge.novalid,
.security-header .security-username .badge.badge-light.novalid {
	background-color: #FFFBEB !important;
	color: #B45309 !important;
	border: 1px solid #FDE68A !important;
	box-shadow: none !important;
	min-width: 0 !important;
	height: auto !important;
	line-height: 1 !important;
}

/* Strength meter */
.security-header .security-label {
	color: #7A8099 !important;
	opacity: 1 !important;
	margin-bottom: 8px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.security-header .security-text {
	color: #1B1F2E !important;
}
.security-header .security-strength .security-text {
	font-size: 12px;
	font-weight: 600;
	color: #4A5BFF !important;
}
.security-header .security-strength .progress {
	height: 6px !important;
	border-radius: 999px !important;
	background-color: #F0F2F8 !important;
	overflow: hidden;
}
.security-header .security-strength .progress-bar,
.security-header .security-strength .progress-bar.bg-danger,
.security-header .security-strength .progress-bar.bg-warning,
.security-header .security-strength .progress-bar.bg-success {
	background: linear-gradient(90deg, #4A5BFF, #8A6BFF) !important;
	border-radius: 999px;
	box-shadow: 0 0 8px rgba(74, 91, 255, 0.45);
}

/* Meta column (email / open time / phone) */
.security-header .security-meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.security-header .security-meta .list-inline {
	display: flex !important;
	flex-direction: column;
	gap: 4px;
	margin: 0 !important;
	padding: 0;
}
.security-header .security-meta .list-inline-item {
	display: flex !important;
	align-items: baseline;
	margin-right: 0 !important;
	line-height: 1.5 !important;
	font-size: 13px;
	color: #1B1F2E;
}
.security-header .security-meta label {
	font-size: 11px !important;
	font-weight: 600 !important;
	color: #9AA0B8 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	min-width: 64px;
	margin-right: 8px !important;
}

/* --- 2. SECURITY ITEMS — 6 rows + 3 small cards ----------- */

/* Item rows: hairline divider instead of card-shadow hover */
.security-items .security-item {
	padding: 18px 4px !important;
	margin-bottom: 0 !important;
	border-bottom: 1px solid #F0F2F8;
	transition: background-color .15s ease;
}
.security-items .security-item:last-child {
	border-bottom: none;
}
.security-items .security-item:hover {
	background-color: #FAFBFF !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

/* Icon chip — neutral indigo regardless of original bg-* class */
.security-item .security-item-icon,
.security-item .security-item-icon.bg-primary,
.security-item .security-item-icon.bg-info,
.security-item .security-item-icon.bg-success,
.security-item .security-item-icon.bg-warning {
	background-color: #EEF0FF !important;
	color: #4A5BFF !important;
	width: 44px !important;
	height: 44px !important;
	font-size: 18px !important;
	box-shadow: 0 0 0 1px rgba(74, 91, 255, 0.15) inset;
	border-radius: 12px !important;
	margin-right: 16px !important;
}

/* Title row */
.security-item .security-item-title {
	color: #1B1F2E !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 4px !important;
}

/* "Set" small tag — replace inline green check + grey text with soft green badge */
.security-item .security-item-title small {
	margin-left: 0 !important;
	color: #047857 !important;
	background-color: #ECFDF5;
	border: 1px solid #A7F3D0;
	border-radius: 999px;
	padding: 2px 8px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.4;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.security-item .security-item-title small i,
.security-item .security-item-title small i.fa-check-circle,
.security-item .security-item-title small i.fas {
	color: #047857 !important;
	font-size: 9px !important;
	margin-right: 2px;
}
.security-item .security-item-title small .phonehide {
	color: #6B7280;
	font-weight: 500;
	margin-right: 6px;
}

/* Description */
.security-item .security-item-desc {
	color: #9AA0B8 !important;
	font-size: 12px !important;
	letter-spacing: 0.01em;
}

/* Action buttons — gradient chip / ghost */
.security-item .btn.btn-primary,
.security-item .btn-primary.w-md {
	background: linear-gradient(135deg, #4A5BFF 0%, #8A6BFF 100%) !important;
	border: none !important;
	color: #FFFFFF !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	border-radius: 8px !important;
	height: 36px;
	padding: 0 18px !important;
	font-size: 12px !important;
	box-shadow: 0 4px 12px -4px rgba(74, 91, 255, 0.40) !important;
	transition: transform .15s ease, box-shadow .15s ease;
	white-space: nowrap;
	line-height: 36px;
	display: inline-flex;
	align-items: center;
}
.security-item .btn.btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -4px rgba(74, 91, 255, 0.50) !important;
	color: #FFFFFF !important;
}
.security-item .btn.btn-outline-primary,
.security-item .btn-outline-primary.w-md {
	background: #FFFFFF !important;
	color: #4A5BFF !important;
	border: 1px solid #C9CFFF !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em;
	border-radius: 8px !important;
	height: 36px;
	padding: 0 18px !important;
	font-size: 12px !important;
	box-shadow: none !important;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	white-space: nowrap;
	line-height: 36px;
	display: inline-flex;
	align-items: center;
}
.security-item .btn.btn-outline-primary:hover {
	background: #EEF0FF !important;
	border-color: #4A5BFF !important;
	color: #4A5BFF !important;
}
.security-item .btn:disabled,
.security-item .btn.disabled,
.security-item .btn[disabled] {
	background: #F3F4F6 !important;
	color: #9AA0B8 !important;
	border: 1px solid #E5E7EB !important;
	box-shadow: none !important;
	cursor: not-allowed;
}

/* --- 3. RIGHT-COLUMN small cards (SMS / email / OAuth) ---- */
.col-sm-4 > .card > .card-body > .security-item {
	padding: 4px 0 !important;
	border-bottom: none;
	margin-bottom: 0 !important;
}
.col-sm-4 > .card > .card-body > .security-item:hover {
	background-color: transparent !important;
}
.col-sm-4 > .card > .card-body > h4.card-title {
	font-size: 14px;
	font-weight: 600;
	color: #1B1F2E;
	margin-bottom: 16px !important;
	position: relative;
	padding-left: 22px;
}
.col-sm-4 > .card > .card-body > h4.card-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 1px;
	background: linear-gradient(90deg, #4A5BFF, #8A6BFF);
}


/* ============================================================
   MODALS — global Bootstrap modal chrome overhaul
   Every popup inherits this: 二次验证 / 改备注 / 充值 / 删除确认 /
   续费 / 升级 / 支付 / etc. Pure CSS, no .tpl changes.
   ============================================================ */

/* Backdrop — cool ink tint instead of pure black */
.modal-backdrop {
	background-color: #1B1F2E !important;
}
.modal-backdrop.fade {
	opacity: 0;
	transition: opacity .2s ease;
}
.modal-backdrop.fade.show {
	opacity: 0.45 !important;
}

/* Dialog lift animation — slightly snappier than Bootstrap default */
.modal.fade .modal-dialog {
	transition: transform .25s ease, opacity .25s ease;
	transform: translateY(-12px) scale(0.98);
	opacity: 0;
}
.modal.fade.show .modal-dialog {
	transform: translateY(0) scale(1);
	opacity: 1;
}

/* Content shell — 16px radius, deep colored shadow, hairline ring */
.modal-content {
	background-color: #FFFFFF !important;
	border: 1px solid #ECEEF5 !important;
	border-radius: 16px !important;
	box-shadow:
		0 1px 2px rgba(27, 31, 46, 0.05),
		0 24px 56px -12px rgba(20, 26, 70, 0.35) !important;
	overflow: hidden;
}

/* Header — clean title + chip-style close */
.modal-content .modal-header {
	padding: 18px 24px !important;
	border-bottom: 1px solid #ECEEF5 !important;
	align-items: center;
}
.modal-content .modal-header .modal-title {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #1B1F2E !important;
	letter-spacing: 0.005em;
	line-height: 1.4;
}
.modal-content .modal-header .close {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	margin: 0 !important;
	color: #7A8099 !important;
	opacity: 1 !important;
	font-size: 22px !important;
	font-weight: 400 !important;
	line-height: 1;
	background: transparent;
	border: none;
	border-radius: 8px;
	text-shadow: none !important;
	transition: background-color .15s ease, color .15s ease;
	cursor: pointer;
}
.modal-content .modal-header .close:hover {
	background-color: #F2F3FA;
	color: #1B1F2E !important;
}
.modal-content .modal-header .close:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(74, 91, 255, 0.15);
}
.modal-content .modal-header .close span {
	line-height: 1;
}

/* Body — comfortable padding */
.modal-content .modal-body {
	padding: 24px !important;
	color: #1B1F2E;
}

/* Form fields inside modals — same language as details-form */
.modal-content .modal-body .form-control,
.modal-content .modal-body select.form-control {
	border: 1px solid #ECEEF5 !important;
	border-radius: 8px !important;
	height: 40px !important;
	padding: 0 12px !important;
	font-size: 13px !important;
	color: #1B1F2E !important;
	background-color: #FFFFFF !important;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.modal-content .modal-body textarea.form-control {
	height: auto !important;
	min-height: 84px;
	padding: 10px 12px !important;
	line-height: 1.5;
}
.modal-content .modal-body .form-control:focus,
.modal-content .modal-body select.form-control:focus {
	border-color: #C9CFFF !important;
	box-shadow: 0 0 0 3px rgba(74, 91, 255, 0.12) !important;
	outline: none !important;
}
.modal-content .modal-body .form-control[readonly] {
	background-color: #FAFBFD !important;
	color: #7A8099 !important;
}

/* Labels inside modals — micro uppercase */
.modal-content .modal-body label,
.modal-content .modal-body .col-form-label {
	font-size: 11px !important;
	font-weight: 600 !important;
	color: #7A8099 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase;
	margin-bottom: 6px !important;
}
/* When label is in a horizontal row (form-group row), reset right-align */
.modal-content .modal-body .form-group.row .col-form-label {
	text-align: left !important;
	padding-top: 12px;
}
.modal-content .modal-body .form-group.row .col-form-label.text-right {
	text-align: right !important;
}

/* Input-group (e.g. "verify code" + "get code" button) */
.modal-content .modal-body .input-group .form-control {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.modal-content .modal-body .input-group-append .btn {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
	border-top-right-radius: 8px !important;
	border-bottom-right-radius: 8px !important;
	height: 40px;
	padding: 0 14px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	background-color: #FFFFFF !important;
	color: #4A5BFF !important;
	border: 1px solid #C9CFFF !important;
	box-shadow: none !important;
}
.modal-content .modal-body .input-group-append .btn:hover {
	background-color: #EEF0FF !important;
}
.modal-content .modal-body .input-group-append .btn:disabled,
.modal-content .modal-body .input-group-append .btn.disabled {
	background-color: #F3F4F6 !important;
	color: #9AA0B8 !important;
	border-color: #E5E7EB !important;
}

/* Custom checkbox inside modal — indigo accent */
.modal-content .modal-body .custom-control-label::before {
	border: 1px solid #C9CCDB !important;
	background-color: #FFFFFF !important;
	border-radius: 4px !important;
}
.modal-content .modal-body .custom-control-input:checked ~ .custom-control-label::before {
	border-color: #4A5BFF !important;
	background-color: #4A5BFF !important;
}
.modal-content .modal-body .custom-control-label {
	font-size: 13px !important;
	color: #5B6178 !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* Plain body text */
.modal-content .modal-body p,
.modal-content .modal-body .text-danger,
.modal-content .modal-body .text-warning,
.modal-content .modal-body .text-info {
	font-size: 13px;
	color: #5B6178;
	line-height: 1.6;
}
.modal-content .modal-body .text-danger {
	color: #BE123C !important;
}

/* Footer — hairline divider, right-aligned actions */
.modal-content .modal-footer {
	padding: 16px 24px !important;
	border-top: 1px solid #ECEEF5 !important;
	background-color: #FAFBFD;
	gap: 8px;
	justify-content: flex-end;
}
.modal-content .modal-footer > * {
	margin: 0 !important;
}

/* Cancel button (ghost) — covers .btn-outline-light, .btn-secondary, .btn-light */
.modal-content .modal-footer .btn-outline-light,
.modal-content .modal-footer .btn-secondary,
.modal-content .modal-footer .btn-light,
.modal-content .modal-footer .btn-outline-secondary {
	background-color: #FFFFFF !important;
	color: #5B6178 !important;
	border: 1px solid #ECEEF5 !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	border-radius: 8px !important;
	height: 38px;
	padding: 0 18px !important;
	font-size: 12px !important;
	box-shadow: none !important;
	transition: background-color .15s ease, color .15s ease;
}
.modal-content .modal-footer .btn-outline-light:hover,
.modal-content .modal-footer .btn-secondary:hover,
.modal-content .modal-footer .btn-light:hover,
.modal-content .modal-footer .btn-outline-secondary:hover {
	background-color: #F2F3FA !important;
	color: #1B1F2E !important;
}

/* Confirm button (gradient chip) */
.modal-content .modal-footer .btn-primary {
	background: linear-gradient(135deg, #4A5BFF 0%, #8A6BFF 100%) !important;
	border: none !important;
	color: #FFFFFF !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	border-radius: 8px !important;
	height: 38px;
	padding: 0 20px !important;
	font-size: 12px !important;
	box-shadow: 0 4px 12px -4px rgba(74, 91, 255, 0.45) !important;
	transition: transform .15s ease, box-shadow .15s ease;
}
.modal-content .modal-footer .btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -4px rgba(74, 91, 255, 0.55) !important;
	color: #FFFFFF !important;
}
.modal-content .modal-footer .btn-primary:focus {
	box-shadow:
		0 4px 12px -4px rgba(74, 91, 255, 0.45),
		0 0 0 3px rgba(74, 91, 255, 0.18) !important;
}

/* Destructive confirm (e.g. delete) — warm pink chip */
.modal-content .modal-footer .btn-danger {
	background: linear-gradient(135deg, #FF5872 0%, #FF7A8F 100%) !important;
	border: none !important;
	color: #FFFFFF !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	border-radius: 8px !important;
	height: 38px;
	padding: 0 20px !important;
	font-size: 12px !important;
	box-shadow: 0 4px 12px -4px rgba(255, 88, 114, 0.45) !important;
}
.modal-content .modal-footer .btn-danger:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -4px rgba(255, 88, 114, 0.55) !important;
}

/* Modal dialog widths — keep Bootstrap defaults but soften default size */
.modal-dialog-centered {
	min-height: calc(100% - 2rem);
}

/* Large alert / fancy modal (e.g. paymodal QR code) — no hairline footer */
.modal-content.no-footer-divider .modal-footer {
	border-top: none;
	background: transparent;
}

/* Sweetalert-like icon containers if any modal uses them */
.modal-content .modal-body .swal-icon,
.modal-content .modal-body .modal-icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: #EEF0FF;
	color: #4A5BFF;
	font-size: 28px;
}


/* ============================================================
   CART pages — product cards, filter tiles, view-cart polish
   The cart theme uses loggedheader:clientarea so THIS css is
   already loaded on all cart pages. We just add cart-specific
   selectors. No new tokens — reuse indigo system.
   ============================================================ */

/* --- 1. PRODUCT CARDS ----------------------------------- */
.cartitem {
	background-color: #FFFFFF !important;
	border: 1px solid #ECEEF5 !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 2px rgba(27, 31, 46, 0.03),
	            0 8px 24px -16px rgba(27, 31, 46, 0.08);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	position: relative;
}
.cartitem:hover,
.cartitem.active {
	background-color: #FFFFFF !important;
	border-color: #C9CFFF !important;
	transform: translateY(-2px);
	box-shadow: 0 1px 2px rgba(27, 31, 46, 0.03),
	            0 14px 32px -12px rgba(74, 91, 255, 0.20) !important;
}

.cartitem .card-body {
	padding: 20px !important;
}
.cartitem h5 {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #1B1F2E !important;
	letter-spacing: 0.005em;
	margin-bottom: 10px;
}
.cartitem .card-text {
	font-size: 12px !important;
	color: #7A8099 !important;
	line-height: 1.5;
	margin-bottom: 6px;
}

/* Price line — original orange #f1672a → indigo→violet gradient text */
.cartitem [style*="f1672a"],
.cartitem [style*="color:#f1672a"],
.cartitem [style*="color: #f1672a"] {
	background: linear-gradient(135deg, #4A5BFF 0%, #8A6BFF 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent !important;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.01em;
	display: inline-block;
	line-height: 1.2;
}
/* Trial / on-trial sub-price */
.cartitem [style*="e64a19"] {
	color: #B45309 !important;
}
/* Original-price small line — mute strikethrough */
.cartitem .text-right.color-999 small {
	color: #9AA0B8 !important;
	font-size: 11px;
	text-decoration: line-through;
	letter-spacing: 0;
}

/* Buy-now button (.card-footer) — gradient chip */
.cartitem .card-footer {
	padding: 0 !important;
	background-color: transparent !important;
	border-top: 1px solid #F0F2F8;
	box-shadow: none !important;
}
.cartitem .card-footer a {
	display: block;
	width: 100%;
	line-height: 44px !important;
	height: 44px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #4A5BFF !important;
	background-color: #FFFFFF !important;
	transition: background .18s ease, color .18s ease;
}
.cartitem:hover .card-footer a,
.cartitem.active .card-footer a {
	background: linear-gradient(135deg, #4A5BFF 0%, #8A6BFF 100%) !important;
	color: #FFFFFF !important;
}
.cartitem .card-footer a[style*="not-allowed"] {
	color: #9AA0B8 !important;
	background-color: #F3F4F6 !important;
}

/* --- 2. PROVINCE / AREA FILTER TILES ------------------- */
.firstgroup_box,
.secondgroup_box {
	background-color: #FFFFFF !important;
	border: 1px solid #ECEEF5 !important;
	border-radius: 12px !important;
	box-shadow: 0 1px 2px rgba(27, 31, 46, 0.03),
	            0 4px 16px -10px rgba(27, 31, 46, 0.06) !important;
	padding: 14px 18px !important;
	min-height: auto !important;
}
.firstgroup_box .firstgroup_box_prov,
.secondgroup_box .secondgroup_box_area {
	color: #1B1F2E !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	min-width: 80px !important;
	position: relative;
	padding-left: 18px;
}
.firstgroup_box .firstgroup_box_prov::before,
.secondgroup_box .secondgroup_box_area::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 1px;
	background: linear-gradient(90deg, #4A5BFF, #8A6BFF);
}

/* Tiles — inactive */
.firstgroup_box .firstgroup_item,
.secondgroup_box .secondgroup_item,
.pro_box .pro_item {
	background-color: #FFFFFF !important;
	height: 30px !important;
	border: 1px solid #ECEEF5 !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	margin-left: 0 !important;
	margin-right: 6px !important;
	margin-bottom: 6px;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.firstgroup_box .firstgroup_item a,
.secondgroup_box .secondgroup_item a,
.pro_box .pro_item a {
	color: #5B6178 !important;
	min-width: 100px;
	font-size: 12px !important;
	font-weight: 500;
	letter-spacing: 0.01em;
}

/* Tiles — hover */
.firstgroup_box .firstgroup_item:hover,
.secondgroup_box .secondgroup_item:hover,
.pro_box .pro_item:hover {
	background-color: #EEF0FF !important;
	border-color: #C9CFFF !important;
	transform: translateY(-1px);
}
.firstgroup_box .firstgroup_item:hover a,
.secondgroup_box .secondgroup_item:hover a,
.pro_box .pro_item:hover a {
	color: #4A5BFF !important;
}

/* Tiles — active */
.firstgroup_box .firstgroup_item.active,
.secondgroup_box .secondgroup_item.active,
.pro_box .pro_item.active {
	background: linear-gradient(135deg, #4A5BFF 0%, #8A6BFF 100%) !important;
	border-color: transparent !important;
	box-shadow: 0 4px 12px -4px rgba(74, 91, 255, 0.40) !important;
}
.firstgroup_box .firstgroup_item.active a,
.secondgroup_box .secondgroup_item.active a,
.pro_box .pro_item.active a {
	color: #FFFFFF !important;
	font-weight: 600;
}

/* --- 3. CART PAGE PAGINATION (table-footer) ------------ */
/* product.tpl wraps pagination in .table-footer mt-4 — already
   styled by our .table-container pagination rules indirectly,
   but cart product page does not use .table-container. Add
   explicit cart pagination rule. */
.card-body > .row .table-footer .pagination .page-link,
.cartitem ~ .table-footer .pagination .page-link {
	border: 1px solid #ECEEF5 !important;
	color: #5B6178 !important;
	border-radius: 8px !important;
	margin: 0 2px;
	padding: 4px 10px;
	font-size: 12px !important;
	transition: background-color .15s ease, color .15s ease;
}
.card-body > .row .table-footer .pagination .page-link:hover {
	background-color: #F2F3FA !important;
	color: #4A5BFF !important;
}
.card-body > .row .table-footer .pagination .page-item.active .page-link {
	background: linear-gradient(135deg, #4A5BFF, #8A6BFF) !important;
	border-color: transparent !important;
	color: #FFFFFF !important;
	box-shadow: 0 4px 10px -4px rgba(74, 91, 255, 0.40);
}

/* --- 4. VIEWCART / ORDERSUMMARY TABLES ---------------- */
.ordersummary {
	margin-bottom: 0 !important;
}
.ordersummary td {
	border: none !important;
	padding: 8px 6px !important;
	font-size: 13px;
	color: #1B1F2E;
	vertical-align: middle;
}
.ordersummary td.color-999,
.ordersummary td .color-999 {
	color: #9AA0B8 !important;
	font-size: 12px;
}
.ordersummary td.text-right {
	font-weight: 500;
}
.ordersummary tr:not(:last-child) td {
	border-bottom: 1px dashed #F0F2F8 !important;
}

/* Goods info expand/collapse in viewcart */
.goods_info .title {
	cursor: pointer;
	color: #5B6178;
	font-size: 13px;
	transition: color .15s ease;
}
.goods_info .title:hover {
	color: #4A5BFF;
}
.goods_info .title font.zk {
	color: #4A5BFF;
}

/* Total price label (viewcart bottom bar) */
.price-num,
.len-num {
	color: #4A5BFF;
	font-weight: 700;
}

/* Cart action buttons (administrationBtn / completeBtn / deleteBtn) */
.administrationBtn,
.completeBtn {
	background-color: #FFFFFF !important;
	color: #5B6178 !important;
	border: 1px solid #ECEEF5 !important;
	border-radius: 8px !important;
	padding: 8px 16px !important;
	font-size: 12px !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	box-shadow: none !important;
	transition: background-color .15s ease, color .15s ease;
}
.administrationBtn:hover,
.completeBtn:hover {
	background-color: #F2F3FA !important;
	color: #1B1F2E !important;
}
.deleteBtn {
	background: linear-gradient(135deg, #FF5872 0%, #FF7A8F 100%) !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 8px 16px !important;
	font-size: 12px !important;
	font-weight: 600;
	box-shadow: 0 4px 12px -4px rgba(255, 88, 114, 0.45) !important;
	transition: transform .15s ease, box-shadow .15s ease;
}
.deleteBtn:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px -4px rgba(255, 88, 114, 0.55) !important;
}

/* Mobile sticky bottom-total in ordersummary */
.mobile-bottom-total {
	background: #FFFFFF !important;
	box-shadow: 0 -4px 24px -6px rgba(27, 31, 46, 0.12) !important;
	border-top: 1px solid #ECEEF5;
}
.mobile-bottom-total .total {
	color: #1B1F2E !important;
	font-weight: 700 !important;
	font-size: 17px !important;
}

/* Checkbox selection state on viewcart */
.checkboxSelect {
	color: #4A5BFF;
}

/* Saleout image — keep position but make it less intrusive */
.cartitem img[src*="saleout"] {
	filter: saturate(0.7);
	opacity: 0.85;
}


/* ============================================================
   CART FLOW (part 2) — configureproduct cycle selector,
   complete page step wizard, configureproduct form rows,
   cart-login/cart-register switcher.
   ============================================================ */

/* --- Configureproduct: row labels + inputs ---------------- */
.configureproduct {
	margin-bottom: 18px !important;
	align-items: center;
}
.configureproduct > label.col-form-label,
.configureproduct > .col-form-label {
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #7A8099 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase;
}
.configureproduct .form-control,
.configureproduct select.form-control,
.configureproduct input.form-control {
	border: 1px solid #ECEEF5 !important;
	border-radius: 8px !important;
	height: 40px !important;
	padding: 0 12px !important;
	font-size: 13px !important;
	color: #1B1F2E !important;
	background-color: #FFFFFF !important;
	box-shadow: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.configureproduct .form-control:focus,
.configureproduct select.form-control:focus {
	border-color: #C9CFFF !important;
	box-shadow: 0 0 0 3px rgba(74, 91, 255, 0.12) !important;
	outline: none !important;
}

/* --- Billing cycle selector (btn-group-toggle .cycle) ----- */
.btn-group.cycle,
.btn-group.btn-group-toggle.cycle,
.btn-custom-group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.btn-group.cycle .btn,
.btn-group.btn-group-toggle.cycle .btn,
.btn-custom-group .btn {
	position: relative;
	background-color: #FFFFFF !important;
	border: 1px solid #ECEEF5 !important;
	border-radius: 10px !important;
	color: #5B6178 !important;
	font-size: 13px !important;
	font-weight: 500;
	padding: 10px 16px !important;
	box-shadow: none !important;
	transition: background-color .15s ease, border-color .15s ease,
	            color .15s ease, transform .15s ease;
	margin: 0 !important;
	flex: 0 0 auto;
}
.btn-group.cycle .btn:hover,
.btn-group.btn-group-toggle.cycle .btn:hover,
.btn-custom-group .btn:hover {
	background-color: #F2F3FA !important;
	border-color: #C9CFFF !important;
	color: #1B1F2E !important;
	transform: translateY(-1px);
}
.btn-group.cycle .btn.active,
.btn-group.btn-group-toggle.cycle .btn.active,
.btn-custom-group .btn.active {
	background: linear-gradient(135deg, #4A5BFF 0%, #8A6BFF 100%) !important;
	border-color: transparent !important;
	color: #FFFFFF !important;
	box-shadow: 0 6px 16px -6px rgba(74, 91, 255, 0.40) !important;
}
.btn-group.cycle .btn.active:hover {
	transform: translateY(-1px);
}

/* Discount sub-label inside a cycle button */
.cycle-select-discount {
	display: block;
	font-size: 10px;
	font-weight: 700;
	margin-top: 4px;
	letter-spacing: 0.04em;
	color: #047857;
	background-color: #ECFDF5;
	border: 1px solid #A7F3D0;
	border-radius: 999px;
	padding: 2px 8px;
	line-height: 1.4;
}
.btn-group.cycle .btn.active .cycle-select-discount,
.btn-custom-group .btn.active .cycle-select-discount {
	color: #FFFFFF;
	background-color: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.30);
}

/* --- cart-login / cart-register switcher ----------------- */
.cart-login,
.cart-register {
	border-radius: 10px;
	background-color: #F2F3FA;
	padding: 4px;
	gap: 4px;
	display: inline-flex;
}
.cart-login .btn,
.cart-register .btn,
.cart-login .btn-primary,
.cart-register .btn-primary {
	background-color: transparent !important;
	border: none !important;
	color: #5B6178 !important;
	font-size: 13px !important;
	font-weight: 600;
	padding: 8px 18px !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	transition: background-color .15s ease, color .15s ease;
}
.cart-login .btn:hover,
.cart-register .btn:hover {
	color: #1B1F2E !important;
}
.cart-login .btn-primary.active,
.cart-register .btn-primary.active,
.cart-login .btn-primary:not(:disabled):not(.disabled).active,
.cart-register .btn-primary:not(:disabled):not(.disabled).active {
	background-color: #FFFFFF !important;
	color: #4A5BFF !important;
	box-shadow: 0 2px 6px rgba(27, 31, 46, 0.08),
	            0 0 0 1px #ECEEF5 !important;
	border-bottom: none !important;
}

/* --- complete.tpl: twitter-bs-wizard (step progress) ----- */
.twitter-bs-wizard .twitter-bs-wizard-nav {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid #ECEEF5;
	margin-bottom: 24px;
}
.twitter-bs-wizard .twitter-bs-wizard-nav .nav-item {
	flex: 1;
}
.twitter-bs-wizard .twitter-bs-wizard-nav .nav-link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 12px !important;
	color: #7A8099 !important;
	font-size: 13px !important;
	font-weight: 500;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	position: relative;
	transition: color .15s ease;
}
.twitter-bs-wizard .twitter-bs-wizard-nav .nav-link:hover {
	color: #1B1F2E !important;
}
.twitter-bs-wizard .twitter-bs-wizard-nav .nav-link.active {
	color: #4A5BFF !important;
	font-weight: 600;
}
.twitter-bs-wizard .twitter-bs-wizard-nav .nav-link.active::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: -1px;
	height: 2px;
	border-radius: 2px 2px 0 0;
	background: linear-gradient(90deg, #4A5BFF, #8A6BFF);
	box-shadow: 0 -2px 8px rgba(74, 91, 255, 0.30);
}
.twitter-bs-wizard .twitter-bs-wizard-nav .step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: #F2F3FA;
	color: #7A8099;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin-right: 0 !important;
	transition: background-color .15s ease, color .15s ease;
}
.twitter-bs-wizard .twitter-bs-wizard-nav .nav-link.active .step-number {
	background: linear-gradient(135deg, #4A5BFF 0%, #8A6BFF 100%);
	color: #FFFFFF;
	box-shadow: 0 4px 12px -4px rgba(74, 91, 255, 0.45);
}

/* --- payment-checkbox + payDiv in viewcart ---------------- */
.payment-checkbox {
	accent-color: #4A5BFF;
}
.payDiv {
	display: flex;
	align-items: center;
	gap: 10px;
}
.payDiv.mobile-flex {
	flex-wrap: wrap;
}
.payDiv .checkboxDiv {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	border-radius: 6px;
	transition: background-color .15s ease;
}
.payDiv .checkboxDiv.checkboxSelect {
	background-color: #EEF0FF;
	color: #4A5BFF;
}

/* --- cart_qty / quantity widgets ------------------------- */
.cart_qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid #ECEEF5;
	border-radius: 8px;
	overflow: hidden;
	background-color: #FFFFFF;
}
.cart_qty input,
.cart_qty .form-control {
	border: none !important;
	height: 36px !important;
	width: 60px !important;
	text-align: center;
	background-color: transparent !important;
	font-weight: 600;
	color: #1B1F2E !important;
	box-shadow: none !important;
	padding: 0 !important;
}
.cart_qty button,
.cart_qty .btn {
	width: 32px;
	height: 36px;
	background-color: transparent !important;
	border: none !important;
	color: #5B6178 !important;
	font-size: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color .15s ease, background-color .15s ease;
}
.cart_qty button:hover,
.cart_qty .btn:hover {
	background-color: #F2F3FA !important;
	color: #4A5BFF !important;
}


/* Hide "选择省份 / 选择地区" labels in cart topbar filter (per request) */
.firstgroup_box .firstgroup_box_prov,
.secondgroup_box .secondgroup_box_area {
	display: none !important;
}


/* ============================================================
   CART product grid — auto-fit columns based on width
   Bootstrap col-sm-3 forced 4 cols → ultra-narrow cards on
   medium widths. Convert the row to CSS Grid with a min-width
   of 260px per card, cap at 4 cols on xl, so cards never get
   uncomfortable.
   Uses :has() (Chrome 105+, Safari 15.4+, FF 121+) to scope
   ONLY to rows containing .cartitem — other Bootstrap rows
   stay untouched.
   ============================================================ */
.card-body > .row:has(> [class*="col-"] > .cartitem),
.card-body > .row:has(.cartitem) {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
	margin: 0 !important;
}
.card-body > .row:has(.cartitem) > [class*="col-"] {
	flex: unset !important;
	max-width: none !important;
	width: auto !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* xl+ : cap at 4 columns so cards stay sized on huge monitors */
@media (min-width: 1200px) {
	.card-body > .row:has(.cartitem) {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	}
}
@media (min-width: 1600px) {
	.card-body > .row:has(.cartitem) {
		grid-template-columns: repeat(4, minmax(260px, 1fr));
	}
}

/* Keep the .cartitem stretching to the column height (already mostly
   true, but ensure equal-height cards within a grid row) */
.card-body > .row:has(.cartitem) > [class*="col-"] > .cartitem {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.card-body > .row:has(.cartitem) > [class*="col-"] > .cartitem > .card-body {
	flex: 1;
}

/* Pagination row inside .card-body > .row should NOT be turned into
   a grid cell — but :has(.cartitem) is on the row that has cartitems,
   and the pagination .table-footer sits as a sibling of those col-*s,
   so it'd become a grid item. Make it span all columns. */
.card-body > .row:has(.cartitem) > .table-footer {
	grid-column: 1 / -1;
}


/* ============================================================
   CONFIGUREPRODUCT page — config form + order summary
   Scope: .configoption_form (the unique form id on this page) and
   its descendants. Plus a few generic alert/range overrides that
   benefit any page with native range inputs or bare .alert-danger.
   ============================================================ */

/* Product header card — softer, use hairline instead of border-bottom */
form.configoption_form ~ * .card.border-bottom,
form#addCartForm .card.border-bottom,
.card.border-bottom.mb-0 {
	border-bottom: 1px solid #ECEEF5 !important;
	border-radius: 12px 12px 0 0 !important;
	margin-bottom: 0 !important;
	box-shadow: 0 1px 2px rgba(27, 31, 46, 0.03) !important;
}
form#addCartForm .card.border-bottom + .card {
	border-radius: 0 0 12px 12px !important;
	margin-top: -1px;
}
form#addCartForm .card-title {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #1B1F2E !important;
	margin: 0;
}

/* Help-circle icon next to labels — was text-primary blue */
form#addCartForm .bxs-help-circle.text-primary,
form#addCartForm .bxs-help-circle {
	color: #9AA0B8 !important;
	font-size: 14px;
	transition: color .15s ease;
}
form#addCartForm label:hover .bxs-help-circle,
form#addCartForm .bxs-help-circle:hover {
	color: #4A5BFF !important;
}

/* Native range slider — beats inline <style> via higher specificity + !important */
form#addCartForm input[type="range"],
form.configoption_form input[type="range"] {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 100% !important;
	height: 6px !important;
	border-radius: 999px !important;
	background: linear-gradient(90deg, #4A5BFF, #8A6BFF) !important;
	outline: none !important;
	padding: 0 !important;
	margin: 8px 0;
	cursor: pointer;
}
form#addCartForm input[type="range"]::-webkit-slider-thumb,
form.configoption_form input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 20px !important;
	height: 20px !important;
	border-radius: 50% !important;
	background: #FFFFFF !important;
	border: 3px solid #4A5BFF !important;
	border-top-width: 3px !important;
	border-bottom-width: 3px !important;
	box-shadow: 0 2px 8px rgba(74, 91, 255, 0.40) !important;
	cursor: pointer;
	transition: transform .12s ease;
}
form#addCartForm input[type="range"]::-webkit-slider-thumb:hover {
	transform: scale(1.1);
}
form#addCartForm input[type="range"]::-moz-range-thumb,
form.configoption_form input[type="range"]::-moz-range-thumb {
	-webkit-appearance: none !important;
	width: 20px !important;
	height: 20px !important;
	border-radius: 50% !important;
	background: #FFFFFF !important;
	border: 3px solid #4A5BFF !important;
	box-shadow: 0 2px 8px rgba(74, 91, 255, 0.40) !important;
	cursor: pointer;
}
form#addCartForm input[type="range"]::-moz-range-track {
	background: transparent !important;
	height: 6px;
}

/* Range value stepper input (.configoption_range_val) */
form#addCartForm .configoption_range_val {
	border: 1px solid #ECEEF5 !important;
	border-radius: 8px !important;
	height: 38px !important;
	font-size: 13px !important;
	font-weight: 600;
	text-align: center !important;
	color: #1B1F2E !important;
	background-color: #FFFFFF !important;
	box-shadow: none !important;
}
form#addCartForm .configoption_range_val:focus {
	border-color: #C9CFFF !important;
	box-shadow: 0 0 0 3px rgba(74, 91, 255, 0.12) !important;
	outline: none !important;
}

/* Unit text next to range input */
form#addCartForm .col-md-10 > span {
	font-size: 12px;
	color: #7A8099;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Bootstrap .form-check radio (option_type==2) — indigo accent */
form#addCartForm .form-check .form-check-input {
	accent-color: #4A5BFF;
	width: 16px;
	height: 16px;
	margin-top: 3px;
}
form#addCartForm .form-check .form-check-label {
	font-size: 13px;
	color: #5B6178;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	margin-left: 4px;
	padding-top: 2px;
}

/* Custom checkbox (option_type==3) — extend indigo accent */
form#addCartForm .custom-control-label::before {
	border: 1px solid #C9CCDB !important;
	background-color: #FFFFFF !important;
	border-radius: 4px !important;
}
form#addCartForm .custom-control-input:checked ~ .custom-control-label::before {
	border-color: #4A5BFF !important;
	background-color: #4A5BFF !important;
}
form#addCartForm .custom-control-label {
	font-size: 13px !important;
	color: #5B6178 !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

/* btn-primary used as "selectable tile" for option_type==20 — override
   so they look like cycle buttons (white pill, active gradient) */
form#addCartForm .btn-group-toggle .btn-primary,
form#addCartForm .btn-group-toggle .btn.btn-primary.btn-sm {
	background-color: #FFFFFF !important;
	border: 1px solid #ECEEF5 !important;
	color: #5B6178 !important;
	font-size: 13px !important;
	font-weight: 500;
	padding: 8px 14px !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	margin: 0 4px 4px 0 !important;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
form#addCartForm .btn-group-toggle .btn-primary:hover {
	border-color: #C9CFFF !important;
	color: #1B1F2E !important;
	transform: translateY(-1px);
}
form#addCartForm .btn-group-toggle .btn-primary.active,
form#addCartForm .btn-group-toggle .btn-primary:active {
	background: linear-gradient(135deg, #4A5BFF 0%, #8A6BFF 100%) !important;
	border-color: transparent !important;
	color: #FFFFFF !important;
	box-shadow: 0 6px 16px -6px rgba(74, 91, 255, 0.40) !important;
}

/* Password show eye + dice icons */
form#addCartForm .bx-show-alt.text-primary,
form#addCartForm .bx-show-alt {
	color: #9AA0B8 !important;
	font-size: 18px !important;
	transition: color .15s ease;
}
form#addCartForm .bx-show-alt:hover {
	color: #4A5BFF !important;
}
form#addCartForm .create_random_pass,
form#addCartForm .fa-dice {
	color: #9AA0B8 !important;
	font-size: 16px;
	transition: color .15s ease;
}
form#addCartForm .create_random_pass:hover,
form#addCartForm .fa-dice:hover {
	color: #4A5BFF !important;
}

/* Alert inside the form */
form#addCartForm .alert.alert-danger {
	background-color: #FFF1F2 !important;
	color: #BE123C !important;
	border: 1px solid #FECDD3 !important;
	border-radius: 10px !important;
	padding: 12px 16px !important;
	font-size: 13px !important;
}
form#addCartForm .alert .close {
	color: #BE123C !important;
	opacity: 0.6;
}

/* is-invalid feedback (form validation) */
form#addCartForm .form-control.is-invalid {
	border-color: #FECDD3 !important;
	background-image: none !important;
	padding-right: 12px !important;
}
form#addCartForm .form-control.is-invalid:focus {
	box-shadow: 0 0 0 3px rgba(255, 88, 114, 0.15) !important;
}

/* --- Order summary card (right column) ----------------------- */
.col-xl-4 .card > .card-body > .card-title.fs-16 {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #9AA0B8 !important;
	letter-spacing: 0.10em !important;
	text-transform: uppercase;
	margin: 0 0 16px !important;
	position: relative;
	padding-left: 22px;
}
.col-xl-4 .card > .card-body > .card-title.fs-16::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 1px;
	background: linear-gradient(90deg, #4A5BFF, #8A6BFF);
}

.configoption_total {
	font-size: 13px;
	color: #1B1F2E;
}
.configoption_total table {
	width: 100%;
}
.configoption_total td {
	border: none !important;
	padding: 8px 4px !important;
	vertical-align: middle;
	font-size: 13px;
}
.configoption_total tr:not(:last-child) td {
	border-bottom: 1px dashed #F0F2F8 !important;
}
.configoption_total td.text-right,
.configoption_total td:last-child {
	font-weight: 500;
}
.configoption_total .color-999,
.configoption_total td .color-999 {
	color: #9AA0B8 !important;
	font-size: 12px;
}

/* Final total row — bold, gradient text */
.configoption_total tfoot td,
.configoption_total .total-row td,
.configoption_total tr:last-child td.text-right strong,
.configoption_total tr:last-child td:last-child {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.005em;
}
.configoption_total .total_price,
.configoption_total .total-amount {
	background: linear-gradient(135deg, #4A5BFF 0%, #8A6BFF 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent !important;
	font-size: 22px;
	font-weight: 800;
}

/* The bootstrap-select dropdown for option_type==1 inside this form */
form#addCartForm .bootstrap-select > .btn,
form#addCartForm .bootstrap-select > .dropdown-toggle {
	border: 1px solid #ECEEF5 !important;
	border-radius: 8px !important;
	background-color: #FFFFFF !important;
	color: #1B1F2E !important;
	font-size: 13px !important;
	height: 40px;
	line-height: 1;
	padding: 0 36px 0 12px !important;
	box-shadow: none !important;
}
form#addCartForm .bootstrap-select.show > .btn,
form#addCartForm .bootstrap-select > .btn:hover {
	border-color: #C9CFFF !important;
}


/* ============================================================
   BOOTSTRAP-SELECT — when .bootstrap-select also has .form-control
   class (configureproduct OS group, etc), Bootstrap stacks both
   form-control's own padding/border/height AND bootstrap-select's
   inner button styling. The outer wrapper turns into a doubled
   border + wrong height. Reset the outer; let the inner btn own it.
   ============================================================ */
.bootstrap-select.form-control {
	padding: 0 !important;
	height: auto !important;
	min-height: 0 !important;
	border: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	width: 100% !important;
	display: block;
	line-height: 1;
}
.bootstrap-select.form-control > .btn,
.bootstrap-select.form-control > .dropdown-toggle {
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	height: 40px !important;
	padding: 0 36px 0 12px !important;
	border: 1px solid #ECEEF5 !important;
	border-radius: 8px !important;
	background-color: #FFFFFF !important;
	color: #1B1F2E !important;
	font-size: 13px !important;
	box-shadow: none !important;
	line-height: 1;
}
.bootstrap-select.form-control > .btn:hover,
.bootstrap-select.form-control.show > .btn {
	border-color: #C9CFFF !important;
}
.bootstrap-select.form-control > .btn:focus {
	border-color: #C9CFFF !important;
	box-shadow: 0 0 0 3px rgba(74, 91, 255, 0.12) !important;
	outline: none !important;
}
.bootstrap-select.form-control .filter-option-inner-inner {
	display: flex;
	align-items: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Dropdown menu of bootstrap-select — match palette */
.bootstrap-select .dropdown-menu {
	border: 1px solid #ECEEF5 !important;
	border-radius: 10px !important;
	padding: 6px !important;
	box-shadow:
		0 12px 32px -10px rgba(27, 31, 46, 0.12),
		0 4px 10px -2px rgba(27, 31, 46, 0.05) !important;
	background-color: #FFFFFF !important;
	margin-top: 6px !important;
}
.bootstrap-select .dropdown-menu .dropdown-item {
	border-radius: 8px !important;
	padding: 8px 12px !important;
	font-size: 13px !important;
	color: #1B1F2E !important;
	display: flex;
	align-items: center;
	transition: background-color .12s ease, color .12s ease;
}
.bootstrap-select .dropdown-menu .dropdown-item:hover,
.bootstrap-select .dropdown-menu .dropdown-item:focus {
	background-color: #F2F3FA !important;
	color: #1B1F2E !important;
}
.bootstrap-select .dropdown-menu .dropdown-item.active,
.bootstrap-select .dropdown-menu .dropdown-item.selected,
.bootstrap-select .dropdown-menu li.selected > .dropdown-item {
	background-color: #EEF0FF !important;
	color: #4A5BFF !important;
	font-weight: 600;
}
.bootstrap-select .dropdown-menu .dropdown-item .text {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.bootstrap-select .dropdown-menu .dropdown-item .text img {
	max-height: 18px;
	flex-shrink: 0;
}

/* ============================================================
   BTN-GROUP cycle/custom-group spacing — Bootstrap's .btn-group
   defaults to margin-left:-1px on adjacent buttons AND zeroes
   the border-radius of middle/edge buttons so borders collapse.
   Override both so our 8px gap + 10px chip radius actually win.
   ============================================================ */
.btn-group.cycle,
.btn-group.btn-group-toggle.cycle,
.btn-custom-group,
.btn-group.btn-custom-group {
	display: inline-flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
	align-items: center;
	vertical-align: middle;
}
/* Reset Bootstrap's collapse rules — restore independent margins + radius */
.btn-group.cycle > .btn,
.btn-group.btn-group-toggle.cycle > .btn,
.btn-custom-group > .btn,
.btn-group.btn-custom-group > .btn,
.btn-group.cycle > .btn-custom,
.btn-custom-group > .btn-custom {
	margin-left: 0 !important;
	margin-right: 0 !important;
	border-radius: 10px !important;
	border-top-left-radius: 10px !important;
	border-top-right-radius: 10px !important;
	border-bottom-left-radius: 10px !important;
	border-bottom-right-radius: 10px !important;
}

/* .btn-custom (used by cycle billing buttons) — same chip language */
.btn-custom,
form#addCartForm .btn-custom {
	background-color: #FFFFFF !important;
	border: 1px solid #ECEEF5 !important;
	color: #5B6178 !important;
	font-size: 13px !important;
	font-weight: 500;
	padding: 8px 16px !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
	cursor: pointer;
}
.btn-custom:hover,
form#addCartForm .btn-custom:hover {
	background-color: #F2F3FA !important;
	border-color: #C9CFFF !important;
	color: #1B1F2E !important;
	transform: translateY(-1px);
}
.btn-custom.active,
.btn-custom:active,
form#addCartForm .btn-custom.active {
	background: linear-gradient(135deg, #4A5BFF 0%, #8A6BFF 100%) !important;
	border-color: transparent !important;
	color: #FFFFFF !important;
	box-shadow: 0 6px 16px -6px rgba(74, 91, 255, 0.40) !important;
}

/* ============================================================
   #addToCartBtn — wrapper is inline-styled with position:absolute
   (anchored to nearest positioned ancestor), which flies the
   button off-screen when no ancestor is positioned. Unset the
   inline absolute via attribute-selector + !important, let it
   flow under the configoption_total table naturally.
   ============================================================ */
.col-xl-4 .card .card-body div[style*="position: absolute"],
.col-xl-4 .card .card-body div[style*="position:absolute"],
.col-xl-4 .card .card-body div.text-sm-right.mt-4 {
	position: static !important;
	bottom: auto !important;
	right: auto !important;
	top: auto !important;
	left: auto !important;
	margin-top: 20px !important;
	text-align: right;
}

/* Add-to-cart button — gradient chip */
#addToCartBtn,
#addToCartBtnTwo,
.col-xl-4 #addToCartBtn,
.mobile-bottom-total #addToCartBtnTwo {
	background: linear-gradient(135deg, #4A5BFF 0%, #8A6BFF 100%) !important;
	border: none !important;
	color: #FFFFFF !important;
	font-weight: 600 !important;
	letter-spacing: 0.02em !important;
	border-radius: 10px !important;
	height: 44px;
	padding: 0 24px !important;
	font-size: 13px !important;
	box-shadow: 0 6px 16px -6px rgba(74, 91, 255, 0.45) !important;
	transition: transform .15s ease, box-shadow .15s ease;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
}
#addToCartBtn:hover,
#addToCartBtnTwo:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 22px -6px rgba(74, 91, 255, 0.55) !important;
	color: #FFFFFF !important;
}
#addToCartBtn .mdi-cart-arrow-right,
#addToCartBtnTwo .mdi-cart-arrow-right {
	font-size: 16px;
}


/* ============================================================
   OS group selector column — col-md-2 too narrow for Windows
   2008R2 预装_... names. Widen only this specific case to 4
   grid units. Sibling col-md-2 columns (qty, etc) untouched.
   Also widen the dropdown menu so long option text fits.
   ============================================================ */
.col-md-2:has(> .bootstrap-select.configoption_os_group),
.col-md-2:has(> .configoption_os_group) {
	flex: 0 0 33.333% !important;
	max-width: 33.333% !important;
}
@media (max-width: 991.98px) {
	.col-md-2:has(> .bootstrap-select.configoption_os_group),
	.col-md-2:has(> .configoption_os_group) {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}

/* OS group dropdown menu — let it grow wider than the button
   so long version names don't truncate */
.bootstrap-select.configoption_os_group .dropdown-menu,
.bootstrap-select.configoption_os_version .dropdown-menu {
	min-width: 320px !important;
	max-width: 480px !important;
}


/* ============================================================
   GLOBAL bootstrap-select filter-option vertical centering
   The earlier .table-container-scoped centering rule didn't
   reach configureproduct's OS group, etc. Apply globally so
   any bootstrap-select inner text stays vertically centered.
   ============================================================ */
.bootstrap-select .filter-option {
	display: flex !important;
	align-items: center !important;
	overflow: hidden;
	height: 100%;
}
.bootstrap-select .filter-option-inner {
	display: flex !important;
	align-items: center !important;
	flex: 1;
	min-width: 0;
	height: 100%;
}
.bootstrap-select .filter-option-inner-inner {
	display: flex !important;
	align-items: center !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}
.bootstrap-select > .btn,
.bootstrap-select > .dropdown-toggle {
	display: inline-flex !important;
	align-items: center !important;
	line-height: 1 !important;
}


/* ============================================================
   CONFIGUREPRODUCT row spacing
   - Desktop: ensure horizontal gap between adjacent cols
     (OS group + OS version side-by-side)
   - Mobile: cols stack vertically; add row-gap so they don't
     touch each other
   ============================================================ */
.form-group.row.configureproduct,
form#addCartForm .form-group.row {
	row-gap: 12px;
}

/* Mobile breakpoint: bigger gap when cols wrap to new lines */
@media (max-width: 991.98px) {
	.form-group.row.configureproduct,
	form#addCartForm .form-group.row {
		row-gap: 16px;
	}
	.form-group.row.configureproduct > [class*="col-"],
	form#addCartForm .form-group.row > [class*="col-"] {
		margin-bottom: 0;
	}
}

/* Add explicit margin between OS group and OS version cols
   when they sit side by side on desktop (extra breathing room) */
@media (min-width: 992px) {
	.col-md-2:has(> .configoption_os_group) {
		padding-right: 16px;
	}
	.col-md-2:has(> .configoption_os_version),
	.col-md-3:has(> .configoption_os_version),
	.col-md-4:has(> .configoption_os_version) {
		padding-left: 0;
	}
}


/* ============================================================
   OS version selector (.configoption_os) — even longer option
   names than the group selector. Widen the column further.
   ============================================================ */
.col-md-2:has(> .bootstrap-select.configoption_os),
.col-md-2:has(> select.configoption_os),
.col-md-3:has(> .bootstrap-select.configoption_os),
.col-md-3:has(> select.configoption_os) {
	flex: 0 0 50% !important;
	max-width: 50% !important;
}
@media (max-width: 991.98px) {
	.col-md-2:has(> .bootstrap-select.configoption_os),
	.col-md-2:has(> select.configoption_os),
	.col-md-3:has(> .bootstrap-select.configoption_os),
	.col-md-3:has(> select.configoption_os) {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}

/* OS version dropdown menu — much wider so long version names fit */
.bootstrap-select.configoption_os .dropdown-menu {
	min-width: 420px !important;
	max-width: 620px !important;
	width: max-content !important;
}


/* ============================================================
   VIEWCART (cart?action=viewcart) — comprehensive polish
   Left col (col-md-8): customer info form + payment method +
     discount code
   Right col (col-md-4): cart line items + grand total + ToS +
     pay-now submit button
   Scope: cart-specific classes (.submit-btn, .old-user/.new-user,
   .checkbox.checkDiv, .cart_qty, .goods_info, #promo, etc) plus
   .col-md-8 > .card / .col-md-4 > .card structural combos.
   ============================================================ */

/* --- 1. Section headings inside the left card (<p class="mt-5">) --- */
.col-md-8 > .card > .card-body > p.mt-5 {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #1B1F2E !important;
	letter-spacing: 0.005em;
	margin-top: 32px !important;
	margin-bottom: 12px !important;
	padding: 0 0 8px 22px !important;
	position: relative;
	border-bottom: 1px solid #F0F2F8;
}
.col-md-8 > .card > .card-body > p.mt-5::before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 14px;
	height: 1px;
	background: linear-gradient(90deg, #4A5BFF, #8A6BFF);
}

/* h5 "支付订单" header at top of left card */
.col-md-8 > .card > .card-body > h5.mb-0 {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #1B1F2E !important;
	letter-spacing: 0.005em;
}
.col-md-8 > .card > hr.mb-0.mt-0 {
	border-top: 1px solid #ECEEF5;
	margin: 0 !important;
}

/* Customer remark mini-label (rendered as <div style="color:#979699...">) */
.col-md-8 > .card .col-sm-12[style*="#979699"] {
	font-size: 11px !important;
	font-weight: 700 !important;
	color: #7A8099 !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 6px !important;
	margin-top: 8px !important;
}

/* --- 2. Old-user / New-user toggle ----------------------- */
.old-user,
.new-user,
span.btn.old-user,
span.btn.new-user,
span.btn.btn-primary.old-user,
span.btn.btn-warning.new-user {
	background-color: #FFFFFF !important;
	color: #5B6178 !important;
	border: 1px solid #ECEEF5 !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	border-radius: 8px !important;
	padding: 6px 14px !important;
	cursor: pointer;
	box-shadow: none !important;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.old-user:hover,
.new-user:hover {
	background-color: #EEF0FF !important;
	color: #4A5BFF !important;
	border-color: #C9CFFF !important;
}

/* --- 3. Credit / credit-limit payment tiles ------------- */
.checkbox.checkDiv {
	display: flex !important;
	gap: 12px !important;
	flex-wrap: wrap;
	align-items: stretch !important;
}
.checkbox.checkDiv .checkboxDiv {
	padding: 12px 16px !important;
	border: 1px solid #ECEEF5;
	border-radius: 10px;
	background: #FFFFFF;
	display: inline-flex !important;
	align-items: center;
	cursor: pointer;
	font-size: 13px;
	color: #1B1F2E;
	transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.checkbox.checkDiv .checkboxDiv:hover {
	border-color: #C9CFFF;
	background: #FAFBFD;
	transform: translateY(-1px);
}
.checkbox.checkDiv .checkboxDiv.checkboxSelect {
	border-color: #4A5BFF !important;
	background: #EEF0FF !important;
	color: #4A5BFF !important;
	box-shadow: 0 0 0 1px #4A5BFF inset,
	            0 6px 16px -6px rgba(74, 91, 255, 0.30);
}

/* --- 4. Discount code input + apply button -------------- */
#promo {
	border-radius: 10px;
	overflow: visible;
	max-width: 420px;
}
#promo .form-control,
input[name="promo"] {
	border: 1px solid #ECEEF5 !important;
	border-radius: 8px 0 0 8px !important;
	height: 40px !important;
	font-size: 13px !important;
	padding: 0 12px !important;
	color: #1B1F2E !important;
	box-shadow: none !important;
}
#promo .form-control:focus {
	border-color: #C9CFFF !important;
	box-shadow: 0 0 0 3px rgba(74, 91, 255, 0.12) !important;
	outline: none !important;
}
#promo .input-group-append .btn-primary {
	background: linear-gradient(135deg, #4A5BFF 0%, #8A6BFF 100%) !important;
	border: none !important;
	color: #FFFFFF !important;
	font-weight: 600 !important;
	border-radius: 0 8px 8px 0 !important;
	padding: 0 18px !important;
	font-size: 12px !important;
	height: 40px;
	box-shadow: 0 4px 12px -4px rgba(74, 91, 255, 0.40) !important;
}
#removepromo {
	color: #FF5872 !important;
	font-weight: 600;
	font-size: 12px;
	transition: color .15s ease;
}
#removepromo:hover {
	color: #BE123C !important;
}

/* --- 5. Registration verification code buttons --------- */
#register_phone_get_code,
#register_email_get_code,
button[id$="_get_code"] {
	background: linear-gradient(135deg, #4A5BFF 0%, #8A6BFF 100%) !important;
	border: none !important;
	color: #FFFFFF !important;
	font-weight: 600 !important;
	border-radius: 0 8px 8px 0 !important;
	padding: 0 14px !important;
	height: 40px !important;
	font-size: 12px !important;
	box-shadow: 0 4px 12px -4px rgba(74, 91, 255, 0.40) !important;
	white-space: nowrap;
}
button[id$="_get_code"]:disabled {
	background: #E4E6F0 !important;
	color: #9AA0B8 !important;
	box-shadow: none !important;
}

/* --- 6. Right column cart card --------------------------- */
.col-md-4 > .card > .card-body {
	padding: 20px !important;
}
.col-md-4 > .card .card-body > div h4.font-size-16,
.col-md-4 > .card .invoice-title h4 {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #1B1F2E !important;
	margin: 0 !important;
	position: relative;
	padding-left: 22px;
}
.col-md-4 > .card .invoice-title h4::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 1px;
	background: linear-gradient(90deg, #4A5BFF, #8A6BFF);
}
.col-md-4 > .card .card-body > hr {
	border-top: 1px solid #ECEEF5 !important;
	margin: 14px 0 !important;
}

/* Each cart-item address — mini-card */
.col-md-4 > .card address {
	background: #FAFBFD;
	border: 1px solid #F0F2F8;
	border-radius: 10px;
	padding: 14px 16px !important;
	margin-bottom: 12px !important;
	transition: border-color .15s ease, background .15s ease;
}
.col-md-4 > .card address:hover {
	border-color: #C9CFFF;
	background: #FFFFFF;
}
.col-md-4 > .card address strong {
	font-size: 14px !important;
	font-weight: 700;
	color: #1B1F2E;
}
.col-md-4 > .card address .fa-pen,
.col-md-4 > .card address .fa-times-circle {
	color: #9AA0B8;
	font-size: 13px;
	margin-left: 6px;
	transition: color .15s ease;
	cursor: pointer;
}
.col-md-4 > .card address .fa-pen:hover {
	color: #4A5BFF;
}
.col-md-4 > .card address .fa-times-circle:hover {
	color: #FF5872;
}
.col-md-4 > .card address .mb-0 {
	font-size: 12px;
	color: #5B6178;
	line-height: 1.5;
	margin-top: 4px !important;
}
.col-md-4 > .card address + .font-size-16,
.col-md-4 > .card address ~ .font-size-16 {
	font-size: 12px !important;
	color: #5B6178;
	padding: 0 4px;
	margin-top: 4px !important;
}
.col-md-4 > .card .font-size-16 .font-size-18 {
	font-size: 15px !important;
	font-weight: 700;
	color: #1B1F2E !important;
}
.col-md-4 > .card .font-size-16 .text-primary {
	color: #1B1F2E !important;
}

/* Goods info inline expand */
.goods_info {
	font-size: 12px;
	color: #5B6178;
	margin-top: 6px;
}
.goods_info .info {
	padding: 3px 0;
	color: #7A8099;
	font-size: 11px;
}

/* Cart-qty widget in viewcart (different from configureproduct) */
.col-md-4 > .card .cart_qty {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
}
.col-md-4 > .card .cart_qty input.number {
	border: 1px solid #ECEEF5 !important;
	border-radius: 6px !important;
	height: 32px !important;
	text-align: center;
	font-weight: 600;
	font-size: 12px;
	color: #1B1F2E !important;
	background: #FFFFFF !important;
	padding: 0 6px !important;
	box-shadow: none !important;
}
.col-md-4 > .card .cart_qty button {
	background: linear-gradient(135deg, #4A5BFF 0%, #8A6BFF 100%) !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 6px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	padding: 4px 10px !important;
	height: 32px;
	box-shadow: 0 3px 8px -2px rgba(74, 91, 255, 0.35) !important;
}

/* Big 13px gray hr → soft 1px hairline + accent fill */
.col-md-4 > .card hr[style*="13px"] {
	border: none !important;
	border-top: 1px solid #ECEEF5 !important;
	height: 0 !important;
	background: none !important;
	margin: 16px 0 !important;
}

/* Grand total row */
.col-md-4 .mobile-hide.d-flex .price-num {
	font-size: 22px !important;
	font-weight: 800 !important;
	background: linear-gradient(135deg, #4A5BFF, #8A6BFF) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
	letter-spacing: -0.01em;
}
.col-md-4 .mobile-hide.d-flex .len-num {
	color: #4A5BFF !important;
	font-weight: 700;
}
.col-md-4 .mobile-hide.d-flex .text-primary {
	color: #1B1F2E !important;
}
.col-md-4 .mobile-hide.d-flex > span:first-child {
	font-size: 14px;
	font-weight: 700;
	color: #1B1F2E;
}

/* --- 7. Pay Now submit button ---------------------------- */
button.submit-btn,
.submit-btn,
button.btn-primary.submit-btn {
	background: linear-gradient(135deg, #4A5BFF 0%, #8A6BFF 100%) !important;
	border: none !important;
	color: #FFFFFF !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	border-radius: 10px !important;
	height: 48px !important;
	padding: 0 24px !important;
	font-size: 14px !important;
	box-shadow: 0 6px 18px -4px rgba(74, 91, 255, 0.50) !important;
	transition: transform .15s ease, box-shadow .15s ease;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
button.submit-btn:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px -4px rgba(74, 91, 255, 0.60) !important;
	color: #FFFFFF !important;
}
button.submit-btn:disabled,
button.submit-btn[disabled] {
	background: #E4E6F0 !important;
	color: #9AA0B8 !important;
	box-shadow: none !important;
	cursor: not-allowed;
}
button.submit-btn .mdi-truck-fast {
	font-size: 18px;
}

/* Terms checkbox row inside .payDiv */
.payDiv .custom-control-label {
	font-size: 12px !important;
	color: #5B6178 !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}
.payDiv .custom-control-label a {
	color: #4A5BFF;
	font-weight: 600;
}
.payDiv .custom-control-label a:hover {
	color: #8A6BFF;
	text-decoration: underline;
}

/* --- 8. Input-group for phone code + register fields ----- */
#register_phone_code .form-control,
#phoneCodeSel {
	border: 1px solid #ECEEF5 !important;
	border-radius: 8px 0 0 8px !important;
	height: 40px !important;
	font-size: 13px !important;
	color: #1B1F2E !important;
	box-shadow: none !important;
}
input#register_phone {
	border-radius: 0 8px 8px 0 !important;
	border-left: none !important;
}


/* ============================================================
   VIEWCART after merge — single col-md-12 card now contains
   both customer/payment form AND products+total+checkout.
   Re-target the styles that previously assumed .col-md-4 > .card.
   ============================================================ */

/* Products header h4 (was wrapped in .col-md-4 .invoice-title) */
.col-md-12 > .card .invoice-title h4,
.invoice-title h4.font-size-16 {
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #1B1F2E !important;
	margin: 0 !important;
	position: relative;
	padding-left: 22px;
}
.col-md-12 > .card .invoice-title h4::before,
.invoice-title h4.font-size-16::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 14px;
	height: 1px;
	background: linear-gradient(90deg, #4A5BFF, #8A6BFF);
}

/* Wrap the moved products block in a visual section — give it
   margin-top so it doesn't sit right under registration block */
.col-md-12 > .card .card-body > div:has(> .invoice-title),
.col-md-12 > .card-body > div:has(> .invoice-title) {
	margin-top: 28px;
	padding-top: 16px;
	border-top: 1px solid #F0F2F8;
}

/* Now that col-md-4 wrapper is gone, re-target address card styles */
.col-md-12 > .card address,
.col-md-12 .card-body address {
	background: #FAFBFD;
	border: 1px solid #F0F2F8;
	border-radius: 10px;
	padding: 14px 16px !important;
	margin-bottom: 12px !important;
	transition: border-color .15s ease, background .15s ease;
}
.col-md-12 > .card address:hover,
.col-md-12 .card-body address:hover {
	border-color: #C9CFFF;
	background: #FFFFFF;
}
.col-md-12 .card-body address strong {
	font-size: 14px !important;
	font-weight: 700;
	color: #1B1F2E;
}
.col-md-12 .card-body address .fa-pen,
.col-md-12 .card-body address .fa-times-circle {
	color: #9AA0B8;
	font-size: 13px;
	margin-left: 6px;
	transition: color .15s ease;
	cursor: pointer;
}
.col-md-12 .card-body address .fa-pen:hover {
	color: #4A5BFF;
}
.col-md-12 .card-body address .fa-times-circle:hover {
	color: #FF5872;
}

/* Subtotals between addresses */
.col-md-12 .card-body address ~ .font-size-16 {
	font-size: 12px !important;
	color: #5B6178;
	padding: 0 4px;
	margin-top: 4px !important;
}
.col-md-12 .card-body .font-size-16 .font-size-18 {
	font-size: 15px !important;
	font-weight: 700;
	color: #1B1F2E !important;
}

/* Soften the 13px gray hr */
.col-md-12 .card-body hr[style*="13px"] {
	border: none !important;
	border-top: 1px solid #ECEEF5 !important;
	height: 0 !important;
	background: none !important;
	margin: 24px 0 16px !important;
}

/* Grand total in the merged layout */
.col-md-12 .card-body .mobile-hide.d-flex .price-num {
	font-size: 22px !important;
	font-weight: 800 !important;
	background: linear-gradient(135deg, #4A5BFF, #8A6BFF) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
	letter-spacing: -0.01em;
}
.col-md-12 .card-body .mobile-hide.d-flex .len-num {
	color: #4A5BFF !important;
	font-weight: 700;
}
.col-md-12 .card-body .mobile-hide.d-flex .text-primary {
	color: #1B1F2E !important;
}
.col-md-12 .card-body .mobile-hide.d-flex > span:first-child {
	font-size: 14px;
	font-weight: 700;
	color: #1B1F2E;
}

/* Cart_qty in merged layout */
.col-md-12 .card-body .cart_qty {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
}
.col-md-12 .card-body .cart_qty input.number {
	border: 1px solid #ECEEF5 !important;
	border-radius: 6px !important;
	height: 32px !important;
	text-align: center;
	font-weight: 600;
	font-size: 12px;
	color: #1B1F2E !important;
	background: #FFFFFF !important;
	padding: 0 6px !important;
	box-shadow: none !important;
}
.col-md-12 .card-body .cart_qty button {
	background: linear-gradient(135deg, #4A5BFF 0%, #8A6BFF 100%) !important;
	color: #FFFFFF !important;
	border: none !important;
	border-radius: 6px !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	padding: 4px 10px !important;
	height: 32px;
	box-shadow: 0 3px 8px -2px rgba(74, 91, 255, 0.35) !important;
}

/* Limit the products list max-height to a comfortable size now
   that we're full-width — taller scroll area looks weird at full
   width when only 1-3 items */
.col-md-12 .card-body div[style*="max-height: 50vh"] {
	max-height: none !important;
	padding: 0 !important;
}

/* Inner hr (between products header and list, just `<hr>`) */
.col-md-12 .card-body .invoice-title + div + hr,
.col-md-12 .card-body > div + hr:not([style]) {
	border-top: 1px solid #ECEEF5;
	margin: 14px 0;
}


/* ============================================================
   CART CHECKOUT BAR — fixed bottom card containing discount
   code + total + terms agreement + checkout button.
   Replaces both the old desktop section AND mobile-bottom-total.
   ============================================================ */
.cart-checkout-bar {
	position: fixed;
	bottom: 0;
	left: 250px;
	right: 0;
	background: #FFFFFF;
	border-top: 1px solid #ECEEF5;
	box-shadow: 0 -10px 30px -8px rgba(20, 26, 70, 0.16);
	padding: 14px 24px;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

/* Sidebar variants */
@media (max-width: 991.98px) {
	.cart-checkout-bar {
		left: 0;
		padding: 12px 16px;
		gap: 12px;
	}
}
body.vertical-collpsed .cart-checkout-bar {
	left: 70px;
}

/* Hide the redundant section heading inside the bar */
.cart-checkout-bar p.mt-5 {
	display: none !important;
}

/* Discount input — compact */
.cart-checkout-bar .input-group {
	flex: 0 0 auto;
	max-width: 320px;
	width: auto;
	margin: 0 !important;
}
.cart-checkout-bar .input-group#promo {
	width: 280px;
}
.cart-checkout-bar .input-group .form-control {
	height: 40px !important;
	border-radius: 8px 0 0 8px !important;
}
.cart-checkout-bar .input-group-append .btn {
	height: 40px;
	border-radius: 0 8px 8px 0 !important;
}

/* Total row */
.cart-checkout-bar .font-size-16.d-flex {
	margin: 0 !important;
	padding: 0 !important;
	flex: 1;
	justify-content: flex-end;
	display: flex !important;
	align-items: center;
	gap: 12px;
	min-width: 200px;
}
.cart-checkout-bar .font-size-16.d-flex > span:first-child {
	font-size: 13px;
	font-weight: 700;
	color: #1B1F2E;
}
.cart-checkout-bar .price-num {
	font-size: 22px !important;
	font-weight: 800 !important;
	background: linear-gradient(135deg, #4A5BFF, #8A6BFF) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	color: transparent !important;
	letter-spacing: -0.01em;
}
.cart-checkout-bar .len-num {
	color: #4A5BFF !important;
	font-weight: 700;
}
.cart-checkout-bar .text-primary {
	color: #1B1F2E !important;
}

/* Terms + checkout */
.cart-checkout-bar .d-print-none {
	display: flex !important;
	align-items: center;
	gap: 16px;
	flex: 0 0 auto;
}
.cart-checkout-bar .payDiv {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 16px !important;
	flex-wrap: nowrap !important;
	margin: 0 !important;
}
.cart-checkout-bar .payDiv .custom-control.custom-checkbox {
	margin: 0 !important;
	padding-left: 24px;
}
.cart-checkout-bar .payDiv > div:last-child {
	margin: 0 !important;
}
.cart-checkout-bar .submit-btn,
.cart-checkout-bar button.btn-primary {
	width: auto !important;
	min-width: 160px;
	padding: 0 24px !important;
}

/* Make sure mobile responsive layout stacks the bar nicely */
@media (max-width: 767.98px) {
	.cart-checkout-bar {
		flex-direction: column;
		align-items: stretch;
	}
	.cart-checkout-bar .input-group#promo,
	.cart-checkout-bar .input-group {
		width: 100%;
		max-width: 100%;
	}
	.cart-checkout-bar .font-size-16.d-flex {
		justify-content: space-between;
	}
	.cart-checkout-bar .submit-btn {
		width: 100% !important;
	}
	.cart-checkout-bar .d-print-none {
		width: 100%;
	}
	.cart-checkout-bar .payDiv {
		flex-direction: column;
		width: 100%;
		align-items: stretch;
	}
}

/* Main content gets bottom padding so the fixed bar doesn't cover it */
form#submit-form > .row {
	padding-bottom: 110px;
}
@media (max-width: 767.98px) {
	form#submit-form > .row {
		padding-bottom: 240px;
	}
}