#modalContainer {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1024;
	position: fixed;
	pointer-events: none;
}

@media (max-width: 480px) {
	#modalContainer {
		--layer: 0;
		--zIndex: 1032;
		z-index: calc(var(--zIndex) + var(--layer));
	}
}

#modalContainer > * {
	pointer-events: auto;
}

.modal {
	font: 12px/20px var(--font-base);
	color: var(--base-txt-primary);
	overflow: hidden;
	background: var(--base-cont-mod-top);
	text-align: left;
	pointer-events: auto;
	flex-grow: 0;
	flex-shrink: 0;
	border-radius: 16px;
	display: none;
	flex-direction: column;
	box-shadow: var(--shadow-mod-major);
}

.modal[data-color=gray] {
	background: var(--base-cont-mod-low);
}
.modal[data-color=transparent] {
	background: transparent;
}
/* .modal[data-deep="1"] {
	transform:scale(0.8)
}
.modal[data-deep="2"] {
	transform:scale(0.6)
}
.modal[data-deep="3"] {
	transform:scale(0.4)
} */

.modal__overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	transition: background 0.2s ease-out;
	-webkit-transition: background 0.2s ease-out;
}

@media (min-width: 481px) {
	.modal__overlay {
		padding-top: calc(0.13 * var(--vh));
		padding-left: var(--desktop-primary-menu-width);
		align-items: flex-start;
	}
	.modal__overlay ~ .modal__overlay {
		padding-top: calc(0.13 * var(--vh) + 8px);
	}
	.modal__overlay ~ .modal__overlay ~ .modal__overlay {
		padding-top: calc(0.13 * var(--vh) + 16px);
	}
	.modal {
		position: relative;
		max-height: min(calc(var(--vh) - 40px), calc(0.75 * var(--vh))) !important;
	}
	.modal__overlay-withPanel .modal {
		max-height: unset !important;
		&[data-group=trans] {
			backdrop-filter: blur(4px);
		}
	}
}

@media (min-width: 481px) and (max-height: 768px) {
	.modal__overlay {
		padding-top: calc(0.07 * var(--vh));
		align-items: flex-start;
	}
	.withModal .menu .scrollZone {
		max-height: 320px;
	}
	.modal {
		max-height: calc(var(--vh) - 40px) !important;
	}
}

/* ----------- MinifyCSS: LIGHT THEME ----------- */
.modal__overlay-custom {
	background-color: var(--colors-alpha-dark-15);
}

.modal__overlay-withPanel {
	background-color: var(--colors-alpha-dark-10);
	padding: 0 !important;
	margin: 0;
	flex-direction: column;
	align-items: center;
}
.modal__overlay-withPanel .modal {
	margin-top: -140px;
}

.modal__overlay-custom-red {
	background-color: var(--base-hlt-w-pressed);
}

.modal__overlay-custom-blue {
	background-color: var(--colors-blue-alpha-500-a25);
}

.modal__overlay-custom-green {
	background-color: var(--colors-green-alpha-600-a10);
}

.modal__overlay-custom-purple {
	background-color: var(--colors-purple-alpha-600-a15);
}

.modal__overlay-custom-preApplause {
	transition: background 1.5s ease;
	-webkit-transition: background 1.5s ease
}

.modal__overlay-custom-applause {
	background-color: var(--colors-pink-desat-920);
	opacity: 0.3
}

.modal__overlay-custom-applause[data-applause=green] {
	background-color: var(--colors-green-desat-920);
	opacity: 0.3
}

.modal__overlay-custom-applause[data-applause=blue] {
	background-color: var(--colors-blue-930);
	opacity: 0.3
}

.modal__overlay-custom-postApplause {
	background-color: transparent;
	transition: background 0.5s ease;
	-webkit-transition: background 0.53s ease
}

/* ----------- MinifyCSS: DARK THEME -----------

.modal__overlay-custom {background-color: rgba(27, 33, 39, 0.75)}
.modal__overlay-custom-preApplause {transition: background 1.5s ease; -webkit-transition: background 1.5s ease }
.modal__overlay-custom-applause { background-color:var(--colors-pink-desat-920); opacity: 0.3 }
.modal__overlay-custom-postApplause {background-color:transparent;transition: background 0.5s ease; -webkit-transition: background 0.5s ease }

  ----------- MinifyCSS: STOP ----------- */

