/* Import Google Fonts */
@import 'https://fonts.googleapis.com/css?family=Material+Icons|Muli:200,300,400,600,700,800,900|Bitter:400,700|Roboto:100,300,400,500,700,900|Righteous:100,200,300,400,500,600,700,800,900|Cairo:100,200,300,400,500,600,700,800,900|Montserrat:100,200,300,400,500,600,700,800,900';

/* Set a unified style */
*{
	box-sizing:border-box;
	margin:0px;
	padding:0px;
	text-decoration:none;
	list-style:none;
	border:0px;
}
body{
	font-size:13px;
	font-family:'Roboto','Cairo', sans-serif;
	background:#f4f7f6;
	color:#334155;
	-webkit-font-smoothing: antialiased;
}
a{
	-webkit-transition:all ease 0.3s;
	transition:all ease 0.3s;
	color:#39add1;
}
a:hover {
	color:#2988a7;
}
input:focus, select:focus, textarea:focus, button:focus {
    outline: none;
	box-shadow: 0 0 0 2px rgba(57, 173, 209, 0.2);
	border-color: #39add1 !important;
}

.lx-main-leftside::-webkit-scrollbar { width: 6px; }
.lx-main-leftside::-webkit-scrollbar-track { background:transparent; }
.lx-main-leftside::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.15); border-radius:10px; }
.lx-main-leftside:hover::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.3); }

/* Create a custom checkbox - EXACT ORIGINAL LAYOUT, MODERN LOOK */
input[type="checkbox"]{
	opacity:0.0;
	margin-right:10px;
}
.checkmark {
	position:absolute;
	top:-2px;
	left:0px;
	height:20px;
	width:20px;
	background:#FFFFFF;
	border:2px solid #cbd5e1;
	border-radius: 4px;
	transition: 0.2s ease;
}
label:hover input ~ .checkmark {
	border-color:#39add1;
	background:#f8fafc;
}
label input:checked ~ .checkmark {
	background:#39add1;
	border-color:#39add1;
}
.checkmark:after {
	content:"";
	position:absolute;
	display:none;
}
label input:checked ~ .checkmark:after {
	display: block;
}
label .checkmark:after {
	left:5px;
	top:1px;
	width:5px;
	height:10px;
	border:1px solid #FFFFFF;
	border-width:0px 2px 2px 0px;
	-webkit-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	transform:rotate(45deg);
}

/* Set a clear fix */
.lx-clear-fix{
	clear:both;
}

/* UTILITY CLASSES */
.lx-pb-0 { padding-bottom: 0px !important; }
.lx-pt-0 { padding-top: 0px !important; }

