body.mobile .no_mobile {display:none}
body.desktop .no_desktop {display:none}

.print {display:none}
html, body {
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	text-size-adjust:none;
}
input[type=button], input[type=submit], input[type=email], input[type=number], input[type=text], input[type=password] {
	-webkit-appearance: none;
}
/* ======================================= 1024 ======================================================*/


.noani {transition:none !important; -webkit-transition:none !important}
.noani_child * {transition:none !important; -webkit-transition:none !important; animation: none !important}

@media (max-width: 1300px) {
	.w1300 {display:none}
}
@media (max-width: 1200px) {
}
.wo1024 {display:none;}
@media (max-width: 1024px) {
	.w1024 {display:none;}
	.wo1024 {display:inline;}
	.viewsList {margin-left:-7px}
	.viewsList a {padding-left:7px; padding-right:7px;}
	.dataadd_out .options b[rel=workflow] {max-width:150px;}
	.preview_import.title {height: 30px}
}

/* ======================================= 900 ======================================================*/


@media (max-width: 960px) {
	.dataadd {width:auto; min-width:0;}
	.account_delete {min-width:0; width:auto;}
	.header .name a.ht {max-width:70%; }
}
.wo900 {display:none;}
.wi900 {display:none !important}


@media (max-width: 900px) {
	.w900 {display:none !important;}
	.wo900 {display:inline;}
	.wi900 {display:block !important}

	#migrate_start {display:none}
	#button_ua_ {width:auto; margin-left:-200px;}
	.taskView__subtasks .task_arrow {display:none}
	.dataadd_out #dataadd_group .labels_act .ico_r span.norm, .dataadd_out #dataadd_group .user_to_act .ico_r span.norm {display:none !important}

	.admWeekends .ui-datepicker-multi {width:auto !important}
	.delete_me {width:auto; min-width:0;}
	.import_field.import_user_from {display: none}
}

/* ======================================= 768 ======================================================*/

.wo768 {display:none}
.wi768 {display:none !important;}
@media (max-width: 768px) {

	.w768 {display:none !important}
	.wo768 {display:inline}
	.wi768 {display:block !important}

	.viewsList {cursor: default !important}

	.dataadd_out #dataadd_group .limit .time_, .dataadd_out #dataadd_group .limit .money_ {margin-left:10px}

	.dataadd_out #pay_history {float:none; width:auto;}
	#empty_page .help_arrow {display:none}
	#empty_files2 {width:auto; padding:50px 0 0 70px; font-size:14px;}
	#empty_files2 .msg_ico {left:10px;}
	#empty_files2 .help_arrow {display:none}
	#google_data .switch_block {width:250px;}
	.dataadd_out .labels { float:none; width:auto; margin:0 0 24px;}
	.dataadd_out .width50 {float:none; width:100%}
	.dataadd_out .terms {float:none; width:100%}
	.dataadd_out .limit {float:none; width:100%;}
	.dataadd_out .user_to, .dataadd_out .user_to_r, .dataadd_out .options {float:none; width:auto; margin:0 0 24px;}
	.import_field.import_title {font: 14px/12px var(--font-base)}
	.import_field.import_title ._tags {display: none}
	.import_field.import_start_date {width: 15%}
	.import_field.import_end_date {width: 15%}
	.preview_import.title {height: 30px}
}