.modal__header > .in {
	flex-shrink: 1;
	padding: 8px 0 8px 12px;
	color: var(--base-txt-accent);
	font: var(--font-ui-22-title-1-bold);
	flex-direction: row;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	gap: 8px;
	align-self: stretch;
	align-items: center;
	height: 36px;
}
.modal__header > * + .in {
	padding-left: 0;
}
.modal__header > .in ~ ws-btn { /* margin-right: 8px; */
}
.modal__header > .in:has(.logo__wrapper) {
	padding: 8px 0;
	overflow: initial;
}
.modal__header > .in .logo__wrapper {
	margin: -2px;
	height: 40px;
}
.modal__header > .icon {
	padding-left: 6px;
	width: 24px;
	height: 24px;
	--icon-size: 24px;
}
.modal__title__search {
}
.modal__title__search input {
	font: inherit;
	width: 100%;
	box-sizing: border-box;
	border: none;
	padding: 0;
	caret-color: var(--base-txt-act-minor);
	background: var(--base-cont-mod-top);
	font: var(--font-ui-22-title-1-reg);
}

.modal__title__search input::placeholder {
	opacity: 1;
	color: var(--base-txt-secondary);
	font: inherit;
	padding: 2px 0;
	font: var(--font-ui-22-title-1-reg);
}

.modal__title__search input::-webkit-input-placeholder {
	opacity: 1;
	color: var(--base-txt-secondary);
	font: inherit;
	padding: 2px 0;
}
.modal__header {
	display: flex;
	padding: 8px 16px 0;
	position: relative;
	flex-grow: 0;
	flex-shrink: 0;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.modal__header.modal__header-disable {
	opacity: 0.2;
}
.modal__header-forceCenter {
	&> .in {
		flex-grow: 1;
		justify-content: center;
	}
	&> .flex_gap {
		display: none;
	}
}
/* Lush центруємо тільки коли нема хрестика, тобто на мобілі */
@media (max-width: 480px) {
	.modal__header-center > .in {
		text-align: center;
	}
	.modal__header-center > .in.flex_row {
		flex-grow: 1;
		justify-content: center;
	}
	.modal__header-center > .in + .flex_gap {
		display: none;
	}
	.modal__header-mobileWrap {
		flex-wrap: wrap;
	}
	.modal__header-mobileCenter {
		justify-content: center;
		&> .flex_gap {
			display: none;
		}
	}
}

.modal[data-group=white] .modal__header, .modal[data-group=white] .modal__content .buttons, .modal[data-group=nohead] .modal__content .buttons, .modal[data-group=white] #massdo_modal {
	background: var(--base-cont-mod-top) !important;
}

.modal[data-group=white] #massdo_modal {
	text-align: center;
}

.modal[data-group=white] .modal__header {
	/* border-bottom:1px solid var(--base-line-alt-gap-minor); */
}

.modal__header-withTabs {
	background: var(--base-cont-mod-top);
	padding-bottom: 0;
	/* box-shadow: 0 -1px var(--base-line-ghost) inset; */
}
.modal__header-withShadow {
	box-shadow: 0 -1px var(--base-line-secondary) inset;
}

.modal[data-group=delete2] .modal__header {
	background: var(--base-cont-mod-low);
}

.modal__content {
	clear: both;
	overflow: auto;
	text-align: left;
	position: relative;
	flex-grow: 1;
	flex-shrink: 1;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	flex-flow: column;
}
.modal__content .projectView {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	background: var(--base-cont-mod-low);
}

.modal__content:not(.flex_column) > * {
	flex-grow: 1;
	flex-shrink: 1;
	overflow: auto;
}

.modal__content p.fld {
	font-size: 13px
}

.modal__content p.fld_float {
	font-size: 12px;
	float: left;
	width: 200px;
	margin: 0 5px 15px 0;
}

.modal__content p.fld_float label {
	position: relative;
	padding: 2px 5px 2px 24px;
	display: block;
}

.modal__content p.fld_float label.act {
	background: var(--base-hlt-alt-label)
}

.modal__content p.fld_float input {
	position: absolute;
	left: 4px;
	top: 4px;
}

.modal__content p.fld input.input {
	width: 100%;
	padding: 4px;
	box-sizing: border-box;
	margin-top: 0;
	font: 18px/20px var(--font-base);
	background: var(--menu-inp-cont);
	border-color: var(--menu-inp-brd);
}

.modal__content p.fld input#tg_name {
	border: none;
	padding: 7px 15px;
	background: var(--tag-bg);
	color: var(--tag-color);
}

.modal__content p.fld input#tg_name::-moz-placeholder {
	color: inherit;
	opacity: 0.5
}

.modal__content p.fld input#tg_name::-webkit-input-placeholder {
	color: inherit;
	opacity: 0.5
}

.modal__content p.fld input.input:focus {
	box-shadow: var(--shadow-brd-focus);
	border-color: transparent;
	outline: none
}

.modal__content p.fld textarea {
	width: 100%;
	padding: 4px;
	box-sizing: border-box
}

.modal__content p.fld select {
	width: 100%;
	box-sizing: border-box;
	font-size: 16px;
	margin-top: 4px;
	background: var(--menu-inp-cont);
	border: 1px solid var(--menu-inp-brd);
}

