/* Base layout variables */
:root {
	--app-sa-bot: var(--sa-bot);

	--keyboard-height: 0px;
	--visualViewport-offsetTop: 0px;
	--visualViewport-offsetBottom: calc(-1 * var(--visualViewport-offsetTop));

	--visualViewport-top: var(--visualViewport-offsetTop);
	--visualViewport-bottom: calc(var(--keyboard-height) - var(--visualViewport-offsetTop));

	--desktop-primary-menu-width: 64px;

	--mobile-primary-menu-half-opened-conent-height: 310px;
	--mobile-primary-menu-full-opened-conent-height: 549px;
	--mobile-primary-menu-swipe-zone-height: 9px;
	--mobile-primary-menu-tap-bar-height: 48px;

	--desktop-task-panel-height: 40px;
	--mobile-task-panel-height: 52px;

	--mobile-head-height: 44px;
}

/* Viewport-specific positioning variables */
@media screen and (min-width: 481px) {
	:root {
		--task-panel-height: 0px;
		--primary-menu-height: 0px;
	}
	body.withTaskPanel {
		--task-panel-height: var(--desktop-task-panel-height);
	}
	body {
		--footerMobile-height: 0px;
		--innerFooterMobile-height: 0px;
	}
}
@media screen and (max-width: 480px) {
	:root {
		--task-panel-height: 0px;
		--primary-menu-height: calc(var(--mobile-primary-menu-tap-bar-height) + 1px + max(var(--sa-bot), 13px));
	}
	body.withTaskPanel {
		--task-panel-height: var(--mobile-task-panel-height);
	}
	body {
		--footerMobile-height: calc(var(--primary-menu-height) + var(--task-panel-height));
		--innerFooterMobile-height: 0px;
	}
	body.withModal,
	body[data-page=search] {
		--footerMobile-height: 0px;
		--innerFooterMobile-height: var(--sa-bot);
	}
	body.w_keyboard {
		--innerFooterMobile-height: 0px;
		--app-sa-bot: 0px;
	}
}

html {
	margin: 0;
	padding: 0;
	-webkit-overflow-scrolling: auto
}
body {
	background: var(--base-cont-low);
	margin: 0;
	padding: 0;
	font: 13px/20px var(--font-base);
	color: var(--base-txt-primary);
	min-width: 320px;
	overscroll-behavior: none; /* відключаємо нативне оновлення свайпом вниз */
	-webkit-overflow-scrolling: auto;
	overflow-x: hidden;
	/* -webkit-user-select: none; */
	user-select: none;
	touch-action: none; /* пробую позбавитись залипання "свайпу" на мобілі + це пофіксило проблему, коли можна було ускролить контент кудись за область вікна */
}
@media (max-width: 480px) {
	body {
	  background: var(--base-cont-mod-low);
	}
	body[data-page="search"] #content:has(#empty_search) {
		touch-action: none; /* щоб не скролилось поза екран на ios */
	}
}
body[data-page=tasks],
body[data-page=users_tasks],
body[data-page=kanban],
body[data-page=kanban_days],
body[data-page=task_edit],
body[data-page=project_edit],
body[data-page=projects],
body[data-page=projects_kanban],
body[data-page=users],
body[data-page=contacts],
body[data-page=project_log],
body[data-page=bill] {
  background: var(--base-cont-low);
}

body[data-page=report],
body[data-page=contacts],
body[data-page=users],
body[data-page=projects_grid],
body[data-page=files_grid],
body[data-page=tasks_grid],
body[data-page=task_schedule]
{
	background: var(--base-cont-top);
}
body[data-page=search] {
	background: var(--base-cont-low);
}
body[data-page=none]
{
	background: var(--base-cont-low);
}
body[data-page=contacts] #mass_n_filt,
body[data-page=users] #mass_n_filt,
body[data-page=projects_grid] #mass_n_filt,
body[data-page=files_grid] #mass_n_filt,
body[data-page=tasks_grid] #mass_n_filt
{
	box-shadow: none;
}
body[data-page=contacts] #content,
body[data-page=users] #content,
body[data-page=projects_grid] #content,
body[data-page=files_grid] #content,
body[data-page=tasks_grid] #content
{
	padding-top: 0;
}

body.withModal > *:not(.modal) * {-webkit-user-select: none;user-select: none;}
body.grabbing {cursor: grabbing}
body.col-resize {cursor: col-resize}
[data-allow-select] {-webkit-user-select: text !important; user-select: text !important}
font {font:inherit}
input, textarea, option, select {font:12px var(--font-base);color:var(--base-txt-accent)}
input:focus, textarea:focus {outline:none;}
input:-webkit-autofill {color:var(--base-txt-accent) !important;background-color:var(--inp-cont-top) !important;-webkit-box-shadow:0 0 0 50px var(--inp-cont-top) inset;transition: background-color 5000s ease-in-out 0s,color 5000s ease-in-out 0s;}
.modal input:-webkit-autofill {background-color:var(--menu-inp-cont) !important;-webkit-box-shadow:0 0 0 50px var(--menu-inp-cont) inset;}
textarea {resize:vertical}
input.inp_load_pre, input.inp_load {background:var(--base-hlt-hover) !important}
input.inp_error{color:var(--base-btn-alert-primary-minor) !important}
input.input_error {border-color: var(--inp-cont-top) !important; box-shadow: var(--shadow-brd-error) !important;}

optgroup { font-weight:normal; font-style:normal}
optgroup.gr {
    color:var(--base-txt-secondary);
    padding:7px 0;
    font:bold 14px/20px var(--font-base);
    text-indent:7px;
    border-top:2px solid var(--base-line-alt-cardbrd); background:var(--base-cont-low);
}
optgroup.gr:first-child {border-top:none}
optgroup.sgr {
    background:var(--base-cont-top);
    color:var(--base-txt-ghost);
    padding:5px 0;
    text-indent:7px; font:12px var(--font-base);border-top:1px solid var(--base-cont-low)
}
optgroup.sgr option:first-child {margin-top:5px}
option { padding:0 4px; background: var(--inp-cont-top);}
optgroup option {
    text-transform:none;
    background:var(--base-cont-top);
    color:var(--base-txt-accent);
    font-weight:normal;
    text-indent:2px;
    padding:2px 5px;
}
optgroup.gr option { text-indent:4px}
input, textarea { padding:2px}
::selection, ::-moz-selection {background:var(--inp-selection)}
.massPanel ::selection, .massPanel ::-moz-selection, .menu ::selection, .menu ::-moz-selection, .modal ::selection, .modal ::-moz-selection, #sidePanel__wrapper ::selection, #sidePanel__wrapper ::-moz-selection {background:var(--menu-inp-selection)}
p, h1, h2, h3, h4, h5, ul {
    margin:0;
    padding:0;
    margin-bottom:15px
}
h1 {font:21px/28px var(--font-base); margin-right:20px; color:var(--base-txt-accent);}
h1 a { color:var(--base-txt-accent)}
h1 a:hover { color:var(--base-txt-max)}
h2 { font-size:18px; font-weight:normal}
h3 { font-size:17px; font-weight:normal}
h3 a {
  color:var(--base-txt-accent);
  padding:2px;
  margin:-2px
}
h3 a:hover {
  color:var(--base-txt-max);
  background:var(--base-cont-low)
}
h4 {font: bold 14px var(--font-base);line-height:130%;}
h4 b { font:inherit}
h5 {font: var(--font-ui-13-small-bold);}
h4.ns { padding-top:10px; margin-bottom:5px}
.gray { color:var(--base-txt-secondary)}
.gray_alt { color:var(--base-txt-tertiary)}
p.gray a { color:var(--base-txt-secondary)}
span.gray a.onch { color:var(--base-txt-tertiary); border-bottom:1px dashed var(--base-txt-tertiary)}
p.ah4, div.ah4 { margin-top:-15px}
p.content, div.content, .blockadd p {
    font-size:14px;
    line-height:20px;
    margin-bottom:15px
}
div.content font { font:14px var(--font-base)}
p.nomarg, h5.nomarg, h4.nomarg { margin-bottom:0 !important}
p.nomarg2, h5.nomarg2, h4.nomarg2 { margin-bottom:5px !important}
form { margin:0; padding:0}
ul{margin:6px 0 24px 20px;}
ol{margin:6px 0 24px 40px;padding-inline-start: 0;}
ul li{margin:0 0 6px;padding:0;list-style-type:none;}
ul li:before {content:'\2022'; float:left;font:bold 20px/14px var(--font-base); color:var(--base-txt-link-minor); margin:3px 0 -3px -16px;}
ol li{margin:0 0 6px;padding:0;list-style-type:none;}
ol {counter-reset: ol-counter;}
ol li:before {float:left; content: counter(ol-counter);counter-increment: ol-counter;font:bold 13px/20px var(--font-base); color:var(--base-txt-link-minor); margin:0 5px 0 -40px; width:27px; text-align:right;white-space: nowrap;}


label {padding:2px;position:relative;}
label.act {background:var(--base-hlt-alt-label);color: var(--base-txt-primary);}

a {color: var(--base-txt-link-minor);text-decoration:none;cursor:pointer;}
a:hover {color:var(--base-txt-link-major);}
a.inherit {color:inherit}

a.inline {color:inherit;border-bottom: 1px dashed;}
a.inline:hover {color:var(--base-txt-link-minor);border-bottom: 1px dashed;}

a.inline_dotted {
	color: inherit;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 3px;
	transition: text-decoration-color .2s ease-out;
}
a.inline_dotted:hover {
	color: inherit;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 3px;
	text-decoration-color: var(--base-txt-link-minor);
	transition: text-decoration-color .2s ease-in;
}

a.dashed_font font {color:inherit;border-bottom:1px dashed inherit;}
a.dashed_font:hover font { color:var(--base-txt-link-minor); border-bottom:1px dashed var(--base-txt-link-minor)}

a.inline_fnt, span.inline2 {color:inherit; cursor:pointer;}
a.inline_fnt:hover font, span.inline2:hover {color:var(--base-txt-link-minor)}

.content span[style]:not(.av_sm) { margin:-2px -1px; padding:2px 1px}
.content strike { color:var(--base-txt-secondary)}

input.wide { width:95%}
input.wide2 { width:90%}
.input2, .button2 { padding:1px 2px}
input.inputmain {width: 100%;font:21px/28px var(--font-base) !important;border-radius:4px;box-sizing: border-box;}
input.inputmain:focus {box-shadow:var(--shadow-brd-focus); border-color:transparent; outline: none}
input[type=text].inputmain { border-radius:4px;}
input.inputbig { font:18px var(--font-base) !important}
input.empty { color:var(--base-txt-secondary)}

/* -------------------------------------------------------------------------------------------------------------------*/

