html,
body,
.webix_view,
.webix_el_box,
.webix_template,
.webix_list_item,
.webix_button{
	/*font-family:Arial, sans-serif !important;*/
	font-family:'Inter', sans-serif !important;
}


html,
body{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	overflow:hidden;
	background:#f5f7fb;
}

body{
	position:fixed;
	inset:0;
}

#crm_app{
	position:fixed;
	inset:0;

	width:100vw;
	height:100vh;

	overflow:hidden;
}

/* SIDEBAR */

.crm-sidebar-panel{
	position:relative;

	background:#ffffff;

	transition:width .2s ease;
}

.crm-sidebar-panel::after{
	content:"";

	position:absolute;

	top:0;
	right:0;

	width:1px;
	height:100%;

	background:#dfe3ea;

	z-index:10;
}


/* TOPBAR */

.crm-topbar{
	background:#ffffff;

	border:none !important;

	box-shadow:none !important;

	box-sizing:border-box;
}

/* ROUTER AREA */

.crm-router-area{
	background:#f5f7fb;
}

/* MENU BUTTON */

.crm-menu-button{
	background:transparent;
}

.crm-menu-icon{
	width:40px;
	height:40px;

	margin:auto;

	display:flex;
	align-items:center;
	justify-content:center;

	border-radius:10px;

	cursor:pointer;

	font-size:18px;
	color:#374151;

	line-height:1;

	transition:all .15s ease;
}

.crm-menu-icon:hover{
	background:#f3f4f6;
}

.crm-menu-icon i{
	width:20px;
	height:20px;

	display:flex;
	align-items:center;
	justify-content:center;
}

/* LOGO */

.crm-sidebar-logo{
	background:#ffffff;

	border:none !important;

	box-shadow:none !important;

	box-sizing:border-box;
}

.crm-sidebar-logo,
.crm-topbar{
	height:60px !important;
	min-height:60px !important;
	max-height:60px !important;
}

.crm-sidebar-logo .webix_template{
	padding:0 !important;
	margin:0 !important;

	background:#ffffff;
}

.crm-logo-wrap{
	height:60px;

	display:flex;
	align-items:center;
	justify-content:center;

	gap:14px;

	padding:0 18px;

	box-sizing:border-box;

	overflow:hidden;

	position:relative;
	top:-1px;
}

.crm-logo-icon{
	width:40px;
	height:40px;

	min-width:40px;

	border-radius:12px;

	background:#111827;
	color:#ffffff;

	display:flex;
	align-items:center;
	justify-content:center;

	font-size:16px;

	box-shadow:
		0 4px 12px rgba(17,24,39,.15);
}

.crm-logo-text{
	font-size:18px;
	font-weight:700;

	letter-spacing:-0.3px;

	color:#111827;

	white-space:nowrap;
}

.crm-topbar,
.crm-sidebar-logo{
	position:relative;
}

.crm-topbar::after,
.crm-sidebar-logo::after{
	content:"";

	position:absolute;

	left:0;
	right:0;
	bottom:0;

	height:1px;

	background:#e5e7eb;
}

/* SIDEBAR MENU */

.crm-sidebar-menu{
	background:transparent;

	padding:8px 8px;
}

.crm-sidebar-menu .webix_scroll_cont{
	height:auto !important;
}

.crm-sidebar-menu .webix_list_item{
	position:relative;

	padding:0 !important;

	border:none !important;

	background:transparent !important;
}

.crm-sidebar-menu .webix_list_item.webix_selected{
	border-left:none !important;
	box-shadow:none !important;
	background:transparent !important;
}

.crm-sidebar-menu .webix_list_item.webix_selected:before,
.crm-sidebar-menu .webix_list_item.webix_selected:after{
	display:none !important;
	content:none !important;
}

.crm-menu-item{
	height:40px;

	display:flex;
	align-items:center;

	gap:12px;

	padding:0 14px;

	border-radius:10px;

	box-sizing:border-box;

	overflow:hidden;

	color:#374151;

	transition:all .15s ease;
}

.crm-menu-item:hover{
	background:#f3f4f6;
}

.crm-menu-item-icon{
	width:18px;
	height:18px;

	min-width:18px;

	display:flex;
	align-items:center;
	justify-content:center;

	font-size:15px;
}

.crm-menu-item-text{
	font-size:14px;
	font-weight:500;

	white-space:nowrap;
}

.webix_selected .crm-menu-item{
	background:#111827;
	color:#ffffff;
}

/* USER BLOCK */