.modal__content p.fld select option {
	font-size: 14px;
}

.modal__content__cap {
	background: var(--colors-alpha-dark-05);
	height: 610px;
}

.modal__content__cap svg {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -40px 0 0 -40px;
	width: 80px;
	height: 80px;
	fill: var(--white-max);
	opacity: 1;
	pointer-events: none;
}

.modal__content__cap .loader {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -40px 0 0 -40px;
	border: 4px solid var(--white-max);
	border-left-color: var(--trans);
	width: 72px;
	height: 72px;
	opacity: 1;
	pointer-events: none;
}

.modal__previewObject {
	position: relative;
	background: var(--base-cont-low);
}

@media screen and (min-width: 481px) {
	.modal__previewObject {
		box-shadow: 0 0 0 1px var(--base-cont-low);
	}
}

.modal__alert {
	position: relative;
}

body > .modal__alert {
	position: absolute;
	top: -1000px;
	left: 0
}

.modal__header > .in span.ico_tb_big {
	float: left;
	margin: -5px 10px -5px 0
}

.modal__header > .in .clear {
	clear: left
}

.modal__content h2 {
	/* margin-right:140px; */
}

.modal[data-group=white] .modal__header, .modal[data-group=white] .buttons {
	background: var(--base-cont-mod-top);
}

.modal[data-group=chart] .modal__header {
	background: var(--base-cont-mod-top)
}

.modal[data-group=userto] .modal__header {
	background: var(--base-cont-mod-top)
}

.modal[data-group=labels] {
}

.modal[data-group=trans] {
	background: transparent;
}

.modal[data-group=extbig] {
	border-radius: 30px 80px 30px 30px;
}

.modal[data-group=labels] .modal__header, .modal[data-group=labels] .buttons {
	background: transparent
}

.modal[data-group=dateend] .modal__header {
	background: transparent;
	box-shadow: none;
}

.modal-transparent {
	background: transparent !important
}

.modal[data-group=gray] .modal__content {
	background: var(--base-cont-mod-low)
}

.modal__header > .in b {
	color: var(--base-txt-accent)
}

.modal__header > .in a.inline {
	color: var(--base-txt-accent)
}

.modal__header > .in a.inline:hover {
	color: var(--base-txt-link-minor)
}

.modal__header > .in span.i {
	font: italic 14px var(--font-base);
	color: var(--base-txt-tertiary)
}

.modal__header > .in a.m {
	color: var(--base-txt-primary);
	padding: 2px 5px 3px;
	margin: -2px -5px -3px;
	border-radius: 4px;
}

.modal__header > .in a.m:hover {
	background: var(--base-hlt-hover);
	color: var(--base-txt-link-major)
}

.modal__header__tabs {
	font: 18px/20px var(--font-base);
	height: 20px;
	display: flex;
	align-items: center;
}

.modal__header__tabs > span, .modal__header__tabs > a {
	color: var(--base-txt-tertiary);
	padding: 0 10px 0 4px;
	margin-right: 4px;
	float: left;
	-webkit-transition: box-shadow 0.3s ease;
	transition: box-shadow 0.3s ease;
	font: var(--font-ui-15-large-reg);
	position: relative;
}

.modal__header__tabs > a {
	padding: 14px 10px 14px 4px;
}

.modal__header__tabs > a ws-icon svg {
	fill: var(--base-txt-tertiary);
}

.modal__header__tabs > a:hover {
	color: var(--base-txt-secondary);
}

.modal__header__tabs > a:hover ws-icon svg {
	fill: var(--base-txt-secondary);
}

.modal__header__tabs > span, .modal__header__tabs > a.act {
	color: var(--base-txt-accent);
	text-shadow: -0.03ex 0 0 currentColor, 0.03ex 0 0 currentColor;
}

@supports (-webkit-text-stroke-width: 0.04ex) {
	.modal__header__tabs > span, .modal__header__tabs > a.act {
		text-shadow: -0.03ex 0 0 currentColor, 0.03ex 0 0 currentColor;
		-webkit-text-stroke-width: 0.04ex;
	}
	.modal__header__tabs .badge {
		text-shadow: initial;
		-webkit-text-stroke-width: initial;
	}
}

.modal__header__tabs > span ws-icon svg, .modal__header__tabs > a.act ws-icon svg  {
	fill: var(--base-txt-accent);
}

.modal__header__tabs > span:after, .modal__header__tabs > a.act:after {
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 1px;
	background: var(--base-txt-act-minor);
	position: absolute;
	left: 0;
	bottom: -16px;
}

.modal__header-withShadow .modal__header__tabs > span:after, .modal__header-withShadow .modal__header__tabs > a.act:after {
	bottom: -2px;
}