input[type=text], input[type=number], input[type=password], input[type=number], input[type=email], textarea, select {border:1px solid var(--inp-cont-brd);border-radius:2px;background:var(--inp-cont-top);}
.modal .setup input[type=text], .modal .setup input[type=number], .modal .setup input[type=password], .modal .setup input[type=number], .modal .setup input[type=email], .modal .setup textarea, .modal .setup select {border:1px solid var(--menu-inp-brd);border-radius:2px;background:var(--menu-inp-cont);}
.modal .setup input:focus {border-color:transparent}
select {padding:3px; border-width:1px;/*-webkit-appearance: none;*/}
.setup input[type=text], .setup input[type=number], .setup input[type=email], .setup input[type=tel] {}
.settings input[type=text], .newsletter input[type=text], .newsletter textarea,
.dataadd input[type=text], .dataadd input[type=email], .dataadd input[type=tel], .dataadd textarea { padding:3px 4px}
input[type=submit], input[type=button] {cursor: pointer; padding:6px 15px; font:bold 14px/20px var(--font-base); border-radius:4px; height:32px}
.setup input[type=number] {width:40px}
a.button, span.button {display:inline-block;padding:6px 15px;font:bold 14px/20px var(--font-base);border-radius:4px;}
a.button .ico_l {margin:0 10px 0 0}
a.button .ico_l.ico_svg30 {margin:-5px 10px -5px -5px}
a.button .ico_r {margin:0 0 0 10px}
a.button .ico_r.ico_user_add, a.button .ico_r.ico_project_add {margin:-5px 0 -5px 10px}
a.button_blue_brd {font-weight:normal;padding: 10px 20px;border-radius: 20px;}
input.button_s2_alt {display:none}
input.button_sm {height:24px; padding:2px 10px; font:12px/20px var(--font-base)}
a.button_sm, span.button_sm {padding:2px 10px; font:12px/20px var(--font-base)}
input.button_big {height:40px; padding:10px 15px; font:bold 15px/20px var(--font-base);box-sizing: border-box;border-radius: 8px}
a.button_big, span.button_big {padding:10px 15px;font: bold 15px/20px var(--font-base);border-radius: 8px}
a.button_big .ico_activate {margin:-5px 10px -5px 0}
a.button_round {border-radius:20px;}
a.button_big.button_round {padding:10px 25px;}
input.button_white, a.button_white, a.button_white2red, span.button_white {font-weight:normal}
input.button_white_act, a.button_white_act, span.button_white_act {font-weight:normal}
input.button_trans, a.button_trans, span.button_trans {font-weight:normal}

.button .button_part {background: var(--base-btn-primary-minor); float:right; margin: -6px -15px;padding: 6px 15px;}
.button .button_part:hover {background: var(--base-btn-primary-major);}
.button .button_dots {color:transparent;float:right;width:0;white-space:nowrap;text-align:center;overflow:hidden;margin: -6px -15px -6px 15px;border-radius:0 4px 4px 0;padding: 6px 0;font: bold 10px/20px var(--font-base);transition: 0.5s all 0.5s ease, color 0.5s ease;}
.button .button_dots:before {content:''; float:left; border-left:1px solid var(--white-ghost); margin:-1px -9px; height:20px; }
.button:hover .button_dots:before {opacity:0}

/* -------------------------------------------------------------------------------------------------------------------*/
/* checkboxes and radio buttons */

.wcheckbox {cursor:pointer; display:inline-block}
.wcheckbox input[type=checkbox] {display:none}
.wcheckbox input[type=checkbox] ~ span {float:left; width:20px; height:20px; margin:0 4px 0 -4px; background:url(/assets/img/iconset.svg) no-repeat -20px -1360px}
.wcheckbox:hover input[type=checkbox] + span {background-position:-40px -1360px}
.wcheckbox input[type=checkbox]:checked + span {background-position:0 -1360px}
.checkbox {margin:1px 5px 1px 1px;padding:0;vertical-align:middle}

label input[type=checkbox].w_ico {opacity:0; width:20px; height:20px; padding:0; float:left; margin:0 -20px 0 0;cursor: pointer;}
label input[type=checkbox].w_ico + i {display:inline-block; width:20px;height:20px;margin:0;cursor: pointer;background: url(/assets/img/iconset.svg) no-repeat -20px -1300px; vertical-align:bottom}
label:hover input[type=checkbox].w_ico + i {background-position: -20px -1320px;}
label input[type=checkbox].w_ico:checked + i {background-position: 0 -1320px;}
label input[type=checkbox].w_ico:disabled:checked + i {background-position: 0 -1300px;}

label input[type=checkbox].w_bico {opacity:0; width:20px; height:20px; padding:0; float:left; margin:0 -20px 0 0;cursor: pointer;}
label input[type=checkbox].w_bico + i {display:inline-block; width:20px;height:20px;margin: 0;background:url(/assets/img/iconset.svg) no-repeat -20px -1280px; vertical-align:bottom}
label:hover input[type=checkbox].w_bico + i {background-position:-40px -1280px}
label input[type=checkbox].w_bico:checked + i {background-position:0 -1220px}

label input[type=checkbox].w_sico {opacity:0; width:20px; height:20px; padding:0; float:left; margin:0 -20px 0 0;cursor: pointer;}
label input[type=checkbox].w_sico + i {display:inline-block;width:20px;height:20px;margin: 0;background: url(/assets/img/iconset.svg) no-repeat -20px -1360px;vertical-align: top;}
label:hover input[type=checkbox].w_sico + i {background-position:-40px -1360px}
label input[type=checkbox].w_sico:checked + i {background-position: 0 -1360px;}


p.wlabel {margin-bottom: 5px;font: 13px/20px var(--font-base);color: var(--base-txt-tertiary);}
p.wlabel label {white-space:normal  !important;line-height: 20px;vertical-align: top;}
p.wlabel ~ p.wlabel:last-child {margin-bottom: 12px !important;}
.wlabel label input {margin:3px 5px 0 0;padding:0;border:none;vertical-align: top;}
p.wlabel label input[type=checkbox].w_sico + i {margin:-1px 2px 0 0}

p.fld_ { margin:0 0 5px 0}
p.fld_ span { color:var(--base-txt-tertiary); margin-left:5px}
p.fld_ span a {
  color:var(--base-txt-tertiary);
  margin-left:5px;

  border-bottom:1px dashed var(--base-txt-tertiary);
}
p.graysmall {font:italic 12px/16px var(--font-base);color:var(--base-txt-tertiary); padding:15px 15px 5px 25px; margin:0;}
p.graysmall a.inline_r {float:right; margin:0 10px;}
p.tip { background:var(--base-hlt-w-pressed); padding:7px 5px 7px 50px; position:relative; min-height:40px; border-radius:5px}
p.tip b { color:var(--base-btn-notice-minor); font:bold 14px var(--font-base)}
p.gray b { color:var(--base-txt-primary)}
p.gray span.gray {color:var(--base-txt-tertiary)}

/* -------------------------------------------------------------------------------------------------------------------*/

body::-webkit-scrollbar {width: 12px;}
body::-webkit-scrollbar:horizontal {height: 12px;}
body::-webkit-scrollbar-track {background-color:var(--base-surf-top)}
body::-webkit-scrollbar-track:hover {background-color:var(--base-cont-top)}
body::-webkit-scrollbar-track:horizontal {}
body::-webkit-scrollbar-thumb {background-color: var(--base-cont-top);border:1px solid var(--base-line-alt-cardbrd);border-radius:10px;}
::-webkit-scrollbar-button { display:none;}
::-webkit-scrollbar-corner {display:none;}
body.sidePanelShown::-webkit-scrollbar-thumb:vertical {background-color:var(--base-cont-mod-top);border:1px solid var(--base-cont-mod-top); }
body.sidePanelShown::-webkit-scrollbar-track:vertical, body.sidePanelShown::-webkit-scrollbar-track:vertical:hover {background-color:var(--base-cont-mod-top)}


div::-webkit-scrollbar {width: 6px;}
div::-webkit-scrollbar-track {background-color: var(--scroll-easy); box-shadow: -1px 0 var(--scroll-minor)}
div::-webkit-scrollbar-track:hover {background-color:var(--base-cont-low)}
div::-webkit-scrollbar-thumb:vertical {background-color:var(--base-cont-low)}
div:hover::-webkit-scrollbar-thumb:vertical {background-color:var(--base-surf-top)}

div#preview_import::-webkit-scrollbar {width: 6px;}
div#preview_import::-webkit-scrollbar-track {background-color: transparent;}
div#preview_import::-webkit-scrollbar-track:hover {background-color:var(--base-surf-top)}
div#preview_import::-webkit-scrollbar-thumb:vertical {background-color:var(--base-surf-top)}
div#preview_import:hover::-webkit-scrollbar-thumb:vertical {background-color:var(--base-line-alt-cardbrd)}

div.verticalScroll, textarea.verticalScroll {
    overflow: auto;
    overflow-x: hidden;
    position: relative;
}
div.verticalScroll::-webkit-scrollbar, textarea.verticalScroll::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}
div.verticalScroll::-webkit-scrollbar-track, textarea.verticalScroll::-webkit-scrollbar-track {
    background-color: transparent;
    border: 0;
}
div.verticalScroll::-webkit-scrollbar-track:hover, textarea.verticalScroll::-webkit-scrollbar-track:hover,
body.mobile div.verticalScroll::-webkit-scrollbar-track.mobile_hover,
body.mobile textarea.verticalScroll::-webkit-scrollbar-track.mobile_hover {
    background-color: transparent;
}
div.verticalScroll::-webkit-scrollbar-button, textarea.verticalScroll::-webkit-scrollbar-button {
    display: none;
    height: 0;
    width: 0
}
div.verticalScroll::-webkit-scrollbar-corner, textarea.verticalScroll::-webkit-scrollbar-corner {
    background-color: transparent
}
div.verticalScroll::-webkit-scrollbar-thumb, textarea.verticalScroll::-webkit-scrollbar-thumb {
    background-color: transparent;
    border: 3px solid var(--base-cont-top);
    border-radius: 8px;
    min-height: 20%;
}
.modal div.verticalScroll::-webkit-scrollbar-thumb, textarea.verticalScroll::-webkit-scrollbar-thumb {
	border-color: var(--base-cont-mod-top);
}
div.verticalScroll:hover::-webkit-scrollbar-thumb, textarea.verticalScroll:hover::-webkit-scrollbar-thumb,
body.mobile div.verticalScroll.mobile_hover::-webkit-scrollbar-thumb,
body.mobile textarea.verticalScroll.mobile_hover::-webkit-scrollbar-thumb,
body.mobile textarea.verticalScroll:focus::-webkit-scrollbar-thumb {
	background-color: var(--scroll-minor);
}
div.verticalScroll::-webkit-scrollbar-thumb:hover, textarea.verticalScroll::-webkit-scrollbar-thumb:hover,
body.mobile div.verticalScroll::-webkit-scrollbar-thumb.mobile_hover,
body.mobile textarea.verticalScroll::-webkit-scrollbar-thumb.mobile_hover {
	background-color: var(--scroll-major);
}

code::-webkit-scrollbar {width: 8px; opacity:0.2;}
code:hover::-webkit-scrollbar {opacity:1;}
code::-webkit-scrollbar:horizontal {height: 8px;}
code::-webkit-scrollbar-track {background-color:var(--base-cont-low)}
code::-webkit-scrollbar-track:hover {background-color:var(--base-cont-low)}
code::-webkit-scrollbar-thumb {background-color:var(--base-surf-low);border-width:0}

#sidePanel__wrapper div::-webkit-scrollbar-track {background-color:var(--base-cont-mod-low)}
#sidePanel__wrapper div::-webkit-scrollbar-track:hover {background-color:var(--base-cont-mod-low)}
#sidePanel__wrapper div::-webkit-scrollbar-thumb {background-color:var(--menu-cont-line);border-width:0}

textarea::-webkit-scrollbar {width: 8px;}
textarea::-webkit-scrollbar-track {background-color:var(--base-cont-low)}
textarea::-webkit-scrollbar-track:hover {background-color:var(--base-cont-low)}
textarea::-webkit-scrollbar-thumb {background-color:var(--base-surf-low);border-width:0}

/* -------------------------------------------------------------------------------------------------------------------*/

textarea::-moz-placeholder { color:var(--base-txt-tertiary); opacity:1; font-style:italic; white-space: nowrap}
textarea::-webkit-input-placeholder { color:var(--base-txt-tertiary); opacity:1;font-style:italic; white-space: nowrap}
#sidePanel__wrapper textarea::-moz-placeholder {white-space: normal;}
#sidePanel__wrapper textarea::-webkit-input-placeholder {white-space: normal;}
input::-moz-placeholder { color:var(--base-txt-tertiary); opacity:1; font-style:italic; white-space: nowrap}
input::-webkit-input-placeholder {color:var(--base-txt-tertiary);opacity:1;font-style:italic;white-space: nowrap}
input.normholder::-moz-placeholder { color:inherit; opacity:1; font-style:normal}
input.normholder::-webkit-input-placeholder { color:inherit; opacity:1;font-style:normal}
input.inputmain::-moz-placeholder {font:20px/28px var(--font-base);}
input.inputmain::-webkit-input-placeholder {font:20px/28px var(--font-base);}