/* ======================================= 0-640 ======================================================*/
.wo640 {display:none;}
.wi640 {display:none !important}
@media (max-width: 640px) {
	.w640 {display:none !important}
	.wo640 {display:inline}
	.wi640 {display:block !important}
	.dataadd_out .user_to label {display:none}
	.dataadd_out .labels label {display:none}
	.modal__content .buttons_comment p {padding-right:90px}
	.modal__content .buttons_comment .button_s2 {display:none}
	.modal__content .buttons_comment .button_s2_alt {display:inline; top:2px}

	#dataadd_group {position:static; width:auto; border-radius:0; margin:0 -12px 24px; padding:0 12px 12px; background:var(--base-surf-top); border:none}
	#dataadd_group .group_arr {display:none}
	.dataadd .datablock {float:none; margin:0 0 15px 0; width:auto}
	.dataadd_out #dataadd_group .terms, .dataadd_out #dataadd_group .limit {}

	.setup_ table {margin:0 0 10px 0}
	.setup_ table th {display:block; text-align:left; padding:12px 6px 6px 6px; color:var(--base-txt-secondary)}
	.setup_ table td {display:inline}
	.setup_ table tr {display:block}
	#empty_page {width:auto; padding:28px 10px 50px}
	.settings .msg_ico {display:none}

	.modal__dataTable-onCopy .td_term {display:none}
	.modal__dataTable-onCopy .item .td_user {right:0}
	.modal__dataTable-onCopy .item .td_prior {right:160px;}
	.modal__dataTable-onCopy .item {padding-right:190px;}

	.modal__content .task {padding:15px;}
	.modal__header > .in .filter {display:none}

	.header .name a.ht {max-width:80%; }
	@-webkit-keyframes pulse-zoom {0% {-webkit-transform:scale(1)} 50% {-webkit-transform:scale(1.4)} 100% {-webkit-transform:scale(1)}}
	@keyframes pulse-zoom {0% {transform:scale(1)} 50% {transform:scale(1.4)} 100% {transform:scale(1)}}

	#too_many i {display:none}
	#title_float .div:before {display:none}
	#title_float .div:after {content:' '}
	.delete_me .esc {display:none}
	.import_field.import_user_to {display: none}
	.export.csv #filter_tasks {min-height: 100px}
	.export .field div span {float: none; word-break: break-word}
}
/* ======================================= 0-640 ======================================================*/


/* ======================================= 0-560 ======================================================*/
@media (max-width: 560px) {
	.header .name a.ht {max-width:75%}

	.member_line {margin: 0}
	#buttons_floating .in { left:0; right:0; width:auto; margin:0; border-radius:0; box-shadow:0 -2px var(--base-surf-top)}
	#buttons_floating.buttons_floating_a .in {bottom:0}
	#sidePanel__wrapper #events {padding-right:5px}

	.import_field.import_start_date, .import_field.import_end_date {width: 20%}
	.import_btn .button {min-width: 170px}
	.export_content {padding-left: 20px}
	#super_error {
		top: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
	}
}
/* ======================================= 0-560 ======================================================*/
@media (min-width: 481px) {
}
/* ======================================= 480 ======================================================*/

body.mobile .task_weye h4 b {display:none}
body.mobile .eye, body.mobile .eye_hint {display:inline}
body.mobile .droplink {display:none !important}
body.mobile .alert_archive {display:none;}

@media only screen and (max-width: 700px) {
	/*#invite {width:auto; margin:20px}*/
}