.modal__header__tabs .ico_l {
	margin: -5px 10px -5px 0;
}

.modal__header__tabs ws-icon {
	margin: 0 6px 0 4px;
	width: 24px;
	--icon-size: 24px;
}

.modal__header > .in .after_filter2 {
	margin: 0 220px 0 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	gap: 8px;
	height: 48px;
}

.modal__header > .in .button {
	margin-top: -7px;
	margin-bottom: -7px;
}
.modal__header > .in .inherit.flex_row {
	overflow: hidden;
}
.modal__header > .in .inherit ws-icon {
	width: 32px;
}

.modal__header > .in .inherit .av_nm {
	border-radius:8px;
	transform:scale(0.75);
	margin: 0 6px 0 -6px;
}
.modal__backButton {
	float: left;
}

.modal__header__avatar {
	float: left;
	width: 36px;
	height: 36px;
}
.modal__header__avatar + .in {
    font-weight: 600;
}
.modal__header__avatar img, .modal__header__avatar span.av_nm {
	/*width: 36px;*/
	/*height: 36px;*/
	scale: 0.75;
	transform-origin: 0 0;
	/*line-height: 36px !important;*/
	/*font-size: 14px !important;*/
	border-radius: 8px;
}

.modal[data-group=invite] {
	.modal__header-withTabs {padding-top: 14px;}
	.modal__header-withTabs .modal__closeButton {margin-bottom:8px;}
	.modal__header-center > .in {
		text-align: center;
	}
	.modal__header-center > .in.flex_row {
		flex-grow: 1;
		justify-content: center;
	}
	.modal__header-center > .in + .flex_gap {
		display: none;
	}
}

.modal[data-group=invite] .modal__header > .in .ico_l {
	margin: -5px 10px -5px 0
}

iframe#modal__previewFrame {
	padding: 0;
	margin: 0;
	border: none;
}

#modal__previewFrame, #modal__previewFrame code {
	height: calc(var(--vh) - 185px);
	width: calc(var(--vw) - var(--vw)/7);
}

@media (max-width: 480px) {
	#modal__previewFrame, #modal__previewFrame code {
		/* height: calc(var(--vh) - 155px); */
		/* width: calc(var(--vw) - 30px); */
		height: unset;
		width: unset;
	}

	.modal__header ws-btn[name*=modal__closeButton], .modal__header ws-btn[right-icon=close] {
		display: none;
	}

	.modal__header.modal__header-withTabs:not(.modal__header-forceCenter) > .in {
		display: inline-block;
		padding: 12px 0 4px 12px;
		gap: 16px;
		width: 100% !important;
	}
	.modal__header.modal__header-withTabs:not(.modal__header-forceCenter) > .in {
		padding-bottom: 0;
	}
}


/*
.modal.need_reload > * {
	filter: blur(1px)
}
.modal.need_reload:after {
	content: 'RELOAD';
	position: absolute;
	right: 0;
	top: 0;
	background: var(--debug-color);
	color: #fff;
	animation: blink 1s infinite;
	padding: 5px 10px;
	border-radius: 0 0 0 10px
}

.modal  {
	--debug-color: #f55
}
.modal[data-num="2"] {
	--debug-color: #0839ff
}
.modal[data-num="3"] {
	--debug-color: #0fa300
}
.modal[data-num="4"] {
	--debug-color: #e204c3
}
.modal[data-num="5"], #modal__previewImage {
	--debug-color: #00c2c6
}
.modal, #modal__previewImage {box-shadow:0 0 0 1px var(--debug-color);overflow: visible;}
.modal:before {
	content:
	attr(data-num);
	position:
	absolute;
	left:0;
	top:0;
	background: var(--debug-color);
	color:#fff;
	padding: 5px 10px;
	z-index:1;
	border-radius:0 0 10px
}
@keyframes blink{
	0%{opacity: 0;}
	50%{opacity: 1;}
	100%{opacity: 0;}
}*/
.modal__options {
	margin: 0 0 0 0;
	color: var(--base-txt-secondary);
	font: 13px/20px var(--font-base)
}
.modal__options select {
	width: 200px;
	margin-top: 3px;
	font-size: 14px;
	padding: 3px 5px;
}
.modal__options p.w select {
	width: 340px
}
.modal__options #dateend_div {
	padding: 0
}
.modal__options .trm {
	font: 14px/20px var(--font-base);
	text-align: center;
	margin:0;
	padding: 16px 0;
}
.modal__options .trm 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;
}
.modal__content .modal__options .eye_conf {
	display:block;
	text-align:center;
	margin:0
}
.modal__content .modal__options .eye_line {
	display: inline-flex;
}