input.timepicker::-moz-placeholder {font-style:normal}
input.timepicker::-webkit-input-placeholder {font-style:normal}

/* -------------------------------------------------------------------------------------------------------------------*/

button.bookmark-active use:first-child {
	display:none
}
button.bookmark use:last-child {
	fill: var(--base-btn-notice-minor);
}
button.bookmark:not(.bookmark-active) use:last-child {
	display:none
}
.menu__item.bookmark-active ws-icon use:first-child {
	display:none
}
.menu__item.bookmark ws-icon use:last-child {
	fill: var(--base-btn-notice-minor);
}
.menu__item.bookmark:not(.bookmark-active) ws-icon use:last-child {
	display:none
}

ws-icon.star-toggle {
	transition: all 0.2s ease-in-out;
}
ws-icon.star-toggle svg use:last-child {
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}
ws-icon.star-toggle.star-starred {
	--icon-color: var(--base-btn-notice-minor);
}
.menu__item:hover ws-icon.star-toggle,
.menu__item.selected ws-icon.star-toggle {
	rotate: 72deg;
}
ws-icon.star-toggle.star-starred svg use:last-child,
.menu__item:hover ws-icon.star-toggle:not(.star-starred) svg use:last-child,
.menu__item.selected ws-icon.star-toggle:not(.star-starred) svg use:last-child{
	opacity: 1;
}
.menu__item:hover ws-icon.star-toggle.star-starred svg use:last-child,
.menu__item.selected ws-icon.star-toggle.star-starred svg use:last-child{
	opacity: 0;
}


/* BASE */
.sidePanel__list__item-task .menu__item ws-icon.star-toggle {
    opacity: 0;
}
.sidePanel__list__item-task .menu__item ws-icon.star-toggle svg use:nth-child(1) { opacity: 1 !important; }
.sidePanel__list__item-task .menu__item ws-icon.star-toggle svg use:nth-child(2) { opacity: 0 !important; }
.sidePanel__list__item-task .menu__item ws-icon.star-toggle svg use:nth-child(3) { opacity: 0 !important; }
.sidePanel__list__item-task:hover .menu__item ws-icon.star-toggle {
    opacity: 1;
    --icon-color: var(--base-txt-tertiary);
}


/* INITIAL OPEN */
.sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-initial,
.sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-initial.star-starred
{
    opacity: 1;
    --icon-color: var(--base-txt-tertiary);
}

/* INITIAL OPEN STARED */
.sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-initial.star-starred svg use:nth-child(1) { opacity: 1 !important; }
.sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-initial.star-starred svg use:nth-child(2) { opacity: 0 !important; }
.sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-initial.star-starred svg use:nth-child(3) { opacity: 0 !important; }

/* INITIAL OPEN STARED HOVER */
.sidePanel__list__item-task .menu__item:hover ws-icon.star-toggle.star-initial.star-starred {
    rotate: none;
}

/* INITIAL OPEN UNSTARED */
.sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-initial.star-starred svg use:nth-child(1) { opacity: 0 !important; }
.sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-initial.star-starred svg use:nth-child(2) { opacity: 0 !important; }
.sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-initial.star-starred svg use:nth-child(3) { opacity: 1 !important; }

/* INITIAL OPEN UNSTARED HOVER */
.sidePanel__list__item-task .menu__item:hover ws-icon.star-toggle.star-initial {
    --icon-color: var(--colorize-lbl-yelloworange);
}
.sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-initial.star-starred svg use:nth-child(1) { opacity: 1 !important; }
.sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-initial.star-starred svg use:nth-child(2) { opacity: 0 !important; }
.sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-initial.star-starred svg use:nth-child(3) { opacity: 0 !important; }



/* STARRED */
.sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-starred {
    opacity: 1;
    transition: none;
    --icon-color: var(--colorize-lbl-yelloworange);
}
.sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-starred svg use:nth-child(1) { opacity: 0 !important; }
.sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-starred svg use:nth-child(2) { opacity: 1 !important; }
.sidePanel__list__item-task .menu__item ws-icon.star-toggle.star-starred svg use:nth-child(3) { opacity: 0 !important; }

/* STARRED HOVER */
.sidePanel__list__item-task .menu__item:hover ws-icon.star-toggle.star-starred {
    --icon-color: var(--base-txt-btn-w);
}
.sidePanel__list__item-task .menu__item:hover ws-icon.star-toggle.star-starred svg use:nth-child(1) { opacity: 0 !important; }
.sidePanel__list__item-task .menu__item:hover ws-icon.star-toggle.star-starred svg use:nth-child(2) { opacity: 0 !important; }
.sidePanel__list__item-task .menu__item:hover ws-icon.star-toggle.star-starred svg use:nth-child(3) { opacity: 1 !important; }


/* UNSTARRED */
.sidePanel__list__item-task .menu__item ws-icon.star-toggle svg use:nth-child(1) { opacity: 1 !important; }
.sidePanel__list__item-task .menu__item ws-icon.star-toggle svg use:nth-child(2) { opacity: 0 !important; }
.sidePanel__list__item-task .menu__item ws-icon.star-toggle svg use:nth-child(3) { opacity: 0 !important; }
/* UNSTARRED HOVER */

.sidePanel__list__item-task .menu__item:hover ws-icon.star-toggle {
    --icon-color: var(--colorize-lbl-yelloworange);
}

.sidePanel__list__item-task .menu__item:hover ws-icon.star-toggle.star-starred {
    --icon-color: var(--base-txt-btn-w);
}

.sidePanel__list__item-task .menu__item:hover ws-icon.star-toggle.star-starred svg use:nth-child(1) { opacity: 0 !important; }
.sidePanel__list__item-task .menu__item:hover ws-icon.star-toggle.star-starred svg use:nth-child(2) { opacity: 0 !important; }
.sidePanel__list__item-task .menu__item:hover ws-icon.star-toggle.star-starred svg use:nth-child(3) { opacity: 1 !important; }

.sidePanel__list__item-task .menu__item:has(.star-toggle) {
    margin-left: -4px;
    margin-right: -2px;
}


ws-icon.pin-toggle {
	transition: all 0.2s ease-in-out;
}
ws-icon.pin-toggle svg use:last-child {
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}
ws-icon.pin-toggle.pin-pinned {
	--icon-color: var(--base-btn-notice-minor);
}
.menu__item:hover ws-icon.pin-toggle:not(.pin-pinned) svg,
.menu__item.selected ws-icon.pin-toggle:not(.pin-pinned) svg {
	animation: ws-icon-pin-set 0.3s ease-in-out 1;
	--icon-color: var(--base-btn-notice-minor);
}
.menu__item:hover ws-icon.pin-toggle.pin-pinned svg,
.menu__item.selected ws-icon.pin-toggle.pin-pinned svg {
	animation: ws-icon-pin-unset 0.3s ease-in-out 1;
	--icon-color: var(--base-txt-primary);
}

ws-icon.pin-toggle.pin-pinned svg use:last-child,
.menu__item:hover ws-icon.pin-toggle:not(.pin-pinned) svg use:last-child,
.menu__item.selected ws-icon.pin-toggle:not(.pin-pinned) svg use:last-child{
	opacity: 1;
}
.menu__item:hover ws-icon.pin-toggle.pin-pinned svg use:last-child,
.menu__item.selected ws-icon.pin-toggle.pin-pinned svg use:last-child{
	opacity: 0;
}

a.bookmark-withIcon.bookmark {
	ws-icon[name="star:star-solid"] {
		use {
			transition: fill .2s ease;
		}
		use:first-child {
			fill: var(--base-txt-muted);
		}
		use:last-child {
			fill: transparent;
		}
	}
	&:not(.clicked) {
		ws-icon[name="star:star-solid"]:hover {
			use:first-child {
				fill: transparent;
			}
			use:last-child {
				fill: var(--base-txt-muted);
			}
		}
	}
	&.bookmark-active {
		ws-icon[name="star:star-solid"] {
			use:first-child {
				fill: transparent;
			}
			use:last-child {
				fill: var(--colorize-lbl-yelloworange);
			}
		}
		&:not(.clicked) {
			ws-icon[name="star:star-solid"]:hover {
				use:first-child {
					fill: transparent;
				}
				use:last-child {
					fill: var(--colorize-lbl-orange);
				}
			}
		}
	}
}
span.bookmark-withIcon.bookmark {
	&:not(.bookmark-active) {
		display: none;
	}
	&.bookmark-active ws-icon[name="star-solid"] {
		--icon-color: var(--colorize-lbl-yelloworange);
	}
}

/* -------------------------------------------------------------------------------------------------------------------*/

span.ico, i.ico, a.ico, span.seen, a.seen, span.unseen, a.unseen {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin: -3px 2px -1px;
}
span.ico_r, span.ico_r2, i.ico_r, a.ico_r {float:right;margin: 0 0 0 4px;vertical-align:initial}
span.ico_l, span.ico_l2, i.ico_l, a.ico_l { float:left; margin: 0 4px 0 0; vertical-align:initial}
span.ico_c, i.ico_c, a.ico_c { display:block; margin: 0; vertical-align:initial}
span.ico_a { position:absolute; right:-2px; top:0; margin:0}
h1 span.unseen, h1 span.seen { margin-right:-5px}

/* -------------------------------------------------------------------------------------------------------------------*/

#content {padding: 24px 32px 12px 32px;flex-grow: 1; position: relative; }
body.withTaskPanel #content {padding: 24px 32px 64px 32px;}
body[data-page=users_tasks] #content,
body[data-page=calendar] #content,
body[data-page=kanban] #content,
body[data-page=kanban_days] #content,
body[data-page=projects_kanban] #content,
body[data-page=gantt] #content
{padding:0;}
body[data-page=report] #content {
	padding-top:0
}
/* -------------------------------------------------------------------------------------------------------------------*/

.clear {clear:both;height:0;overflow:hidden;font-size:0}
.line {height:1px;overflow:hidden;font-size:1px;background:var(--base-line-alt-cardbrd);margin-bottom:15px}
.line0 { height:1px; overflow:hidden}
.line2 {height:2px;overflow:hidden;font-size:1px;background:var(--base-line-alt-cardbrd);margin:15px 0 15px 0}
.line2__ {margin:-15px 0 -1px 0;height:1px;overflow:hidden}

.line-withDots {
	margin: 8px 32px;
	position:relative;
	overflow: visible;
	background:var(--base-hlt-g-notr-focus);
	opacity:0.6;
}
.line-withDots:before, .line-withDots:after {
	content:'';
	position:absolute;
	border:2px solid var(--base-hlt-g-notr-focus);
	top:-2px;
	border-radius:4px;
	width: 1px;
	height: 1px;
}
.line-withDots:after {
	right:0;
}
.line-withTextDots {
	margin: 8px 0;
	position: relative;
	overflow: visible;
	opacity: unset;
	color: var(--base-txt-tertiary);
	font: 12px/20px var(--font-base);
	height: unset;
	background: unset;
	text-align: center;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0 5px;

	&:before,
	&:after {
		content: '';
		border-top: var(--screen-px) solid var(--base-hlt-g-notr-focus);
		opacity: .6;
		flex: 1;
	}
	.in {
		&:before,
		&:after {
			content:'';
			position: absolute;
			border: 2px solid var(--base-hlt-g-notr-focus);
			background: var(--base-hlt-g-notr-focus);
			border-radius: 4px;
			width: 1px; height: 1px;
			opacity: .6;
			top: 50%;
			transform: translateY(-50%);
		}
		&:before {
			left: 0;
		}
		&:after {
			right: 0;
		}
	}
}