.crm-fixed-user{
	position:fixed;

	left:0;
	bottom:0;

	width:260px;
	height:52px;

	z-index:100;

	display:flex;
	align-items:center;

	gap:10px;

	padding:0 14px;

	box-sizing:border-box;

	background:#ffffff;

	border-top:1px solid #eef0f4;
	border-right:1px solid #e5e7eb;

	overflow:hidden;

	transition:width .2s ease;
}

.crm-user-avatar{
	width:30px;
	height:30px;

	min-width:30px;

	border-radius:50%;

	background:#111827;
	color:#ffffff;

	display:flex;
	align-items:center;
	justify-content:center;

	font-size:12px;
	font-weight:600;

	line-height:30px;
}

.crm-user-info{
	overflow:hidden;
}

.crm-user-name{
	font-size:13px;
	font-weight:600;

	color:#111827;

	line-height:16px;

	white-space:nowrap;
}

.crm-user-role{
	font-size:11px;

	color:#6b7280;

	line-height:14px;

	white-space:nowrap;
}

/* COLLAPSED SIDEBAR */

.crm-sidebar-collapsed .crm-logo-text,
.crm-sidebar-collapsed .crm-menu-item-text,
.crm-sidebar-collapsed .crm-fixed-user .crm-user-info{
	display:none;
}

.crm-sidebar-collapsed .crm-logo-wrap,
.crm-sidebar-collapsed .crm-user-box{
	justify-content:center;

	padding-left:0;
	padding-right:0;
}

.crm-sidebar-collapsed .crm-sidebar-menu{
	padding-left:8px;
	padding-right:8px;
}

.crm-sidebar-collapsed .crm-menu-item{
	width:40px;
	height:40px;

	margin:0 auto;

	padding:0;

	justify-content:center;
}

.crm-sidebar-collapsed .crm-fixed-user{
	width:72px;

	justify-content:center;

	padding-left:0;
	padding-right:0;
}

/* TOOLTIP */

.webix_tooltip{
	background:#111827 !important;
	color:#ffffff !important;

	border:none !important;

	border-radius:8px !important;

	font-size:12px !important;

	padding:8px 10px !important;

	box-shadow:
		0 10px 25px rgba(0,0,0,.15) !important;
}

/* VIEWS PAGE */

.crm-page{
	padding:24px;
	font-size:24px;
	font-weight:600;
	color:#111827;
}

/* ФОРМА АВТОРИЗАЦИИ */

.crm-login-page{
	background:#f5f7fb;
}

.crm-login-card{
	background:#ffffff;
	border:1px solid #e5e7eb;
	border-radius:18px;
	box-shadow:0 20px 50px rgba(15,23,42,.08);
	padding:24px;
	box-sizing:border-box;
	width:auto !important;
}

.crm-login-title{
	font-size:24px;
	font-weight:700;
	color:#111827;
	text-align:center;
}

body.crm-login-mode .crm-fixed-user{
	display:none !important;
}


/* ФОРМА АВТОРИЗАЦИИ */

.crm-login-html-wrap{
	width:100%;
	height:100%;

	display:flex;
	align-items:center;
	justify-content:center;

	background:#f5f7fb;
	box-sizing:border-box;
}

.crm-login-html-card{
	width:420px;
	height:290px;

	padding:28px 32px 32px;

	background:#ffffff;

	border-radius:14px;
	box-shadow:0 8px 30px rgba(15, 23, 42, 0.08);

	box-sizing:border-box;
}

.crm-login-field{
	display:block;
	margin-bottom:16px;
}

.crm-login-field span{
	display:block;

	margin-bottom:6px;

	font-size:13px;
	font-weight:500;
	color:#374151;
}

.crm-login-field input{
	width:100%;
	height:38px;

	padding:0 12px;

	border:1px solid #d1d5db;
	border-radius:8px;

	font-size:14px;
	font-family:Inter, Arial, sans-serif;

	box-sizing:border-box;
	outline:none;
}

.crm-login-field input:focus{
	border-color:#2563eb;
	box-shadow:0 0 0 3px rgba(37, 99, 235, 0.12);
}

.crm-login-button{
	width:100%;
	height:38px;

	margin-top:16px;

	border:none;
	border-radius:8px;

	background:#2563eb;
	color:#ffffff;

	font-size:14px;
	font-weight:600;
	font-family:Inter, Arial, sans-serif;

	cursor:pointer;
}

.crm-login-button:hover{
	background:#1d4ed8;
}