.modal__content .modal__options .eye_conf {
	display: block;
	text-align: center;
	margin: 0
}

.modal__options #trm_sub_ {
	padding: 0 20px 10px
}

.modal__headerMenu {
	display: flex;
	gap: 6px;
	padding: 4px 28px;
	font: 13px/20px var(--font-base);
}
.modal__headerMenu ws-icon[name=star-solid] svg {
	fill: var(--base-btn-notice-minor);
}

.modal__tabs {
	padding: 0 24px;
	box-shadow: 0 -1px var(--base-line-tertiary) inset;
	font: 13px/20px var(--font-base);
}
.modal__tabs__item {
	margin-right: 2px;
	padding: 8px 6px;
	cursor: pointer;
	-webkit-transition: box-shadow 0.3s ease;
	transition: box-shadow 0.3s ease;
	color: var(--base-txt-secondary);
	font: var(--font-ui-13-small-reg);
}
.modal__tabs__item div {
	display: inline-block;
	letter-spacing: 0.01rem;
}
.modal__tabs__item .modal__tabs__item-counter {
	display: inline-block;
	color: var(--base-hlt-invert);
	font: 600 8px/10px var(--font-base);
	border-radius: 12px;
	padding: 1px 4px;
	vertical-align: middle;
	border: 1px solid var(--base-hlt-invert);
	min-width: 8px;
	text-align: center;
	margin: -2px 0 0 4px;
}
.modal__tabs__item.active .modal__tabs__item-counter {
	color: var(--base-txt-alt-light);
	background: var(--base-hlt-invert);
}

.modal__tabs__item.disabled {
	pointer-events: none;
}
.modal__tabs__item.disabled .modal__tabs__item-counter {
	color: var(--base-txt-secondary);
	border-color: var(--base-txt-secondary);
}

.modal__tabs__item:hover {
	color: var(--base-txt-max);
	box-shadow: 0 2px var(--base-txt-secondary);
}
.modal__tabs__item.active {
	color: var(--base-txt-primary);
	box-shadow: inset 0 -2px var(--base-txt-act-minor);
}
@supports (-webkit-text-stroke-width: 0.04ex) {
	.modal__tabs__item.active > div:not(.modal__tabs__item-counter) {
		text-shadow: -0.03ex 0 0 currentColor, 0.03ex 0 0 currentColor;
		-webkit-text-stroke-width: 0.04ex;
	}
}
.modal .scrollZone {
	margin-top: var(--screen-px)
}
.modal .scrollZone-top {
	box-shadow: 0 var(--screen-minus-px) var(--base-line-tertiary);
}
.modal .scrollZone-bottom {
	box-shadow: 0 var(--screen-px) var(--base-line-tertiary);
}
.modal .scrollZone-bottom.scrollZone-top {
	box-shadow: 0 var(--screen-minus-px) var(--base-line-tertiary), 0 var(--screen-px) var(--base-line-tertiary);
}

.modal__massSelected ws-icon.bg {
	width: 32px;
	height: 32px;
	border-radius: 16px;
}
ws-icon.green_bg {
	background: var(--base-txt-btn-c);
}
ws-icon.gray_bg {
	background: var(--base-txt-tertiary);
}
ws-icon.red_bg {
	background: var(--base-hlt-w-invert);
}
ws-icon.green_bg, ws-icon.red_bg, ws-icon.gray_bg {
	--icon-color: var(--base-txt-alt-light);
}
.modal__operationRow {
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--base-cont-mod-low);
	font: var(--font-ui-13-small-semi);
}
.modal__operationRow-red {
	background: var(--base-hlt-w-invert);
	color: var(--base-txt-alt-light);
}
.modal__operationRow-green {
	background: var(--base-txt-btn-c);
	color: var(--base-txt-alt-light);
}
.modal__footerSpace {
	height: 24px;
}
form.frm_dis .btns-row ws-btn:not([name*="whenDisabled"]), form.frm_dis .btns-row .notify_block {
	display: none
}
form.frm_dis .btns-row {
	justify-content: center;
}
form:not(.frm_dis) .btns-row ws-btn[name~=btn-whenDisabled] {
	display: none
}
#modProfileContent {
	padding-top: var(--screen-px);
}

.modal__infoRow {
	padding: 0 24px;
	min-height: 40px;
	background: var(--base-hlt-b-hover);
	font: var(--font-ui-12-mini-reg);
	color: var(--base-txt-btn-b);
	gap:8px;
}
.modal__infoRow-trans {
	background: none;
	color: var(--base-txt-secondary);
}
.modal__infoRow-warning {
	background: var(--base-hlt-w-hover);
	color: var(--base-txt-btn-w);
}
.buttons .modal__infoRow {
	border-radius: 8px;
	padding:0 12px;
}
.modal__infoRow .in {
	padding: 8px 4px;
}
.modal__infoRow ws-icon {
	--icon-color: var(--base-txt-btn-b) !important;
}
.modal__infoRow-trans ws-icon {
	--icon-color: var(--base-txt-secondary) !important;
}
.modal__infoRow-warning ws-icon {
	--icon-color: var(--base-txt-btn-w) !important;
}