/* -------------------------------------------------------------------------------------------------------------------*/

ol.todo { padding:10px 0; margin:0 0 0 0;  }
ol.todo li {margin:0 0 0 20px; font-size:14px; padding:5px 0 5px 47px; color:var(--base-txt-muted); border-bottom:1px dashed var(--base-line-primary); list-style:none; cursor:pointer}
ol.todo li:first-child {border-top:1px dashed var(--base-line-primary)}
ol.todo li input {float:left;margin:2px; opacity:0;position: absolute;}
ol.todo li label {float:left;margin:0 0 -5px -25px; width:20px; height:20px;padding:0;position:relative;background: none !important;}
ol.todo li label ws-icon {
	position: absolute;
	svg {
		fill: var(--base-hlt-w-invert-minor);
		use:first-child { display: inline; }
	}
}
ol.todo li:hover label ws-icon {
	svg {
		fill: var(--base-hlt-invert);
		use { display: none; }
		use:nth-child(3) { display: inline; }
	}
}
ol.todo li.done label, ol.todo li.done:hover label {
	svg {
		use { display: none; }
		use:nth-child(3) { display: none; }
		use:nth-child(8) { display: inline; fill: var(--base-hlt-invert); }
		use:nth-child(11) { display: inline; fill: var(--base-txt-accent); }
	}
}
ol.todo li.done_td label, ol.todo li.done_td:hover label {
	svg {
		use { display: none; }
		use:nth-child(3) { display: none; }
		use:nth-child(9) { display: inline; fill: var(--lbl-today-minor); }
		use:nth-child(11) { display: inline; fill: var(--base-txt-accent); }
	}
}
ol.todo li.done_yd label, ol.todo li.done_yd:hover label {
	svg {
		use { display: none; }
		use:nth-child(3) { display: none; }
		use:nth-child(9) { display: inline; fill: var(--lbl-yesterday-minor); }
		use:nth-child(11) { display: inline; fill: var(--base-txt-accent); }
	}
}
ol.todo li {color:var(--base-txt-secondary)}
ol.todo li span.todo_status {font:11px var(--font-base); margin:0 0 0 5px}
ol.todo li span.todo_status b {font:11px var(--font-base); color:var(--base-txt-primary); background:var(--base-cont-low); padding:2px 10px; border-radius:3px; margin:0 5px 0 0}
ol.todo li.done {}
ol.todo li.done {color:var(--base-txt-tertiary); text-decoration:line-through; text-decoration-color:var(--base-txt-tertiary);}
ol.todo li:hover {color:var(--base-txt-link-major)}
ol.todo li.done:hover {color:var(--base-txt-tertiary)}
ol.todo li:before {content: counter(ol-counter); font:12px/20px var(--font-base); color:var(--base-txt-ghost); margin:0 0 0 -47px;  width:16px; }
ol.todo li:first-child:last-child:before {display:none}
ol.todo li:first-child:last-child {padding:5px 0 5px 25px}
ol.todo .ani_time {user-select: none;float: left;padding: 0;width: 20px;height: 20px;box-shadow: none;--icon-size: 16px;background: none;--icon-color: var(--base-txt-tertiary);margin-right: -3px; }
ol.todo .ani_time:hover {background: none;box-shadow: none;}
ol.todo .time_space {float:right;margin: 0 0 0 8px;}
ol.todo li:not(:hover) .ani_time {visibility: hidden}
ol.todo .ani_time:not(:hover) ws-icon use:last-child { display: none; }
ol.todo .ani_time:hover ws-icon use:first-child { display: none; }
ol.todo .ani_time:hover ws-icon { --icon-color: var(--costs-money-major); }

ol.todo .time {
	font: 9px / 12px var(--font-base);
	font-family: monospace;
	border: 1px solid var(--costs-time-major);
	color: var(--costs-time-major);
	padding: 1px 4px 0;
	border-radius:3px;
	margin: 2px 0;
	display:inline-block;
}
ol.todo .time:empty {display: none}
ol.todo .time:hover {
	background:var(--costs-time-major);
	color:var(--white-primary);
	border-color: var(--costs-time-major);
}
ol.todo .time:not(:empty) ~ .ani_time {
	display:none;
}

span.invite {
	box-shadow: var(--shadow-cont-major-lineonly-inside);
	color: var(--colorize-lbl-txt-primary);
	border-radius: 12px;
	display: inline-block;
	font: 12px/18px var(--font-base);
	margin: -1px 0 0 0;
	padding: 3px 12px 3px 5px;
	white-space: nowrap;
	max-width: 260px;
	text-overflow: ellipsis;
	overflow: hidden;
	vertical-align: middle;
	background: var(--base-hlt-hover);
}