/* Set the layouts */
.lx-g1{ position:relative; width:100%; padding:15px; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g1-f{ position:relative; width:100%; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g2{ float:left; position:relative; width:50%; padding:15px; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g2-f{ float:left; position:relative; width:50%; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g3{ float:left; position:relative; width:33.33%; padding:15px; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g3-f{ float:left; position:relative; width:33.33%; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g3-2{ float:left; position:relative; width:66.66%; padding:15px; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g3-2-f{ float:left; position:relative; width:66.66%; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g4{ float:left; position:relative; width:25%; padding:15px; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g4-f{ float:left; position:relative; width:25%; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g4-3{ float:left; position:relative; width:75%; padding:15px; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g4-3-f{ float:left; position:relative; width:75%; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g5{ float:left; position:relative; width:20%; padding:15px; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g5-f{ float:left; position:relative; width:20%; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g5-2{ float:left; position:relative; width:40%; padding:15px; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g5-2-f{ float:left; position:relative; width:40%; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g5-3{ float:left; position:relative; width:60%; padding:15px; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g5-3-f{ float:left; position:relative; width:60%; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g5-4{ float:left; position:relative; width:80%; padding:15px; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g5-4-f{ float:left; position:relative; width:80%; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g6{ float:left; position:relative; width:16.66%; padding:15px; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g6-f{ float:left; position:relative; width:16.66%; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g6-5{ float:left; position:relative; width:83.33%; padding:15px; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g6-5-f{ float:left; position:relative; width:83.33%; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g8{ float:left; position:relative; width:12.5%; padding:15px; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g8-f{ float:left; position:relative; width:12.5%; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g8-7{ float:left; position:relative; width:87.5%; padding:15px; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }
.lx-g8-7-f{ float:left; position:relative; width:87.5%; opacity:1.0; -webkit-transition: all 0.8s; transition: all 0.8s; }

@media(max-width:768px){
	.lx-g1{ width:100%; } .lx-g1-f{ width:100%; } .lx-g2{ width:100%; } .lx-g2-f{ width:100%; } .lx-g3{ width:100%; } .lx-g3-f{ width:100%; } .lx-g3-2{ width:100%; } .lx-g3-2-f{ width:100%; } .lx-g4{ width:100%; } .lx-g4-f{ width:100%; } .lx-g4-3{ width:100%; } .lx-g4-3-f{ width:100%; } .lx-g5{ width:100%; } .lx-g5-f{ width:100%; } .lx-g5-2{ width:100%; } .lx-g5-2-f{ width:100%; } .lx-g5-3{ width:100%; } .lx-g5-3-f{ width:100%; } .lx-g5-4{ width:100%; } .lx-g5-4-f{ width:100%; } .lx-g6{ width:100%; } .lx-g6-f{ width:100%; } .lx-g6-5{ width:100%; } .lx-g6-5-f{ width:100%; } .lx-g8{ width:100%; } .lx-g8-f{ width:100%; } .lx-g8-7{ width:100%; } .lx-g8-7-f{ width:100%; }
}

.lx-wrapper{ position:relative; }
/* LOGIN PAGE */
.lx-left-bg{
	position:fixed;
	top:0px;
	left:0px;
	display:flex;
	width:35%;
	height:100%;
	background:#FFFFFF;
}
.lx-right-bg{
	position:fixed;
	top:0px;
	right:0px;
	width:65%;
	height:100%;
	background:url('../images/bg.jpg') center center no-repeat;
	background-size:cover;
}
@media(max-width:1023px){
	.lx-left-bg{ width:100%; padding:20px; }
	.lx-right-bg{ display:none; }
}
.lx-right-bg-shadow{ position:absolute; top:0px; left:0px; width:100%; height:100%; background:linear-gradient(135deg, rgba(57,173,209,0.85), rgba(41,136,167,0.9)); }
.lx-right-bg-shadow div{ position:absolute; bottom:40px; right:40px; color:#FFFFFF; text-align:right; }
.lx-right-bg-shadow div h3{ font-family:'Cairo'; font-weight:700; font-size:36px; text-shadow: 0 2px 10px rgba(0,0,0,0.2); }
.lx-login{ margin:auto; }
.lx-login-content{ margin:auto; }
.lx-login-content h1{ margin-bottom:10px; font-family:'Righteous', sans-serif; font-size:45px; text-transform:uppercase; color: #39add1; }
.lx-login-content h2{ margin-bottom:40px; font-family:'Montserrat', sans-serif; font-size:20px; color: #64748b;}
.lx-password-forgotten{ float:right; color:#39add1; font-weight: 500; }
.lx-login-error{ margin-bottom:20px; padding:15px; color:#b91c1c; background: #fef2f2; border-left: 4px solid #b91c1c; border-radius: 4px;}

/* HEADER */
.lx-header{
	position:fixed;
	z-index:9;
	top:0px;
	left:0px;
	width:100%;
	height:70px;
	background:rgba(255,255,255,0.95);
	backdrop-filter: blur(10px);
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.lx-header-content{ padding:15px 20px; }
.lx-mobile-menu i{ display:inline-block; margin-top:2px; font-size:40px; color:#1e293b; transition: 0.3s;}
.lx-mobile-menu i:hover { color: #39add1; }
.lx-logo{
	padding:24px 10px; text-align:center; border-bottom:1px solid rgba(255,255,255,0.05);
}
.lx-logo a{
	display:inline-block; font-family:'Righteous'; font-size:26px; line-height:20px;
	text-transform:uppercase; color:#FFFFFF; letter-spacing: 1px;
}
.lx-header-admin{ float:right; }
.lx-header-admin ul li{ position:relative; float:left; display: flex; align-items: center;}
.lx-header-admin ul li span{
	display:block; margin-right:15px; padding:8px 15px; font-size:13px; font-weight:600;
	background:#f8fafc; color: #334155; border-radius:20px; box-shadow:inset 0 0 0 1px #e2e8f0; cursor:pointer;
}
.lx-header-admin > ul > li > a{ display:inline-block; padding:5px 10px; font-size:24px; color:#64748b; transition: 0.2s;}
.lx-header-admin > ul > li > a:hover{ color: #39add1; }
.lx-header-admin > ul > li > img{
	display:block; width:44px; height:44px; margin-left:10px; border-radius:50%;
	border: 2px solid #fff; box-shadow:0px 2px 5px rgba(0,0,0,0.1); cursor:pointer;
}
.lx-account-settings{
	position:absolute; top:65px; right:0px; display:none; width:250px; background:#FFFFFF;
	box-shadow:0px 10px 30px rgba(0,0,0,0.1); border-radius:12px; overflow:hidden; border: 1px solid #f1f5f9;
}
.lx-account-settings div{ padding:20px 15px; background:#f8fafc; border-bottom:1px solid #e2e8f0; text-align: center;}
.lx-account-settings div strong{ font-weight:600; color:#1e293b; font-size: 15px; display: block;}
.lx-account-settings div p{ font-size:13px; color:#64748b; margin-top: 5px;}
.lx-account-settings a{
	display:block; padding:12px 20px; color:#334155; font-weight: 500; border-bottom:1px solid #f1f5f9; transition: 0.2s;
}
.lx-account-settings a:hover{ background:#f8fafc; color: #39add1; padding-left: 25px;}
.lx-account-settings a i{ display:inline-block; width:25px; color: #94a3b8; transition: 0.2s;}
.lx-account-settings a:hover i { color: #39add1; }

.lx-notifications-bell ins{
	position:absolute; top:-2px; left:18px; padding:2px 5px; font-size:10px; font-weight:700;
	background:#ef233c; color:#FFFFFF; border-radius:10px; border: 2px solid #fff;
}
.lx-notifications{
	position:absolute; top:65px; right:0px; display:none; width:320px; max-height:380px;
	background:#FFFFFF; box-shadow:0px 10px 30px rgba(0,0,0,0.1); border-radius:12px; overflow:auto;
}
.lx-notifications-item{ padding:15px; background:#ffffff; border-bottom:1px solid #f1f5f9; transition: 0.2s;}
.lx-notifications-item:hover { background: #f8fafc; }
.lx-notifications-item a{ color:#1e293b; font-weight: 500;}
.lx-notifications-item a p{ font-weight:400; margin:5px 0px; color:#64748b; line-height: 1.5;}
.lx-notifications-item a ins{ display:block; font-size:11px; font-style:normal; text-align:right; color:#94a3b8;}

/* ========================================================
   MODERN LEFT SIDEBAR
   ======================================================== */
.lx-main-leftside{
    position:fixed;
    z-index:10;
    top:0px;
    left:0px;	
    width:230px;
    height:100%;
    /* Deep Blue to Navy Gradient */
    background: linear-gradient(180deg, #141e30 0%, #243b55 100%);
    box-shadow: 4px 0 15px rgba(0,0,0,0.15);
    transition:all cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
    overflow:auto;
}
@media(max-width:1023px){
    .lx-main-leftside{
        left:-230px;
    }
}
.lx-main-menu{
    position:relative;
    margin-top: 10px;
}
.lx-mobile-menu-hide{
    position:absolute;
    top:12px;
    right:12px;
    display:none;
    color:#FFFFFF;
    transition: 0.3s;
}
.lx-mobile-menu-hide:hover { color: #00d2ff; }
@media(max-width:1023px){
    .lx-mobile-menu-hide{
        display:block;
    }
}
.lx-main-menu ul li{
    position:relative;
    margin: 4px 12px;
}
.lx-main-menu ul li > i{
    position:absolute;
    top:12px;
    right:8px;
    cursor:pointer;
    color: rgba(255,255,255,0.5);
    transition: 0.3s;
}
.lx-main-menu ul li > i:hover { color: #fff; }
.lx-main-menu ul li a{
    display:flex;
    align-items: center;
    padding:12px 15px;
    font-family:'Montserrat','Cairo', sans-serif;
    text-transform:uppercase;
    font-size: 12px;
    font-weight: 500;
    line-height:14px;
    border-radius: 8px;
    color:rgba(255,255,255,0.85);
    transition: all 0.3s ease;
}
.lx-main-menu ul li a:hover{
    background:rgba(255,255,255,0.1);
    color: #fff;
    transform: translateX(4px);
}
.lx-main-menu ul li a.active{
    background:rgba(255,255,255,0.15);
    color:#FFFFFF;
    font-weight: 600;
    box-shadow: inset 4px 0 0 #00d2ff;
}
.lx-main-menu ul li a img{
    position:relative;
    top:0;
    float:none;
    margin-right:12px;
    width:22px;
    opacity: 0.9;
}
.lx-main-menu ul li a i{
    position:relative;
    top:0;
    display:inline-block;
    width:30px;
    font-size:15px;
    text-align:center;
    margin-right: 8px;
    color:rgba(255,255,255,0.7);
    transform:scale(1.2);
    transition: 0.3s;
}
.lx-main-menu ul li a.active i { color: #00d2ff; }
.lx-main-menu ul li a span{
    display:none;
    margin-left: auto;
    padding:3px 8px;
    font-size:11px;
    font-weight: bold;
    background:#ef233c;
    color:#FFFFFF;
    border-radius:20px;
    box-shadow: 0 2px 5px rgba(239,35,60,0.4);
}
.lx-main-menu ul li ul{
    display:none;
    margin-top: 4px;
}
.lx-main-menu ul li ul li{ margin: 2px 0; }
.lx-main-menu ul li ul li a{
    padding: 10px 15px 10px 45px;
    background:transparent;
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    box-shadow: none;
}
.lx-main-menu ul li ul li a:hover {
    color: #fff;
    background: rgba(255,255,255,0.05);
    transform: translateX(4px);
}
/* ========================================================
   END OF LEFT SIDEBAR OVERRIDE
   ======================================================== */

.lx-main-content{
	padding:70px 0px 0px 230px;
	transition:all ease 0.3s;
}
@media(max-width:1023px){
	.lx-main-content{
		padding:70px 0px 0px 0px;
	}
}

@media(max-width:1023px){
	.lx-filter{ display:none; padding-right:15px; }
}
.lx-show-filter{ display:none; }
@media(max-width:1023px){
	.lx-show-filter{ display:inline-block; margin:15px; text-decoration:underline; color:#39add1; }
}

.lx-kpi{ padding:15px; padding-right:0px; }
@media(max-width:1023px){ .lx-kpi{ padding:15px; } }
.lx-kpi-item{ float:left; position:relative; width:18.5%; margin-right:1.5%; padding:20px; background:#242424; color:#FFFFFF; border-radius:8px; box-shadow:0 4px 10px rgba(0,0,0,0.05); transition:0.3s; overflow: hidden;}
.lx-kpi-item:hover { transform: translateY(-4px); box-shadow: 0 8px 15px rgba(0,0,0,0.1);}
.lx-2b3544{ background:linear-gradient(135deg, #2b32b2 0%, #1488cc 100%); }
.lx-d11141{ background:linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%); }
.lx-00b159{ background:linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.lx-00aedb{ background:linear-gradient(135deg, #00c6ff 0%, #0072ff 100%); }
.lx-f37735{ background:linear-gradient(135deg, #f12711 0%, #f5af19 100%); }
.lx-ffc425{ background:linear-gradient(135deg, #f7b733 0%, #fc4a1a 100%); }
.lx-kpi-item strong{ font-size:30px; font-family: 'Montserrat'; font-weight:700;}
.lx-kpi-item i{ position:absolute; top:-5px; right:-5px; font-size:80px; color:rgba(255,255,255,0.15); transform: rotate(-15deg); transition:0.3s;}
.lx-kpi-item:hover i { transform: rotate(0) scale(1.1);}

.lx-chart-container{ margin:15px; margin-top:0px; }
.lx-data-list{ background:#FFFFFF; border:1px solid #e2e8f0; box-shadow:0px 2px 10px rgba(0,0,0,0.03); border-radius:8px; overflow: hidden;}
.lx-data-list > h3{ padding:15px; text-transform:uppercase; background:#f8fafc; border-bottom:1px solid #e2e8f0; font-weight:600; color:#1e293b;}
.lx-data-list > h2{ padding:15px; font-size:30px; text-align:center; color:#39add1;}
.lx-data-list-content{ max-height:300px; overflow:auto; }
.lx-data-list-content ul li{ padding:12px 15px; font-size:13px; border-bottom:1px solid #f1f5f9; color:#475569;}
.lx-data-list-content ul li span{ float:right; font-weight:600; color:#1e293b;}
.lx-data-list-content ul li a{ color:#39add1; font-weight:500;}

.lx-page-header{ padding:20px; }
.lx-page-header h2{ position:relative; font-size:20px; font-weight:700; color:#1e293b; text-transform:uppercase; font-family:'Montserrat';}
.lx-page-header p{ font-size:13px; color:#64748b; margin-top:4px;}
#my-notification-button{ position:absolute; top:-4px; left:140px; width:30px; height:30px; padding-top:8px; font-size:13px; font-weight:500; text-align:center; background:#e2e8f0; color:#242424; border-radius:50%; transition:0.2s;}
#my-notification-button:hover { background:#39add1; color:#fff;}
.lx-page-header a.lx-header-btn{ float:right; position:relative; z-index:2; top:-3px; display:inline-block; padding:8px 15px; font-weight:600; color:#FFFFFF; background:linear-gradient(135deg, #39add1 0%, #2988a7 100%); border-radius:20px; box-shadow:0 2px 5px rgba(57,173,209,0.3); text-transform:uppercase; font-size:11px; transition:0.2s;}
.lx-page-header a.lx-header-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(57,173,209,0.4);}
.lx-submenu li a:hover{ box-shadow:0px 0px 5px rgba(0,0,0,0.1); }
.lx-submenu li a.active{ display:inline-block; padding:10px; font-size:13px; font-weight:500; background:#39add1; color:#FFFFFF; border-radius:6px;}

.lx-page-content{ margin:0px 20px 20px; padding:15px; background:#FFFFFF; border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,0.03); }

.lx-demandramassage{ padding:15px; padding-bottom:0px; }
.lx-demandramassage a.lx-demandramassage-btn{ display:inline-block; margin-bottom:15px; padding:10px 20px; font-size:13px; font-weight:600; background:linear-gradient(135deg, #39add1 0%, #2988a7 100%); color:#FFFFFF; border-radius:6px; box-shadow:0 2px 5px rgba(57,173,209,0.3); transition:0.2s;}
.lx-demandramassage a.lx-demandramassage-btn:hover{ transform:translateY(-2px); box-shadow:0 4px 10px rgba(57,173,209,0.4); }

.lx-add-form label.lx-date{ position:relative; display:inline-block; }
.lx-add-form label i{ position:absolute; top:12px; right:12px; font-size:15px; color:#828282; }
.lx-add-form label i.fa-angle-down{ top:31px; }

/* Buttons Original Layout, Modern look */
.lx-add-form a.lx-new{ position:relative; display:inline-block; padding:10px 15px; font-size:13px; font-weight:600; background:linear-gradient(135deg, #39add1 0%, #2988a7 100%); color:#FFFFFF; border-radius:6px; box-shadow:0 2px 5px rgba(57,173,209,0.3); transition:0.2s; text-transform:uppercase; letter-spacing:0.5px;}
@media(max-width:768px){ .lx-add-form a.lx-new{ display:block; margin-bottom:10px; text-align:center;} }
.lx-add-form a.lx-new:hover{ transform:translateY(-2px); box-shadow:0 4px 10px rgba(57,173,209,0.4); }
.lx-add-form a.lx-new input{ position:absolute; top:0px; left:0px; width:100%; height:100%; opacity:0.0; cursor:pointer;}
.lx-add-form a.lx-new.lx-error-import{ background:linear-gradient(135deg, #ef233c 0%, #d90429 100%) !important; box-shadow:0 2px 5px rgba(239,35,60,0.3);}

#editkpiform{ padding:15px 15px 0px 15px; }
#editkpiform label{ position:relative; display:inline-block; margin-bottom:20px; margin-right:20px; }

/* ========================================================
   MODERN FORM TEXTFIELDS (.lx-textfield)
   ======================================================== */
.lx-textfield{ position:relative; margin-bottom:20px; } 
.lx-textfield label{ position:relative; display: block;}
.lx-popup .lx-textfield{ position:relative; margin-bottom:18px; line-height: 2 !important; }
.lx-login .lx-textfield label i{ position:absolute; right:15px; top:18px; font-size:20px; color:#cbd5e1; }

.lx-textfield span{ 
	display:block; 
	margin-bottom:8px; 
	font-weight:600; 
	color:#64748b; 
	font-size:12px; 
	text-transform:uppercase;
	letter-spacing: 0.5px;
}

.lx-textfield input[type='text'], 
.lx-textfield input[type='password'], 
.lx-textfield input[type='number'], 
.lx-textfield select, 
.lx-textfield textarea{
	width:100%; 
	padding:12px 16px; 
	border:1px solid #cbd5e1; 
	border-radius:8px; 
	background:#f8fafc; 
	color:#1e293b; 
	transition:all 0.3s ease; 
	font-size:14px;
	box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
}

.lx-textfield input:hover, 
.lx-textfield select:hover, 
.lx-textfield textarea:hover {
	background: #ffffff;
	border-color: #94a3b8;
}

.lx-textfield input:focus, 
.lx-textfield select:focus, 
.lx-textfield textarea:focus{
	background:#ffffff; 
	border-color:#39add1; 
	box-shadow:0 0 0 3px rgba(57,173,209,0.15); 
}

.lx-login .lx-textfield input[type='text'], 
.lx-login .lx-textfield input[type='password']{
	padding:15px 45px 15px 20px; 
	background:#fff; 
	border:1px solid #cbd5e1; 
	border-radius:8px; 
	box-shadow:none;
}
.lx-login .lx-textfield input:-webkit-autofill,
.lx-login .lx-textfield input:-webkit-autofill:hover, 
.lx-login .lx-textfield input:-webkit-autofill:focus, 
.lx-login .lx-textfield input:-webkit-autofill:active{
	-webkit-box-shadow: 0 0 0 30px #ffffff inset !important;
}

.lx-textfield textarea{ height:120px; resize:vertical; }
.lx-textfield ins{ color:#ef233c; text-decoration:none; }

/* Image Picker Original Layout */
.lx-image-picker{ position:relative; display:flex; width:100px; height:100px; margin-bottom:3px; background:#f8fafc; border:2px dashed #cbd5e1; border-radius:8px; cursor:pointer; transition:0.2s;}
@media(max-width:1023px){ .lx-image-picker{ width:95px; height:95px; } }
@media(max-width:768px){ .lx-image-picker{ width:100%; height:240px; } }
.lx-image-picker:hover { border-color:#39add1; background:#f0f9ff; }
.lx-image-picker a{ position:absolute; top:0; left:0; display:flex; width:100%; height:100%; color:#94a3b8; border:none; }
.lx-image-picker a i{ display:inline-block; margin:auto; font-size:30px; }
.lx-image-picker img{ position:absolute; z-index:2; width:100%; height:100%; object-fit:cover; border-radius:6px;}
.lx-delete-image{ display:none; width:100px; padding:8px; text-align:center; background:#f1f5f9; color:#ef233c; font-weight:600; border:1px solid #e2e8f0; border-radius:6px; cursor:pointer;}

.lx-submit,.lx-submit-add{ margin-bottom:15px; }
.lx-submit a,.lx-submit-add a{ display:inline-block; padding:10px 20px; font-size:13px; font-weight:600; background:linear-gradient(135deg, #39add1 0%, #2988a7 100%); color:#FFFFFF; border-radius:6px; box-shadow:0 2px 5px rgba(57,173,209,0.3); transition:0.2s; text-transform:uppercase; letter-spacing:0.5px;}
.lx-login .lx-submit{ margin-top:40px; }
.lx-login .lx-submit a{ display:block; padding:15px 20px; font-size:16px; text-align:center; }
.lx-submit a:hover,.lx-submit-add a:hover{ transform:translateY(-2px); box-shadow:0 4px 10px rgba(57,173,209,0.4); }
.lx-submit a.lx-disabled{ background:#e2e8f0; color:#94a3b8; box-shadow:none; cursor:not-allowed; }
.lx-submit-add-variant{ position:relative; }
.lx-submit-add-variant a{ position:absolute; bottom:0px; width:100%; }

/* TABLES EXACT ORIGINAL STRUCTURE */
.lx-table{ width:100%; margin-top:10px; overflow:auto; border-radius:8px; border:1px solid #e2e8f0; box-shadow:0 2px 10px rgba(0,0,0,0.02);}
.lx-table label{ position:relative; display:inline-block; white-space:nowrap; }
.lx-table p{ margin-top:20px; font-weight:600; }
.lx-table a.lx-trash{ float:right; display:inline-block; margin-bottom:10px; margin-left:3px; padding:8px 12px; font-size:12px; font-weight:600; background:#FFFFFF; color:#475569; border:1px solid #cbd5e1; border-radius:20px; box-shadow:0 2px 4px rgba(0,0,0,0.02); transition:0.2s;}
.lx-table a.lx-trash:hover{ border-color:#39add1; color:#39add1; box-shadow:0 4px 10px rgba(57,173,209,0.1); }
.lx-table > a{ float:right; display:inline-block; margin-bottom:10px; padding:8px 12px; font-size:12px; font-weight:600; background:#FFFFFF; color:#475569; border:1px solid #cbd5e1; border-radius:20px; box-shadow:0 2px 4px rgba(0,0,0,0.02); transition:0.2s;}
.lx-table > a:hover{ border-color:#39add1; color:#39add1; box-shadow:0 4px 10px rgba(57,173,209,0.1); }

.lx-table table{ width:100%; background:#FFFFFF; border-collapse:collapse;}
.lx-table table tr:nth-child(2n+1){ background:#f8fafc; }
.lx-table table tr:hover { background:#f1f5f9; }
.lx-table table tr td{ padding:12px; font-weight:400; color:#334155; border-bottom:1px solid #e2e8f0; vertical-align:middle;}
.lx-table table tr td:first-child{ width:1%; }
.lx-table table tr td:last-child{ width:1%; white-space:nowrap; }
.lx-table table tr:first-child td, .lx-table table tr.lx-first-tr td{ padding:15px 12px; font-weight:600; color:#64748b; background:#FFFFFF; border-bottom:2px solid #e2e8f0; border-top:none; text-transform:uppercase; font-size:11px; letter-spacing:0.5px; white-space:nowrap; }
.lx-table table tr:last-child td{ border-bottom:0px; }

.lx-table table tr td img.lx-avatar{ float:left; width:36px; height:36px; margin-right:10px; border-radius:50%; box-shadow:0 2px 5px rgba(0,0,0,0.1); object-fit:cover;}
.lx-table table tr td span{ display:block; margin-bottom:4px; color:#1e293b; line-height:1.4;}
.lx-table table tr td span ins{ white-space:nowrap; text-decoration:none;}
.lx-table table tr td img.lx-avatar{ float:left; width:40px; height:40px; border-radius:50%;}
.lx-table table tr td a{ color:#39add1; font-weight:500;}
.lx-table table tr td a:hover { color:#2988a7; }
.lx-table table tr td > a{ font-size:12px; }

.lx-table table tr td a.lx-edit, .lx-table table tr td a.lx-delete{ display:inline-block; margin-bottom:5px; }
.lx-table table tr td:last-child a{ font-weight:600; }
.lx-table table tr td del{ text-decoration:line-through; opacity:0.6; }
.lx-table table tr td select{ padding:8px 12px; border:1px solid #cbd5e1; border-radius:6px; background:#fff;}

.lx-on-off-fill{ position:relative; width:44px; height:24px; background:#e2e8f0; border-radius:20px; cursor:pointer; transition:all 0.3s ease; box-shadow:inset 0 2px 4px rgba(0,0,0,0.1);}
.lx-on-off-blue .lx-on-off-fill{ background:#39add1; }
.lx-on-off span{ position:absolute; left:2px; top:2px; display:inline-block; width:20px; height:20px; background:#FFFFFF; border-radius:50%; box-shadow:0 2px 5px rgba(0,0,0,0.2); transition:all 0.3s ease; }
.lx-on-off-fill i{ display:none !important; }
.lx-on-off-blue span{ left:22px; }

.lx-pagination{ margin:20px 0px; }
.lx-pagination ul{ float:right; display:flex; align-items:center; gap:10px; background:#fff; padding:5px 15px; border-radius:30px; box-shadow:0 2px 10px rgba(0,0,0,0.05); border:1px solid #e2e8f0;}
.lx-pagination ul li{ float:left; margin-left:0px;}
.lx-pagination ul li span{ display:inline-block; padding:10px 0px; font-size:13px; font-weight:600; color:#64748b; margin-right:10px;}
.lx-pagination ul li a{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; font-size:16px; background:#f8fafc; color:#1e293b; border-radius:50%; transition:0.2s; border:none;}
.lx-pagination ul li a.previous, .lx-pagination ul li a.next { border:none;}
.lx-pagination ul li a:hover:not(.disabled){ background:#39add1; color:#fff; box-shadow:0 4px 10px rgba(57,173,209,0.3);}
.lx-pagination ul li a.disabled{ opacity:0.3; cursor:not-allowed; border:none;}
.lx-pagination ul li select{ padding:6px 12px; border:1px solid #e2e8f0; border-radius:20px; background:#f8fafc; font-weight:bold;}

.lx-medias-toolbar{ position:relative; margin-top:15px; margin-left:15px; padding:20px; background:#FFFFFF; border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,0.03);}
@media(max-width:1023px){ .lx-medias-toolbar{ margin:15px; } }
.lx-medias-toolbar a{ display:inline-block; padding:10px 20px; font-size:13px; font-weight:600; background:#39add1; color:#FFFFFF; border-radius:6px; transition:0.2s;}
.lx-medias-toolbar:hover a{ background:#2988a7; transform:translateY(-2px); box-shadow:0 4px 10px rgba(57,173,209,0.3);}
.lx-medias-toolbar input{ position:absolute; z-index:2; top:20px; left:20px; width:120px; height:40px; opacity:0.0; cursor:pointer; }
@media(max-width:1023px){ .lx-medias-list .lx-g6{ width:50% !important; } }
.lx-medias-item{ position:relative; border-radius:8px; overflow:hidden; box-shadow:0 2px 5px rgba(0,0,0,0.05);}
.lx-medias-item img{ display:block; width:100%; padding:0px; background:#FFFFFF; border:none; }
.lx-medias-item i{ position:absolute; top:10px; right:10px; font-size:14px; padding:6px; background:#ef233c; color:#FFFFFF; border-radius:50%; cursor:pointer; transition:0.2s;}
.lx-medias-item i:hover { transform:scale(1.1); }

.lx-medias-library{ position:fixed; z-index:11; top:0px; left:0px; display:none; width:100%; height:100%; padding:40px; background:rgba(244,247,246,0.95); backdrop-filter:blur(5px); overflow:auto; }
@media(max-width:1023px){ .lx-medias-library .lx-g6{ width:50% !important; } }
.lx-medias-library > i{ position:absolute; top:20px; right:20px; font-size:30px; cursor:pointer; color:#1e293b; transition:0.2s;}
.lx-medias-library > i:hover { color:#ef233c; transform:rotate(90deg); }
.lx-medias-library-item{ position:relative; cursor:pointer; border-radius:8px; overflow:hidden; box-shadow:0 2px 5px rgba(0,0,0,0.05); transition:0.3s;}
.lx-medias-library-item:hover { transform:translateY(-3px); box-shadow:0 8px 15px rgba(0,0,0,0.1); }
.lx-medias-library-item img{ display:block; width:100%; padding:0px; background:#FFFFFF; border:none; }

.lx-floating-response{ position:fixed; z-index:99999; bottom:30px; left:0px; display:none; padding:0px 20px; width:100%; text-align:center; cursor:pointer; }
.lx-floating-response p{ position:relative; display:inline-block; padding:15px 40px 15px 20px; font-size:14px; font-weight:500; background:#1e293b; color:#FFFFFF; border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,0.2); }
.lx-floating-response p.lx-error{ border-left:4px solid #ef233c; border-bottom:none;}
.lx-floating-response p.lx-succes{ border-left:4px solid #11998e; border-bottom:none;}
.lx-floating-response p i{ position:relative; top:2px; margin-right:8px; }
.lx-floating-response p i:last-child{ position:absolute; right:15px; top:16px; font-size:16px; opacity:0.7; }
.lx-floating-response p i.fa{ top:0px; }

.lx-autocomplete{ position:absolute; z-index:3; top:100%; left:0px; width:100%; max-height:200px; box-shadow:0 10px 25px rgba(0,0,0,0.1); border-radius:8px; border:1px solid #e2e8f0; overflow:auto; }
.lx-autocomplete a{ display:block; padding:12px 15px; font-size:13px; background:#FFFFFF; color:#1e293b; word-break:break-all; border-bottom:1px solid #f1f5f9;}
.lx-autocomplete a:hover{ background:#f8fafc; color:#39add1;}

.lx-command-edit{ position:fixed; z-index:10; top:0px; left:0px; display:none; width:100%; height:100%; background:rgba(15,23,42,0.7); backdrop-filter:blur(4px); overflow:auto; }
.lx-command-edit-inside{ position:relative; max-width:800px; padding:25px; margin:auto; background:#FFFFFF; border-radius:12px; box-shadow:0 20px 40px rgba(0,0,0,0.2); margin-top: 5vh;}
@media(max-width:1023px){ .lx-command-edit-inside{ width:100%; border-radius:0; margin-top:0;} }
.lx-command-edit-inside > a{ position:absolute; top:15px; right:15px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:#f1f5f9; color:#64748b; border-radius:50%; transition:0.2s;}
.lx-command-edit-inside > a:hover { background:#ef233c; color:#fff; transform:rotate(90deg);}

.lx-tracking-edit{ position:fixed; z-index:10; top:0px; left:0px; display:none; width:100%; height:100%; background:rgba(15,23,42,0.7); backdrop-filter:blur(4px); overflow:auto; }
.lx-tracking-edit-inside{ position:relative; max-width:800px; padding:25px; margin:auto; background:#FFFFFF; border-radius:12px; box-shadow:0 20px 40px rgba(0,0,0,0.2); margin-top: 5vh;}
@media(max-width:1023px){ .lx-tracking-edit-inside{ width:100%; border-radius:0; margin-top:0;} }
.lx-tracking-edit-inside > a{ position:absolute; top:15px; right:15px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:#f1f5f9; color:#64748b; border-radius:50%; transition:0.2s;}
.lx-tracking-edit-inside > a:hover { background:#ef233c; color:#fff; transform:rotate(90deg);}

.lx-ip-exists{ display:inline-block; margin:3px 0px; padding:3px 6px; font-size:11px; font-weight:700; color:#FFFFFF; background:#ef233c; border-radius:4px; text-transform:uppercase;}
.lx-ip-new{ display:inline-block; margin:3px 0px; padding:3px 6px; font-size:11px; font-weight:700; color:#FFFFFF; background:#11998e; border-radius:4px; text-transform:uppercase;}
.lx-cleaner{ padding:20px; text-align:center; }
.lx-cleaner h3{ padding:15px; margin:30px 0px; font-weight:700; color:#1e293b;}
.lx-cleaner h4 i{ color:#11998e; }
.lx-loading{ position:absolute; z-index:100; top:0px; left:0px; display:flex; width:100%; height:100%; padding:30px; text-align:center; background:rgba(255,255,255,0.8); backdrop-filter:blur(2px); border-radius:12px;}
.lx-loading p{ margin:auto; font-weight:600; color:#39add1;}
.lx-loading p i{ display:block; margin-top:10px; font-size:36px; animation:spin 1s linear infinite;}
@keyframes spin { 100% { transform:rotate(360deg); } }

.lx-tracking-stats-item{ padding:25px; text-align:center; color:#FFFFFF; border-radius:12px;}
.lx-tracking-stats-item strong{ display:block; font-size:28px; font-weight:700; margin-bottom:5px; font-family:'Montserrat';}

/* Popup ORIGINAL LAYOUT, MODERNIZED LOOK */
.lx-popup{ position:fixed; top:0px; left:0px; z-index:99999; width:100%; height:100%; background:rgba(15,23,42,0.7); backdrop-filter:blur(4px); display:none; overflow:auto; }
.lx-popup-inside{ display:flex; height:100%; padding:20px;}
.lx-popup-content{ position:relative; display:table; margin:auto; opacity:0.0; transform:scale(0.95) translateY(20px); -webkit-transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275); transition:all 0.4s cubic-bezier(0.175,0.885,0.32,1.275); }
.lx-popup-content > a{ position:absolute; right:15px; top:15px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:#f1f5f9; color:#64748b; border-radius:50%; z-index:10; transition:0.2s; }
.lx-popup-content > a:hover { background:#ef233c; color:#fff; transform:rotate(90deg); }
.lx-form{ width:750px; background:#FFFFFF; border-radius:16px; box-shadow:0 20px 40px rgba(0,0,0,0.2); overflow:hidden;}
@media(max-width:1023px){ .lx-form{ min-width:100%; width:100%; } }
.lx-form-title{ padding:20px 25px; text-align:left; background:#f8fafc; border-bottom:1px solid #e2e8f0; }
.lx-form-title h3 { font-family:'Montserrat'; font-weight:700; font-size:18px; color:#1e293b; }
.lx-popup .lx-add-form{ padding:25px; }

/* KEYWORDS ORIGINAL LAYOUT */
.lx-keyword-rate{ float:right; }
@media(max-width:768px){ .lx-keyword{ float:none; clear:both; } }
.lx-keyword label{ position:relative; display:inline-block; margin-right:10px; margin-bottom:10px; }
@media(max-width:1023px){ .lx-keyword label{ display:block; margin-bottom:10px; } }
.lx-keyword label input[type='text']{ width:185px; padding:11px 15px; border:1px solid #cbd5e1; border-radius:6px; background:#fff;}
.lx-keyword label select{ width:200px; padding:10px 15px; border:1px solid #cbd5e1; border-radius:6px; background:#fff;}
@media(max-width:768px){ .lx-keyword label{ margin-right:0px; } .lx-keyword label input[type='text']{ width:100%; } .lx-keyword label select{ width:100%; } }

.lx-delivarymen-cities{ margin-top:10px; }
.lx-delivarymen-cities li{ display:inline-block; margin-right:8px; margin-bottom:8px; padding:6px 12px; background:#f1f5f9; color:#475569; font-weight:600; font-size:12px; border-radius:20px; }
.lx-delivarymen-cities li i{ float:right; display:inline-block; margin-left:10px; margin-top:2px; font-size:12px; color:#ef233c; cursor:pointer; transition:0.2s;}
.lx-delivarymen-cities li i:hover { transform:scale(1.2); }

.lx-colihistory{ margin-left:10px; padding:20px !important; font-size:13px; color:#64748b; border-left:2px solid #e2e8f0; }
.lx-colihistory li{ margin-bottom:25px; position:relative;}
.lx-colihistory li:last-child{ margin-bottom:0px; }
.lx-colihistory li span{ position:relative; display:block; color:#1e293b; font-weight:600; margin-bottom:4px;}
.lx-colihistory li span::before{ position:absolute; left:-28px; top:4px; content:''; display:block; width:12px; height:12px; background:#39add1; border:3px solid #fff; border-radius:50%; box-shadow:0 0 0 2px #e2e8f0;}
.lx-colihistory li > ins{ display:inline-block; text-decoration:none; font-size:12px;}
.lx-delete-history{ font-weight:600; color:#ef233c; cursor:pointer;}
.lx-delete-history:hover { text-decoration:underline; }
.lx-first-tr i{ cursor:pointer; }

.lx-textfield input[type='file']{ position:absolute; z-index:2; top:0px; left:0px; width:107px; height:35px; overflow:hidden; opacity:0.0; cursor:pointer; }
.lx-medias-item{ position:relative; width:120px; height:120px; margin-bottom:10px; border-radius:8px; overflow:hidden; box-shadow:0 2px 5px rgba(0,0,0,0.05);}
.lx-medias-item img{ display:block; width:100%; height:100%; object-fit:cover; padding:0px; background:#FFFFFF; border:none; }

input[readonly]{ background:#f8fafc; cursor:not-allowed; color:#94a3b8; border-color:#e2e8f0;}
.detailsreclamation .lx-add-form{ padding:25px; }
.detailsreclamation .lx-add-form p{ margin-bottom:12px; font-size:14px; color:#334155;}
.lx-message-detail{ padding:15px; background:#f8fafc; border-radius:8px; border:1px solid #e2e8f0; line-height:1.5;}

.lx-states-count h3 a{ color:#94a3b8; transition:0.2s;}
.lx-states-count h3 a:hover{ color:#39add1; }

.lx-state-count{ background:#FFFFFF; border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,0.03); overflow:hidden; transition:0.3s; }
.lx-state-count:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,0.08); }
.lx-state-count a{ display:block; padding:20px; text-align:center; color:#FFFFFF; }
.lx-state-count a span{ display:block; color:rgba(255,255,255,0.9); font-weight:600; text-transform:uppercase; font-size:12px; letter-spacing:0.5px;}
.lx-state-count a strong{ font-size:28px; font-family:'Montserrat'; font-weight:800; display:block; margin:10px 0;}
.lx-state-count a ins{ position:relative; display:block; height:10px; margin-top:10px; background:rgba(255,255,255,0.2); border-radius:10px; overflow:hidden;}
.lx-state-count a ins u{ position:absolute; top:0px; left:0px; height:100%; background:#fff; border-radius:10px;}
.lx-state-count a ins del{ position:absolute; bottom:calc(100% + 3px); right:0px; opacity:0.7; font-size:12px; text-decoration:none;}

.lx-add-form a.lx-import-colis{ background:linear-gradient(135deg, #11998e 0%, #38ef7d 100%); }
.lx-importer{ position:relative; padding:60px 20px; text-align:center; background:#f8fafc; color:#94a3b8; border:2px dashed #cbd5e1; border-radius:12px; transition:0.3s;}
.lx-importer:hover { border-color:#39add1; background:#f0f9ff; color:#39add1;}
.lx-textfield .lx-importer input[type='file']{ position:absolute; z-index:2; top:0px; left:0px; width:100%; height:100%; opacity:0; cursor:pointer; }
.lx-overall-progress{ background:#FFFFFF; box-shadow:0px 2px 10px rgba(0,0,0,0.05); border-radius:6px; overflow:hidden;}

/* ORIGINAL BULK ACTION LAYOUT */
.lx-action-bulk{ float:left; margin-right:15px; padding:15px 0px 0px; display:flex; align-items:center; gap:10px;}
.lx-action-bulk span{ font-weight:600; color:#64748b; }
.lx-action-bulk select{ padding:10px 15px; border:1px solid #cbd5e1; border-radius:8px; background:#fff;}
.lx-action-bulk a{ display:inline-flex; padding:10px 20px; font-size:13px; font-weight:600; background:linear-gradient(135deg, #39add1 0%, #2988a7 100%); color:#FFFFFF; border-radius:8px; box-shadow:0 2px 5px rgba(57,173,209,0.3); transition:0.3s; text-transform:uppercase;}
.lx-action-bulk:hover a{ transform:translateY(-2px); box-shadow:0 4px 10px rgba(57,173,209,0.4); }

tr[data-row]{ display:none; }
#commandsform #keywordclienttitle{ width:76px; }
#commandsform #keywordclientfullname{ width:calc(100% - 80px); }
.lx-thumbs-up{ color:#11998e; }
.lx-thumbs-down{ color:#ef233c; }

/* ========================================================
   CONNECTED USERS (ONLINE DOTS & TIME)
   ======================================================== */
.lx-workers-state {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	padding: 5px 0;
}
.lx-workers-state li {
	display: inline-flex;
	align-items: center;
	padding: 8px 16px 8px 12px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 30px; /* Rounder to fit two lines */
	box-shadow: 0 2px 5px rgba(0,0,0,0.02);
	transition: 0.3s;
}
.lx-workers-state li:hover {
	background: #ffffff;
	box-shadow: 0 4px 10px rgba(0,0,0,0.05);
	transform: translateY(-2px);
}
.lx-workers-state li i {
	font-size: 11px;
	margin-right: 10px;
}
.lx-worker-info {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}
.lx-worker-info strong {
	font-size: 12.5px;
	font-weight: 700;
	color: #1e293b;
}
.lx-worker-info span {
	font-size: 10.5px;
	font-weight: 600;
	color: #94a3b8;
	margin-top: 2px;
}

.lx-connected {
	color: #10b981;
	animation: pulse-green 2s infinite;
}
.lx-halfconnected {
	color: #f59e0b;
	text-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}
.lx-disconnected {
	color: #cbd5e1;
}
@keyframes pulse-green {
	0% { transform: scale(0.85); text-shadow: 0 0 0 rgba(16, 185, 129, 0.7); }
	50% { transform: scale(1.2); text-shadow: 0 0 10px rgba(16, 185, 129, 1); }
	100% { transform: scale(0.85); text-shadow: 0 0 0 rgba(16, 185, 129, 0.7); }
}


/* ========================================================
   MODERN QUICK FILTERS (STATUS TAGS)
   ======================================================== */
.lx-quick-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px; 
	margin: 15px 0 25px 0;
	position: relative;
}
@media(max-width:768px){
	.lx-quick-filter {
		display: none;
	}
}
.lx-quick-filter a {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	font-size: 11.5px;
	font-weight: 700;
	color: #ffffff;
	border-radius: 20px; 
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	transition: all 0.2s ease;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 0 !important; 
}
.lx-quick-filter a:hover {
	transform: translateY(-2px) scale(1.03); 
	box-shadow: 0 6px 15px rgba(0,0,0,0.15);
	filter: brightness(1.1); 
}

/* Table modern action icons */
.lx-table i.fa-edit,.lx-table i.fa-paper-plane,.lx-table i.fa-file,.lx-table i.fa-copy,.lx-table i.fa-comment,.lx-table i.fa-clone,.lx-table i.fa-clock,.lx-table i.fa-trash,.lx-table i.fa-print,.lx-table i.fa-upload,.lx-table i.fa-percent{
	display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; margin-right:8px; margin-bottom:5px;
	background:#f8fafc; color:#64748b; border:1px solid #e2e8f0; border-radius:8px; transition:0.2s; font-size:14px; box-shadow:0 2px 4px rgba(0,0,0,0.02);
}
.lx-table a:hover i { color:#39add1; border-color:#39add1; background:#f0f9ff; transform:translateY(-2px); box-shadow:0 4px 8px rgba(57,173,209,0.15);}
.lx-table a.lx-delete:hover i { color:#ef233c; border-color:#ef233c; background:#fff0f2; box-shadow:0 4px 8px rgba(239,35,60,0.15);}

.lx-fct{ display:inline-block; margin-top:10px; padding:6px 12px; text-align:center; background:#f1f5f9; color:#39add1 !important; font-weight:600 !important; border:1px solid #cbd5e1; border-radius:20px !important; transition:0.2s;}
.lx-fct:hover { background:#39add1; color:#fff !important; }

.lx-product-info{ display:none; }
.lx-command-info{ display:none; }

.lx-add-form-nav{ display:table; margin:25px auto; }
.lx-add-form-nav ul li{ float:left; }
.lx-add-form-nav ul li span{ position:relative; display:inline-block; width:50px; height:50px; margin-left:100px; padding-top:11px; font-size:20px; text-align:center; background:#e2e8f0; color:#64748b; font-weight:700; border-radius:50%; cursor:pointer; transition:0.3s;}
.lx-add-form-nav ul li:first-child span{ margin-left:0px; }
.lx-add-form-nav ul li span.active{ background:#39add1; color:#FFFFFF; box-shadow:0 4px 10px rgba(57,173,209,0.3);}
.lx-add-form-nav ul li span::before{ content:''; position:absolute; top:23px; right:100%; width:100px; height:4px; background:#e2e8f0; transition:0.3s;}
.lx-add-form-nav ul li:first-child span::before{ display:none; }
.lx-add-form-nav ul li span.active::before{ background:#39add1; }

.lx-add-command-product{ position:relative; top:0px; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; background:#f8fafc; color:#64748b; border:1px solid #cbd5e1; border-radius:8px; transition:0.2s;}
.lx-add-command-product:hover { background:#39add1; color:#fff; border-color:#39add1;}

.lx-add-form .lx-next{ position:relative; z-index:2; float:right; margin-top:15px; margin-right:15px; }
.lx-add-form .lx-next a{ display:inline-flex; padding:12px 25px; font-size:13px; font-weight:600; background:linear-gradient(135deg, #39add1 0%, #2988a7 100%); color:#FFFFFF; border-radius:8px; text-transform:uppercase; letter-spacing:0.5px; transition:0.3s;}
.lx-add-form .lx-next a:hover { transform:translateY(-2px); box-shadow:0 4px 10px rgba(57,173,209,0.3);}

.lx-show-variants{ float:right; display:inline-block; margin:15px 15px 0px 0px; color:#39add1; font-weight:600;}
#productsform input[name='other']{ width:calc(100% - 50px); }
.lx-add-variant-product{ position:relative; top:0px; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; background:#f8fafc; color:#64748b; border:1px solid #cbd5e1; border-radius:8px; transition:0.2s;}
.lx-add-variant-product:hover { background:#39add1; color:#fff; border-color:#39add1;}

.lx-variants-list{ margin-top:15px; }
.lx-variants-list p{ margin:5px 0px; padding:12px 15px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; font-weight:500;}
.lx-variants-list p a{ float:right; }
.lx-variants-list p a i.fa-trash{ display:inline-block; color:#ef233c; font-size:16px; transition:0.2s;}
.lx-variants-list p a i.fa-trash:hover { transform:scale(1.2);}

.lx-upload-picture{ display:inline-flex; padding:12px 20px; font-size:13px; font-weight:600; background:linear-gradient(135deg, #39add1 0%, #2988a7 100%); color:#FFFFFF; border-radius:8px; transition:0.3s;}
.lx-upload-picture:hover { transform:translateY(-2px); box-shadow:0 4px 10px rgba(57,173,209,0.3);}
.lx-upload-photos,.lx-upload-files{ position:relative; width:140px;}
.lx-upload-photos input,.lx-upload-files input{ position:absolute; top:0px; left:0px; display:block; width:100%; height:100%; opacity:0.0; cursor:pointer; }
.lx-upload-photos a,.lx-upload-files a{ display:flex; align-items:center; justify-content:center; width:100%; height:40px; font-weight:600; background:#f8fafc; color:#475569; border:1px dashed #cbd5e1; border-radius:8px; transition:0.2s;}
.lx-upload-photos a:hover,.lx-upload-files a:hover { border-color:#39add1; color:#39add1; background:#f0f9ff;}

.daterangepicker{ z-index:99999 !important; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,0.1) !important; border:none !important;}

/* ORIGINAL ADVANCED SELECT / FILTER DROPDOWNS */
.lx-all-states{ position:absolute; top:-4px; left:0px; width:calc(100% - 200px); background:#FFFFFF; border:1px solid #e2e8f0; border-radius:8px; overflow:hidden; box-shadow:0 4px 10px rgba(0,0,0,0.05);}
.lx-all-states i{ position:absolute; top:0px; width:30px; height:100%; display:flex; align-items:center; justify-content:center; font-size:16px; background:#f8fafc; cursor:pointer; color:#64748b;}
.lx-all-states i.fa-caret-left{ left:0px; border-right:1px solid #e2e8f0;}
.lx-all-states i.fa-caret-right{ right:0px; border-left:1px solid #e2e8f0;}
.lx-all-states ul{ margin:0px 30px; white-space:nowrap; overflow-x:auto; scroll-behavior:smooth;}
.lx-all-states ul::-webkit-scrollbar { display:none; }
.lx-all-states ul li{ display:inline-block; border-right:1px solid #e2e8f0; }
.lx-all-states ul li a{ display:block; padding:12px 18px; color:#475569; font-weight:600; font-size:12px; text-transform:uppercase;}
.lx-all-states ul li a:hover{ background:#f1f5f9; }
.lx-all-states ul li a.active{ background:#39add1; color:#FFFFFF; }

.lx-command-history{ padding:25px; }
.lx-command-history p{ position:relative; font-weight:600; font-size:15px; line-height:24px; text-align:center; color:#1e293b;}

.lx-tickets-layouts{ text-align:center; }
.lx-print-tickets{ display:inline-flex; align-items:center; justify-content:center; flex-direction:column; width:100px; margin:10px; padding:15px 10px; background:#f8fafc; color:#475569; font-weight:600; border-radius:12px; border:2px solid #e2e8f0; transition:0.2s;}
.lx-print-tickets:hover { border-color:#39add1; color:#39add1; transform:translateY(-3px); box-shadow:0 5px 15px rgba(57,173,209,0.1); }
.lx-print-tickets span { border-color:#94a3b8 !important;}
.lx-print-tickets .lx-model1{ display:inline-block; width:50px; height:70px; margin:2px; border:2px solid; border-radius:4px;}
.lx-print-tickets .lx-model2{ display:inline-block; width:50px; height:32px; margin:2px; border:2px solid; border-radius:4px;}
.lx-print-tickets .lx-model3{ display:inline-block; width:22px; height:32px; margin:2px; border:2px solid; border-radius:4px;}
.lx-print-tickets .lx-model4{ display:inline-block; width:22px; height:13px; margin:2px; border:2px solid; border-radius:2px;}
.lx-print-tickets .lx-model5{ display:inline-block; width:22px; height:18px; margin:2px; border:2px solid; border-radius:2px;}

.lx-page-header-command h2{ float:left; margin-top:10px; }
.lx-page-header-command .lx-add-form{ float:right; }

.lx-add-other-stock{ display:inline-block; margin-top:8px; margin-left:15px; font-weight:600; color:#39add1; }
.lx-add-other-stock:hover { text-decoration:underline; }
.lx-remove-this-stock{ float:right; display:inline-block; margin-top:8px; margin-right:15px; font-weight:600; color:#ef233c; }

.lx-upload-receipt{ position:relative; width:120px; }
.lx-upload-receipt input{ position:absolute; top:0px; left:0px; z-index:2; width:100%; height:100%; opacity:0.0; cursor:pointer; }
.lx-upload-receipt a{ position:relative; z-index:1; display:block; padding:8px; font-weight:600; text-align:center; background:#39add1; color:#FFFFFF !important; border-radius:6px; transition:0.2s;}
.lx-upload-receipt a:hover { background:#2988a7;}

.lx-receipt-img{ display:block; max-width:100px; max-height:100px; margin:0px !important; margin-bottom:5px !important; cursor:zoom-in; border-radius:8px;}
.lx-add-form img{ display:block; max-width:100%; margin:auto; border-radius:8px;}

/* ADVANCED SELECTS */
.lx-advanced-select{ display:inline-block; position:relative; }
.lx-advanced-select-add{ display:block; }
.lx-advanced-select > input[readonly]{ background:#FFFFFF; cursor:pointer; }
.lx-advanced-select > i{ position:absolute; z-index:2; right:2px; top:2px; padding:12px; background:transparent; cursor:pointer; color:#94a3b8; pointer-events:none;}
.lx-advanced-select-add > i{ top:initial !important; bottom:2px !important; right:2px !important; }
.lx-advanced-select > div{ position:absolute; z-index:15; left:0px; top:100%; display:none; width:100%; min-width:250px; max-height:300px; padding:15px; background:#FFFFFF; border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.1); overflow:auto; }
.lx-advanced-select > div label{ position:relative; white-space:nowrap; display:flex; align-items:center; cursor:pointer;}
.lx-advanced-select-add > div label{ display:flex; margin:10px 0px; }

.lx-single-select div ul li{ display:block; padding:0px 10px; line-height:30px; color:#334155; border-top:1px dashed #e2e8f0; cursor:pointer; }
.lx-single-select div ul li:hover{ background:#f1f5f9; }

.lx-state-filter{ display:block; float:left; width:calc(50% - 5px); margin-left:10px; margin-bottom:15px; padding:8px; font-weight:600; text-align:center; background:#39add1; color:#FFFFFF; border-radius:6px; transition:0.2s; cursor:pointer;}
.lx-state-empty{ display:block; float:left; width:calc(50% - 5px); margin-bottom:15px; padding:8px; font-weight:600; text-align:center; background:#f1f5f9; color:#64748b; border-radius:6px; transition:0.2s; cursor:pointer;}
.lx-state-filter:hover { background:#2988a7; }
.lx-state-empty:hover { background:#e2e8f0; color:#1e293b; }

.lx-search-keyword{ position:absolute; top:0px; right:0px; padding:11px 15px; font-size:16px; height:100%; display:flex; align-items:center; background:#39add1; color:#FFFFFF; border-radius:0 8px 8px 0; transition:0.2s;}
.lx-search-keyword:hover { background:#2988a7; }
.lx-search-keyword + input{ padding-right:50px !important; }

/* MISC */
.lx-sales{ margin:15px; padding:15px; background:#fef9c3; color:#1e293b; border:1px solid #fde047; border-radius:8px; font-weight:500;}
.lx-update{ padding:20px; background:#ffffff; border:1px solid #e2e8f0; border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,0.02);}
.lx-update-details{ margin:10px 0px; padding:15px; background:#f8fafc; border-radius:8px; border:1px solid #e2e8f0;}
.lx-update a{ display:inline-flex; margin-bottom:5px; padding:10px 15px; font-weight:600; background:#39add1; color:#FFFFFF; border-radius:6px;}

.lx-start-update{ padding:40px; text-align:center; }
.lx-start-update a{ display:inline-flex; margin-top:20px; padding:12px 25px; font-weight:600; background:linear-gradient(135deg, #39add1 0%, #2988a7 100%); color:#FFFFFF; border-radius:8px; text-transform:uppercase;}
.lx-start-update pre{ margin-top:20px; color:#64748b; text-align:left; padding:20px; background:#f8fafc; border-radius:8px; overflow:auto;}
.lx-rib{ padding:15px; margin-bottom:15px; font-weight:600; font-size:14px; background:#f8fafc; border:1px dashed #cbd5e1; border-radius:8px; text-align:center; color:#1e293b;}

.lx-delete-box{ text-align:center; padding:20px;}
.lx-delete-box p{ margin-bottom:25px; font-size:18px; font-weight:600; color:#1e293b;}
.lx-delete-box a{ display:inline-block; margin:0 5px; padding:12px 30px; font-weight:600; border-radius:8px; transition:0.2s;}
.lx-delete-box a.lx-delete-record { background:#ef233c; color:#fff; box-shadow:0 4px 10px rgba(239,35,60,0.3);}
.lx-delete-box a.lx-delete-record:hover { background:#d90429; transform:translateY(-2px);}
.lx-delete-box a.lx-cancel-delete { background:#f1f5f9; color:#475569; }
.lx-delete-box a.lx-cancel-delete:hover { background:#e2e8f0; color:#1e293b; }

.lx-details-products ul{ margin:0px 15px; }
.lx-details-products ul li{ clear:both; padding:15px; background:#f8fafc; border-bottom:2px solid #FFFFFF; border-radius:8px; margin-bottom:5px; font-weight:500;}
.lx-details-products ul li:first-child{ margin-top:15px; }
.lx-details-products ul li a{ float:right; }
.lx-details-products ul li a i{ display:inline-block; padding:6px; font-size:14px; background:#ef233c; color:#fff; border-radius:50%; transition:0.2s;}
.lx-details-products ul li a i:hover { transform:scale(1.1); }

.lx-phone-layouts { display:flex; justify-content:center; gap:20px; padding:20px; }
.lx-phone-layouts a { display:flex; align-items:center; justify-content:center; width:80px; height:80px; background:#f8fafc; border-radius:20px; transition:0.3s; box-shadow:0 4px 15px rgba(0,0,0,0.05); }
.lx-phone-layouts a:hover { transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,0.1); background:#fff;}
.lx-phone-layouts img { width:40px; }

.lx-autocomplete-advanced{ position:absolute; z-index:15; display:none; width:100%; max-height:300px; background:#FFFFFF; box-shadow:0 10px 25px rgba(0,0,0,0.1); border-radius:8px; border:1px solid #e2e8f0; overflow:auto; }
.lx-autocomplete-advanced span{ display:block; padding:10px 15px; line-height:20px; border-bottom:1px solid #f1f5f9; cursor:pointer; color:#334155;}
.lx-autocomplete-advanced span:hover{ background:#f8fafc; color:#39add1;}
.todropdown{ display:none; }
.todropdowninput{ cursor:pointer; }


/* ========================================================
   POPUP MODIFIER ÉTAT FIX (PILL SHAPES & SPACING)
   ======================================================== */
.lx-coli-state-delivarymen, 
.lx-coli-state-confirmation {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 4px !important;
    padding: 8px 14px !important;
    border-radius: 20px !important; /* Makes them pill-shaped */
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    transition: all 0.2s ease !important;
    line-height: 1.2 !important;
    white-space: nowrap !important; /* Prevents wrapping mid-text */
    cursor: pointer;
}

.lx-coli-state-delivarymen:hover, 
.lx-coli-state-confirmation:hover {
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 5px 12px rgba(0,0,0,0.2) !important;
    filter: brightness(1.1) !important; /* Automatically brightens dynamic color */
}

/* Ensure the popup container has room for the tags */
.lx-popup .lx-textfield {
    line-height: 2 !important; 
}
```