.modal .btns-row-center {
	gap: 8px;
	display: flex;
	justify-content: space-evenly;
}

.modal .btns-row-gray {
	background: var(--base-cont-mod-low);
}
.modal__visibilityReset {
	background: var(--base-txt-act-minor);
	color: var(--base-txt-alt-light);
	font: var(--font-ui-13-small-semi);
	text-align: center;
	padding: 50px 0;
}
.modal__visibilityReset-labels {
	background: var(--base-surf-sidebar);
	color: var(--base-txt-alt-light);
}

.modal__header > .in .logo {
}

.modal__header > .in .logo .proj_color {
	width: 40px;
	height: 40px;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
}

.modal__header > .in .logo svg, .modal__header > .in .logo ws-icon{
	width: 32px;
	height: 32px;
}

.modal__inlineSearch {
	height: 44px;
	border-bottom: 1px solid var(--base-line-tertiary);
}
.modal__inlineSearch .multi-select{
	color: inherit
}
.modal__inlineSearch > ws-icon {
	width: 24px;
	height: 24px;
}
.modal__inlineSearch a.delete {
	display: none;
}
.modal__inlineSearch a.button {
	padding: 4px 12px;
	border-radius: 6px;
	color: var(--base-txt-secondary);
	box-shadow: 0 0 0 1px var(--base-line-secondary);
	transition: all 0.3s ease;
	gap: 6px;
	font: 600 12px/20px var(--font-base);
	cursor: pointer;
	background: var(--base-cont-mod-top);
}
.modal__inlineSearch a.button:hover {
	color: var(--base-txt-accent);
	box-shadow: 0 0 0 1px var(--base-line-accent);
	background: var(--base-cont-mod-top);
}
.modal__inlineSearch a.delete ws-icon {
	width: 24px;
	height: 24px;
}
.modal__inlineSearch input {
	border: none;
	background: transparent;
	box-sizing: border-box;
	padding: 0;
	height: 20px;
	width: 100%;
	color: var(--base-txt-primary);
	font: 400 13px/20px var(--font-base);
}
.modal__inlineSearch input:placeholder-shown {
	color: var(--base-txt-tertiary);
}
.modal__inlineSearch input::placeholder{
	font: 400 13px/20px var(--font-base);
}
.modal__inlineSearch input::-moz-placeholder{
	font: 400 13px/20px var(--font-base);
}
.modal__inlineSearch input::-webkit-input-placeholder{
	font: 400 13px/20px var(--font-base);
}
/*.modal__content__block ws-slider.width {margin-bottom: 10px;}*/
.modal .modal__content__block-optional {margin-top: -12px;}