span.invite ws-icon[name=mail] { margin-right: 4px; }
span.invite .av_sm {transform: scale(0.9166); float: left; margin: -3px 6px -3px -5px; }
span.invite > ws-icon:first-child {
	float: left; margin: -2px 6px -3px -4px;
	width: 22px;
	height: 22px;
	background: var(--base-hlt-g-selected);
	border-radius: 100%;
	--icon-size: 16px;
}
span.invite > ws-icon[name=block]:first-child {
	background: var(--base-hlt-w-selected);
	--icon-color: var(--base-txt-btn-w);
}
span.invite.invite_me { background:var(--base-hlt-w-hover); color: var(--colorize-lbl-txt-primary); }
.page_content span.invite:hover {color: var(--base-txt-accent);cursor:pointer;background: var(--post-ment-hover);}
.page_content span.invite.invite_me:hover { background:var(--base-hlt-w-pressed); color: var(--colorize-lbl-txt-accent); }
.page_content .ico + span.invite:before {display:none}
span.contact {
	box-shadow: var(--shadow-cont-major-lineonly-inside);
	color: var(--colorize-lbl-txt-primary);
	border-radius: 4px 12px 12px 4px;
	display: inline-block;
	font: 12px/18px var(--font-base);
	margin: -1px 0 0 0;
	padding: 3px 12px 3px 5px;
	white-space: nowrap;
	max-width: 260px;
	text-overflow: ellipsis;
	overflow: hidden;
	vertical-align: middle;
	background: var(--post-contact-bg);
}
span.contact:hover {color: var(--colorize-lbl-txt-accent);cursor:pointer;background: var(--post-contact-hover);}
a.inline_task {
	box-shadow: var(--shadow-cont-major-lineonly-inside);
	color: var(--colorize-lbl-txt-primary);
	border-radius: 4px 12px 12px 4px;
	display: inline-flex;
	font: 12px/18px var(--font-base);
	margin: -1px 0 0 0;
	padding: 3px 12px 3px 5px;
	white-space: nowrap;
	max-width: 260px;
	text-overflow: ellipsis;
	overflow: hidden;
	vertical-align: middle;
	background: var(--base-hlt-hover);
}
a.inline_task ws-icon,
a.inline_task ws-icon svg,
span.contact ws-icon,
span.contact ws-icon svg {
	width: 18px;
	height: 18px;
	--icon-size: 18px;
}
a.inline_task ws-icon:first-child,
span.contact ws-icon:first-child {
	margin-right: 4px;
}
.page_content a.inline_task {
	display: inline-flex;
	gap: 4px;

	ws-icon:first-child {
		margin: 0;
	}
}
a.inline_task ws-icon[name="cancel_sm:cancel_sm-solid"], span.invite ws-icon[name="cancel_sm:cancel_sm-solid"], span.contact ws-icon[name="cancel_sm:cancel_sm-solid"] {display:none}
a.inline_task:hover, span.invite:hover {color: var(--colorize-lbl-txt-accent) !important;background: var(--base-hlt-pressed);}
a.inline_task span {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ----------- MinifyCSS: LIGHT THEME ----------- */
span.invite {box-shadow: 0 0 0 1px var(--post-task-brd) inset;}
.page_content span.invite:hover {color: var(--base-txt-link-major);}
a.inline_task:hover {color: var(--base-txt-link-major);}
/* ----------- MinifyCSS: DARK THEME -----------
----------- MinifyCSS: STOP ----------- */

a.inline_file { color:var(--base-txt-link-minor); border-bottom:1px dashed var(--base-txt-link-minor)}
a.inline_file:hover { color:var(--base-txt-link-major); border-bottom:1px dashed var(--base-txt-link-major)}



/* -------------------------------------------------------------------------------------------------------------------*/
/* Emotions */

.taskView__group .likes {
	margin: 0;
	display: flex;
	gap: 16px;
}
.menu__like {
	height: 32px;
	width:48px;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (max-width: 480px) {
	.menu__like {
		padding:16px;
	}
	.menu__like  ws-icon {
		transform:scale(1.6)
	}
}
@media (max-width: 400px) {
	.menu__like {
		padding: 10px;
	}
}
.menu__like ws-icon, .menu__like ws-icon svg {
	height: 24px;
	width:24px;
}
.menu-likes .likes:not(.like_details) {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.menu-likes .likes a.active {
	box-shadow: 0 0 0 1px var(--base-txt-primary) inset;
	border-radius: 6px;
}
.menu-likes .likes a:hover {
	background: var(--base-hlt-g-hover);
	border-radius: 6px;
}
.likes a.like_ {
	float: left;
	font: 12px/24px var(--font-base);
	color: var(--base-txt-tertiary)
}
.likes ws-icon, .likes a.like_ ws-icon svg {
	width: 24px;
	height: 24px;
}
.likes a.like_:hover {
	border-radius: 4px;
	color: var(--base-txt-link-minor)
}

.likes a.like_:hover ws-icon {
	/* transform: scale(1.4, 1.4); */
	transition: all 0.2s ease;
}
.likes a.like_.like_act:hover ws-icon {
	/* transform: scale(0.8, 0.8); */
	transition: all 0.2s ease;
}

.like_details {
	padding: 0 0 0 28px;
	font: 13px/24px var(--font-base);
	color: var(--base-txt-secondary);
	overflow: hidden;
}
.menu-likes .like_details {
	height: auto;
}

.my_likes .menu__item .flex_gap + .space ws-icon {
	--icon-size: 16px;
	--icon-color: var(--base-txt-btn-w);
}

.menu-likes .like_details div {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}
.menu-likes .like_details .av_sm {
	transform: scale(0.8)
}
.like_details i {
	display: block;
	color: var(--base-txt-tertiary);
	margin: 0 0 5px -24px;
}
.likes a.like_ i {
	font-style: normal;
	margin: 0 5px 0 2px
}

.likes a.ico_l {
	margin: 2px 0 2px 2px !important;
}
.likes a.ico_l_emo {
	margin: 17px 0 2px 17px !important
}
body.desktop .commentList__item .likes a.ico_l {
	opacity: 0;
	transition: opacity 0.3s ease;
}
body.desktop .commentList__item:hover .likes a.ico_l {
	opacity: 1
}
.commentList__item .likes, .task .likes {
	margin-left: -5px;
	margin-top: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	height: 40px;
	align-items: center;
}
.likes a.emotion {
	font: italic 13px/30px var(--font-base);
	color: var(--base-txt-tertiary)
}
.likes a.emotion span.ico_l {
	margin: 0 5px 0 0 !important
}
.it_likes {
	float: left;
	margin: -2px 0 0 5px;
}
#log .it_likes {
	margin: -5px -7px;
}
.content_replace {
	display: none
}
.taskView__params__item .likes a.like_ span {
	transform: scale(0.8, 0.8);
	margin:-3px;
}
.taskView__params__item .likes a.like_:hover span {
	transform: scale(1, 1);
	transition: all 0.2s ease;
}
.taskView__params__item .likes a.like_:hover span.like_act {
	transform: scale(0.64, 0.64);
	transition: all 0.2s ease;
}
.taskView__params__item .likes .av_sm {
	transform: scale(0.833, 0.833);
	margin: -2px;
}


/* -------------------------------------------------------------------------------------------------------------------*/
/* Avatars*/

img.av_sm { border-radius:12px}
img.av_nm { border-radius:24px}
img.av_36 { width:36px;height:36px;border-radius: 25%; }

.av_svg {width: 24px;height: 24px;border: 1px solid var(--base-txt-tertiary);border-radius: 14px;box-sizing: border-box}
.av_svg {border:1.5px dotted var(--base-txt-secondary);}
.av_svg[name=people] {border:1px solid var(--base-txt-secondary);}
.av_svg svg {width: 14px;height: 14px;}


span.av_nm {
  display:
  inline-block; width:48px; height:48px;
  background:
  var(--base-cont-top); border-radius:24px;
  text-align:
  center;
  font: 18px/48px var(--font-base) !important;
  color:
  var(--white-accent);
  overflow:
  hidden;
  text-transform:
  uppercase;
  -webkit-user-select: none;
  user-select: none;
  }
span.av_sm {display:inline-block;width:24px;height:24px;background:var(--base-cont-top);border-radius: 24px;text-align:center;font: 600 10px/25px var(--font-base) !important;letter-spacing: 0.5px;color:var(--white-accent);overflow:hidden;text-transform:uppercase;}
span.av_36 {display:inline-block;width:36px;height:36px;background:var(--base-cont-top);border-radius: 25%;text-align:center;font: 600 14px/36px var(--font-base) !important;letter-spacing: 0.5px;color:var(--white-accent);overflow:hidden;text-transform:uppercase;}
span.av_s { background-image:url(/assets/img/pro_avatars.svg); background-size:120px 336px;}
img.av_nm { background-image:url(/assets/img/pro_avatars.svg); }

span.av_def0, span.av_def1 { background:url(/assets/img/separators_iconset.svg) -63px -363px; border-radius: 24px !important }
span.av_def2 { background:url(/assets/img/separators_iconset.svg) -33px -363px; }
span.av_def6 { background:var(--base-hlt-hover) url(/assets/img/iconset.svg) 0 -1200px; width:20px; height:20px; border:2px solid var(--base-hlt-hover)}
span.av_def4 { background:var(--base-hlt-hover) url(/assets/img/iconset.svg) -120px -740px; width:20px; height:20px; border:2px solid var(--base-hlt-hover); box-shadow:0 0 0 1px var(--base-hlt-hover)}
span.av_def3 {width:24px;height:24px;}
span.av_def3:before {content:'';display:block; margin:2px;  }
span.av_def_big3:before {content:'';display:block; margin:14px; }
span.av_def3:before, span.av_def_big3:before {background: url(/assets/img/iconset.svg) -80px -920px;width:20px;height:20px;}
span.av_def5 {background:var(--base-cont-low);}
.modal span.av_def5 { background:var(--base-cont-mod-low)}
span.av_def5:before {content:''; margin:14px; display:block;width: 20px;height: 20px;background: url(/assets/img/iconset.svg) no-repeat -60px -560px;}
span.av_def7 {width:24px;height:24px; background:var(--base-hlt-easy); border-radius:12px;}
span.av_def7:before {content:'';display:block; margin:2px;  }
span.av_def7:before {background: url(/assets/img/iconset.svg) -40px -540px;width:20px;height:20px;}
span.av_def_big0 {width:20px;height:20px;background: var(--base-hlt-hover) url(/assets/img/iconset.svg) no-repeat -40px -540px;margin: 14px;transform: scale(1.5);box-shadow: 0 0 0 6px var(--base-hlt-hover);position: static;display: block;border-radius: 100% !important;}


span.av_def_big3 {background: var(--base-hlt-hover);width:48px;height:48px;}

/* -------------------------------------------------------------------------------------------------------------------*/

.drop_select {
	display: flex;
	height: 32px;
	background: var(--inp-hlt-bg);
	border-radius: 6px;
	box-shadow: 0 0 0 1px var(--inp-hlt-brd) inset;
	margin: 0 0 15px 0;
	font: 14px/20px var(--font-base);
	color: var(--base-txt-primary);
	white-space: nowrap;
	overflow: hidden;
	position: relative;
	padding: 0 8px;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
}
.drop_select.flex_wrap {
	flex-wrap: wrap;
}
.drop_select .in {
	padding: 0 8px;
	flex-grow: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.drop_seldel {
	background: var(--base-hlt-w-pressed);
}
.drop_seldel small {
	color: var(--base-txt-btn-w)
}
a.drop_select_gray {
	background: var(--inp-cont-low);
	box-shadow: 0 0 0 1px var(--inp-cont-brd) inset;
	color: var(--base-txt-primary);
}
span.drop_select {
	background: var(--inp-cont-low);
	box-shadow: 0 0 0 1px var(--inp-cont-brd) inset;
	color: var(--base-txt-primary);
}
a.select_h4 {
	float: right;
	width: 110px;
	margin: -7px 0;
}
a.select_h4a {
	float: right;
	width: 180px;
	margin: -7px 0;
}
.drop_select .ico_l {
	margin: 0 7px 0 0
}
.drop_select .av_sm {
	float: left;
	margin: -2px 10px -2px 0
}
.drop_select .r {
	position: absolute;
	right: 30px;
	top: 5px;
	font: 13px/20px var(--font-base);
	background: var(--inp-hlt-bg);
	padding: 0 0 0 5px
}
a.select_h4 .r {
	right: 8px;
}
a.drop_select:hover {
	color: var(--base-txt-link-minor)
}
a.drop_select_gray:hover {
	color: var(--base-txt-primary);
}

a.drop_seldel:hover {
	color: var(--base-txt-max)
}
.drop_select span.drop {
	background-color: var(--inp-hlt-bg);
}
.drop_select_gray span.drop {
	background-color: var(--inp-cont-low);
	background-position: -365px -155px
}
.drop_select_gray:hover span.drop {
	background-position: -365px -95px
}
.drop_seldel span.drop {
	background-color: var(--base-hlt-w-pressed);
	border-color: var(--base-hlt-w-pressed);
	background-position: -365px -155px
}
.drop_big_select .drop_select {
	padding: 12px 30px 12px 15px;
	background: var(--base-cont-mod-top);
}
.drop_big_select .drop_select .drop {
	background-color: var(--base-cont-mod-top);
	border-color: var(--base-cont-mod-top);
}

.drop_select.drop_select--auto-height {
	padding-right: 36px;
}
.drop_select.drop_select--auto-height .in {
	display: block;
	overflow: initial;
	white-space: normal;
}
.drop_select.drop_select--auto-height .in + ws-icon {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
}


/* -------------------------------------------------------------------------------------------------------------------*/

.button_r { float:right; margin:0 0 0 12px}
.button_l { float:left; margin:0 12px 0 0}
.button_w480 .button_r {margin-top:0}
.buttons_center {text-align:center;padding:15px 0;}
.setup_wide .buttons_center { padding:0}
.form_wbutton .buttons_center {display:none}
.buttons .ico_clear {margin-top:1px}
.buttons a.inline { color:var(--base-txt-secondary)}
.buttons a.inline:hover { color:var(--base-txt-link-minor)}
.buttons_r  {text-align:right;}
.buttons_r span.or  {display:none }
.buttons_r  input[type="submit"], .buttons_r  input[type="button"] {padding:3px 20px}
.button b.but_cnt, ws-btn .but_cnt {color:var(--base-txt-link-minor); /* border-left:1px solid var(--base-line-primary); */ padding: 6px 0; margin: -6px -15px -6px 5px;width: 50px;text-align: center;display: inline-block;}
.buttons_checkboxes {background:var(--base-cont-mod-low); padding:15px 15px 10px}
.buttons_center_white {background:var(--base-cont-top);font:12px/40px var(--font-base);height: 48px;width:400px;margin:0 auto;padding:14px 20px 14px 10px;border-radius:8px;}
.buttons_center_white .notify_block {margin: 14px 10px;}
.buttons_center.tagsAdmListing__buttons {position:relative; width:450px; margin:0 auto; height:40px; padding:10px 0 ;}

a.button_slider {position: relative; font-weight: normal; max-width: 190px; padding: 0 5px; margin: -6px 2px 0 12px !important; box-shadow: 0 0 4px var(--base-line-secondary) !important} /*whitout button_reopen?????*/
a.button_slider.short {max-width: 160px; margin: -6px 2px 0 10px !important}
span.button_slider {position: relative; left: -6px; padding: 6px 10px 6px 10px; border-radius: 4px; color: var(--base-txt-secondary); background: var(--base-cont-mod-top); width: calc(100% - 20px); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: 0.4s}
a.button_slider:hover span.button_slider {left: 6px}

.modal__content .modal__taskClose .sum_progress {padding: 12px 20px; background: none;}
.modal__content .modal__taskClose .sum_progress .td_name {width: 110px}
.modal__content .modal__taskClose .progress, .modal__content .modal__taskClose .progress_na {width: 100px}
.modal__content .modal__taskClose .sum_progress_b .bar .progress_na, .modal__content .modal__taskClose .sum_progress_bm .bar .progress, .modal__content .modal__taskClose .sum_progress_b .bar .progress {margin: 0}
.modal__content .modal__taskClose .data_list_body {padding: 12px 28px;}
.modal__content .modal__taskClose .data_list_body .in {transition: all .15s;cursor: pointer;border-radius: 12px;background: var(--base-cont-mod-trans-low);/* box-shadow: var(--shadow-cont-minor-outline); */}
.modal__content .modal__taskClose .data_list_body .in:hover {background: var(--base-hlt-hover); box-shadow: var(--shadow-brd-focus-alt)}
.modal__content .modal__taskClose .sum_progress_b {
	padding: 12px 16px;
	height: unset;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	margin: 0;
	align-items: center;
	.td_name {
		grid-row: 1 / -1;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		.bar {
			margin: 0;
		}
	}
	.td_time,
	.td_money {
		font: var(--font-ui-18-title-2-bold);
		line-height: 18px;
		font-variant-numeric: proportional-nums;
		height: 18px;
		padding-right: 0;
		i {
			font: var(--font-ui-12-mini-reg);
			line-height: 18px;
			padding: 0 5px 0 0;
		}
	}
}
.modal__content .modal__taskClose.time_or_money .sum_progress_b {
	grid-template-rows: auto;
}


.modal__content .modal__taskClose .buttons_info {padding: 10px; background: var(--base-cont-mod-top); border-bottom-left-radius: 8px; border-top: 1px solid var(--base-cont-mod-low); border-bottom-right-radius: 8px}
.modal__content .modal__taskClose .buttons_info a {display: inline-block; vertical-align: top; font: 13px/20px var(--font-base); padding: 3px 10px 3px 6px; border-radius: 3px; white-space: nowrap; border: none; float: right; margin: -2px 0 0 10px; box-shadow: none; background: none}
.modal__content .modal__taskClose .buttons_info a span.ico_summ {text-align: center; transform: scale(0.9); margin-top: -1px}
.modal__content .modal__taskClose .sum_progress_b .bar .b_fl {margin: 0}
.modal__content .modal__taskClose .sum_progress_b:hover .bar.bar_max_money .b_fl, .modal__content .modal__taskClose .sum_progress_b:hover .bar.bar_max_time .b_fl {display: block}
.modal__content .modal__taskClose .buttons_info a:hover span.ico_summ {color: var(--base-txt-link-major)}
.modal__content .modal__taskClose .buttons_a {padding-bottom: 30px}
.modal__content .buttons {margin:0;padding: 12px 28px 28px;height: 36px;overflow:hidden;clear:both}
.modal__content .buttons.flex_row { gap: 12px; }
.modal__content .buttons_wline {border-top: 0.5px solid var(--base-line-tertiary);}
.modal__content .buttons_r .button, .modal__content .button_r { margin:0 0 0 10px}
.modal__content .buttons_center {height:40px; padding-top:10px;}
.modal__content .buttons_gray {background:var(--base-cont-mod-low);}
.modal__content div.buttons_a {position:relative;}
.modal__content div.buttons_a .button {float:right;margin: -6px 0 -6px 12px;}
.modal__content div.buttons_a .button ~ .button {margin-right:10px;}
.modal__content div.buttons_a .button_l {float:left; margin:-6px 12px -6px 0}
.modal__content div.buttons_a .button_close {margin-left: 0}
.modal__content .buttons p.wlabel {padding:2px 0}
.modal__content .buttons p.wlabel label {padding:5px 8px; }
.modal__content .buttons p.wlabel label.act {background:var(--base-hlt-alt-label); color:var(--base-txt-primary)}
.modal__content .button { margin:0 10px 0 0}
.modal__content .button_grad {margin:0 auto;min-width:240px;}
.modal__content .or { font:11px var(--font-base); color:var(--base-txt-tertiary)}
.modal__content .or a {
  margin:0 6px;
  color:var(--base-txt-secondary);
  padding:1px 4px;
}
.modal__content .or a:hover {
  background:var(--base-txt-tertiary);
  color:var(--white-max);
}
.modal__content .or a.delete:hover {
  background:var(--base-txt-alert-minor);
  color:var(--white-max);
}
.newsletter_buttons { margin:0 0 15px 0; padding:15px 0 5px 0}
.newsletter_buttons .button {width:240px}
.modal[data-group=nohead] .buttons {padding:15px 26px 26px;}

@media (max-width: 480px) {
	.modal__content .buttons.buttons-hide {
		display: none;
	}
}

span.cnt_all {
	font: var(--font-ui-12-mini-reg);padding: 2px 4px;border-radius: 4px;margin:0 0 0 4px;
}
span.cnt_unseen {
	padding: 2px 4px;
	border-radius: 12px;
	font-family: var(--font-base);
	font-size: 10px;
	font-style: normal;
	font-weight: 510;
	line-height: 12px;
	letter-spacing: 0.12px;
}
body.mobile #mass_n_filt,
body.mobile .listing__days {transition: all 1s ease !important}


span.cnt_fav {font:bold 11px/20px var(--font-base); padding:1px 5px; border-radius:4px; margin:0 0 0 4px; cursor:pointer}
.commentListPanel__filter .cnt {font:bold 14px/20px var(--font-base); float:left; margin:0 10px 0 0; min-width:20px; text-align:center}
.commentListPanel__filter span.cnt_more {border-radius:8px 0 0 8px}
.commentListPanel__filter span.cnt_more2 {margin:0; border-radius:0 8px 8px 0}
span.cnt_warm, a.cnt_warm,
span.cnt_hot, a.cnt_hot,
span.cnt_arch, a.cnt_arch,
span.cnt_new, span.cnt_queue {font: var(--font-ui-12-mini-reg);padding: 2px 4px;border-radius: 4px;margin:0 0 0 4px;}
span.cnt_pro {font: 11px/20px var(--font-base);padding: 0px 5px;border-radius:4px;margin:0 0 0 4px;}

span.free {
    font: 500 10px/16px  var(--font-base);
    padding: 0 6px;
    border-radius: 6px;
    margin: 0 0 0 4px;
    background: var(--base-txt-btn-c);
    color: var(--base-txt-alt-light);
}
span.cnt_all.no_border {border-color: transparent;}
/* -------------------------------------------------------------------------------------------------------------------*/

span.terms_label_warm,
span.terms_label_hot,
span.terms_label_today,
span.terms_label_remain,
span.terms_label_wait,
span.terms_label_related,
span.common_label_progress,
span.zzz, span.label_arch3 {
	padding: 0 6px;
	white-space:nowrap;
	font: var(--font-ui-10-nano-reg);
	border-radius: 12px;
	display:inline-block;
	line-height: 15px;
}
span.terms_label_warm_easy,
span.terms_label_hot_easy,
span.terms_label_wait_easy,
span.terms_label_related_easy,
span.terms_label_done_delay,
span.terms_label_today_easy,
span.terms_label_tomorrow_easy,
span.terms_label_normal {
	white-space:nowrap;
	font: var(--font-ui-12-mini-med);
	border-radius: 4px;
	display:inline-block;
	padding: 0 2px;
}

span.terms_label_today_easy,
span.terms_label_tomorrow_easy {
	padding: 0 4px;
}
span.zzz {
	border-radius:4px
}
span.common_label_progress {
	white-space:nowrap;
	font-size:12px
}
span.zzz, span.label_arch3 {
	vertical-align:bottom;
}

span.label_wait2 {
	background:var(--projcond-muted-bg);
	color:var(--projcond-muted-txt);
	font:12px/22px var(--font-base);
	height:22px;
	padding:1px 7px;
	vertical-align:top;
	margin:-1px 0;
	display:inline-block;
	border-radius:4px;
	vertical-align:top
}
span.label_wait2 span.ico_l {
	margin:0 !important
}
span.label_arch2, a.label_arch2 {
	background:var(--projcond-archive-bg);
	color:var(--projcond-archive-txt) !important;
	font:12px/22px var(--font-base);
	padding:4px 7px;
	vertical-align:top;
	margin:-1px 0
}
.alert_archive {
	background:var(--projcond-archive-bg);
	border-top:2px solid var(--projcond-archive-txt);
	padding:10px 0;
	font:13px/20px var(--font-base);
	text-align:center;
	color:var(--projcond-archive-txt);
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	z-index:1010;
}
.alert_archive a {
	color:var(--projcond-archive-txt);
	border-bottom:1px dashed
}
.but_archive {
	float:right;
	background:var(--projcond-archive-bg);
	border-bottom:2px solid var(--projcond-archive-txt);
	padding:2px 15px 2px 5px;
	font:bold 15px/30px var(--font-base);
	text-align:center;
	color:var(--projcond-archive-txt);
	text-shadow:none;
	border-radius:5px
}
.but_archive:hover {
	color:var(--projcond-archive-txt)
}
.but_archive .ico_archive2 {
	margin-right:10px
}

/* -------------------------------------------------------------------------------------------------------------------*/

.page_content {word-wrap: break-word;overflow:hidden;line-height: 24px;}
.page_content li {line-height:20px;}
.page_content b {font-weight:bold}
.page_content ws-emoji {width: 18px;height: 18px;}
.page_content scode {
	display: inline-block;
	background: var(--post-code-bg);
	color: var(--base-txt-alert-major);
	padding: 2px 4px;
	box-shadow: var(--shadow-brd-enable);
	border-radius: 4px;
	word-break: break-word;
	font: 400 0.8125rem/123.08% var(--font-mono);
}
.page_content hr {
	margin: 20px auto;
	width: 12px;
	height: 2px;
	background: var(--base-txt-muted);
	border: none;
	position: relative;
	overflow: visible;
	border-radius: 1px;
}
.page_content hr:before, .page_content hr:after {
	position: absolute;
	content: '';
	display: block;
	width: 12px;
	height: 2px;
	background: var(--base-txt-muted);
	border-radius: 1px;
}
.page_content hr:after { left: 20px; }
.page_content hr:before { left: -20px; }

blockquote, address {background: var(--post-quote-bg);margin: 12px 0 12px 0; padding:12px 12px 12px 16px; font:13px/20px var(--font-base); color:var(--post-quote-txt);border-radius: 12px;}
blockquote a, address a {color:var(--base-txt-secondary)}
blockquote:before, address:before{content: '\201d';font:bold 80px/30px var(--font-serif);color:var(--post-quote-bg);float:right; margin:14px -6px 0 -48px;  }
pre {
  position:relative;max-width:100%;padding:0;margin:12px 0 12px 0;border-radius: 12px;
  background: var(--post-code-bg); color:var(--base-txt-primary);
  font-family: var(--font-mono);
  font-size: 13px; line-height: 20px;
  tab-size:4;-moz-tab-size:4;-o-tab-size:4;overflow: visible;user-select: text;white-space: pre-wrap;word-wrap: break-word;text-size-adjust: 100%;-webkit-text-size-adjust: 100%;
}
@media screen and (min-width: 481px) {
	.page_content pre::after {content: ''; position: absolute; top: 0; left: 100%; width: 46px; height: 100%;}
}
pre code {display:block;padding: 10px 15px;}
code.hljs {padding:10px 15px; background: none;color:inherit; font:inherit;}
.page_content code.hljs {padding: 12px 12px 12px 16px;}
#modal__previewFrame pre {margin:0; border-radius: 0; background:var(--base-cont-mod-top);}
#modal__previewFrame code.hljs {
	box-sizing: border-box;
	-webkit-user-select: text;
	user-select: text;
	* {
		-webkit-user-select: text;
		user-select: text;
	}
	> :last-child {padding-bottom: 24px;}
}
pre ws-btn {position: absolute; left: calc(100% + 8px); z-index: 1; opacity: 0; transition: 0.2s ease;}
pre:hover ws-btn {opacity: 1;}
pre .btn {height: 44px; padding: 0 8px; border-radius: 12px;}
pre .btn.btn-plain:hover {background: var(--post-code-bg);}
@media (max-width: 480px) {
	pre ws-btn {right: calc(100% + 6px); left: unset; opacity: 1;}
}

/* -------------------------------------------------------------------------------------------------------------------*/
/* Unsorted */

.item_opac, .item_opac2 { opacity:0.5 }

/* ----------- MinifyCSS: LIGHT THEME ----------- */
a.ico_plus_blue:hover:before, a:hover span.ico_plus_blue:before, span.ico_plus_blue2:before, span.ico_plus_blue2:before, a.ico_plus_blue2:before {content:'';display:block;width:24px;height:24px;margin:-2px -2px -22px -2px;background-color: var(--base-hlt-hover);border-radius:12px;}
/* ----------- MinifyCSS: DARK THEME -----------
span.ico_plus_blue2:before, a.ico_plus_blue2:before {content:''; display:block; width:20px; height:20px; margin:0 0 -20px 0; background-color:var(--base-hlt-notr-hover); border-radius:10px; }
a.ico_plus_blue:hover:before, a:hover span.ico_plus_blue:before, a:hover span.ico_plus_blue2:before, a.ico_plus_blue2:hover:before {content:''; display:block; width:24px; height:24px; margin:-2px -2px -22px -2px; background-color:var(--base-hlt-notr-hover); border-radius:12px; }
----------- MinifyCSS: STOP ----------- */

b.me, strong.me { background:var(--base-hlt-alt-notice); padding:1px 4px; margin:-1px 0; color:var(--base-txt-secondary); border-radius:10px;}
a.delete {color:var(--base-txt-alert-minor);}
a.delete:hover {color:var(--base-txt-alert-major);}
span.date2 small { text-transform:none; font-size:10px}

#tasks {position:relative;overflow: hidden;}

#restrict_group_to .clear, #mailing_to .clear, #project_to .clear{ margin:5px 0 0 0}
.modal__content #mailing_to, .modal__content #restrict_group_to {overflow:auto;}
.modal__content #project_to {margin-top:0;position: relative;max-width: 640px;}

span.nodate {color:transparent}
span.join {font:italic 11px var(--font-base); color:var(--base-txt-muted)}
span.ti {font:10px/20px var(--font-base); background:var(--base-txt-tertiary); color:var(--white-accent); padding:0 2px; vertical-align:top; margin:0 0 -10px 0}


#file_links { background:var(--base-hlt-hover); color:var(--base-txt-link-minor); font:bold 12px/20px "courier new"; margin:0 0 0 5px; height:125px}
#clip_link { font:bold 14px/20px var(--font-base); padding:10px !important; margin:-10px 0; height:80px;}

.modal__content #tasks { border-bottom:none; min-height:300px}
.modal__content .task #files_new {margin-bottom:1px}

.drop_vis a.div, .file_links a.div {width:23px; height:20px; float:right; padding:5px 10px; margin:0 -10px -5px 0}
.drop_vis a.div:last-child, .file_links a.div:last-child {border-left:1px solid var(--base-line-secondary); }

.modal__content__block-gray {background:var(--base-cont-mod-low);}
.modal[data-group=nohead] .modal__content__block {padding:26px 26px 0 26px;}

.massdo_dis a.button {display:none}
.master_ops2 {padding-bottom:0;}
.modal__errorLine {padding:10px 15px;}
.modal__content__block {padding: 12px 28px;}
.modal__content__block-noPaddings {padding:0 28px;}
.modal__content__block--pt8 {padding-top: 8px;}
.modal__content__block--pi12 {padding-left: 12px; padding-right: 12px;}

.ico_privbig .cnt {float:left; font:11px/14px var(--font-base); margin:15px -20px 0 20px; border:2px solid var(--base-btn-fresh-minor); background:var(--base-cont-top); padding:0 4px; border-radius:10px; color:var(--base-txt-tertiary)}
.ico_privbig_act .cnt {border:2px solid var(--base-btn-alert-primary-minor); margin:15px -20px 0 18px; }

.modal__content .scrollZone {overflow:auto;overflow-x: hidden;flex-grow: 1;flex-shrink: 1; align-content: flex-start;}

.subtitle span.ico_act_sm {opacity:0; margin-left:-3px; transition:opacity 0.2s ease; -webkit-transition:opacity 0.2s ease}
.subtitle:hover span.ico_act_sm, .subtitle.selected span.ico_act_sm {opacity:1}
.subtitle a.ani_on span.ico_act_sm, .subtitle a.ani_off span.ico_act_sm {opacity:0; transition:opacity 1s ease 0.2s; -webkit-transition:opacity 1s ease 0.2s}
.gtitle span.ico_act_sm {opacity:0; margin-left:-3px; transition:opacity 0.2s ease; -webkit-transition:opacity 0.2s ease}
.gtitle:hover span.ico_act_sm, .gtitle.selected span.ico_act_sm {opacity:1}
.gtitle a.ani_on span.ico_act_sm, .gtitle a.ani_off span.ico_act_sm {opacity:0; transition:opacity 1s ease 0.2s; -webkit-transition:opacity 1s ease 0.2s}

div.reason {padding:0 20px 0 0; color:var(--base-txt-tertiary)}
div.reason textarea {display:none; width:100%; padding:8px; resize:vertical; height:60px;background: var(--menu-inp-cont); border-color:var(--menu-inp-brd);}
div.reason a {margin:0 0 0 5px; font:14px/20px var(--font-base);}


.modal__header .av_place {display:none}

.drop_v1 .v2, .drop_v2 .v1 { display:none}

.data-context {height:0; overflow:hidden}

body.mobile [data-right-click] {-webkit-user-select: none;-webkit-touch-callout: none; }

.modal #setup {padding:0 18px; background:var(--base-cont-mod-low)}
.modal #setup .setup_ {background:var(--base-cont-mod-top);border-radius: 4px;}
.modal .setup .logo {}

.group span.ico_group, .group span.ico_company {display:none}

.label_client {background:var(--projcond-muted-bg);color:var(--projcond-muted-txt);font: 12px/20px var(--font-base);height: 20px;padding: 0 7px;margin: 0 8px 0 0;display: inline-block;border-radius: 4px;vertical-align:1px; float: left;}
.label_client, .line_title_client span {background-color:var(--colors-pink-desat-500) !important; color:var(--colors-pink-desat-920) !important}
.label_client_sm {background:var(--base-hlt-b-selected);color:var(--base-txt-btn-b);font: var(--font-ui-10-nano-med);height: 16px;padding: 0 4px;margin: 0 0 0 4px;display: inline-block;border-radius: 8px;vertical-align:1px;}
font + .label_client {float:none}

.project_members_big {text-align:center; height:48px;}
.project_members_big .ico_user_add {transform:scale(2); margin:10px 10px 10px 30px; vertical-align:top}

#super_error {position:fixed;left: 97px;top:20px;width:480px;padding:20px;background:var(--base-cont-note-major);box-shadow: 0 0 20px 2px var(--colors-alpha-dark-20);border-radius:10px;z-index:9999;white-space:pre;max-height: 90vh;overflow: auto;user-select: text;-webkit-user-select: text;}
#super_debug {position:fixed;top: 0;left: 50%;padding: 5px 20px 10px;background:var(--base-txt-alt-dark-major);color: var(--colors-amber-500);border-radius: 0 0 16px 16px;z-index:9999;white-space:nowrap;margin: 0 0 0 -40px;font: 14px/20px var(--font-base);}

#super_error ws-btn {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 9999;
}

#drag_notice {
  background:var(--base-hlt-alt-notice);
  font: 14px/20px var(--font-base);
  position:fixed;
  left:50%;
  bottom: -120px;
  height: 70px;
  width:480px;
  margin:0 0 0 -240px;
  padding: 14px 20px 14px 20px;
  border-radius:8px;
  z-index:1001;
  box-sizing: border-box;
  box-shadow:0 2px 2px var(--colors-alpha-dark-20);
  transition: bottom 0.3s ease;
}
#drag_notice.act {bottom:20px}