@media (max-width: 480px) {
	.w480 {
		display: none !important;
	}
}
@media (min-width: 481px) {
	.wo480 {
		display: none !important;
	}
	ws-btn .wo480 {
		padding: 0 4px;
	}
}
@media (max-width: 600px) {
	#subscribers_inline font, .likes a.emotion:first-child font {display:none}
	.likes a.emotion:first-child {margin-right:0}
}
@media (max-width: 480px) {
	#content, body.mobile #content {padding-left: 12px;padding-right: 12px;}
	#filter_more {margin-left:0; margin-right:0}
	.dataadd {margin-bottom:0}
	.dataadd_out .dataadd {margin:0 10px;}
	.dataadd_out_sub {padding:0}
	.dataadd_out .tree {padding-left:12px;}
	.dataadd_out_sub .tree {padding-left:0;}
	.taskView__subtasks .title_task {padding:12px}
	.project_search_wico {padding-right:52px}
	#sidePanel__wrapper .also {display: none;/* position: fixed; */}
	#sidePanel__wrapper .search_started ~ .also {display:none}
	span.ico_menu_srch {display:inline}
	.viewsList a.top {display:none !important}
	#files_new {margin-right:0;}
	.download_zip {display:none}
	a.autosave {display:none}
	body:not([data-page=kanban]):not([data-page=users_tasks]):not([data-page=kanban_days]):not([data-page=projects_kanban]) .massPanel, #massdo_top {display:none !important;}

	.dataadd .dataadd_ .button_r {display:none}
	.dataadd .dataadd_ .place_button .button_r {display:inline-block}
	.dataadd .dataadd_ .button_w480 {position:relative; padding:0 0 60px 0;}
	.dataadd .dataadd_ .button_w480 .button_r {display:block;position:absolute; right:0; top:50px;}
	.setup_line_ .for_info2 .in {display:block;}
	.proj_name {margin:14px 0 14px 0;}
	.dataadd #mailing .head a.all {display:none}
	.dataadd_out .user_to, .dataadd_out .user_to_r, .dataadd_out .options {float:none; width:auto; margin:0 0 15px;}
	.dataadd_out .labels { float:none; width:auto; margin:0 0 15px;}

	.eye {display:inline}
	.eye_hint {display:none !important}
	.eye_conf .eye_line a {padding:3px 6px;}

	#title_tab {overflow:hidden;}

	.task .page_content {padding-right:0;}
	span.br {display:block; clear:both; height:5px;}
	span.br480 {display:block; clear:both; height:5px;}

	.alert_archive {display:none;}
	.button_bl_480 a.button_add {padding:0;}
	.button_bl_480 a.button_add span.ico {margin:3px 18px 4px 19px !important;}
	.button_bl_480 b {display:none}


	#empty_page {font-size:14px}
	#empty_search {padding-top:0;}
	.modal__content div.summ {right:15px;}
	.modal__content select {max-width:98%;}
	div.attach {width:200px;}
	#google_data {display:none !important}


	.modal__content p.pnotify span.gray {display:none}
		p.graysmall {margin-left:0;}

	.modal__dataTable-onCopy .item .td_user {display:none}
	.modal__dataTable-onCopy .item .td_prior {right:10px;}
	.modal__dataTable-onCopy .item {padding-right:40px;}
	.p404 {font:italic 16px var(--font-serif)}
	.p404 span {font:20px var(--font-base); color:var(--base-txt-primary);}
	.p404 a.go_home {font: 15px var(--font-base); padding: 10px 20px}
	#reload_alert {left:0; right:0}
	#reload_alert a {margin:0 20px 0 0}
	#goto_top, #goto_foot {bottom:20px; right:20px;}
	.modal__content div.buttons_a {position:fixed; left:0; right:0; bottom:0; margin:0; min-height:20px;z-index:1020; zoom:1; -webkit-transform: translateZ(0px)}
	.modal__content div.buttons_b {position:fixed; left:0; right:0; bottom:0; margin:0; min-height:20px;z-index:1020; zoom:1; -webkit-transform: translateZ(0px)}
	.modal__content .modal__taskClose .buttons {padding: 20px !important}
	a.button_slider {max-width: 140px}
	.modal__content div.buttons_nobg {background:var(--base-cont-low)}
	.mass_select_all {display:none !important}
	.help_menu {background:var(--base-cont-low); padding:10px 10px; height:auto; margin:0}
	.help_menu a {white-space:nowrap; overflow:hidden}
	.help_footer {background:var(--base-cont-low); position:relative; top:0; left:0}
	.dataadd_out .terms, .dataadd_out .limit {margin:0 0 15px; width:auto}

	.user_list a.user {font:14px/20px var(--font-base)}
	.body_wmenu {background:var(--base-cont-top) !important}
	.body_wmenu #main, .body_wmenu #title_float, .body_wmenu #footer,.body_wmenu .modal, .body_wmenu #sidePanel__wrapper, .body_wmenu .commentListPanel {display:none !important}
	#mass_n_filt {padding:0}
	.modal__header > .in span.ico_tb_big {display:none}

	.modal[data-group=invite] .modal__content .buttons .button {width:auto;}

	#subscribe_me .ico_r, #subscribe_me2 .ico_r {display:none !important}
	.modal__header > .in .quick_search {float:none; padding-right:10px; margin:-4px;}
	.modal__header > .in .quick_search input {width:100%}
	.modal__header > .in .vs_search {display:none}
	div.notify_block span.inline {display:none}
	.buttons_center_white {width:270px;padding:14px 15px 14px 10px}
	.buttons_center_white .notify_block {margin-right:-20px}
	.modal__dataTable {padding-top:15px;}
	#modfiles .files_new {padding:10px 0}
	#modfiles .fileItem {margin:1% 1%; padding:7px 1%; width:46%}
	.setup_line {font:18px/20px var(--font-base); margin:10px 0}
	body[data-page=account] .setup_line {margin:10px 0;}
	.setup_line_ {font:18px/20px var(--font-base)}
	.setup_line_ .ico, .setup_line:before {display:none}
	.buttons_center {padding:12px 0}
	#dataadd_group {margin-bottom:12px;}
	.but_archive {display:block; float:none; width:160px; margin:-20px auto 20px auto}
	.dataadd .sleep, .dataadd .sleep3 {font:14px/20px var(--font-base); width:320px; margin:50px auto 40px}
	.sleep .msg_ico {margin-top:0}
	.header .path0, .header .path span.div:not(.tags) {display:none}
	/*.header .path .ico,.header .path .priorb {display:none}*/
	.header .name {font:18px/20px var(--font-base)}
	.header .name_ {font:22px/20px var(--font-base)}
	.header .name .bookmark,.header .name .ico_dots:not(.ico_need),.header .name .ico_newcomment2 {display:none}
	.header .name a.ht, .header .path a.ht {max-width:80%; }
	#title_float .div.tbl, #title_float .div1st {display:none}
	#title_float .in .ico_equalizer {margin:0 10px 0 -10px; display:none}
	#mass_n_filt .filter {padding-left:10px;}
	.partner_link .partner {display:none}


	.modal__content #drophomemenu .eye_line_long {padding-left:0}
	.modal__content #drophomemenu .eye_line_long .ico {display:none}
	.toolbar .td_color_bg, .toolbar .td_link {display:none}
	.reply_from {display:block; padding:3px 5px; display:table; margin:5px 0 -10px -8px}
	.reply_from span.ico_reply_to2, .reply_from span.ico_reply_from {background-position:-100px -1360px}


	#too_many {padding: 0 10px;}
	#too_many i.button {display:none}

	.dataadd .tree u {display:block; height:10px;}
	.dataadd .tree i {padding-left:6px;}
	.project_bl a.add_place, #title_float a.add_place, .commentListPanel a.add_place {margin:-10px -15px -10px -15px}
	body.bd_right #title_float .in_r .ico_user_add {margin-right:-30px; margin-left:0}
	.help_link {padding:4px 10px; margin:5px 0;}

	.dataadd_out .options b[rel=workflow] {max-width:120px;}
	#empty_files2, #empty_page {font:13px/20px var(--font-base); padding:20px 10px; text-align:center;}
	#empty_files2 .msg_ico, #empty_page .msg_ico {left:50%; top:20px; margin:0 0 0 -20px;}
	a.select_h4a {width:150px;}
	.prior_sel_sm a {flex-shrink: 0;padding: 4px;border-radius:20px;font:bold 14px/18px var(--font-base)}
		.prior_sel_sm a:last-child {margin-right: 3px;}
	.menu__group.prior_sel_sm {display: flex;justify-content: space-between;gap: 0;height: auto;}
	#modal__preview {margin:15px;}
	.alertblock_help .text, .alertblock_help .title {border-radius: 0}
	.dataadd_out .options .dots i {width:6px; margin:0 -1px 0 -2px}
	.proj_status {width:0;}
	.proj_status font {display:none}
	.modal__header__tabs a .ico_l {display:none}
}
body.mobile .alert_archive {display:block; bottom:0; z-index:1020}
body.mobile .alert_archive_place {height:50px;}
@media (max-width: 480px) {
	#ui-datepicker-div a, .ui-datepicker-inline a, .ui-datepicker-days-cell {font:14px/26px var(--font-base) }
	.ui-datepicker-inline {width: 100%; gap: 0;}
	.ui-datepicker-one-month {max-width: 100%; flex-grow: 1;}
	.admWeekends .ui-datepicker-multi {width:240px !important; }
	#dateend_nice {font-size:12px;}
	#modfiles .files_new label {opacity:0}
	.task_link b {white-space:normal; word-wrap: break-word}
	body[data-page=account] #content {padding: 32px 12px;}
	body[data-page=gantt] #content {display: none;}
	.buttons_center.tagsAdmListing__buttons {width:auto;}
	body.mobile .proj_color_sel .proj_color{margin:5px 0 }
}
.wo400 {display:none;}