.modal .tasksStart input {
	border: none;
	background: var(--inp-hlt-bg);
	color: var(--base-txt-primary);
	font: bold 14px/20px var(--font-base);
	height: 28px;
	width: 100px;
	text-align: center;
	border-radius: 4px;
	margin: -10px 0;
	padding: 0;
}
.modal .tasksStart input::placeholder {
	font:inherit;
}
.modal .tasksStart input::-webkit-input-placeholder {
	font:inherit;
}
.modal__overlay[data-dock=right] {
	padding-top: 112px;
	display: flex;
	justify-content: flex-end;
	padding-right: 12px;
}
.modal__overlay[data-dock=right] .modal {
	height: calc(var(--vh) - 24px);
	max-height: unset !important;
}
.modal__header__controls {
	display: flex;
	gap: 12px;
	align-items: center;
}
/* .modal__header__controls--before {} */
/* .modal__header__controls--after {} */
/* .modal__header__controls--end {} */
@media (max-width: 480px) {
	.modal {
		position: fixed;
		bottom: auto;
		left: 0;
		right: 0;
		top: 100%;
		width: unset !important;
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -1px var(--base-line-secondary),  0 600px 0 400px var(--base-cont-mod-top), 0 0 40px -2px var(--colors-graphite-trans-400);
		flex-direction: column;
		max-height: 100%;
		transition: top .3s ease;
	}
	.modal__overlay-withPanel {
		background: linear-gradient(to top, var(--colors-alpha-dark-10) 50%, var(--trans));
	}
	body.withModal .modal__overlay-withPanel .modal {
		display: flex !important;
		flex-direction: column;
	}
	#modal__preview {
		display: flex;
		flex-direction: column;
		flex-shrink: 1;
		min-height: 0;
	}
	#modal__previewFrame {
		flex-shrink: 1;
		min-height: 0;
		pre {
			display: flex;
			max-height: 100%;
			code {
				flex-shrink: 1;
			}
		}
	}
	.modal__overlay-withPanel .modal {
		position: static;
		border-radius: 16px;
		box-shadow: var(--shadow-mod-major);
		inset: unset;
		max-height: unset;
		max-width: calc(100% - 40px);
		transition: unset;
		flex-shrink: 1;
		margin: 20px 0 calc(122px + 20px + var(--sa-bot));
	}
	.modal__overlay-withPanel .modal-transparent {
		backdrop-filter: blur(4px);
	}
	.modal[data-group=extbig] {
		border-radius: 30px 80px 30px 30px;
	}
	.modal__overlay-withPanel:has(#modal__previewPanel.wlinks) .modal {
		margin-bottom: calc(36px + 20px + var(--sa-bot));
	}
	.modal.swype {
		max-height: unset;
		height: auto;
		bottom: 0;
	}
	.modal-fullscreen {
		max-height: unset;
		top: calc(var(--swipe-window-top) + var(--visualViewport-top));
		bottom: 0;
		padding-bottom: var(--visualViewport-bottom) !important;
		scroll-padding: 200px;
		height: auto !important;
	}

	.modal-fullpage {
		max-height: unset;
		inset: 0;
		border-radius: unset;
		box-shadow: unset;
	}
	.modal-fullpage .modal__header {
		display: none !important;
	}
	.modal-fullpage .modal__content__block {
		padding-left: 12px;
		padding-right: 12px;
	}

	.modal__swipe {
		margin: 3px auto;
		width: var(--mobile-primary-menu-swipe-width);
		height: 3px;
		border-radius: 3px;
		background-color: var(--base-txt-muted);
		cursor: pointer;
		transition: width .3s ease, background-color .3s ease;
		cursor: pointer;
	}
	.modal .modal__swipe {
		--mobile-primary-menu-swipe-width: var(--mobile-primary-menu-half-opened-swipe-width);
		background-color: var(--base-txt-accent);
	}
	.modal-fullscreen .modal__swipe {
		--mobile-primary-menu-swipe-width: var(--mobile-primary-menu-full-opened-swipe-width);
		background-color: var(--base-txt-accent);
	}

	.modal > * {
		flex-grow: 0;
		flex-shrink: 0
	}
	.modal .modal__content {
		flex-grow: 1;
		flex-shrink: 1;
		max-height: unset;
		min-height: 0;
	}
	.modal .buttons_a_pre {
		flex-grow: 1;
		flex-shrink: 1;
	}
	/* скролл зон сама притискає кнопки до низу */
	.modal .scrollZone + .buttons_a_pre {
		display: none;
	}
	.modal-holidays .l {
		flex-grow: 1;
	}
	.modal[data-group=invite] .modal__header-withTabs {
		box-shadow: 0 -1px var(--base-line-ghost) inset;
	}
	.modal[data-group=invite] .modal__header__tabs > a.act:after {
		bottom: -1px;
	}
	.modal__content .buttons {
		padding-bottom: max(28px, calc(var(--app-sa-bot) + 12px));
	}
}

.modal[data-group=mod_mid] {
	background-color: var(--base-cont-mod-mid);
}


.modal__content__wrapper {
	padding: 8px var(--modal-padding-inline, 28px) 12px;
}
.modal_footer_buttons {
	display: flex;
	gap: 12px;
	justify-content: center;
	padding: 12px var(--modal-padding-inline, 28px) 28px;
}
.modal__content__wrapper--24 {
	--modal-padding-inline: 24px;
}

.modal__header > .in {
	min-width: 0;
}
.modal__header .other_project {
	min-width: 0;
	flex-shrink: 1;
}
.modal__header .other_project > .in {
	overflow: hidden;
	text-overflow: ellipsis;
}
#root {
	--task-width: 0px;
	--task-draft-width: 0px
}
body.withModalAndTask #modalContainer {
	z-index:1022;
}
body.withModalAndTask .modal__overlay {
	right: var(--task-width);
	background: linear-gradient(45deg, var(--colors-alpha-dark-20), var(--colors-alpha-dark-10));
}
body.withModalAndTask #modal__previewImage {
	/* transition: all 0.3s ease; */
}
body.withModalAndTask #modal__previewImage {
	left:calc(50% - var(--task-width) / 2);
}
body.withModalAndTask #modal__previewPanel {
	right: calc(var(--task-width) + var(--screen-px));
}
body.withModalAndTask #taskPanel {
	opacity:0;
	bottom:-40px
}