.ani_plus {transform:scale(2.2)}
.ani_minus {transform:scale(0.8)}

.user_workday_adjustDate {
	display: flex;
	gap: 8px;
	align-items: center;
}

.user_workday_adjustDate .picker_year.thickbox {
	cursor: pointer;
	box-sizing: border-box;
	border-bottom: 1px solid transparent;
}

.user_workday_adjustDate .picker_year.thickbox:hover {
	border-bottom: 1px dashed var(--base-txt-accent);
}

.workday_head {padding: 15px 24px;/* border-bottom: 0.5px solid var(--base-line-tertiary); */color:var(--base-txt-secondary)}
.workday_head .img {float:right; padding:8px 0}
.workday_head .r {float:right; text-align:right;padding:12px 10px 12px 0 }
.workday_head .name {font:16px/20px var(--font-base); }
.workday_head .name_1str {padding-top: 12px;}
.workday_head .name span { font-weight:normal; color:var(--base-txt-secondary);}
.workday_head .name b { font-weight:normal; color:var(--base-txt-accent); }
.workday_head .total {float:right; font:14px/20px var(--font-base); margin:4px 0 0 0}
.workday_head .total b {font:20px/20px var(--font-serif); color:var(--base-btn-alert-primary-minor); float:left; margin:-2px 8px 0 0}
.workday_head .total span {color:var(--base-txt-primary)}