@media (max-width: 420px) {
	.modal__content .modal__taskClose .button_repeat {text-overflow: ellipsis; overflow: hidden; display: block; white-space: nowrap; max-width: 130px}
}

@media (max-width: 400px) {
	.w400 {display:none;}
	.wo400 {display:inline;}
	.modal__content p.pnotify label {display:block; width:170px}
	a.button_slider {max-width: 100px}
	#ui-datepicker-div {left:15px !important}
	.help_title i {display:none}
	.help_menu a {font:11px/14px var(--font-base)}
	.help_menu a b {font:13px/20px var(--font-base);}
	.prior_sel_sm a {margin: 0;}
}

/* ======================================= 360 ======================================================*/

.wo360 {display:none;}
@media (max-width: 360px) {
	.w360 {display:none;}
	.wo360 {display:inline;}
	#tback i {display:none;}

	.dataadd_out .terms span.ico_start, .dataadd_out .terms span.ico_finish, .dataadd_out .limit .arr {display:none;}
	.dataadd_out #dataadd_group .terms span.ico_start, .dataadd_out #dataadd_group .terms span.ico_finish, .dataadd_out #dataadd_group .limit .arr {display:block;}
	.dataadd_out .limit .time_, .dataadd_out .limit .money_ {margin-left:10px}
	.switch_block .sw_off, .setup_ .sw_off, .switch_block .sw_on, .setup_ .sw_on {display:none !important}
	.text .fileItem {width:auto; float:none}
	.modal__content p.pnotify label {display:block; width:auto;}
	div.attach {width:180px;}
	.p404 {font:italic 15px var(--font-serif)}
	.p404 span {font:18px var(--font-base); color:var(--base-txt-primary);}
	.p404 a.go_home {font: 14px var(--font-base); padding: 10px 20px}
	.dataadd_out .ico_r span.norm, .dataadd_out .ico_r span.hover {display:none !important}
}
@media (max-width: 350px) {
	.modal__header__tabs .ico_l {display:none}
	#modfiles .fileItem {float:none; width:auto; padding:7px 8px;}
	a.button_slider {display: none}
}