body.withModalAndTask #modal__previewFrame,
body.withModalAndTask #modal__previewFrame code {
	height: calc(var(--vh) - 185px);
	width: calc(var(--vw) - var(--task-width) - (var(--vw) - var(--task-width))/7);
}


body.withModalAndTaskDraft #modalContainer {
	z-index:1022;
}
body.withModalAndTaskDraft #taskCreate__wrapper {
	z-index:1023;
}
body.withModalAndTaskDraft .modal__overlay {
	background: linear-gradient(45deg, var(--colors-alpha-dark-20), var(--colors-alpha-dark-10));
}
body.withModalAndTaskDraft #modal__previewImage {
	/* transition: all 0.3s ease; */
	z-index: 1024;
}
body.withModalAndTaskDraft #modal__previewImage {
	left:calc(50% - var(--task-draft-width) / 2);
}
body.withModalAndTaskDraft #modal__previewPanel {
	right: calc(var(--task-draft-width) + var(--screen-px) - 20px);
}
body.withModalAndTaskDraft #taskPanel {
	opacity:0;
	bottom:-40px
}

body.withModalAndTaskDraft #modal__previewFrame,
body.withModalAndTaskDraft #modal__previewFrame code {
	height: calc(var(--vh) - 185px);
	width: calc(var(--vw) - var(--task-draft-width) - (var(--vw) - var(--task-draft-width))/7);
}

#modal__previewSvg {
	width: calc(var(--vw)/2);
	aspect-ratio: 1;
}
#modal__previewSvg iframe {
	pointer-events: none; /* щоб можна було перемикатися свайпом */
	width: 100%;
	height: 100%;
}
body.withModalAndTask #modal__previewSvg,
body.withModalAndTaskDraft #modal__previewSvg {
	width: calc((var(--vw) - 60px - var(--task-width))/2);
}

.modal__content__search {
	margin: 8px 0 0 0;
	padding: 0 16px;
	box-shadow: 0 var(--screen-minus-px) var(--base-line-tertiary);
}
.modal__content__block + .modal__content__search {
	margin: 0;
}
.modal .modal__content__search + .modal__content__block-optional {
	margin: 0;
}
.modal__content__search > .modal__inlineSearch {
	border-bottom: none;
}
.modal__content__search > .modal__inlineSearch input {
	font-size: 16px;
}
.modal__content__search > .modal__inlineSearch > ws-icon {
	width: 38px;
	height: 38px;
	--icon-color: var(--base-txt-tertiary);
}
.modal__content__search + .scrollZone {
	box-shadow: 0 var(--screen-minus-px) var(--base-line-tertiary), 0 var(--screen-px) var(--base-line-tertiary);
}

.modal.loading > div {
	pointer-events: none;
	opacity: 0.6;
}
/* like .loader--curling but css only */
.modal.loading::after {
	position: absolute;
	display: block;
	content: "";
	border: unset;
	animation: loader .6s linear infinite;
	border-radius: 50%;
	padding: 2px;
	background: conic-gradient(from 90deg at 50.17% 50%, #73C7FF -7.5deg, rgba(255, 255, 255, 0) 41.25deg, rgba(255, 255, 255, 0) 93.75deg, #FFFFFF 179.31deg, #FFD6F6 258.75deg, #73C7FF 352.5deg, rgba(255, 255, 255, 0) 401.25deg);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	width: 16px;
	height: 16px;
	top: calc(50% - 8px);
	left: calc(50% - 8px);
}

.modal-taskDone input + .line-withDots {
	display: none;
}

@media (max-width: 480px) {
	/* тож широкі кнопки робимо колонкою одного розміру */
	.modal .btns-row.btns-mobile-grid {
		display: grid;
		height: unset;
	}
}

.modal__header .button_dis2,
.modal__header .button_dis3,
.modal .mobile-head .button_dis2,
.modal .mobile-head .button_dis3 {
	opacity: .5;
}

.modal__safeAreaBottom {
	height: var(--sa-bot);
}

.modal.preview__youtube {
	flex-direction: column-reverse;
	box-shadow: none;
	border-radius: 0;

	.modal__header {
		.in, .flex_gap { display: none; }
		justify-content: center;
		padding-top: 16px;

		.modal__closeButton {
			--btn-size: 48px;
			width: 48px;
			height: 48px;
			border-radius: 24px;
			background: var(--base-cont-mod-top);
		}
	}

	.modal__content {
		ws-btn { display: none; }
	}

	.videoModal {
		border-radius: 16px;
		iframe {
			border-radius: 16px;
		}
	}
}

@media (max-width: 480px) {
	.modal.preview__youtube {
		height: 100vh;

		.modal__content {
			justify-content: center;
			align-items: center;

			.videoModal {
				width: 100%;
				padding-bottom: 16px;
			}

			ws-btn {
				display: inline-block;
			}
		}
	}
}