.workday_head .info {font:12px/24px var(--font-base);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 10px;margin: -10px;}
.workday_head .info input {border:none; background:var(--inp-hlt-bg); color:var(--base-txt-link-minor); font:bold 14px/28px var(--font-base); height:28px; width:30px; text-align:center; padding:0; border-radius:4px; margin:-10px 0; }
.workday_head .info input::-webkit-outer-spin-button,
.workday_head .info input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}
.workday_head .info span.wd_cnt {font-weight:bold; color:var(--base-txt-primary)}

.workday_head .legend {float:left; width:16px; height:16px; background:var(--base-hlt-hover); margin:2px 10px 2px 0; border-radius:4px; position:relative; transition:0.3s ease; box-shadow:0 0 0 0.5px var(--base-cont-mod-top)}
.workday_head .legend + .legend {margin:2px 10px 2px -26px; }
.workday_head .legend1 {background:var(--base-hlt-w-pressed); left:-2px; top:-2px;}
.workday_head .legend2 {background: var(--cal-set-holiday);}
.workday_head .legend3 {background: var(--cal-set-sickleave);left:-8px;top:-8px;}
.workday_head .legend4 {background:var(--cal-set-vacation); left:8px; top:8px;}
.workday_head .set_type2 .legend3 {z-index:1;  left:2px; top:2px;}
.workday_head .set_type2 .legend4 {left:-2px; top:-2px; opacity:0.5}
.workday_head .set_type1 .legend3 {left:-2px; top:-2px; opacity:0.5}
.workday_head .set_type1 .legend4 {left:2px; top:2px;}
.workday_head a.set {color:inherit}
.workday_head .set_type1 a.set_type2 {border-bottom:1px dashed}
.workday_head .set_type2 a.set_type1 {border-bottom:1px dashed}

.workday_head .sw_pre {float:none;display: inline-block;vertical-align: middle;height: 12px;margin: 0 4px 0 8px;}
.workday_head .sw {margin:0;}
.workday_head .gray {color:var(--base-txt-tertiary)}

.workday_head .calendarLegend-holiday use { fill: var(--cal-set-vacation); }
.workday_head .calendarLegend-illday use { fill: var(--cal-set-sickleave); }
.workday_head .calendarLegend-dayoff use { fill: var(--cal-set-dayoff); }
.workday_head .calendarLegend-holidays use { fill: var(--cal-set-holiday); }

.workday_foot {padding: 15px 30px 15px;color:var(--base-txt-secondary);height:20px;text-align: center;}
.workday_foot i {font-style:normal; color:var(--base-txt-primary) }
.workday_foot input {border:none; width:0; height:0; padding:0; margin:0; overflow:hidden}
.workday_foot .ico_remove {transform:scale(0.5); margin:-8px -8px -6px;}

/** PLAN **/
.full_plan_tm .plan {font: 10px/20px var(--font-base); border: 1px solid var(--base-txt-tertiary); padding: 0 3px; border-radius: 2px; color: var(--base-txt-tertiary); margin: 0 0 0 5px}
.modal__header .full_plan_tm .plan {vertical-align: middle}
a.full_plan_tm:hover {color: var(--base-txt-link-minor)}
a.full_plan_tm:hover .plan_set {border-color: var(--base-btn-primary-minor); background: var(--base-btn-primary-minor); color: var(--white-max)}
a.full_plan_tm:hover .plan_time {border-color: var(--costs-time-major); background: var(--costs-time-major); color: var(--white-max)}
a.full_plan_tm:hover .plan_money {border-color: var(--costs-money-major); background: var(--costs-money-major); color: var(--white-max)}
.full_plan_tm.plan_m .plan_time {border-color: var(--costs-time-major); color: var(--costs-time-major)}
.full_plan_tm.plan_m .plan_money {border-color: var(--costs-money-major); color: var(--costs-money-major)}
/** PLAN **/

@media (max-width:600px) {
  .workday_head .r {float:none; text-align:left; margin:0 0 0 60px; padding:8px 0 24px}
  .workday_head .total {float:none; }
  .workday_head .img {float:left}
}
@media (max-width:480px) {
  .workday_foot {background: var(--base-cont-mod-top); border-top:0; height:40px;}
}
@media (min-width: 481px) {
	body.hide_header #mass_n_filt,
	body.hide_header .listing__days {transform: translateY(-83px)}
}

#pageFilter_range_embedded .menu {position: relative;margin: -50px auto 0;top: 0;left: 0;z-index: 0;}

#hint span.leg_illday {color:var(--costs-time-minor)}
#hint span.leg_holiday {color:var(--cal-set-vacation)}
#hint span.leg_dayoff {color:var(--cal-set-dayoff)}
#hint span.leg_extraday {color:var(--base-btn-alert-primary-minor)}

#modal__alertOnError {display:none}

.templates__wrapper {
	display:flex;
	gap: 20px;
}
.templates {
	display:flex;
	flex-direction: column;
}
.templates .template {
	border: 1px dashed #ddd;
	padding: 10px;
	margin: 0 0 -1px;
}

.swapper_pre {
	width: 20px;
	height: 20px;
	margin: 0 auto;
}

.swapper_v {
	display: none;
	opacity: 0;
	height: 100px;
	width: 20px;
	float: left;
	position: relative;
	margin: 10px 0;
	cursor: e-resize;
}

