html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	background: transparent;
}
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
strong {
	font-weight: 600;
}

*, *:after, *:before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

:root {
	--slate-900: #0F172A;
	--slate-700: #334155;
	--slate-500: #64748B;
	--slate-400: #94A3B8;
	--slate-300: #CBD5E1;
	--slate-200: #E2E8F0;
	--slate-100: #F1F5F9;
	
	--red-500: #EF4444;
	--red-600: #DC2626;
	--red-400: #F87171;
	
	--sky-600: #0284C7;
	--brand: #0284C7;
	--sky-700: #0369A1;
	
	--emerald-600: #059669;
	--orange-400: #FB923C;
	--yellow-400: #FACC15;
	--black: #000;
	--white: #FFFFFF;
	--overlay: #64748B20;
	
	--gap-xs: 6px;
	--gap-s: 12px;
	--gap-m: 18px;
	--gap-l: 24px;
	--form-title-space: 96px;
	--form-width: 480px;
	--desktop-w: 1600px;
}

::selection {
	background: var(--brand);
	color: var(--white);
	text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
}

::-moz-selection {
	background: var(--brand);
	color: var(--white);
	text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar {
	width: 14px;
	height: 14px;
	background: var(--white);
}

::-webkit-scrollbar-thumb {
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 9999px;
  background-color: var(--brand);
}

::-webkit-scrollbar-track-piece {
	background: transparent;
}


html, body {
	width: 100%;
	min-height: 100%;
	background: var(--slate-100, #F1F5F9);
	-webkit-text-size-adjust: none;
}

html, body, textarea, input, button, select {
	font-size: 14px;
	font-family: 'Inter', sans-serif;
	color: var(--slate-500, #0F172A);
	outline: 0px;
}

input[type=text], input[type=email], input[type=search], input[type=submit], textarea{
	-webkit-appearance: none;
} 

body {
	-webkit-overflow-scrolling: touch;
	min-height: 100vh;
	overflow: overlay;
}

ul { 
	padding-left: 40px; 
	list-style: disc outside;
	margin-top: 1em;
	margin-bottom: 1em;
}

ol { 
	padding-left: 40px;
	list-style: decimal outside;
	margin-top: 1em;
	margin-bottom: 1em;
}

img {
	max-width: 100%;
	height: auto;
	border: 0px;
	vertical-align: bottom;
}

img:not([width]) {
	width: initial;
}

a {
	color: var(--sky-600, #0284C7);
	text-decoration: none;
}

@media(hover) {
	a:hover, .link:hover {
		color: var(--slate-900, #0F172A);
	}
}

ul.noli, ul.noli ul, ul.noli li {
	display: block;
	margin: 0px;
	padding: 0px;
	list-style: none;
}

p {
	display: block;
	position: relative;
	margin: 0 0 var(--gap-xs);
}

p:last-child {
	margin: 0;
}


h1, h2, h3, h4 {
	display: block;
	font-weight: normal;
	margin: 0px 0px 30px 0px;
}

h1 {
	font-size: 24px;
}

h2 {
	font-size: 20px;
}

h3 {
	font-size: 18px;
}

h4 {
	font-size: 16px;
}

.systemInfo {
	display: block;
	position: relative;
	padding: 25px;
	background: #d9f2ff;
	border: 1px solid #69c7fa;
	font-size: 16px;
	letter-spacing: 0.25px;
	color: #000;
	border-radius: 10px;
}

.systemInfo p {
	display: block;
	margin: 0 0 15px;
}

.systemInfo p:last-child {
	margin: 0;
}

.systemInfo.error {
	background: rgb(239 101 101 / 19%);
	border-color: var(--error);
	color: var(--error);
	width: 100%;
	border-radius: 10px;
}

.max {
	display: block;
	position: relative;
	margin: 0px auto;
	/* max-width: 1920px; */
	width: calc(100% - 36px);
}
/********************************************** END Общий стиль ***************************************************/














/********************************************** Default кнопки и формы ***************************************************/
.cui:not([type="checkbox"]):not([type="radio"]) {
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	height: 40px;
	padding: 8px 8px 8px var(--gap-s, 12px);
	border-radius: 6px;
	border: 1px solid var(--slate-300, #CBD5E1);
	background: var(--white, #FFF);
	color: var(--slate-900, #0F172A);
	font-style: normal;
	width: 100%;
}

.cui:not([type="checkbox"]):not([type="radio"]).error {
	border: 1px solid var(--red-600, #DC2626);
}

.cui:not([type="checkbox"]):not([type="radio"])::placeholder {
	color: var(--slate-400, #94A3B8);
	/* font-style: italic; */
}

.cui:not([type="checkbox"]):not([type="radio"])[readonly]:not(.airpicker) {
	filter: opacity(0.5);
	cursor: default;
	pointer-events: none;
}

.formItem {
	display: flex;
	margin: 0 0 18px;
	position: relative;
	flex-wrap: wrap;
}

.formItem> label {
	display: flex;
	align-items: center;
	width: 88px;
	margin: 0 8px 0 0;
	color: var(--slate-900, #0F172A);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 20px;
	height: 40px;
}

.formItem> .cui:not([type="checkbox"]):not([type="radio"]), .formItem> .cui:not([type="checkbox"]):not([type="radio"]), .formItem> .inputHiddenText {
	width: calc(100% - 96px);
	position: relative;
}

.formItem> .cui:not([type="checkbox"]):not([type="radio"]).w100, .formItem> .cui:not([type="checkbox"]):not([type="radio"]).w100, .formItem> .inputHiddenText.w100 {
	width: 100%;
}

.inputHiddenText> .cui {
	width: 100%;
	padding-right: 36px;
}

.inputHiddenText> span[data-enity="inputHiddenText"], .inputHiddenText> span[data-enity="inputSuccessText"] {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 40px;
	cursor: pointer;
}

.inputHiddenText> span[data-enity="inputHiddenText"]> i, .inputHiddenText> span[data-enity="inputSuccessText"]> i {
	position: absolute;
	display: none;
	align-items: center;
	justify-content: center;
}

.inputHiddenText> span[data-enity="inputHiddenText"]:not(.active)> i:first-child {
	display: flex;
}

.inputHiddenText> span[data-enity="inputHiddenText"].active> i:last-child {
	display: flex;
}

.inputHiddenText> span[data-enity="inputSuccessText"]> i {
	display: flex;
}

.inputHiddenText> span[data-enity="inputSuccessText"] {
	pointer-events: none;
	transition: all 0.15s;
	filter: opacity(0);
}

.inputHiddenText.success> span[data-enity="inputSuccessText"] {
	filter: opacity(1);
}


.formItem.a-right {
	justify-content: flex-end;
}

.formItem.a-center {
	justify-content: center;
}

.formItem a[data-enity="lostpassword"] {
	color: var(--sky-600, #0284C7);
	font-size: 16px;
	font-style: normal;
}

.formItem a[data-enity="lostpassword"].disabled {
	filter: opacity(0.5);
	cursor: default;
}

.formItem a[data-enity="lostpassword"]:hover {
	color: var(--slate-900);
}

.formItem.submit {
	justify-content: center;
	gap: 12px;
}

.formItem:last-child {
	margin: 0;
}

.formItem .formItemError {
	display: block;
	margin: 6px 0 0;
	color: var(--red-600, #DC2626);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; /* 142.857% */
}

.formItem> .cui:not([type="checkbox"]):not([type="radio"]) + .formItemError, .formItem> .cui:not([type="radio"]):not([type="checkbox"]) + .formItemError, .formItem> .inputHiddenText + .formItemError {
	width: calc(100% - 96px);
	margin-left: 96px;
}

.formItem .formItemError.aleft {
	margin-left: 0;
	width: 100%;
}

.formHr {
	display: flex;
	width: 100%;
	height: 1px;
	background: #E2E8F0;
	margin: 0px 0px 18px;
}

.btn, a.btn {
	display: inline-flex;
	align-items: center;
	position: relative;
	padding: 8px 16px;
	border: 0;
	cursor: pointer;
	gap: 10px;
	border-radius: 6px;
	background: var(--sky-600, #0284C7);
	height: 40px;
	color: var(--white, #FFF);
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	transition: all 0.1s;
}

.btn:hover, a.btn:hover {
	background: var(--sky-700, #0369A1);
}

.btn.red, a.btn.red {
	background: var(--red-500, #EF4444);
}

.btn.red:hover, a.btn.red:hover {
	background: var(--red-600, #DC2626);
}

.btn.gray, a.btn.gray {
	background: var(--slate-300, #CBD5E1);
	color: var(--slate-900, #0F172A);
}

.btn.gray:hover, a.btn.gray:hover {
	background: var(--slate-400, #CBD5E1);
}

.btn.ghost, a.btn.ghost {
	background: rgba(255, 255, 255, 0.00);
	color: var(--slate-900, #0F172A);
}

.btn.ghost:hover, a.btn.ghost:hover {
	background: var(--slate-100, #F1F5F9);
}

.btn.gray_dark, a.btn.gray_dark {
	background: var(--slate-700);
}

.btn.gray_dark:hover, a.btn.gray_dark:hover {
	background: var(--slate-900);
}

.btn.dark, a.btn.dark {
	background: var(--slate-900);
}

.btn.dark:hover, a.btn.dark:hover {
	background: var(--slate-700);
}

.btn.loading, a.btn.loading {
	background: rgba(15, 23, 42, 0.50);
	cursor: default;
}

.btn:disabled, a.btn:disabled {
	cursor: no-drop;
	filter: opacity(0.5);
	pointer-events: none;
}

.btn.ico {
	min-width: 40px;
	padding: 0;
	align-items: CENTER;

	justify-content: center;
}

.btn.ico2 {
	padding: 0;
	align-items: CENTER;
	justify-content: center;
	filter: opacity(0.5);
	background: transparent;
}

@media(hover) {
	.btn.ico2:hover {
		filter: opacity(1);
	}
}

.btn.hidden {
	display: none;
}

.fw500 {
	font-weight: 500 !important;
}

.notificationsSettings form.content {
	color: var(--slate-900, #0F172A);
}

.notificationsSettings .formItemInfo {
	color: var(--slate-900, #0F172A);
}

.inputCheckbox {
	display: BLOCK;
	position: relative;
}

.inputCheckbox> label {
	display: block;
	position: relative;
	cursor: pointer;
}

.inputCheckbox> label> input {
	display: none;
}

.inputCheckbox> label> span {
	display: block;
	position: relative;
	font-size: 16px;
	padding: 0 0 0 28px;
}

.inputCheckbox> label:not(.slide)> span::before, .inputCheckbox> label:not(.slide)> span::after {
	content: '';
	display: block;
	width: 20px;
	height: 20px;
	border: 1px solid #CBD5E1;
	border-radius: 3px;
	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.15s;
	background: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px;
}

.inputCheckbox> label:not(.slide)> span::after {
	border: 0;
	filter: opacity(0);
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IlByb3BlcnR5IDE9Y2hlY2siPgo8cGF0aCBpZD0iVmVjdG9yIiBkPSJNNiAxMkwxMC4yNDMgMTYuMjQzTDE4LjcyNyA3Ljc1NyIgc3Ryb2tlPSIjMEYxNzJBIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+Cjwvc3ZnPgo=);
	width: 18px;
	height: 18px;
	top: 1px;
	left: 1px;
}

.inputCheckbox> label:not(.slide)> input:checked + span::after {
	filter: opacity(1);
}

.inputCheckbox> label.slide> span {
	padding: 0 0 0 52px;
}

.inputCheckbox> label.slide> i {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 44px;
	height: 22px;
	background: #E2E8F0;
	border-radius: 100px;
	transition: all 0.3s;
}

.inputCheckbox> label.slide> i::before {
	content: '';
	display: block;
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 100%;
	transition: all 0.3s cubic-bezier(0.67, 0.03, 0.04, 1);
	will-change: transform;
}

.inputCheckbox> label.slide> input:checked + i {
	background: var(--slate-300);
}

/* Фикс для блока уведомлений */
.inputCheckbox> label.slide.dark> input:checked + i {
	background: var(--slate-900);
}

.inputCheckbox> label.slide> input:checked + i::before {
	transform: translate(22px, 0);
}

.inputCheckbox> label> input:disabled + span::before, .inputCheckbox> label> input:disabled + span::after {
	background-color: #E2E8F0;
}

.inputCheckbox> label> input:disabled + span::after {
	filter: opacity(0.5) !important;
}

.inputCheckbox> label> input:disabled + span {
	cursor: default;
}

textarea.cui {
	min-height: 80px;
}

label.input-file {
	display: flex;
	gap: 10px;
	align-items: CENTER;
	color: var(--slate-900);
	font-size: 13px;
	font-weight: 500;
}

label.input-file> input {
	display: none;
}
/********************************************** END Default кнопки и формы ***************************************************/


















/********************************************** Header ***************************************************/
#header {
	display: block;
	position: relative;
	height: 66px;
	z-index: 100;
	background: var(--sky-600, #0284C7);
}

#header .max {
	height: 100%;
}

.header {
	display: flex;
	align-items: center;
	height: 100%;
	justify-content: space-between;
}

.header> a.logo {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin: 0;
	gap: 12px;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	color: #fff;
}

.header> a.logo> span {
	padding: 2px 0 0;
}

.header> .nav {
	display: flex;
	position: relative;
	height: 100%;
}

.header>  a.user {
	position: relative;
}

.header> .nav> nav.navigation {
	display: flex;
	position: RELATIVE;
}

.header> .nav> nav.navigation> ul.noli {
	display: flex;
	position: relative;
	gap: var(--gap-m, 18px);
	margin: 0 var(--gap-m, 18px) 0 0;
}

.header> .nav> nav.navigation> ul.noli> li {
	display: flex;
	position: relative;
}

.header> .nav> nav.navigation> ul.noli> li> a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	position: relative;
	transition: all 0.1s;
}

.header> .nav> nav.navigation> ul.noli> li> a.active, .header> .nav> nav.navigation> ul.noli> li> a:hover {
	background: rgba(255, 255, 255, 0.10);
}

.header> .nav>  nav.userdrop {
	display: flex;
	position: relative;
	align-items: center;
}

.header> .nav> nav.userdrop> a {
	display: flex;
	color: #fff;
	display: flex;
	align-items: center;
	height: 48px;
	padding: 0 0 0 24px;
	border-left: 1px solid rgba(255, 255, 255, 0.30);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	gap: 12px;
}

.header> .nav> nav.userdrop> a> .ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	position: relative;
	overflow: hidden;
	border-radius: 100%;
	background: var(--slate-200, #E2E8F0);
}

.header> .nav> nav.userdrop> a> .ico> svg, .header> .nav> nav.userdrop> a> .ico> img {
	position: absolute;
	height: auto;
	max-width: 100%;
}

.dropdown {
	display: none;
	position: absolute;
	top: calc(100% + -8px);
	right: 0;
	z-index: 100;
}

/* Корректировка пложения dropdown */
.messagesList:has(.messageItem + .messageItem)> .messageItem:last-of-type .dropdown {
	top: initial;
	bottom: calc(100% - 2px);
}



.dropdown> .content {
	border-radius: var(--gap-xs, 6px);
	background: #FFF;
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
	padding: var(--gap-m, 18px);
	display: flex;
	flex-direction: COLUMN;
}

.dropdown.userprofile {
	min-width: 360px;
}

.userprofile .conHeader {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	position: relative;
	margin: 0 0 18px;
}

.userprofile .conHeader> a.unlogin {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background: var(--slate-300, #CBD5E1);
	transition: all 0.1s;
}

.userprofile .conHeader> .ico {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.userprofile .conHeader> .ico> .image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	position: relative;
	overflow: hidden;
	border-radius: 100%;
	background: var(--slate-200, #E2E8F0);
}

.userprofile .conHeader> .ico> a.changePhotoLink {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	right: 0;
	width: 32px;
	height: 32px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 100%;
	filter: opacity(0);
	transition: all 0.15s;
}

.userprofile .conHeader> .ico:hover> a.changePhotoLink {
	filter: opacity(1);
}

.header> .nav> nav.userdrop> a> .ico> svg, .header> .nav> nav.userdrop> a> .ico> img {
	position: absolute;
	height: auto;
	max-width: 100%;
}

.userprofile .conHeader> .lostsession {
	display: flex;
	min-width: 60px;
	justify-content: flex-end;
	color: var(--slate-400, #94A3B8);
	font-size: 14px;
	margin-left: -20px;
}

.upItems {
	display: flex;
	flex-direction: column;
	position: relative;
	gap: 6px;
}

.upItems> .item {
	display: flex;
	flex-direction: column;
	position: relative;
}

.upItems> .item> .hide {
	display: none;
}

.upItems> .item> .show {
	display: flex;
	min-height: 40px;
	align-items: CENTER;
	justify-content: space-between;
	position: relative;
	color: var(--slate-900, #0F172A);
	font-size: 16px;
}

.upItems> .item> .show> a {
	position: relative;
	bottom: -3px;
}

.upItems> .item> .show> a path {
	transition: All 0.15s;
}

.upItems> .item> .show> a:hover path {
	fill: var(--slate-400);
}

.userprofile .conHeader> a.unlogin:hover {
	background: var(--slate-200);
}

.inputsFlex {
	display: flex;
	gap: 10px;
	max-width: calc(360px - 18px - 18px);
}

.upItems .btn {
	min-width: 40px;
	height: 40px;
	padding: 0;
	align-items: CENTER;
	justify-content: center;
}

.errorblock {
	display: none;
	margin: 6px 0 0;
	font-size: 14px;
	color: var(--red-600, #DC2626);
}

.infoMessagesBlock {
	display: FLEX;
	flex-direction: COLUMN;
	position: fixed;
	z-index: 9999999 !important;
	bottom: 15px;
	left: calc(50% - 475px/2);
	width: 475px;
	max-height: calc(100vh - 90px);
	gap: 12px;
	transition: all 0.5s;
}

.infoMessagesBlock> .message {
	animation: 0.5s fadeInUp 0s forwards;
	opacity: 0;
	border-radius: 6px;
	background: #FFF;
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
	padding: 12px 42px 12px 20px;
	display: block;
	position: relative;
	color: var(--slate-900, #0F172A);
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; /* 142.857% */
	transition: all 0.5s;
	will-change: transform;
	overflow: hidden;
}

.infoMessagesBlock> .message> a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	position: absolute;
	top: 9px;
	right: 11px;
	transition: all 0.1s;
}

.infoMessagesBlock> .message> a:hover {
	filter: opacity(0.5);
}

.infoMessagesBlock> .message::before {
	content: '';
	display: block;
	width: 8px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: var(--sky-600, #0284C7);
}

.infoMessagesBlock> .message.success::before {
	background: var(--emerald-600, #059669);
}

.infoMessagesBlock> .message.error::before {
	background: var(--red-600, #DC2626);
}

.userDataCheckPhone, .userDataCheckEmail {
	display: none;
	margin: 6px 0 0;
	color: var(--slate-500, #64748B);
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; /* 142.857% */
}

.userprofile .conFooter {
	display: flex;
	justify-content: space-between;
	margin: 18px 0 0;
}

.userprofile .conFooter .btn {
	height: 40px;
}

.errorblock[style="display: block;"] + .userDataCheckEmail > p.resultsSendCode> span.color-red, .errorblock[style="display: block;"] + .userDataCheckPhone > p.resultsSendCode> span.color-red {
	display: block;
	border-top: 1px solid #ffecec;
	padding-top: 8px;
	margin-top: 12px;
}




.photoArea {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	margin: 0 0 24px;
}

.photoArea> .photoEmpty, .photoArea> .userPhoto {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 96px;
	height: 96px;
	border-radius: 100%;
}

.photoArea> .photoEmpty {
	background: var(--slate-200, #E2E8F0);
}

.photoArea> .userPhoto> .image {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	overflow: hidden;
	position: relative;
}

.photoArea> .userPhoto> .image img {
	position: absolute;
}

.photoArea> .userPhoto> a.remove {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	right: 0;
	width: 32px;
	height: 32px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 100%;
}

.photoArea> .userPhoto> .image img {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	object-fit: cover;
	width: 0;
	min-width: 100%;
	min-height: 100%;
}
/********************************************** END Header ***************************************************/




















/********************************************** Notifications ***************************************************/
.notiPageMessage {
	display: block;
	overflow-wrap: anywhere;
}

.dropdown.notifications {
	min-width: 484px;
	width: 484px;
}

.dropdown.notifications.isempty {
	min-width: 346px;
	width: 346px;
}

i.noti {
	display: block;
	position: absolute;
	width: 10px;
	height: 10px;
	background: var(--red-600);
	border-radius: 100%;
	margin: -16px -12px 0 0;
	box-shadow: 0px 0px 0px 1px #fff;
}

a[data-getstatus="newmessages"] i.noti {
	margin: -20px -21px 0 0;
}

.notifications .conHeader {
	display: flex;
	align-items: center;
	margin: -6px -18px 12px;
	padding: 6px 24px 12px;
	border-bottom: 1px solid var(--slate-300, #CBD5E1);
}

.notifications .conHeader> b {
	display: block;
	flex-grow: 1;
	position: relative;
	color: var(--slate-900, #0F172A);
	font-family: Inter;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
}

.notifications .conHeader> a[data-enity="confirmNotificationAll"] {
	display: block;
	padding: 0 10px;
}

.notifications .conHeader> a.openModal {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.notifications .conBottom {
	display: flex;
	align-items: center;
	margin: 12px -18px -6px;
	padding: 12px 24px 6px;
	border-top: 1px solid var(--slate-300, #CBD5E1);
}


.notiList {
	display: FLEX;
	flex-direction: column;
	position: relative;
	max-height: 336px;
	overflow-x: hidden;
	overflow-y: overlay;
	margin-right: -8px;
	padding-right: 8px;
	margin-left: -10px;
}

.notiList::-webkit-scrollbar {
	border-radius: 6px;
	background: var(--slate-300, #CBD5E1);
	width: 6px
}

.notiList::-webkit-scrollbar-thumb {
	border: 4px solid rgba(0, 0, 0, 0);
	border-radius: 8px;
	background: var(--slate-400, #94A3B8);
}

.notiList> .item {
	border-bottom: 1px solid var(--slate-300, #CBD5E1);
	display: flex;
	flex-wrap: wrap;
	position: relative;
	padding: var(--gap-xs, 6px);
	gap: 10px;
	background: var(--slate-100, #F1F5F9);
	padding-left: 10px;
	color: var(--slate-900, #0F172A);
	line-height: 20px;
}

.notiList> .item.viewed {
	background: #fff;
}

.notiList> .item> .itemContent {
	display: FLEX;
	gap: 10px;
	width: 100%;
}

.notiList> .item> .itemContent> .message {
	flex-grow: 1;
	display: block;
	align-items: center;
	min-height: 40px;
	width: 100%;
	overflow-wrap: anywhere;
}

.notiList> .item> .itemContent> .datetime {
	width: 90px;
	min-width: 90px;
	text-align: right;
	display: FLEX;
	flex-direction: column;
	color: var(--slate-400);
}

.itemAction {
	display: block;
	width: 100%;
	font-weight: 500;
}

.itemAction> form {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.itemAction> form> .inputsFlex {
	max-width: 100%;
}

.itemAction> form>  .errorblock {
	margin: 0;
}

.itemAction> .action_result {
	margin-bottom: 2px;
}

.notiList> .item:last-child {
	border: 0;
	margin: 0;
	padding-bottom: 0;
}

.notiPageMessage + .itemAction {
	max-width: 460px;
	margin: 12px 0 0;
	background: #fff;
	border-radius: 6px;
	padding: 12px;
}
/********************************************** END Notifications ***************************************************/




















/************************************************** Modal ************************************************/
#modal {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	backdrop-filter: blur(3px);
	background: rgb(0 0 0 / 32%);
	z-index: 9999998;
}

.modal {
	display: flex;
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 50px 0;
	max-height: 100vh;
	overflow-y: overlay;
	align-items: baseline;
	justify-content: center;
	-webkit-overflow-scrolling: touch;
}

.modalContent {
	display: flex;
	width: calc(100% - 40px);
	max-width: 480px;
	background: #fff;
	margin: auto;
	flex-direction: column;
	position: relative;
	padding: 18px;
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
	border-radius: 6px;
}

.modalContent> a.modalClose, .modalRightContent> a.modalRightClose {
	display: flex;
	align-items: center;
	justify-content: CENTER;
	position: absolute;
	top: 18px;
	right: 18px;
	width: 40px;
	height: 40px;
	transition: all 0.1s;
	z-index: 1;
}

@media(hover) {
	.modalContent> a.modalClose:hover, .modalRightContent> a.modalRightClose:hover {
		filter: opacity(0.5);
	}
}

.modalContent> .title, .modalRightContent> .title {
	display: BLOCK;
	position: relative;
	margin: 0 0 8px;
	display: flex;
	align-items: CENTER;
	min-height: 46px;
	padding-right: 40px;
}

.modalContent> .title> h3, .modalRightContent> .title> h3 {
	color: var(--slate-900, #0F172A);
	font-family: Inter;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	margin: 0;
	max-height: 46px;
	overflow: hidden;
}

.modalContent> .content, .modalRightContent> .content {
	display: block;
	position: relative;
	margin: 0 0 18px;
}

.modalContent> .content:last-child, .modalRightContent> .content:last-child {
	margin: 0;
}

.modalContent> .content> .modalInfo, .modalRightContent> .content> .modalInfo {
	display: block;
	position: relative;
	color: var(--slate-900, #0F172A);
	font-family: Inter;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px; /* 150% */
}

.modalContent> .m_buttons, .modalRightContent> .m_buttons {
	display: flex;
	position: RELATIVE;
}

.jc-center {
	justify-content: center !important;
}

.jc-end {
	justify-content: flex-end !important;
}

.jc-start {
	justify-content: flex-start !important;
}

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

.changePassword .formItemInfo {
	color: var(--slate-900, #0F172A);
	margin: 0 0 8px;
}
/************************************************** END Modal ************************************************/









/************************************************** Modal Right ************************************************/
#modalRight {
	display: none;
	position: fixed;
	left: 0;
	top: 66px;
	width: 100%;
	height: calc(100% - 66px);
	backdrop-filter: blur(3px);
	background: rgb(0 0 0 / 32%);
	z-index: 99999;
	background: var(--overlay, rgba(100, 116, 139, 0.20));
}

.modalRight {
	display: flex;
	position: absolute;
	width: 100%;
	height: 100%;
	max-height: 100vh;
	overflow-y: overlay;
	align-items: baseline;
	justify-content: flex-end;
	-webkit-overflow-scrolling: touch;
	overflow: hidden;
}

.modalRightContent {
	display: flex;
	width: calc(100% - 40px);
	max-width: 480px;
	background: #fff;
	flex-direction: column;
	position: relative;
	padding: 18px;
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
	border-radius: 0;
	height: 100%;
	will-change: transform;
	transform: translate(100%, 0px););););
	transition: transform 0.3s;
}

.modalRight.active .modalRightContent {
	transform: translate(0);
}
/************************************************** END Modal Right ************************************************/























/********************************************** AuthView ***************************************************/
.authBefore {
	display: flex;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	align-items: center;
	justify-content: center;
	background: #0288D1;
	z-index: 101;
	filter: opacity(1);
	animation: fadeOut .8s forwards 1s;
}

.authBefore img {
	max-height: calc(100% - 60px);
	max-width: calc(100% - 60px);
}

.authView {
	display: flex;
	position: RELATIVE;
	width: 100%;
	height: calc(100vh - 66px);
	overflow: overlay;
	align-items: baseline;
	justify-content: center;
	padding: 30px;
	background: var(--slate-200, #E2E8F0) url(/design/default/images/bg_auth_pattern.png) repeat;
	filter: opacity(0);
	animation: fadeIn .8s forwards 1s;
	z-index: 102;
}

@keyframes autofill {}
form[data-enity="auth"] input[name="email"]:-webkit-autofill {
	animation-name: autofill;
	animation-duration: 0.01s;
}

@keyframes autofill2 {}
form[data-enity="auth"] input[name="password"]:-webkit-autofill {
	animation-name: autofill2;
	animation-duration: 0.01s;
}

.authViewForm {
	display: flex;
	flex-direction: column;
	position: relative;
	width: var(--form-width, 480px);
	flex-direction: column;
	gap: 20px;
	border-radius: 8px;
	background: var(--white, #FFF);
	padding: 0 var(--gap-m, 18px) 30px;
	margin: auto;
}

.authViewForm> ul.authtabs {
	display: flex;
	padding: var(--gap-m, 18px) 0px;
}

.authViewForm> ul.authtabs> li {
	display: flex;
	width: 50%;
}

.authViewForm> ul.authtabs> li> span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 6px 12px;
	color: var(--slate-500, #64748B);
	text-align: center;
	font-family: Inter;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 28px; /* 155.556% */
	border-bottom: 3px solid transparent;
	transition: all 0.15s;
	cursor: pointer;
}

.authViewForm> ul.authtabs> li.active> span {
	border-color: var(--brand);
	color: Var(--brand);
}

.formItemInfo {
	color: var(--slate-500, #64748B);
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; /* 142.857% */
}

.formItemTitle {
	color: var(--slate-900);
	font-weight: 500;
	margin: 0 0 8px;
}

.color-red {
	color: var(--red-600, #DC2626);
}

.color-green {
	color: var(--emerald-600, #059669);
}

.formItemAction {
	display: block;
	position: relative;
	width: calc(100% - 96px);
	margin: 18px 0 0 96px;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
}

.formItemAction.aleft {
	margin-left: 0;
	width: 100%;
}

.formItemAction a {
	color: var(--sky-600, #0284C7);
}

.formItemAction a:hover {
	color: var(--slate-900);
}

.formItem.formItemAction {
	margin: 0 0 18px;
	width: 100%;
	display: flex;
}

.formItemAction a.disabled {
	color: var(--slate-400);
	pointer-events: none;
}

.cui[type="number"]::-webkit-outer-spin-button,
.cui[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.formItem> .codeSend {
	display: flex;
	gap: 8px;
}

.formItem> .codeSend> button.btn {
	white-space: nowrap;
	height: 40px;
}

.formItem.formItemCodeSend {
	display: none;
}

.formItem.formItemCodeSend.sended {
	display: flex;
}

.formItem.formItemSuccess {
	text-align: CENTER;
	justify-content: CENTER;
	color: var(--slate-500, #64748B);
	text-align: center;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.formItem.formItemSuccess img {
	width: 100px;
}
/********************************************** END AuthView ***************************************************/
























/********************************************** Projects ***************************************************/
.projectsContentBefore {
	display: block;
	position: RELATIVE;
	/* height: calc(100vh - 66px); */
}

.projectsContentBefore> .max {
	height: 100%;
	width: 100%;
}

.projectsContent {
	height: calc(100vh - 66px);
	display: flex;
	position: relative;
	width: 100%;
	overflow: hidden;
}


.pc_sidebarBefore {
	display: block;
	position: relative;
	overflow: hidden;
	width: 360px;
	transition: all 0.3s;
	min-width: 360px;
}

a[data-enity="toggleProjectsSidebar"] {
	position: absolute;
	right: 0;
	display: flex;
	height: 40px;
	padding: 4px;
	align-items: center;
	gap: 10px;
	z-index: 10;
	border-radius: 6px 0px 0px 6px;
	background: var(--slate-300, #CBD5E1);
	top: 18px;
	transition: all 0.15s;
}

.pc_sidebar {
	display: flex;
	flex-direction: column;
	height: 100%;
	will-change: transform;
	filter: opacity(1);
	transition: all 0.3s;
	background: var(--slate-200, #E2E8F0);
	width: 360px;
}

.pc_sidebarBefore.is_hide {
	width: 24px;
	min-width: 24px;
	padding-right: 16px;
}

.pc_sidebarBefore.is_hide .pc_sidebar {
	transform: translate(-352px, 0px);
}

.pc_sidebar> .title {
	display: block;
	position: relative;
	padding: 0 18px;
	height: 76px;
	display: flex;
	align-items: center;
	/* margin: 18px 0; */
}

.pc_sidebar> .title> h2 {
	color: var(--slate-900, #0F172A);
	font-family: Inter;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	margin: 0;
}

a[data-enity="toggleProjectsSidebar"]:hover {
	background: var(--slate-400);
}

.pc_sidebarBefore.is_hide a[data-enity="toggleProjectsSidebar"] {
	border-radius: 0 6px 6px 0;
}

a[data-enity="toggleProjectsSidebar"] svg {
	transition: all 0.3s;
}

.pc_sidebarBefore.is_hide a[data-enity="toggleProjectsSidebar"] svg {
	transform: scale(-1, 1);
}

.pc_sidebar> .projectsListConstruction {
	display: flex;
	position: relative;
	flex-direction: column;
	height: calc(100vh - 76px - 66px);
}

.pc_sidebar> .projectsListConstruction> .projectsList {
	display: flex;
	flex-direction: column;
	position: relative;
	height: calc(100vh - 102px - 76px - 66px);
	overflow-x: hidden;
	overflow-y: overlay;
	padding: 0 0 0 18px;
	gap: 6px;
}

.pc_sidebar> .projectsListConstruction> .projectsList.adminBar {
	height: calc(100vh - 76px - 66px);
	padding: 0;
}

.pc_sidebar> .projectsListConstruction> .projectsList::-webkit-scrollbar {
	border-radius: 6px;
	background: #E2E8F0;
	width: 18px;
	padding: 5px;
}

.pc_sidebar> .projectsListConstruction> .projectsList::-webkit-scrollbar-thumb {
	border: 5px solid #E2E8F0;
	border-radius: 100px;
	background: #94A3B8;
}

.projectItem {
	display: flex;
	flex-direction: column;
	position: relative;
	background: #fff;
	border-radius: 6px;
	padding: 8px 8px 12px 12px;
	max-width: 320px;
	border: 1px solid transparent;
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0);
	transition: all 0.15s;
}

.projectItem> .date {
	display: block;
	color: var(--slate-500, #64748B);
	font-size: 12px;
}

.projectItem> .title {
	display: block;
	position: relative;
	padding: 0;
	color: var(--slate-900, #0F172A);
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
}

.projectItem> .info {
	display: block;
	color: var(--slate-500, #64748B);
	font-size: 12px;
	padding: 8px 0 0;
}

.projectItem> a.link {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.projectItem:hover {
	border: 1px solid var(--slate-300, #CBD5E1);
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
}

.projectItem.active {
	border: 1px solid var(--slate-900, #0F172A);
}

.projectItem> .settingsMenu, .taskItem> .settingsMenu {
	display: block;
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: opacity(0);
	z-index: 3;
}

.projectItem:hover> .settingsMenu, .taskItem:hover> .settingsMenu {
	filter: opacity(1);
}

.projectItem.open> .settingsMenu, .taskItem.open> .settingsMenu {
	filter: opacity(1);
}

.dropdown.settingMenu {
	/* min-width: 300px; */
	min-width: max-content;
}

.settingMenu nav {
	display: flex;
	flex-direction: column;
	position: relative;
	margin: -18px;
}

.settingMenu nav> a {
	display: flex;
	position: relative;
	padding: var(--gap-xs, 6px) 12px;
	align-items: center;
	gap: var(--gap-s, 12px);
	align-self: stretch;
	color: var(--slate-900, #0F172A);
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
}

/* .settingMenu nav> a:hover { */
	/* color: var(--slate-600); */
/* } */

.settingMenu nav> a:hover {
	color: var(--slate-500);
}

.pc_sidebar> .projectsListConstruction> .projectsArchive {
	display: block;
	position: relative;
	padding: 18px 0 18px 18px;
	border-top: 1px solid var(--slate-300, #CBD5E1);
}

.projectItem> .ico {
	display: flex;
	align-items: center;
	justify-items: center;
	position: absolute;
	bottom: calc(50% - 12px);
	right: 18px;
}

.projectItem> .date  + .title {
	padding: 8px 0 0;
}

.pc_content {
	width: 100%;
}

.csloader {
	position: absolute;
	z-index: 9999;
	top: 0;
	left: 0;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: rgb(255 255 255 / 82%);
	backdrop-filter: blur(3px);
	display: none;
}

.projectView .pc_content {
	width: calc(100vw - 360px);
	position: relative;
}

.projectView .pc_sidebarBefore.is_hide + .pc_content {
	width: 100vw;
}

.empty_project {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	padding: 18px;
	color: var(--slate-400, #94A3B8);
	font-size: 16px;
}



.pc_content> .panel {
	display: flex;
	position: relative;
	height: 76px;
	padding: 0 18px;
	gap: 18px;
}

.pc_content> .panel> .projectNameBreadcrumbs {
	display: flex;
	flex-direction: column;
	position: relative;
	flex-grow: 1;
	justify-content: CENTER;
}

.panelButtons {
	display: flex;
	align-items: center;
	position: relative;
	gap: 6px;
}

.panelButtons> .item {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.panelButtons> .item> .dropdown {
	top: calc(100% + 6px);
}

button.btn[data-enity="changeFilesDisplay"].gray_dark {
	cursor: default;
	background: var(--slate-700);
	pointer-events: none;
}

button.btn[data-enity="changeFilesDisplay"].gray_dark svg path {
	fill: #fff;
	stroke: #fff;
}

.pc_content> .panel> .projectNameBreadcrumbs> .projectName {
	display: block;
	white-space: nowrap;
	color: var(--slate-900, #0F172A);
	font-family: Inter;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
}

.pc_content> .panel> .projectNameBreadcrumbs> .breadcrumbs {
	display: block;
	position: relative;
	padding: 6px 0 6px;
	font-size: 14px;
	max-width: 100%;
	overflow-x: overlay;
	overflow-y: hidden;
}

.pc_content> .panel> .projectNameBreadcrumbs> .breadcrumbs::-webkit-scrollbar {
	border-radius: 6px;
	background: var(--slate-200, #CBD5E1);
	height: 3px;
}

.pc_content> .panel> .projectNameBreadcrumbs> .breadcrumbs::-webkit-scrollbar-thumb {
	border-radius: 6px;
	background: var(--slate-400, #94A3B8);
}

.pc_content> .panel> .projectNameBreadcrumbs> .breadcrumbs> .breadcrumbsBlock {
	display: flex;
	position: relative;
	white-space: nowrap;
	gap: 5px;
	color: var(--slate-400);
	width: max-content;
}

.pc_content> .content {
	display: BLOCK;
	position: relative;
	padding: 0 18px 18px;
	overflow: overlay;
	height: calc(100vh - 76px - 66px);
}

.pc_content> .content::-webkit-scrollbar {
	border-radius: 6px;
	background: #f1f5f9;
	width: 18px;
	padding: 5px;
}

.pc_content> .content::-webkit-scrollbar-thumb {
	border: 5px solid #f1f5f9;
	border-radius: 100px;
	background: #94A3B8;
}


.dropdown.sortingMenu {
	min-width: 300px;
}

.sortingMenu nav {
	display: flex;
	flex-direction: column;
	position: relative;
	margin: -18px;
}

.sortingMenu nav .navSortTitle {
	color: var(--slate-500, #64748B);
	display: block;
	position: relative;
	padding: 18px 12px 12px;
}

.sortingMenu nav> label {
	display: block;
	position: relative;
	cursor: pointer;
}

.sortingMenu nav> label> input {
	display: none;
}

.sortingMenu nav> label> span {
	display: BLOCK;
	color: var(--slate-900, #0F172A);
	padding: 8px 46px 8px 12px;
	position: relative;
}

.sortingMenu nav> label> input:checked ~ span {
	font-weight: 500;
}

.sortingMenu nav> label> input:checked ~ span::before {
	content: '';
	border-radius: 0px 4px 4px 0px;
	background: var(--slate-700, #334155);
	width: 6px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.sortingMenu nav> label:hover> span {
	background: var(--slate-100, #F1F5F9);
}

.sortingMenu nav> label> input:checked ~ span::after {
	content: '';
	width: 24px;
	height: 24px;
	display: flex;
	position: absolute;
	top: calc(50% - 13px);
	right: 12px;
	background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9ImFuZ2xlLXVwIj4KPHBhdGggaWQ9IlZlY3RvciAxIiBkPSJNNy41IDE0LjVMMTIgMTBMMTYuNSAxNC41IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L2c+Cjwvc3ZnPgo=);
	align-items: center;
	justify-content: center;
}

.sortingMenu nav> label> input:nth-child(2):checked ~ span::after {
	transform: scale(1, -1);
}


.sortingMenu .formItem {
	margin: 18px 0 0;
	padding: 12px 0 0;
}

.checkedUsersList {
	display: block;
	position: relative;
	max-height: 246px;
	overflow-x: hidden;
	overflow-y: overlay;
	display: flex;
	flex-direction: column;
	gap: 6px;
}


.checkedUsersList> label, label.ulabel {
	display: block;
	cursor: pointer;
	position: relative;
}

.checkedUsersList> label.cdefault, label.ulabel.cdefault {
	cursor: default;
}

.checkedUsersList> label> input, label.ulabel> input {
	display: none;
}

.checkedUsersList> label> .info, label.ulabel> .info {
	display: inline-flex;
	align-items: center;
	position: relative;
	gap: 10px;
	padding: 3px 12px 3px 3px;
	color: var(--slate-900, #0F172A);
	transition: all 0.15s;
	border-radius: 100px;
}

.checkedUsersList> label> .info> .ico, label.ulabel> .info> .ico {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	overflow: hidden;
	border-radius: 100%;
	border: 1px solid var(--slate-300, #CBD5E1);
	background: var(--slate-200, #E2E8F0);
	color: var(--slate-900, #0F172A);
	text-align: center;
	font-family: Inter;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	position: relative;
}

.checkedUsersList> label> .info> .name, label.ulabel> .info> .name {
	display: block;
	position: relative;
	top: -1px;
}

.checkedUsersList> label> .info> .ico> img, label.ulabel> .info> .ico> img {
	position: absolute;
	height: auto;
	max-width: 100%;
}

.checkedUsersList> label:hover> input + .info, label.ulabel:hover> input + .info {
	background: var(--slate-100);
}

.checkedUsersList> label> input:checked + .info, label.ulabel> input:checked + .info {
	background: var(--slate-200, #E2E8F0);
}

.mb-18 {
	margin-bottom: 18px;
}

.checkedUsersList> label> input:checked + .info> .ico, label.ulabel> input:checked + .info> .ico {
	background: #fff;
}





.filesList {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	width: calc(100% + 12px);
	row-gap: 12px;
	margin: 0 -6px;
}

.fileItem {
	display: flex;
	flex-direction: column;
	position: relative;
	width: calc(20% - 12px);
	margin: 0 6px;
	padding: var(--gap-xs, 6px) 0px;
	flex-direction: column;
	align-items: center;
	gap: var(--gap-s, 12px);
	border-radius: var(--gap-xs, 6px);
	background: var(--white, #FFF);
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.0);
	background: transparent;
	transition: width 0.3s;
}

.fileItem:hover, .fileItem.active {
	background: var(--white, #FFF);
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
}

.fileItem> .name {
	display: flex;
	text-align: center;
	color: var(--slate-900, #0F172A);
	flex-grow: 1;
	align-items: center;
	overflow-wrap: anywhere;
}

.fileItem> .settingsMenu {
	display: block;
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: opacity(0);
	z-index: 3;
}

.fileItem> .ico {
	display: FLEX;
	align-items: center;
	justify-content: center;
	height: 90px;
	position: relative;
}

.fileItem> .ico> img {
	-webkit-user-select: none;
	pointer-events: none;
}

.fileItem> .ico> .ext {
	display: FLEX;
	position: absolute;
	padding: 4px var(--gap-xs, 6px);
	justify-content: center;
	align-items: center;
	background: var(--slate-700, #334155);
	color: var(--white, #FFF);
	text-align: center;
	font-family: Inter;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 20px;
	text-transform: uppercase;
	left: 0;
	bottom: 17px;
	-webkit-user-select: none;
	pointer-events: none;
}

.fileItem> .ico> .label_block {
	display: BLOCK;
	position: absolute;
	width: 6px;
	height: 24px;
	right: 0;
	top: calc(50% - 4px);
	box-shadow: 0px 0px 0px 2px rgb(255 255 255 / 71%);
	border-radius: 3px 0 0 3px;
}

.fileItem:hover> .settingsMenu {
	filter: opacity(1);
}

.fileItem.open> .settingsMenu {
	filter: opacity(1);
}

.pc_sidebarBefore.is_hide + .pc_content .fileItem {
	width: calc(12.5% - 12px);
}

.fileInfo {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	row-gap: 12px;
	margin: 0 -6px 18px;
}

.fileInfo> .item {display: flex;flex-direction: column;position: relative;width: calc(50% - 12px);margin: 0 6px;gap: 6px;color: var(--slate-900, #0F172A);font-size: 16px;}

.fileInfo> .item> label {
	display: block;
	color: var(--slate-400, #94A3B8);
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: 20px;
}

.icouser {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	overflow: hidden;
	border-radius: 100%;
	border: 1px solid var(--slate-300, #CBD5E1);
	background: var(--slate-200, #E2E8F0);
	color: var(--slate-900, #0F172A);
	text-align: center;
	font-family: Inter;
	font-size: 12px;
	font-style: normal;
	font-weight: 500;
	position: relative;
}

.icouser> img, .icouser> svg {
	position: absolute;
	/* height: auto; */
	/* max-width: 100%; */
	width: 100%;
	height: auto;
}


.mrLine {
	display: block;
	height: 1px;
	background: #CBD5E1;
	margin: 0 -18px;
}

.fileUsers {
	display: flex;
	flex-direction: column;
	position: relative;
}

.fileUsers> .title {
	display: flex;
	justify-content: space-between;
	position: relative;
	height: 30px;
	margin: 12px 0 6px;
	align-items: center;
	color: var(--slate-900, #0F172A);
	font-size: 14px;
}

.fileUsers> .title> b {
	font-weight: 500;
	display: block;
}

.fileUsers .checkedUsersList {
	max-height: calc(100vh - 324px);
}

div[data-tippy-root] {
	z-index: 9999999 !important;
	overflow-wrap: anywhere;
}




.ajaxMovePath {
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 18px 0 0;
}

.ajaxMovePath + .mrLine {
	margin-bottom: 18px;
}

.ajaxMovePath> .prevLink {
	display: flex;
	align-items: center;
	position: relative;
	/* margin: 0 0 18px; */
}

.ajaxMovePath> .prevLink> a {
	display: flex;
	align-items: center;
	position: relative;
	gap: 6px;
	color: var(--slate-900, #0F172A);
	font-size: 16px;
}

.ajaxMovePath> .prevLink> a.disabled {
	pointer-events: none;
	/* filter: opacity(0.4); */
}

.ajaxMovePath> .prevLink> a.disabled svg {
	display: none;
}

.ajaxMovePath> .movePathList {
	display: flex;
	flex-direction: column;
	position: relative;
	gap: 2px;
	max-height: 120px;
	overflow-x: hidden;
	overflow-y: overlay;
	/* padding: 18px 0; */
	margin: 18px 0;
}

.scroll {
	-webkit-overflow-scrolling: touch;
}

.scroll::-webkit-scrollbar {
	border-radius: 6px;
	background: var(--slate-300, #CBD5E1);
	width: 6px
}

.scroll::-webkit-scrollbar-thumb {
	border: 4px solid rgba(0, 0, 0, 0);
	border-radius: 8px;
	background: var(--slate-400, #94A3B8);
}

.ajaxMovePath> .movePathList> a {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--slate-900, #0F172A);
	padding: 8px 0;
}

.ajaxMovePath> .movePathList> a:hover {
	filter: opacity(0.5);
}

label.input-file.error .btn {
	background: var(--red-500);
}






.addVersionFile .modalContent, .uploadFile .modalContent {
	max-width: 600px;
}

.versionBlock {
	display: block;
	position: relative;
	margin: 0 0 18px;
}

.versionsList {
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 8px 18px 8px 0px;
	gap: 24px;
}

.versionsList::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 10px;
	height: 100%;
	background: #CBD5E1;
	width: 2px;
}

.versionsList> .versionItem {
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 0 0 0 42px;
	gap: 6px;
	color: var(--slate-900, #0F172A);
	font-family: Inter;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 18px;
}


.versionsList> .versionItem .settingsMenu {
	position: absolute;
	top: -5px;
	right: 8px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: opacity(0);
	z-index: 3;
}

.versionsList> .versionItem:hover .settingsMenu {
	filter: opacity(1);
}

.versionsList> .versionItem.open .settingsMenu {
	filter: opacity(1);
}

.versionsList> .versionItem .settingsMenu .dropdown.settingMenu {
	top: calc(100%);
}






.versionsList> .versionItem> .title {
	display: flex;
	align-items: center;
}

.versionsList> .versionItem> .title> b {
	font-size: 14px;
	font-weight: 500;
	margin: 0 10px 0 0;
}


.versionsList> .versionItem> .title::before {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	background: #cbd5e1;
	border-radius: 100%;
	position: absolute;
	left: 7px;
}

.versionsList> .versionItem.active> .title::before {
	background-color: var(--slate-900);
}

.fileVersionName {
	display: flex;
	margin: 6px 0 18px;
	position: relative;
	gap: 15px;
	color: var(--slate-900, #0F172A);
	align-items: CENTER;
}

.fileVersionName> svg {min-width: 24px;}

.viewVersionsFile .content {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.viewVersionsFile .versionBlock {
	height: calc(100% - 80px);
	overflow-x: hidden;
	overflow-y: overlay;
	margin: 0;
	/* padding-bottom: 50px; */
}

.viewVersionsFile .modalRightContent {
	max-width: 640px;
}

.select2-drop {
	z-index: 9999999 !important;
}







.filesFilters .modalContent,
.tasksFilters .modalContent,
.notificationsFilters .modalContent,
.fileMove .modalContent,
.folderMove .modalContent,
.usersFilters .modalContent {
	max-width: 640px;
}

.filesFilters  .modalContent> .title,
.tasksFilters  .modalContent> .title,
.notificationsFilters  .modalContent> .title,
.usersFilters  .modalContent> .title {
	display: flex;
	justify-content: space-between;
	padding-right: 60px;
}

.filtersConstruction {
	display: flex;
	gap: 18px;
	margin: 0 0 18px;
}

.filtersConstruction> .fcLeft,
.filtersConstruction> .fcRight {
	flex: 1;
}

.selectBefore {
	width: 100%;
	display: block;
	position: relative;
}

.selectize-input {
	padding: 10px !important;
	border: 1px solid var(--slate-300, #CBD5E1) !important;
	background: var(--white, #FFF) !important;
	color: var(--slate-900, #0F172A) !important;
	box-shadow: none !important;
	border-radius: 6px !important;
}

.selectize-dropdown-emptyoptionlabel {
	text-align: left !important;
}

.label-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	vertical-align: middle;
	border: 1px solid #fff;
	margin: 0;
}

.selectize-dropdown .label-dot {
	margin: 4px 4px 4px 11px;
}

.formItemsTwo {
	display: flex;
	gap: 12px;
	margin: 0 0 18px;
}

.formItemsTwo .formItem> label {
	width: max-content;
}

.formItemsTwo .formItem> .inputHiddenText {
	display: flex;
	width: initial;
	flex: 1;
}

.formItemsTwo> .formItem {
	margin: 0;
}

.formItemsTwo> span.separator {
	display: flex;
	align-items: center;
	font-size: 16px;
	margin: 0 -6px;
}

.jc-beetwen {
	justify-content: space-between !important;
}

.filesList.filesListTable {
	flex-direction: column;
}

.tableHeader {
	display: flex;
	position: relative;
	color: var(--slate-900, #0F172A);
	text-overflow: ellipsis;
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	gap: 6px;
	min-height: 36px;
	/* align-items: center; */
}

.tIcon {
	display: flex;
	align-items: center;
	justify-content: CENTER;
}

.tName {
	flex-grow: 1;
}

.tAuthor {
	min-width: 150px;
	width: 150px;
}

.tExt {
	min-width: 80px;
	width: 80px;
}

.tDate {
	min-width: 150px;
	width: 150px;
}

.tableHeader> div {
	display: flex;
	align-items: center;
	padding: 6px;
}

.tableHeader> div:not(:nth-last-child(1)):not(:nth-last-child(2)) {
	border-right: 1px solid #CBD5E1;
}

.tableHeader> div.tIcon {
	border: 0 !important;
	padding: 6px 6px 6px 12px;
	min-width: calc(24px + 6px + 12px);
}

.tableList {
	display: flex;
	flex-direction: column;
	position: relative;
	gap: 12px;
}

.tableList> .item {
	display: flex;
	position: relative;
	min-height: 24px;
	gap: 6px;
	color: var(--slate-900, #0F172A);
	text-overflow: ellipsis;
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	border-radius: var(--gap-xs, 6px);
	background: var(--white, #FFF);
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.0);
	background: transparent;
	transition: width 0.3s;
}

.tableList> .item> .tIcon {
	padding: 6px 6px 6px 12px;
}

.tableList> .item> div {
	padding: 6px;
	display: flex;
	align-items: center;
}

.tableList> .item> div.tName {
	/* padding-left: 7px; */
}

.tAction {
	min-width: 28px;
}

.tableList> .item:hover, .tableList> .item.active {
	background: var(--white, #FFF);
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
}

.tableList> .item .settingsMenu {
	filter: opacity(0);
	z-index: 3;
}

.tableList> .item:hover .settingsMenu {
	filter: opacity(1);
}

.tableList> .item.open .settingsMenu {
	filter: opacity(1);
}

.tableList> .item .settingsMenu .dropdown.settingMenu {
	top: calc(100%);
}



.pc_sidebarBefore:not(.is_hide) + .pc_content .fileItem:nth-child(5n + 1) .dropdown {
	right: initial;
	left: calc(100% - 32px);
}

.pc_sidebarBefore.is_hide + .pc_content .fileItem:nth-child(8n + 1) .dropdown {
	right: initial;
	left: calc(100% - 32px);
}





/********************************************** END Projects ***************************************************/



























/********************************************** Tasks ***************************************************/
.tasksContentBefore {
	display: block;
	position: relative;
	/* min-width: max-content; */
	padding: 0 18px;
	overflow-y: hidden;
	overflow-x: overlay;
	height: calc(100vh - 66px - 76px);
	width: 100%;
	-webkit-overflow-scrolling: touch;
}

.tasksContent {
	display: flex;
	gap: 18px;
	position: relative;
	min-width: max-content;
	height: 100%;
}

.tasksContentBefore::-webkit-scrollbar {
	border-radius: 6px;
	background: #F1F5F9;
	width: 6px
}

.tasksContentBefore::-webkit-scrollbar-button {
	width: 5px;
}

.tasksContentBefore::-webkit-scrollbar-track {
	background: transparent;
	padding-top: 2px;
	border: 2px solid #F1F5F9;
	border-radius: 8px;
}

.tasksContentBefore::-webkit-scrollbar-thumb {
	background: var(--slate-300);
	margin: 2px;
	border: 4px solid #F1F5F9;
	border-bottom-width: 5px;
}


.pc_content> .panel.tasksPanel> .projectNameBreadcrumbs {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}

.pc_content> .panel.tasksPanel> .projectNameBreadcrumbs> .projectName {
	color: var(--slate-900, #0F172A);
	font-family: Inter;
	font-size: 24px;
	font-style: normal;
	font-weight: 500;
	margin: 0 42px 0 0;
}

.pc_content> .panel.tasksPanel> .projectNameBreadcrumbs> .taskNavs {
	display: flex;
	align-items: center;
	position: relative;
	gap: 24px;
}

.pc_content> .panel.tasksPanel> .projectNameBreadcrumbs> .taskNavs> a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 170px;
	min-height: 40px;
	color: var(--slate-500, #64748B);
	border-bottom: 3px solid transparent;
	font-size: 18px;
	font-weight: 500;
	transition: all 0.15s;
	position: relative;
	bottom: -3px;
}

.pc_content> .panel.tasksPanel> .projectNameBreadcrumbs> .taskNavs> a.active {color: var(--sky-600);border-bottom-color: var(--sky-600);}

.pc_content> .panel.tasksPanel> .projectNameBreadcrumbs> .taskNavs> a:not(.active):hover {
	color: var(--slate-700);
}

.tasksBlock {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 25%;
	min-width: 378px;
	max-width: 444px;
}




.tasksBlock> .tasksBlockHeader {
	display: FLEX;
	justify-content: space-between;
	position: relative;
	align-items: center;
	gap: 12px;
	padding: 0 6px 0 12px;
	margin: 0 0 18px;
}

.tasksBlock> .tasksBlockHeader> b {
	color: var(--slate-900, #0F172A);
	display: block;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
}

.tasksBlock> .tasksBlockHeader> a.btn.ico {
	background: transparent;
	padding: 0;
	min-width: 28px;
	width: initial;
	height: 28px;
}

.tasksBlock> .tasksBlockHeader> a.btn.ico path {
	stroke: var(--slate-900);
}

.tasksBlockitemsBefore {
	display: block;
	position: relative;
	/* min-width: max-content; */
	/* padding: 0 18px; */
	overflow-y: overlay;
	overflow-x: hidden;
	max-height: calc(100vh - 66px - 76px - 46px);
	width: 100%;
	height: 100%;
	-webkit-overflow-scrolling: touch;
}

.tasksBlockitems {
	display: flex;
	flex-direction: COLUMN;
	gap: 18px;
	position: relative;
	min-height: max-content;
	padding: 0 6px 18px 0;
}

.tasksBlockitemsBefore::-webkit-scrollbar {
	border-radius: 6px;
	background: #F1F5F9;
	width: 6px
}

.tasksBlockitemsBefore::-webkit-scrollbar-button {
	width: 5px;
	height: 5px;
}

.tasksBlockitemsBefore::-webkit-scrollbar-track {
	background: var(--slate-300);
	padding-top: 2px;
	border-radius: 8px;
}

.tasksBlockitemsBefore::-webkit-scrollbar-thumb {
	background: var(--slate-400);
	margin: 2px;
	border-bottom-width: 5px;
}

.tasksBlockitemsBefore::-webkit-scrollbar-button:vertical:decrement  {
	display: none;
}



/* .tasksBlockitemsBefore::-webkit-scrollbar-button:vertical:increment  { */
	/* display: none; */
/* } */



.tasksBlockitems p.empty {
	display: block;
	position: relative;
	padding: 12px;
	border-radius: 6px;
	background: var(--slate-200);
	color: var(--slate-700);
	font-size: 13px;
}


.createTask .modalRightContent, .editTask .modalRightContent, .taskView .modalRightContent {
	max-width: 920px;
}

.frMaxHeight {
	display: block;
	position: relative;
	padding: 12px 12px 12px 0;
	margin: 0 -12px 12px 0;
	height: calc(100vh - 66px - 40px - 18px - 84px);
	overflow-x: hidden;
	overflow-y: overlay;
}

.frMaxHeight .inputHiddenText> .cui {
	min-width: 100%;
}

.formItem.buttonwborder {
	border-top: 1px solid var(--slate-300, #CBD5E1);
	margin: 0 -18px -18px;
	padding: 0 18px 18px;
	padding: 0 18px;
	height: 64px;
	align-items: center;
}


.relativePhoto {
	display: FLEX;
	position: relative;
	align-items: center;
	justify-content: center;
	flex-direction: COLUMN;
	border-radius: 5px;
	border: 1px dashed #324AE7;
	color: var(--slate-700);
	font-size: 12px;
	padding: 30px;
	min-height: 80px;
	/* margin: 5px 0 0; */
	transition: all 0.15s;
	background: #fff;
}

.relativePhoto> .title {
	display: flex;
	align-items: center;
	gap: 3px;
}

.relativePhoto> input {
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	opacity: 0;
	top: 0;
	left: 0;
	z-index: 1;
	cursor: pointer;
}

.relativePhoto:hover {
	border-color: #000;
}

.relativePhoto.startDrop {
	border-color: #2bc036;
}

.relativePhoto.hoverDrop {
	border-style: solid;
	background: rgb(43 192 54 / 13%);
	color: #2bc036;
}

.relativePhoto.active> .title {
	font-weight: 500;
	color: #324AE7;
}


.relativePhoto.error> .title {
	color: #E73235;
	font-weight: 500;
}

.relativePhoto.error {
	border-color: #E73235;
}

.uploadFilesList {
	display: none;
}

.uploadFilesList:not(:empty) {
	margin: 0 0 15px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.uploadFilesList> .item {
	display: inline-flex;
	position: relative;
	border: 1px solid #0288d1;
	border-radius: 6px;
	font-size: 12px;
	align-items: center;
	padding: 6px 12px;
	gap: 6px;
	color: var(--slate-900);
	font-weight: 500;
}

.uploadFilesList> .item input {
	display: none;
}

.uploadFilesList> .item svg {
	height: auto;
	width: 12px;
}

.uploadFilesList> .item a {
	display: flex;
	align-items: center;
	justify-content: center;
}

.uploadFilesList> .item svg path {
	/* fill: var(--red); */
}

.uploadFilesList> .item a:hover {
	filter: opacity(0.7);
}

.formItem> .files {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.taskItem {
	border-radius: 6px;
	background: #FFF;
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
	display: flex;
	flex-direction: column;
	position: relative;
	padding: 12px;
	overflow-wrap: anywhere;
}

.taskItem> .tiHeader {
	display: flex;
	align-items: center;
	position: relative;
	margin: 0 0 12px;
	gap: 6px;
}

.taskItem> .tiHeader> span {
	color: var(--slate-900, #0F172A);
	display: block;
	font-size: 16px;
	margin: 0 0 -1px;
}

.taskItem> .tiProject {
	display: block;
	position: relative;
	margin: 0 0 10px;
	color: var(--slate-500, #64748B);
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
}

.taskItem> .tiName {
	display: block;
	position: relative;
	margin: 0 0 10px;
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
	color: var(--slate-900, #0F172A);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.taskItem> .tiAuthorUsers {
	display: flex;
	flex-wrap: wrap;
	position: RELATIVE;
}

.taskItem> .tiAuthorUsers> .tiUsersBefore {
	display: block;
	position: relative;
	margin: 0 0 0 12px;
	padding: 0 0 0 12px;
	border-left: 2px solid #CBD5E1;
	width: calc(100% - 42px);
	overflow: hidden;
}

.taskItem> .tiAuthorUsers> .tiUsersBefore> .tiUsers {
	min-width: max-content;
}

.tiUsers {
	display: flex;
	gap: 6px;
}

i.priorityCircle {
	display: inline-flex;
	width: 18px;
	height: 18px;
	border-radius: 100%;
	background: var(--slate-100);
}

i.priorityCircle.pr_1 {
	background: #059669;
}

i.priorityCircle.pr_2 {
	background: #FACC15;
}

i.priorityCircle.pr_3 {
	background: #EF4444;
}





.twHeader {
	display: flex;
	position: relative;
	margin: -18px -18px 0;
	padding: 18px;
	border-bottom: 1px solid var(--slate-300, #CBD5E1);
	height: 76px;
	min-height: 76px;
	flex-wrap: WRAP;
	align-items: center;
	gap: 12px;
}

.twHeader> .grow {flex-grow: 1;}

.select.labelchange {
	display: block;
	position: relative;
	width: 180px;
	height: 40px;
	border-radius: 6px;
	border: 1px solid var(--slate-300, #CBD5E1);
	background: var(--white, #FFF);
	padding: 0 12px;
	color: var(--slate-900, #0F172A);
	font-size: 16px;
}

.select.labelchange> svg {
	position: absolute;
	top: calc(50% - 12px);
	right: 8px;
	pointer-events: none;
}

.select.labelchange> select {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	border: 0;
	cursor: pointer;
	-webkit-appearance: none;
	color: var(--slate-900, #0F172A);
	font-size: 16px;
	padding: 0 12px;
	z-index: 1;
}

.select.labelchange> span {
	display: flex;
	align-items: center;
	height: 100%;
}

.twHeader> .priority {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--slate-500, #64748B);
	font-family: Inter;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
}

.twHeader> .links {
	display: flex;
	gap: 12px;
}

.twHeader> .links> a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	transition: all 0.1s;
}

.twHeader> .links> a:hover {
	filter: opacity(0.7);
}

.twHeader> .links> a:last-child {
	margin-left: 12px;
}

.twContentBefore {
	display: block;
	position: relative;
	padding: 12px 12px 12px 0;
	margin: 0 -12px 12px 0;
	height: calc(100vh - 66px - 76px);
	overflow-x: hidden;
	overflow-y: overlay;
	margin: 0 0 -18px;
	-webkit-overflow-scrolling: touch;
}

.twContentBefore::-webkit-scrollbar {
	border-radius: 6px;
	background: #ffffff;
	width: 6px
}

.twContentBefore::-webkit-scrollbar-button {
	width: 5px;
	height: 12px;
}

.twContentBefore::-webkit-scrollbar-track {
	background: var(--slate-300);
	padding-top: 2px;
	border-radius: 8px;
}

.twContentBefore::-webkit-scrollbar-thumb {
	background: var(--slate-400);
	margin: 2px;
	border-bottom-width: 5px;
}

.twContent {
	display: flex;
	flex-direction: column;
	position: relative;
	min-height: max-content;
}

.twContent> .twItem {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	/* gap: 10px; */
	justify-content: flex-start;
}

.twContent> .twItem> .twFull {
	display: block;
	width: 100%;
}

.twContent> .twItem> .twLeft {
	display: flex;
	flex-direction: column;
	width: 68%;
	border-right: 1px solid var(--slate-300, #CBD5E1);
	padding: 0 12px 0 0;
	justify-content: flex-start;
	gap: 18px;
}

form .ql-container {
	height: auto;
}

.twContent> .twItem> .twRight {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 32%;
	padding-left: 12px;
	gap: 18px;
}

.twContent> .twItem + .twItem {
	margin: 12px 0 0;
	padding: 12px 0 0;
	border-top: 1px solid var(--slate-300, #CBD5E1);
}

.twContent> .twItem> .twFull h3 {
	display: block;
	margin: 0 0 12px;
	color: var(--slate-900, #0F172A);
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 28px;
	overflow-wrap: anywhere;
}

.twContent> .twItem> div> .item {
	display: flex;
	flex-direction: column;
	position: relative;
	gap: 6px;
}

.twContent> .twItem> div> .item> .name {
	display: block;
	position: relative;
	font-size: 14px;
	color: var(--slate-400, #94A3B8);
	font-weight: 500;
}

.twContent> .twItem> div> .item> .content {
	color: var(--slate-900, #0F172A);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.twContent> .twItem> div> .item> .content .formItem[data-enity="changeUploadFiles"] {
	display: none;
}

.taskFilesList {
	display: flex;
	flex-direction: column;
	position: relative;
	margin: 0 0 18px;
	gap: 6px;
	align-items: flex-start;
}

.taskFilesList> .item {
	display: flex;
	justify-content: space-between;
	position: relative;
	gap: 12px;
	width: 100%;
	padding: 2px 5px;
	border-radius: 5px;
}

.taskFilesList> .item> a {
	display: inline-block;
	position: relative;
	color: var(--slate-900, #0F172A);
}

.taskFilesList> .item:hover {
	background: var(--slate-100);
}

.taskFilesList> .item> .actions {
	display: flex;
	align-items: center;
	gap: 6px;
	transition: filter 0.1s;
	filter: opacity(0);
}

.taskFilesList> .item> .actions> a {
	display: flex;
	align-items: center;
}

.taskFilesList> .item> .actions> a:last-child svg {
	height: auto;
	width: 24px;
}

.taskFilesList> .item:hover> .actions {
	filter: opacity(1);
}

.twContent> .twItem .bigTitle {
	display: block;
	position: relative;
	margin: 0 0 -6px;
	color: var(--slate-900, #0F172A);
	font-size: 16px;
	font-weight: 500;

}

form[data-enity="addComment"] {
	display: block;
	position: relative;
	width: 100%;
	min-height: 120px;
	margin: 0 0 18px;
}

form[data-enity="addComment"] button[type="submit"] {
	position: absolute;
	bottom: 6px;
	right: 6px;
}

form[data-enity="addComment"]> textarea.cui {
	height: 100% !important;
	resize: none;
}

form .ql-editor {
	padding-right: 46px;
	min-height: 77px;
}

.twHistoris {
	display: flex;
	flex-direction: column;
	position: relative;
	gap: 24px;
}

.twHistoris> .item {
	display: flex;
	flex-direction: column;
	position: relative;
	gap: 8px;
}

.twHistoris> .item> .content {
	color: var(--slate-900);
	font-size: 14px;
}

.userHeader {
	display: flex;
	align-items: center;
	position: relative;
	gap: 6px;
}

.userHeader> .infouser {
	display: flex;
	flex-direction: column;
	gap: 3px;
	align-items: flex-start;
}

.userHeader> .infouser> b {
	color: var(--slate-900, #0F172A);
	font-size: 14px;
	font-weight: 400;
}

.userHeader> .infouser> span {
	color: var(--slate-400);
	font-size: 11px;
}

input[type="select-one"] {
	font-size: 16px !important;
	font-weight: 400;
	min-width: 150px !important;
}

input[type="select-one"]::placeholder {
	color: var(--slate-400, #94A3B8);
}

.commentsList {
	display: flex;
	flex-direction: column;
	position: relative;
	gap: 24px;
}

.commentsList> .item {
	display: flex;
	flex-direction: column;
	position: relative;
	gap: 8px;
	overflow-wrap: anywhere;
}

.commentsList> .item> .content {
	color: var(--slate-900);
	font-size: 14px;
	padding: 0 0 0 37px;
}


/********************************************** END Tasks ***************************************************/












































/********************************************** Chats ***************************************************/
.chatsContent .pc_content {
	width: calc(100vw - 480px);
}

.projectsContent.chatsContent .pc_sidebarBefore {
	width: 480px;
	min-width: 480px;
}

.projectsContent.chatsContent .pc_sidebarBefore .pc_sidebar {
	width: 100%;
}

.projectsContent.chatsContent .pc_sidebar> .projectsListConstruction> .projectsList {
	height: calc(100vh - 76px - 66px);
}

.chatsListHeader {
	display: flex;
	position: relative;
	padding: 18px;
	gap: 18px;
}

.chatsListHeader> form.search {
	display: flex;
	flex-grow: 1;
	position: relative;
}

.chatsListHeader> form.search> svg {
	position: absolute;
	top: 8px;
	right: 10px;
	pointer-events: none;
}

.chatsListHeader> form.search> input.cui {
	padding-right: 42px;
}

.inlineRadios {
	display: flex;
	gap: 18px;
	position: relative;
	flex-wrap: wrap;
}

label.inlineRadio {
	display: block;
	position: relative;
	cursor: pointer;
}

label.inlineRadio> input {
	display: none;
}

label.inlineRadio> span {
	display: BLOCK;
	position: relative;
	color: var(--slate-900, #0F172A);
	font-family: Inter;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
	padding: 0 0 0 30px;
}

label.inlineRadio> span::before {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 3px;
	width: 20px;
	height: 20px;
	border: 1px solid var(--slate-300);
	border-radius: 100%;
	transition: all 0.15s;
}

label.inlineRadio:hover> input:not(:checked) + span::before {
	border-color: var(--slate-400);
}

label.inlineRadio> span::after {
	content: '';
	display: block;
	position: absolute;
	top: 7px;
	left: 4px;
	width: 12px;
	height: 12px;
	background: var(--slate-900);
	border-radius: 100%;
	transition: all 0.15s;
	filter: opacity(0);
}

label.inlineRadio> input:checked + span::after {
	filter: opacity(1);
}

.formHr.fullHr {
	margin-left: -18px;
	margin-right: -18px;
	width: initial;
}

.chatItem {
	display: flex;
	/* flex-direction: column; */
	position: relative;
	background: #fff;
	border-radius: 6px;
	padding: 12px 18px;
	max-width: 444px;
	border: 1px solid transparent;
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0);
	transition: all 0.15s;
	flex-wrap: wrap;
	gap: 12px;
	cursor: pointer;
}

.chatItem> .chatItemIco {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	min-width: 60px;
	height: 60px;
	position: RELATIVE;
}

.chatItem> .chatItemIco> .chatFixedIco {
	display: flex;
	position: absolute;
	top: -5px;
	left: -5px;
	border: 1px solid var(--slate-300, #CBD5E1);
	background: var(--slate-200, #E2E8F0);
	width: 24px;
	height: 24px;
	border-radius: 100%;
	align-items: center;
	justify-content: center;
	box-shadow: 0px 0px 0px 1px #fff;
}

.chatItem> .chatItemIco> .chatFixedIco svg {
	height: auto;
	width: 16px;
}

.chatItem> .chatItemIco> .icouser {
	width: 100%;
	height: 100%;
	font-size: 22px;
	font-weight: 400;
}

.chatItem> .chatItemInfo {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	justify-content: center;
	position: relative;
	gap: 6px;
	width: calc(100% - 72px);
}

.chatItem> .chatItemInfo> .chatItemInfo-header {
	display: flex;
	justify-content: space-between;
	position: relative;
	font-size: 16px;
	color: var(--slate-400);
	gap: 12px;
}

.chatItem> .chatItemInfo> .chatItemInfo-header> b {
	color: var(--slate-900, #0F172A);
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.chatItem> .chatItemInfo> .chatItemInfo-header> .datecheck {display: block;white-space: nowrap;}

.chatItem> .chatItemInfo> .chatItemInfo-content {
	display: flex;
	justify-content: space-between;
	position: relative;
	gap: 12px;
	flex-direction: row-reverse;
	color: var(--slate-900, #0F172A);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	align-items: center;
}

.chatItem> .chatItemInfo> .chatItemInfo-content> .message {
	display: block;
	position: relative;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.chatItem> .chatItemInfo> .chatItemInfo-content> .message> span.author {
	color: var(--sky-600);
}

.chatItem> .chatItemInfo> .chatItemInfo-content> .count {
	display: BLOCK;
	position: RELATIVE;
}

.chatItem> .chatItemInfo> .chatItemInfo-content> .count> span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 24px;
	background: var(--slate-300, #CBD5E1);
	padding: 0 5px;
	min-width: 24px;
	border-radius: 100%;
}

span.lightgray {
	color: var(--slate-400);
}

.chatItem:not(.active):hover {
	background: var(--slate-100, #F1F5F9);
	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.10);
}

.chatItem.active::before {
	content: '';
	display: block;
	width: 6px;
	height: calc(100% - 4px);
	position: absolute;
	top: 2px;
	left: 2px;
	border-radius: 10px;
	background: var(--sky-600, #0284C7);
}

.chatContainer {
	display: flex;
	flex-direction: column;
	position: relative;
	height: 100%;
}

.chatContainer .chatHeader {
	display: block;
	position: relative;
	height: 76px;
	min-height: 76px;
	border-bottom: 1px solid var(--slate-300, #CBD5E1);
	display: flex;
	gap: 12px;
	padding: 18px 18px 18px 12px;
}

.chatContainer .chatFooter {
	display: flex;
	position: relative;
	min-height: 60px;
	flex-wrap: WRAP;
}

.chatContainer .chatContent {
	display: flex;
	flex-grow: 1;
	position: relative;
	height: calc(100% - 76px - 60px);
	background: var(--slate-300);
}

.messagesBlock {
	display: BLOCK;
	position: relative;
	max-height: 100%;
	width: calc(100% - 10px);
	overflow-x: hidden;
	overflow-y: overlay;
	padding: 0 8px 0 0;
	-webkit-overflow-scrolling: touch;
}

.chatContainer .chatHeader> .chatHeaderInfo {
	flex-grow: 1;
	display: flex;
	align-items: center;
	gap: 12px;
}

.chatContainer .chatHeader> .chatHeaderInfo> .icouser {
	width: 40px;
	height: 40px;
}

.chatContainer .chatHeader> .chatHeaderInfo> b {
	display: block;
	color: var(--slate-900, #0F172A);
	font-size: 18px;
	font-weight: 500;
}

.chatContainer .chatHeader> .chatHeaderPanel {
	display: flex;
	gap: 18px;
}

.chatContainer .chatHeader> .chatHeaderPanel> form.search {
	display: flex;
	flex-grow: 1;
	position: relative;
}

.chatContainer .chatHeader> .chatHeaderPanel> form.search> svg {
	position: absolute;
	top: 8px;
	right: 10px;
	pointer-events: none;
}

.chatContainer .chatHeader> .chatHeaderPanel> form.search> input.cui {
	padding-right: 42px;
}

.chatContainer .chatHeader> .chatHeaderPanel> .chatSettings {
	display: block;
	position: relative;
}

.chatContainer .chatHeader> .chatHeaderPanel> .chatSettings .dropdown.settingMenu {
	top: calc(100% + 9px);
}

.area-wrapper {
	width: calc(100% - 64px* 2);
	min-height: 60px;
	max-height: 120px;
	overflow-y: auto;
	padding: 12px 0;
	display: flex;
	-webkit-overflow-scrolling: touch;
	cursor: text;
}

.area-wrapper> .error2 {
	display: FLEX;
	align-items: center;
	padding: 0 13px;
	color: var(--slate-400);
	cursor: default !important;
	pointer-events: none !important;
}

.area {
	width: 100%;
	outline: none;
	min-height: 1em;
	white-space: pre-wrap;
	word-wrap: break-word;
	margin: auto 0;
	font-family: Inter;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
	overflow-wrap: anywhere;
	color: var(--slate-900);
}

.area:empty::before {
	content: attr(data-placeholder);
	color: #999;
	display: block;
	color: var(--slate-400, #94A3B8);
}

.area-wrapper::-webkit-scrollbar {
	border-radius: 6px;
	background: #F1F5F9;
	width: 6px
}

.area-wrapper::-webkit-scrollbar-button {
	width: 5px;
	height: 5px;
}

.area-wrapper::-webkit-scrollbar-track {
	background: var(--slate-300);
	padding-top: 2px;
	border-radius: 8px;
}

.area-wrapper::-webkit-scrollbar-thumb {
	background: var(--slate-400);
	margin: 2px;
	border-bottom-width: 5px;
}

.area-wrapper::-webkit-scrollbar-button:vertical:decrement  {
	
}




.messagesBlock::-webkit-scrollbar {
	border-radius: 6px;
	background: #cbd5e1;
	width: 6px
}

.messagesBlock::-webkit-scrollbar-button {
	width: 10px;
	height: 12px;
}

.messagesBlock::-webkit-scrollbar-track {
	background: var(--slate-300);
	padding-top: 2px;
	border-radius: 8px;
}

.messagesBlock::-webkit-scrollbar-thumb {
	background: var(--slate-400);
	margin: 2px;
	border-bottom-width: 5px;
}

.messagesBlock::-webkit-scrollbar-button:vertical:decrement  {
	
}





.chatContainer .chatFooter> .getFile, .chatContainer .chatFooter> .but {
	display: flex;
	width: 64px;
	align-items: center;
	justify-content: center;
}

.chatContainer .chatFooter> .getFile> button, .chatContainer .chatFooter> .but> button {
	width: 48px;
	height: 48px;
	transition: all 0.1s;
}

.chatContainer .chatFooter> .getFile> button:hover, .chatContainer .chatFooter> .but> button:hover {
	filter: opacity(0.7);
}

.area.error:empty::before {
	color: var(--red-400);
}

.messagesList.empty {
	display: flex;
	width: 100%;
	height: 100%;
	padding: 18px;
	align-items: center;
	justify-content: center;
	color: var(--slate-400, #94A3B8);
	font-size: 16px;
}

.messagesList {
	display: flex;
	flex-direction: COLUMN;
	position: relative;
	padding: 12px;
	gap: 18px;
}

.messagesList> .messagesData {
	display: block;
	text-align: center;
	color: var(--slate-900, #0F172A);
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
}

.messagesList> .messageItem {
	display: flex;
	position: relative;
	align-items: flex-end;
	max-width: min(640px, 80%);
	margin: 0 auto 0 0;
	width: 100%;
	gap: 8px;
}

.messagesList> .messageItem.my {
	flex-direction: row-reverse;
	margin: 0 0 0 auto;
}

.messagesList> .messageItem> .userIco {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-width: 40px;
	margin: 0 0 5px 0;
}

.messagesList> .messageItem> .userIco> .icouser {
	width: 100%;
	height: 100%;
}

.messagesList> .messageItem> .itemMessage {
    display: flex;
    flex-direction: column;
    position: relative;
    background: #fff;
    flex-grow: 1;
    border-radius: 12px 12px 12px 0;
    padding: 12px;
    gap: 0px;
}

.messagesList> .messageItem> .itemMessage::before {
	content: '';
	display: block;
	position: absolute;
	bottom: 0px;
	right: 100%;
	width: 16px;
	height: 24px;
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAxNiAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE1Ljc2IDQuMjY2NTdMMTYgMFYxMFYyNEgwLjQwOTk5MkMwLjE4MzU2IDI0IDAgMjMuODE2NCAwIDIzLjU5QzAgMjMuNDMzIDAuMDg5NjU3NCAyMy4yODk4IDAuMjMwODg0IDIzLjIyMTJMNC41Mjg3MyAyMS4xMzRDMTEuMDU0NiAxNy45NjQ2IDE1LjM1MjYgMTEuNTA5OSAxNS43NiA0LjI2NjU3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==) center no-repeat;
	background-size: 100%;
}

.messagesList> .messageItem> .itemMessage> .message {
	display: block;
	position: relative;
	color: var(--slate-900, #0F172A);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 26px;
	padding-right: 12px;
	overflow-wrap: anywhere;
}

.messagesList> .messageItem> .itemMessage> span.date {
	display: block;
	color: var(--slate-400, #94A3B8);
	font-size: 14px;
	margin: -4px 0 0 auto;
}

.messagesList> .messageItem.my> .itemMessage::before {
	right: initial;
	left: 100%;
	transform: scale(-1, 1);
}

.messagesList> .messageItem.my> .itemMessage {
	border-radius: 12px 12px 0 12px;
}

.messageReplyBlock {
	display: flex;
	position: relative;
	cursor: pointer;
	background: var(--slate-100, #F1F5F9);
	padding: 8px 8px 8px 18px;
	border-radius: 8px 12px 12px 6px;
	flex-direction: column;
	gap: 8px;
}

.messageReplyBlock> .messageReplyHeader {
	display: BLOCK;
	color: var(--slate-900, #0F172A);
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	display: flex;
	align-items: CENTER;
	gap: 6px;
}

.messageReplyBlock> .messageReplyHeader> span.date {
	color: var(--slate-400, #94A3B8);
	font-weight: 400;
}

.messageReplyBlock.messageParentBlock {
	cursor: default;
	padding: 0 0 0 12px;
	border-left: 1px solid var(--slate-300, #CBD5E1);
	border-radius: 0;
	background: transparent;
}

.messageReplyBlock.messageParentBlock::before {
	display: none;
}

.itemMessageAuthorname {
	display: block;
	position: relative;
	color: var(--slate-900, #0F172A);
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	margin: 0 0 3px;
}

.messageReplyBlock> .messageReplyContent {
	display: block;
	position: relative;
	color: var(--slate-900, #0F172A);
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
	overflow-wrap: anywhere;
}

.messageReplyBlock::before {
	content: '';
	width: 4px;
	position: absolute;
	top: 4px;
	left: 4px;
	bottom: 4px;
	border-radius: 10px;
	background: var(--sky-600, #0284C7);
}

.messagesList> .messageItem> .itemMessage> .message p {
	display: block;
	margin: 0;
	padding: 0;
}

.messagesList> .messageItem.focus {
	animation: focus 0.7s forwards 0.3s;
}

@keyframes focus {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.1);
	}

	100% {
		transform: scale(1);
	}
}

.messagesList> .newMessages {
	display: block;
	text-align: center;
	color: var(--slate-400, #0F172A);
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
}

.uploadChatImage {
	display: flex;
	align-items: center;
	position: relative;
	gap: 12px;
}

.uploadChatImage> .image {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 100%;
}

.uploadChatImage> .image> .img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	overflow: hidden;
	border-radius: 100px;
	border: 1px solid var(--slate-300, #CBD5E1);
	background: var(--slate-200, #E2E8F0);
}

.uploadChatImage> .image> .img img {
	position: absolute;
	height: auto;
	max-width: 100%;
}

.itemMessage> .settingsMenu {
	display: block;
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: opacity(0);
	z-index: 3;
}

.itemMessage:hover> .settingsMenu {
	filter: opacity(1);
}

.itemMessage.open> .settingsMenu {
	filter: opacity(1);
}


.chatContainer .formReply {
	display: flex;
	flex-direction: column;
	position: relative;
	min-height: 60px;
	height: 60px;
	justify-content: center;
	padding: 0 0 0 28px;
	background: #fff;
	width: 100%;
}

.chatContainer .formReply::before {
	content: '';
	display: block;
	position: absolute;
	top: 5px;
	bottom: 5px;
	left: 12px;
	width: 4px;
	background: var(--sky-600);
	border-radius: 5px;
}

.chatContainer .formReply> b {
	color: var(--slate-900, #0F172A);
	font-size: 14px;
	margin: 0 0 5px;
	max-width: calc(100% - 60px);
	position: relative;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.chatContainer .formReply> .mess {
	display: block;
	position: relative;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	width: calc(100% - 60px);
}

.chatContainer .formReply> a.formReplyClose {
	display: flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	position: absolute;
	right: 14px;
}


.chatContainer .messageFilesBlock {
	display: flex;
	flex-direction: column;
	position: relative;
	min-height: 60px;
	height: 60px;
	justify-content: center;
	padding: 12px 12px;
	background: #fff;
	width: 100%;
	display: block;
	height: max-content;
	min-height: max-content;
}

.chatContainer .messageFilesBlock> b {
	color: var(--slate-900, #0F172A);
	font-size: 14px;
	margin: 0 0 10px;
	max-width: calc(100% - 60px);
	position: relative;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	display: block;
}

.chatContainer .messageFilesBlock .uploadFilesList {
	margin: 0;
}







.message_deleted {
	display: block;
	color: var(--slate-300);
	font-style: italic;
}

i.message_deleted {
	display: inline;
}

.labelUserEdit {
	display: flex;
	position: relative;
	width: 100%;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
	padding: 0 24px 0 0;
}

.labelUserEdit> .settingsMenu {
	position: absolute;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 32px;
	padding: 0;
	margin: 2px 0 0;
}

.labelUserEdit .settingsMenu {
	filter: opacity(0);
	z-index: 3;
}

.labelUserEdit:hover .settingsMenu {
	filter: opacity(1);
}

.labelUserEdit.open .settingsMenu {
	filter: opacity(1);
}


.labelUserEdit> input[type="checkbox"] {
	display: none;
}


.chatsListHeader> form.search button[data-enity="chatsSearchClose"] {
	position: absolute;
	background: #fff;
	width: 40px;
	height: 38px;
	right: 1px;
	z-index: 10;
	padding: 0;
	top: 1px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
}

.messageFilesList {
	display: flex;
	gap: 6px;
	position: relative;
	padding: 5px 0 8px;
}

.messageFilesList> a {
	display: flex;
	align-items: CENTER;
	position: relative;
	border: 1px solid;
	padding: 3px 5px;
	border-radius: 5px;
}
/********************************************** END Chats ***************************************************/


























/********************************************** Admin Panel ***************************************************/
.pc_sidebar> .projectsListConstruction> .projectsList.adminBar {
	height: calc(100vh - 76px - 66px);
	padding: 0;
}

.adminBar nav {
	display: flex;
	flex-direction: column;
	position: relative;
	gap: 6px;
}

.adminBar nav> .item {
	display: flex;
	flex-direction: column;
}

.adminBar nav> .item> a {
	display: flex;
	align-items: center;
	position: relative;
	padding: 12px 18px;
	color: var(--slate-900);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	gap: 12px;
}

.adminBar nav> .item.active> a {
	background: var(--slate-500);
	color: #fff;
}

.adminBar nav> .item> a> .ico {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 24px;
	height: 24px;
}

.adminBar nav> .item:not(.active)> a:hover {
	background: var(--slate-300);
}

.adminBar nav> .item> a svg path {
	fill: #000;
}

.adminBar nav> .item.active> a svg path {
	fill: #fff;
}

.adminBar nav> .item> .subitems {
	display: none;
}

.adminBar nav> .item.active> .subitems {
	display: flex;
	flex-direction: column;
	position: relative;
}

.adminProjectsContent .pc_sidebar {
	width: 300px;
}

.adminBar nav> .item.active> .subitems> a {
	display: flex;
	align-items: center;
	position: relative;
	padding: 12px 18px;
	color: var(--slate-900);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	gap: 12px;
	padding-left: 54px;
}

.adminBar nav> .item.active> .subitems> a.active {
	background: rgb(100 116 139 / 22%);
	/* color: #fff; */
}

.adminBar nav> .item.active> .subitems> a:not(.active):hover {
	background: var(--slate-300);
}



.adminTableBefore {
	display: block;
	position: relative;
	max-width: 100%;
	overflow-x: overlay;
	padding: 0 12px 12px 0;
	margin: 0 -18px;
	max-width: calc(100% + 36px);
	max-height: calc(100vh - 160px);
}

.adminTableBefore::-webkit-scrollbar {
	border-radius: 6px;
	background: #f1f5f9;
	width: 6px;
	height: 6px;
}

.adminTableBefore::-webkit-scrollbar-button {
	width: 18px;
	height: 0px;
}

.adminTableBefore::-webkit-scrollbar-track {
	background: var(--slate-300);
	padding-top: 2px;
	border-radius: 8px;
}

.adminTableBefore::-webkit-scrollbar-thumb {
	background: var(--slate-400);
	margin: 2px;
	border-bottom-width: 5px;
}

table.adminTable {
	min-width: 100%;
	/* width: max-content; */
	border-collapse: collapse;
	/* border: 1px solid #000; */
}

table.adminTable th, table.adminTable td {
	border: 1px solid #CBD5E1;
	padding: 8px;
	text-align: left;
	color: var(--slate-900, #0F172A);
	font-size: 14px;
}

table.adminTable tr:hover td {
	background: #EAEFF5;
}

table.adminTable td a.darklink {
	text-decoration: underline;
}

table.adminTable th {
	font-weight: 700;
}

table.adminTable th.min, table.adminTable td.min {
	width: 1%;
}

table.adminTable th.nowrap, table.adminTable td.nowrap {
	white-space: nowrap;
}

table.adminTable th.center, table.adminTable td.center {
	text-align: center;
}

.aei {
	display: flex;
	min-width: max-content;
	gap: 5px;
	align-items: center;
	justify-content: center;
}

.aei .btn {
	min-width: 30px;
	min-height: 30px;
	height: 30px;
	width: 30px;
}

.aei .btn svg {
	height: auto;
	width: 18px;
}


.addProject .modalRightContent, .projectEdit .modalRightContent, .addUser .modalRightContent, .editUser .modalRightContent {
	max-width: 640px;
}

.adminProjectsContent .pc_sidebarBefore {
	width: 300px;
	min-width: 300px;
}

.adminProjectsContent .pc_sidebar {
	width: 300px;
}

.adminProjectsContent .pc_content {
	width: calc(100vw - 300px);
	transition: all 0.3s;
}

.adminProjectsContent .pc_sidebarBefore.is_hide + .pc_content {
	width: calc(100% - 24px);
}

.adminProjectsContent .pc_sidebarBefore.is_hide {
	width: 24px;
	min-width: 24px;
}

table.adminTable th> a {
	display: flex;
	align-items: center;
	color: var(--slate-900, #0F172A);
	min-height: 24px;
	white-space: nowrap;
}

table.adminTable th> a> svg {
	margin: 0 0 -1px 0;
	display: none;
}

table.adminTable th> a.active> svg {
	display: inline-block;
}

table.adminTable th> a[data-sort="DESC"]> svg {
	transform: scale(1, -1);
	margin: 0 0 -3px 0;
}



a.darklink {
	color: var(--slate-900);
}

a.darklink:hover {color: var(--slate-700);}

.projectUsersList {
	display: flex;
	flex-direction: column;
	white-space: nowrap;
	gap: 6px;
	position: relative;
}

.projectUsersList:not(.expanded)> a:nth-child(2) {
	padding-right: 40px;
}

.projectUsersList a[data-enity="projectUsersListShowall"] {
	position: absolute;
	bottom: -3px;
	display: flex;
	align-items: center;
	right: 0;
}

.projectUsersList.expanded a[data-enity="projectUsersListShowall"] {
	display: none;
}

table.adminTable td.name {
	min-width: 340px;
}

.projectName {
	display: flex;
	flex-direction: column;
	position: relative;
}

.projectName> i {
	display: BLOCK;
	padding: 5px 0 0;
	font-size: 11px;
	color: var(--slate-500);
}




/********************************************** END Admin Panel ***************************************************/







body .selectize-input.has-items {
	padding: 0 !important;
	min-height: 40px;
	display: FLEX;
	align-items: center;
	padding: 3px 3px 1px !important;
	flex-wrap: wrap;
}

body .selectize-control.multi .selectize-input [data-value] {
	text-shadow: none;
	border-radius: 3px;
	background: #CBD5E1;
	background-repeat: repeat-x;
	box-shadow: none;
	border: 0;
	border-radius: 30px;
	color: #333;
	padding: 3px 10px;
	font-weight: 500;
}

body .selectize-control.plugin-remove_button .item .remove {
	border: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0px 4px 0 3px;
	width: 20px;
	height: 20px;
	padding: 0;
	border-radius: 100%;
}


body .single .selectize-input.has-items {
	padding: 0 10px !important;
	font-size: 16px;
	color: var(--slate-900, #0F172A) !important;
	display: flex !important;
	align-items: center !important;
}



























































/************************************************** Animations ************************************************/
@keyframes fadeInRight {
	from {
		opacity: 0;
		-webkit-transform: translate3d(100%,0,0);
		transform: translate3d(100%,0,0)
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInLeft {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-100%,0,0);
		transform: translate3d(-100%,0,0)
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0,-100%,0);
		transform: translate3d(0,-100%,0)
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInDownBig {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0,-2000px,0);
		transform: translate3d(0,-2000px,0)
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInLeftBig {
	from {
		opacity: 0;
		-webkit-transform: translate3d(-2000px,0,0);
		transform: translate3d(-2000px,0,0)
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInRightBig {
	from {
		opacity: 0;
		-webkit-transform: translate3d(2000px,0,0);
		transform: translate3d(2000px,0,0)
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0,100%,0);
		transform: translate3d(0,100%,0)
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeInUpBig {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0,2000px,0);
		transform: translate3d(0,2000px,0)
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none
	}
}

@keyframes fadeIn {
	from {
		filter: opacity(0);
	}

	to {
		filter: opacity(1);
	}
}

@keyframes fadeOut {
	from {
		filter: opacity(1);
	}

	to {
		filter: opacity(0);
	}
}
/************************************************** END Animations ************************************************/





















/************************************************** Slick ************************************************/
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
}

.slick-slider .slick-track, .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
}

.slick-track:before, .slick-track:after {
    display: table;
    content: '';
}
.slick-track:after {
    clear: both;
}
.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir='rtl'] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}

button.slick-arrow {
	width: 40px;
	height: 40px;
	position: absolute;
	top: calc(50% - 20px);
	z-index: 10;
	border: 0px;
	cursor: pointer;
	background: url(../images/arrow_left.svg) center no-repeat;
}

button.slick-prev.slick-arrow {
    left: 0;
}

button.slick-next.slick-arrow {
    right: 0;
    background: url('../images/arrow_right.svg') center no-repeat;
}

button.slick-arrow.slick-disabled {
	filter: opacity(0.2);
}

button.slick-arrow:not(.slick-disabled):hover {
	filter: opacity(0.7);
}

ul.slick-dots {
    display: block;
    text-align: center; 
    position: relative;
    margin: 10px 0px 0px 0px;
    z-index: 1;
}

ul.slick-dots> li {
    display: inline-block;
    position: relative;
    list-style: none;
    margin: 0px;
    padding: 0px;
}

ul.slick-dots> li> button {
    display: inline-block;
    text-indent: -9999px;
    width: 12px;
    height: 12px;
    margin: 0px 4px;
    border-radius: 100px;
    cursor: pointer;
    background: #d6d6d6;
    border: 0px;
}

ul.slick-dots> li.slick-active> button {
    background: #008ED5;
}
/************************************************** END Slick ************************************************/