@media (max-width: 370px) {
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (   min--moz-device-pixel-ratio: 1.5),
only screen and (     -o-min-device-pixel-ratio: 15/10),
only screen and (        min-device-pixel-ratio: 1.5),
only screen and (                min-resolution: 144dpi),
only screen and (                min-resolution: 1.5dppx) {
	img, .avatars a {image-rendering: crisp-edges;}
	.account_delete span.delete_ico, .account_delete_on span.delete_ico, span.ico_secure
	{
		background-image:url(/assets/img/secure_iconset@x2.png);background-size: 315px 135px;
	}
	.app_load_ico, .app_load_ico1, .app_load_ico2 {
		background-image:url(/assets/img/get_ws_app@x2.png);background-size: 520px 120px;
	}
}

#sa_top, #sa_bot {position:absolute; left:0; top:0; height:0; width:0;}

@media (max-width: 480px)
{
	#sa_top {height:var(--sa-top)}
	#sa_bot {
		/* @see swype.js */
		position: fixed;
		inset: auto 0 0 0;
		width: auto;
		height: var(--sa-bot);
		z-index: 99999;
	}
}

body.noscroll, body.noscroll textarea {overflow:hidden; touch-action:none}


:root {
	--mobile-head-bg-color: var(--base-cont-top);
	--mobile-head-bg-color-opac: var(--base-cont-top-opac);
	--mobile-head-bg-color-gradient-opac: linear-gradient(180deg, var(--base-cont-top), var(--base-cont-top-opac));
	--mobile-head-bg-color-gradient-fadeOut: linear-gradient(180deg, var(--base-cont-top), transparent);
	--mobile-head-hairline: var(--hairline-bottom);
	--mobile-head-hairline-inset: var(--hairline-bottom-inset);
	--mobile-head-left-icon-size: 24px;
	--mobile-head-left-icon-color: var(--base-txt-primary);
	--mobile-head-logo-size: 32px;
	--mobile-head-logo-color: var(--base-txt-primary);
}
.mobile-head__wrapper {
	box-shadow: var(--mobile-head-hairline);
	background: var(--mobile-head-bg-color);
	border-bottom: unset;
}
.mobile-head__wrapper .mobile-head {
	box-shadow: unset;
	background: unset;
}
.mobile-head {
	z-index: 1; /* щоб hairline не перекривався рандомними блоками з position: relative */

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;

	padding: 0;
	height: var(--mobile-head-height);
	box-sizing: border-box;
	flex-shrink: 0;
	box-shadow: var(--mobile-head-hairline);
	background: var(--mobile-head-bg-color);
	gap: 0;
	width: 100%;
}
.mobile-head__left {
	padding-left: 4px;
	display: flex;
}
.mobile-head__right {
	display: flex;
	padding-right: 4px;
	padding-left: 8px;
}
.mobile-head__btn { /* контейнер для звичайної кнопка з іконкою і текстом */
	padding: 0 6px;
	align-content: center;
}
/* контейнери для кнопки де є тільки логотип або іконка */
.mobile-head__project-btn,
.mobile-head__ava-btn,
.mobile-head__logo-btn,
.mobile-head__icon-btn,
.mobile-head__loader {
	width: 44px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.mobile-head__left .mobile-head__icon-btn .btn-g.btn-plain {
	ws-icon {
		--icon-size: var(--mobile-head-left-icon-size) !important;
	}
}
.mobile-head__icon-btn .btn-g.btn-plain {
	ws-icon {
		svg {
			flex-shrink: 0;
			fill: var(--mobile-head-left-icon-color);
		}
	}
}
.mobile-head__logo-btn .btn-g.btn-plain {
	ws-icon {
		--icon-size: var(--mobile-head-logo-size) !important;
		svg {
			flex-shrink: 0;
			fill: var(--mobile-head-logo-color);
		}
	}
}
.mobile-head__logo-btn .ws_logo {
	border-radius: 8px;
	ws-icon {
		--icon-size: 40px;
		width: 40px;
		height: 40px;
	}
	img {
		margin: 2px;
		width: 36px;
		height: 36px;
		border-radius: 6px;
	}
}
.mobile-head__logo-btn .btn-g.btn-plain.btn-rounded.menu_open {
	ws-icon svg {
		fill: var(--base-txt-btn-c);
	}
}
.mobile-head__project-btn a,
.mobile-head__ava-btn a,
.mobile-head__ava-btn .profile {
	width: 32px;
	height: 32px;
	position: relative;
	display: block;
	.av_nm {
		transform: scale(calc(32 / 48));
		transform-origin: left top;
	}
	.av_sm {
		&.av_i {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
		&.av_let {
			transform: scale(calc(32 / 24));
			transform-origin: left top;
		}
	}
	.online {
		position: absolute;
		top: -1px;
		right: -1px;
		width: 8px;
		height: 8px;
		background: var(--base-txt-new-minor);
		border: 2px solid var(--base-cont-input);
		border-radius: 50%;
	}
	.online-off {
		background: var(--base-cont-input);
		box-shadow: 0 0 0 1px var(--sidebar-ico-base) inset;
	}
	.proj_color {
		/* width: 36px; */
		/* height: 36px; */
		width: 32px;
		height: 32px;
		display: flex;
		align-content: center;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		ws-emoji {
			/* width: 24px; */
			/* height: 24px; */
			width: 22px;
			height: 22px;
		}
	}
}
.mobile-head__ava-btn--big a,
.mobile-head__ava-btn--big .profile {
	/* width: 36px; */
	/* height: 36px; */
	width: 32px;
	height: 32px;
}
.mobile-head__project-btn a {
	/* width: 36px; */
	/* height: 36px; */
	width: 32px;
	height: 32px;
}
.mobile-head__project-btn a .proj_color.proj_color {
	border-radius: 8px;
}
.mobile-head__btn projects-last-activity .btn {
	svg {
		fill: var(--base-txt-primary);
	}
	span:not([class]) {
		color: var(--base-txt-primary);
		font: var(--font-ui-12-mini-reg);
	}
}
.mobile-head__tabs.flex_row {
	flex-shrink: 1;
	min-width: 0;
	gap: 12px;
	height: var(--mobile-head-height);
	align-items: stretch;
}
.mobile-head__tab {
	position: relative;
	overflow: hidden;
	text-overflow: ellipsis;
	font: var(--font-ui-16-title-3-bold);
	color: var(--base-txt-muted);
}
.mobile-head__tab .highlight {
	position: absolute;
	inset: auto 0 0 0;
	height: 2px;
	border-radius: 2px;
	opacity: 0.05;
	background: var(--base-txt-btn-a);
}
.mobile-head__tab.act {
	color: var(--base-txt-primary);
}
.mobile-head__tab.act .highlight {
	opacity: 1;
}
.mobile-head > .mobile-head__left,
.mobile-head > .mobile-head__content,
.mobile-head > .mobile-head__right {
	height: 100%;
}
.mobile-head__content {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;

	flex-grow: 1;
	flex-shrink: 1;

	padding: 0 0 0 8px;
	overflow: hidden;
	&> * {
		flex-shrink: 0;
	}
}
.mobile-head__content--noSpace {
	padding-left: 0;
}
.mobile-head__task {
	display: flex;
	overflow: hidden;
}
.mobile-head__task task-stage {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}
.mobile-head__task task-stage ws-icon {
	scale: .8;
	transform-origin: left center;
}
.mobile-head__task .in {
	font: var(--font-ui-10-nano-reg);
	color: var(--base-txt-secondary);
	padding: 0 2px;
	border-radius: 4px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mobile-head__title {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;

	flex-grow: 1;
	flex-shrink: 1;

	padding: 0 4px;
	color: var(--base-txt-primary);
	font: var(--font-ui-18-title-2-bold);
	overflow: hidden;
}
.mobile-head__title > * {
	flex-shrink: 0;
}
.mobile-head__title > .user-selector,
.mobile-head__title > .mobile-head__dropdown,
.mobile-head__title > .in {
	flex-shrink: 1;
}
.mobile-head__title--center {
	justify-content: center;
}
.mobile-head__title--noSpace {
	padding: 0;
}
.mobile-head__dropdown {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;

	overflow: hidden;

	padding: 6px 8px;
	border-radius: 8px;
	gap: 4px;
	cursor: pointer;
	.left_icon {
		width: 24px;
		height: 24px;
	}
	&.menu_open,
	&:hover {
		background: var(--base-cont-trans-low);
	}
	.in {
		font: var(--font-ui-18-title-2-bold);
		padding: 0;
	}
}
.mobile-head__rows {
	display: flex;
	flex-direction: column;
	flex-grow: 0;
	flex-shrink: 1;
	min-width: 0;
}
.mobile-head__rows--center {
	align-items: center;
}
.mobile-head__rows--center > * {
	max-width: 100%;
}
.mobile-head__rows--compact > :first-child {
	margin-bottom: -1px;
}
.mobile-head__rows--compact > :last-child {
	margin-top: -1px;
}
.mobile-head__rows > .in,
.mobile-head__rows > .sub_in,
.mobile-head__title > .in,
.mobile-head__dropdown > .in {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mobile-head__rows > .in {
	font: var(--font-ui-16-title-3-bold);
	.mobile-head__dropdown {
		padding: 0 4px 0 2px;
		gap: 2px;
		.in {
			font: inherit;
		}
	}
}
.mobile-head__rows > .sub_in {
	--icon-color: var(--base-txt-secondary);
	--icon-size: 16px;
	color: var(--base-txt-secondary);
	font: var(--font-ui-10-nano-reg);
	padding: 0 2px;
	border-radius: 4px;
	ws-icon {
		width: 16px;
		height: 16px;
	}
}

.mobile-head .inline_dotted {
	text-decoration-thickness: from-font;
	text-underline-position: under;
	&:hover {
		text-decoration-thickness: from-font;
		text-underline-position: under;
	}
}

body.w_keyboard .mobile-head {
	position: relative;
	z-index: 1;
}

@media screen and (min-width: 481px) {
	.mobile-head {
		display: none;
	}
}

@media screen and (max-width: 480px) {
	/* в модалках дуже не вистачає скрол бара
	взагалі у плагіна було .ps--scrolling-y, але його відключили
	тож додаю точково для модалок, може варто й для меню додати? */
	.modal {
		.ps.ps-hover.scrollZone--scrolled {
			&> .ps__rail-x,
			&> .ps__rail-y,
			&~ .ps__rail-x,
			&~ .ps__rail-y {
				opacity: 1;
			}
		}
	}
}