.swapper_v:hover {
	opacity: 1
}

.swapper_v span {
	color: var(--base-txt-link-minor);
	background: var(--base-cont-top);
	width: 16px;
	height: 16px;
	display: block;
	border-radius: 10px;
	text-align: center;
	line-height: 15px;
	margin: 2px;
	position: relative
}

.swapper_v span:before {
	content: '↔';
}

.swapper_v:before {
	display: block;
	content: '';
	width: 4px;
	height: 100px;
	position: absolute;
	background: linear-gradient(0deg, var(--trans), var(--base-cont-top));
	top: 8px;
	left: 8px
}

.swapper_h {
	display: none;
	opacity: 0;
	height: 20px;
	width: 200px;
	position: relative;
	margin: 0 -90px;
	cursor: n-resize;
}

.swapper_h:hover {
	opacity: 1
}

.swapper_h span {
	color: var(--base-txt-link-minor);
	background: var(--base-cont-top);
	width: 16px;
	height: 16px;
	display: block;
	border-radius: 10px;
	text-align: center;
	line-height: 15px;
	position: relative;
	margin: 0 auto;
	top: 2px;
}

.swapper_h span:before {
	content: '↕'
}

.swapper_h:before {
	display: block;
	content: '';
	height: 4px;
	position: absolute;
	background: linear-gradient(90deg, var(--trans) 0%, var(--base-cont-top) 50%, var(--trans) 100%);
	top: 8px;
	left: 0;
	right: 0;
}

.dashboard_flex_col {
	display: flex;
	flex-direction: column;
}

@media screen and (min-width: 1024px) {
	.swapper_v, .swapper_h {
		display:block
	}
}


.dashboard_bars {
    position: relative;
    /*height: 90px;*/
	display: flex;
}
.dashboard_bars b {
    font: 600 18px/21px var(--font-base);
}
.dashboard_bars .bar {
    width: 50%;
    /*float: left;*/
    padding: 10px;
    box-sizing: border-box;
    height: 90px;
	flex-grow: 1;
}
.dashboard_bars .bar > .bar_head {
	padding: 0 0 0 6px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
}
.dashboard_bars .bar > .bar_head .sum {
	padding-left: 8px;
}
.dashboard_bars .bar > .bar_head .gap {
	flex-shrink: 1;
	flex-grow: 1;
}
.dashboard_bars .bar > .bar_content {
	padding: 0 6px;
}
/*.dashboard_bars .bar > .bar_head ws-btn {*/
/*	opacity: 0;*/
/*	transition: opacity 0.3s ease-in-out;*/
/*}*/
/*.dashboard_bars .bar:hover > .bar_head ws-btn {*/
/*	opacity: 1;*/
/*}*/
.dashboard_bars .bar_task {
    width: 100%;
}
.dashboard_bars .bar_task_add {
    font: 500 12px/20px var(--font-base);
    gap: 2px;
    padding: 0 2px;
    display: inline-flex;
    border-radius: 4px;
    cursor: pointer;
}
.dashboard_bars .bar_task_add:hover {
    background: var(--costs-task-highlight);
}
.dashboard_bars .bar_task_add ws-icon {
    margin: 0;
    width: 16px;
    height: 16px;
}

.dashboard_bars .bar + .bar {
    box-shadow: -1px 0 var(--CHART_GRID_LINE);
}

.dashboard_bars.bars1 .bar {
    /*float: none;*/
    /*width: auto;*/
}

.dashboard_bars .r {
    margin-top: 8px;
}

.dashboard_bars > ws-icon,
.dashboard_bars > div > ws-icon {
    margin: 0 5px 0 0;
}

.dashboard_bars > ws-icon svg,
.dashboard_bars > div > ws-icon svg {
    fill: var(--base-txt-tertiary)
}

.dashboard_bars .ico_dynamics {
    margin: 0 0 0 5px;
}

.dashboard_bars .sum {
	font: var(--font-ui-18-title-2-semi);
}
.dashboard_bars .sum-unit {
	font: var(--font-ui-18-title-2-semi);
}
.dashboard_bars .sum-unit {
	padding-top: 2px;
	padding-left: 2px;
}
.dashboard_bars .sum-unit > b {
	font: var(--font-ui-13-small-reg);
}
.dashboard_bars .sum-unit.sm {
	padding-left: 4px;
}

.dashboard_bars .sum i {
    font: 14px var(--font-base);
    color: var(--base-txt-tertiary)
}

.dashboard_bars .progress, .dashboard_bars .progress_na {
    clear: both;
    width: auto;
    height: 10px;
	margin-top: 8px;
}

.dashboard_bars .progress div, .dashboard_bars .progress_na div {
    height: 10px;
    position: relative;
}

.dashboard_bars .progress div u {
    height: 10px;
    display: block;
    margin: 0 0 0 auto;
    background: var(--colors-alpha-dark-15);
    position: relative;
}

.dashboard_bars .progress div i {
    position: absolute;
    right: 100%;
    top: 0;
    height: 10px;
    display: block;
    background: var(--colors-alpha-dark-30);
}

.dashboard_bars .progress div.over u {
    margin: 0 auto 0 0;
}

.dashboard_bars .progress div u font {
    position: absolute;
    right: 0;
    top: 18px;
    font: bold 11px/14px var(--font-base);
    width: 100px;
    text-align: right;
}

.dashboard_bars span.det {
    color: var(--base-txt-muted);
    display: block;
    margin: 8px 0 0 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.dashboard_bars a.hot {
    float:right;
    color: var(--base-txt-alert-minor);
    display: block;
    margin: 8px 0 0 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.dashboard_bars span.det b {
    font-weight: normal;
    color: var(--base-txt-secondary)
}

.dashboard_bars .week {
    float: right;
    font: 13px/20px var(--font-base);
}

.dashboard_bars .bar_time {
    border-radius: 8px 0 0 8px;
    outline: 4px solid var(--trans);
    transition: all .3s ease
}

/*.dashboard_bars .bar_time:hover {box-shadow: 1px 1px 0 var(--costs-time-minor), -1px 1px 0 var(--costs-time-minor), -1px -1px 0 var(--costs-time-minor), 1px -1px 0 var(--costs-time-minor); outline: 4px solid var(--costs-time-easy)}*/
/*.dashboard_bars .bar_money:hover {box-shadow: 1px 1px 0 var(--costs-money-minor), -1px 1px 0 var(--costs-money-minor), -1px -1px 0 var(--costs-money-minor), 1px -1px 0 var(--costs-money-minor); outline: 4px solid var(--costs-money-easy)}*/
.dashboard_bars .bar_money {
    border-radius: 0 8px 8px 0;
    outline: 4px solid var(--trans);
    transition: all .3s ease
}

.dashboard_bars .bar_time:hover .chart {
    opacity: 1;
}
.dashboard_bars .bar_time .week,
.dashboard_bars .bar_money .week {
	margin-right: 8px;
}

.dashboard_bars .bar_time .bar_head .btn:hover {
	background: var(--costs-time-highlight);
}
.dashboard_bars .bar_time .bar_head .btn:focus {
	background: var(--costs-time-easy);
}
.dashboard_bars .bar_time .bar_head .btn svg {
	fill: var(--costs-time-major);
}

.dashboard_bars .bar_time .sum,
.dashboard_bars .bar_time .sum-unit {
    color: var(--costs-time-major)
}
.dashboard_bars .bar_time svg {
    fill: var(--costs-time-major);
}
.dashboard_bars .bar_money .sum,
.dashboard_bars .bar_money .sum-unit {
    color: var(--costs-money-major)
}
.dashboard_bars .bar_money svg {
    fill: var(--costs-money-major);
}
.dashboard_bars .bar_money .bar_head {
	padding: 1px 0;
}
.dashboard_bars .bar_task svg {
    fill: var(--base-txt-act-minor);
}

.dashboard_bars-nodata .sum {
    font: 400 13px/20px var(--font-base);
}
.dashboard_bars-nodata .progress_na {
    margin-bottom : 8px;
}
.dashboard_bars .limit {
    display: inline-flex;
    cursor: pointer;
    padding: 0 4px;
    margin: 8px 0 0 -2px;
}
.dashboard_bars .limit ws-icon {
    margin: 0;
}
.dashboard_bars .bar_time .limit {
    color: var(--costs-time-major);
}
.dashboard_bars .bar_time .limit:hover {
    background: var(--costs-time-highlight);
    border-radius: 4px;
}
.dashboard_bars .bar_money .limit {
    color: var(--costs-money-major);
}
.dashboard_bars .bar_money .limit:hover {
    background: var(--costs-money-highlight);
    border-radius: 4px;
}


.dashboard_bars .bar_time .week {
    color: var(--costs-time-major)
}

.dashboard_bars .bar_money .week {
    color: var(--costs-money-major)
}

.dashboard_bars .bar_time .chart {
    cursor: pointer;
    color: var(--costs-time-major);
    float: right;
    font: 500 13px/20px var(--font-base);
}

.dashboard_bars .bar_money .chart {
    display: none;
    cursor: pointer;
    color: var(--costs-money-major);
    float: right;
    font: 500 13px/20px var(--font-base)
}

@media (hover: none) {
	.dashboard_bars .bar_time .chart {
		opacity: 1;
	}
	.dashboard_bars .bar_time .week:not(:empty) ~ .chart {
		display: none;
	}
	.dashboard_bars ws-icon[name*=arrow_expand_sm] {
		margin: 0;
	}
}

.dashboard_bars .bar_time .progress div u font {
    color: var(--costs-time-major)
}

.dashboard_bars .bar_money .progress div u font {
    color: var(--costs-money-major)
}

.dashboard_bars a.dynamics {
    float: right;
    padding: 2px;
    margin: 10px 10px 0 -10px;
    border: 1px solid var(--base-txt-link-minor);
    border-radius: 15px;
    transform: scale(0.9);
}

.dashboard_bars a.dynamics .ico {
    margin: 0;
}

.dashboard_bars .dynamic {
    float: right;
    margin: 10px -5px 0 0;
}

.dashboard_bars span.det .onch {
    color: var(--base-txt-secondary);
}

.dashboard_bars:hover span.det .onch {
    border-bottom: 1px dashed
}

.dashboard_bars span.det .onch:hover {
    color: var(--base-txt-link-minor)
}

.dashboard_bars span.det .s2 {
    display: none
}

.dashboard__modal .dashboard_bars {
    border-bottom: 2px solid var(--base-line-alt-gap-major);
    margin: 0 0 10px 0;
}
.modal__content .buttons-asFooter {
	height:24px;
	padding: 0;
}
.modal__content .buttons-asFooter {
	display: none
}
ws-emoji::part(icon) {
	fill: var(--base-txt-tertiary);
}

#__ybug-app .page--left {
	background: red;
}
ws-menu, .display_contents {
	display: contents;
}
.av--user-blocked  {
	width: 24px;
	height: 24px;
	margin: 0 4px;
	border-radius: 12px;
	background: var(--base-hlt-w-invert);
	--icon-size: 20px;
	--icon-color: var(--base-txt-alt-light);
}
.av--user-blocked-sm {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: var(--base-hlt-w-invert);
	--icon-size: 20px;
	--icon-color: var(--base-txt-alt-light);
}
.items-center {
	align-items: center;
}

#fakeKeyboard {
	position: fixed;
	bottom: 0px;
	left: 0px;
	right: 0px;
	height: var(--keyboard-height);
	--nr: 8;
	--nc: 10;
	--b: 2px;
	background: conic-gradient(from 90deg at var(--b) var(--b), rgb(0 0 0 / .5) 90deg, #0000 0) calc(-1 * var(--b)) calc(-1 * var(--b)) / calc(100% / var(--nc)) calc(100% / var(--nr));
	z-index: 999999;
}