ws-slider {
	display: inline-flex;
	gap: 2px;
	padding: 2px;
	background: var(--base-cont-trans-low);
	border-radius: 6px;
	border: none;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
}

/*ws-slider.string { padding: 7px 7px; }*/
ws-slider a {
	color: var(--base-txt-tertiary);
	box-sizing: border-box;
	display: inline-flex;
	position: relative;
	align-items: center;
	z-index: 2;
	text-wrap: nowrap;
	-webkit-tap-highlight-color: transparent;
}

ws-slider:not(:has(i.bg.ani)) a.act {
	background: var(--base-cont-top-elevated);
}

ws-slider a.act {
	z-index: 3;
}

.modal__content ws-slider:not(:has(i.bg.ani)) a.act {
	background: var(--base-cont-mod-top);
}

/*ws-slider.string a { border-radius: 6px; }*/
ws-slider a svg {
	fill: var(--base-txt-tertiary);
}

ws-slider a.act svg {
	fill: var(--base-txt-tertiary);
}

ws-slider a:not(.act):hover {
	color: var(--base-txt-primary);
}

ws-slider a:not(.act, [disabled]):hover svg {
	fill: var(--base-txt-primary);
}

ws-slider a span {
	padding: 0 4px;
}

ws-slider i.bg {
	position: absolute;
	display: none;
	background: var(--base-cont-mod-top-elevated);
	box-shadow: var(--shadow-cont-major);
	z-index: 1;
}

.modal__content ws-slider i.bg {
	background: var(--base-cont-mod-top);
}

ws-slider a[disabled]:hover {
	color: var(--base-txt-tertiary);
	cursor: initial;
}

/* if something changes in future
ws-slider i.br {
	position: absolute;
	display: none;
	border-radius: 4px;
	box-shadow: 0 0 0 1px var(--base-hlt-b-invert-major) inset;
	z-index: 4;
}
ws-slider.string i {
	border: 2px solid var(--base-hlt-b-invert-major); border-radius: 6px;
}
*/
ws-slider i.ani {
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
}

/* COLORS & SIZES */
ws-slider.blue a.act {
	color: var(--base-txt-btn-a);
}

ws-slider.blue a.act svg {
	fill: var(--base-txt-btn-a);
}

ws-slider.violet a.act {
	color: var(--base-txt-btn-b);
}

ws-slider.violet a.act svg {
	fill: var(--base-txt-btn-b);
}

ws-slider.black a.act {
	color: var(--base-txt-accent);
}

ws-slider.black a.act svg {
	fill: var(--base-txt-accent);
}

ws-slider.h24 {
	border-radius: 6px;
}

ws-slider.h24 i.bg {
	border-radius: 4px;
}

ws-slider.h24 a {
	font: var(--font-ui-11-micro-med);
	padding: 0 6px;
	border-radius: 4px;
}

ws-slider.h24 a ws-icon {
	scale: 0.8;
}

ws-slider.h28 {
	border-radius: 8px;
}

ws-slider.h28 i.bg {
	border-radius: 6px;
}

ws-slider.h28 a {
	font: var(--font-ui-11-micro-med);
	padding: 4px 8px;
	border-radius: 6px;
}

ws-slider.h28 a ws-icon {
	scale: 0.8;
}

ws-slider.h32 {
	border-radius: 8px;
}

ws-slider.h32 i.bg {
	border-radius: 6px;
}

ws-slider.h32 a {
	font: var(--font-ui-12-mini-med);
	padding: 4px 10px;
	border-radius: 6px;
}

ws-slider.h32 a ws-icon {
}

ws-slider.h36 {
	border-radius: 10px;
}

ws-slider.h36 i.bg {
	border-radius: 8px;
}

ws-slider.h36 a {
	font: var(--font-ui-13-small-med);
	padding: 6px 12px;
	border-radius: 8px;
}

ws-slider.h36 a ws-icon {
	padding: 0 2px;
}

@media screen and (max-width: 480px) {
	ws-slider.mobile-h36 {
		border-radius: 10px;
	}

	ws-slider.mobile-h36 i.bg {
		border-radius: 8px;
	}

	ws-slider.mobile-h36 a {
		font: var(--font-ui-13-small-med);
		padding: 6px 12px;
		border-radius: 8px;
	}

	ws-slider.mobile-h36 a ws-icon {
		padding: 0 2px;
	}
}

ws-emoji {
	display: inline-block;
	vertical-align: text-bottom;
}

.last_act ws-icon[name="rex"] {
	display: none;
	--icon-color: var(--base-txt-ghost);
	--icon-size: 16px;
	width: 16px;
	height: 16px;
}
.last_act > span {
	display: block;
	width: 8px;
	height: 8px;
	border: 1.5px solid var(--base-txt-muted);
	border-radius: 100%;
}
.last_act + .in { color: var(--base-txt-tertiary); }
.last_act.today > span {
	border-color: var(--lbl-today-major);
	background: var(--lbl-today-major);
}
.last_act.yesterday > span {
	border-color: var(--lbl-yesterday-minor);
	background: var(--lbl-yesterday-minor);
}
.last_act.recently > span {
	border-color: var(--lbl-yesterday-minor);
	width: 6px;
	height: 6px;
	border-width: 3px;
}
.last_act.online + .in,
.last_act.today + .in,
.last_act.yesterday + .in,
.last_act.recently + .in { color: var(--base-txt-primary); }

.last_act.online > span {
    border-color: var(--base-txt-new-minor);
    background: var(--base-txt-new-minor);
}
.last_act.rex > span {
	display: none;
}
.last_act.rex ws-icon[name="rex"] {
	display: block;
}
.last_act.rex + .in { color: var(--base-txt-muted); }

.seen ws-icon:first-child svg {
	--fill-color: var(--base-txt-tertiary);
	fill: var(--fill-color) !important;
}

.unseen ws-icon:first-child svg {
	--fill-color: var(--base-txt-btn-a);
	fill: var(--fill-color) !important;
}

.seen_yesterday ws-icon:first-child svg {
	--fill-color: var(--lbl-yesterday-major);
	fill: var(--fill-color) !important;
}

.seen_today ws-icon:first-child svg {
	--fill-color: var(--base-txt-notice-minor);
	fill: var(--fill-color) !important;
}

.unseen.has_mention ws-icon:first-child svg {
	--fill-color: var(--base-txt-btn-w);
	fill: var(--fill-color) !important;
}

.unseen ws-icon:first-child use:first-child {
	display: none;
}
.seen ws-icon:first-child use:last-child {
	display: none;
}
.seen_empty ws-icon {
	opacity: 0;
}

a.seen:hover ws-icon,
a.unseen:hover ws-icon,
a.seen_empty:hover ws-icon {
	opacity: 1;
	scale: 1.2;
	transition: all 0.2s ease-in-out;
}

project-term .data > .indicator,
task-term .data > .indicator {
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 28px;
	border: 1px solid var(--base-line-secondary);
	box-sizing: border-box;
	--icon-color: var(--base-txt-tertiary);
	padding: 3px;
	position: relative;
}

project-term .data.hot > .indicator, task-term .data.hot > .indicator { border-color: transparent; }

project-term .data > .indicator > .dot,
task-term .data > .indicator > .dot {
	display: block;
	width: 20px;
	height: 20px;
	background: var(--base-txt-secondary);
	border-radius: 20px;
}
project-term .data > .indicator > ws-icon,
task-term .data > .indicator > ws-icon,
project-term .data > .indicator > .dot > ws-icon,
task-term .data > .indicator > .dot > ws-icon {
	width: 20px;
	height: 20px;
}
project-term .data > .indicator > ws-icon,
task-term .data > .indicator > ws-icon {
	--icon-size: 16px;
}
project-term .data > .indicator > ws-icon[name="hourglass"],
task-term .data > .indicator > ws-icon[name="hourglass"] {
	--icon-size: 12px !important;
}

project-term.no_indicator .data > .indicator, task-term.no_indicator .data > .indicator { display: none; }

project-term .data.today > .indicator > ws-icon, task-term .data.today > .indicator > ws-icon { --icon-color: var(--lbl-today-major); }
project-term .data.today > .indicator > .dot, task-term .data.today > .indicator > .dot { background: var(--lbl-today-major); }

project-term .data.hot > .indicator > .dot, task-term .data.hot > .indicator > .dot {
	background: var(--base-hlt-w-selected);
	--icon-color: var(--base-txt-alert-minor);
}


project-term .data.muted > .indicator,
task-term .data.muted > .indicator,
project-term .data.muted span[class*="label"],
task-term .data.muted span[class*="label"] {
	display: none;
}
project-term .data.muted > .in,
task-term .data.muted > .in,
project-term .data.muted > .in > span,
task-term .data.muted > .in > span
{
	padding-left: 0 !important;
	color: var(--base-txt-muted) !important;
}

.pie_svg.pie_deadline circle.fill { stroke: transparent; }
.pie_svg.pie_progress circle.fill { stroke: var(--base-hlt-b-invert-minor); }
.pie_svg.pie_progress circle.draw,
.pie_svg.pie_deadline circle.draw {
	stroke: var(--lbl-today-major);
}


project-term .data > .indicator progress-pie,
task-term .data > .indicator progress-pie {
	padding: 0;
	margin: 0;
}
project-term .data > .indicator progress-pie .pie_progress,
task-term .data > .indicator progress-pie .pie_progress {
	position: absolute;
	top: -1px;
	left: -1px;
	width: 28px;
	height: 28px;
}

span.tag ws-icon svg,
ws-icon.tag svg {
	fill: var(--tag-color) !important;
}
task-done-date ws-icon svg {
	fill: var(--base-txt-muted);
}
task-done-date ws-icon.err svg {
	fill: var(--base-txt-alert-minor);
}
task-done-date ws-icon.ok svg {
	fill: var(--base-txt-new-major);
}
task-done-date span.ok {
	color: var(--base-txt-new-major);
}
a project-term .data_place > ws-icon:first-child svg,
a task-term .data_place > ws-icon:first-child svg {
	fill: var(--base-txt-secondary)
}

project-term .data > ws-icon:first-child,
task-term .data > ws-icon:first-child {
	--icon-color: var(--base-txt-accent);
	--icon-size: 16px;
	border: 3.5px solid var(--base-hlt-b-pressed);
}
project-term .data > ws-icon[name="calendar_range"],
task-term .data > ws-icon[name="calendar_range"] {
	--icon-color: var(--base-txt-primary);
	border: none;
	position: relative;
}
project-term .wait > ws-icon[name="calendar_range"],
task-term .wait > ws-icon[name="calendar_range"],
task-term .related > ws-icon[name="calendar_range"] {
	--icon-color: var(--base-txt-btn-b);
	 background: var(--base-hlt-b-pressed);
}
project-term .hot > ws-icon:first-child,
task-term .hot > ws-icon:first-child {
	background: var(--base-hlt-w-selected);
	border: none;
}
project-term .hot > ws-icon:first-child svg,
task-term .hot > ws-icon:first-child svg {
	fill: var(--base-txt-btn-w);
}
project-term .hot > .in,
task-term .hot > .in {
	color: var(--base-txt-btn-w);
}
project-term .today > ws-icon:first-child,
task-term .today > ws-icon:first-child {
	background: var(--lbl-today-minor);
	border: none;
}
project-term .tomorrow > ws-icon:first-child,
task-term .tomorrow > ws-icon:first-child,
project-term .warm > ws-icon:first-child,
task-term .warm > ws-icon:first-child {
	border: none;
}
task-term .tomorrow > ws-icon:first-child:before,
task-term .tomorrow > ws-icon:first-child:after,
task-term .warm > ws-icon:first-child:before,
task-term .warm > ws-icon:first-child:after,
project-term .tomorrow > ws-icon:first-child:before,
project-term .tomorrow > ws-icon:first-child:after,
project-term .warm > ws-icon:first-child:before,
project-term .warm > ws-icon:first-child:after,
project-term :not(.hot, .today, .wait, .related) > ws-icon[name="calendar_range"]:before,
project-term :not(.hot, .today, .wait, .related) > ws-icon[name="calendar_range"]:after,
task-term :not(.hot, .today, .wait, .related) > ws-icon[name="calendar_range"]:before,
task-term :not(.hot, .today, .wait, .related) > ws-icon[name="calendar_range"]:after {
	content: '';
	position: absolute;
	width: 28px;
	height: 28px;
	border-radius: 14px;
}
project-term .tomorrow > ws-icon[name="calendar_date"]:before,
task-term .tomorrow > ws-icon[name="calendar_date"]:before {
	z-index: -1;
	background: conic-gradient(var(--lbl-today-minor) 83%, transparent 17%);
}
project-term .tomorrow > ws-icon[name="calendar_date"]:after,
task-term .tomorrow > ws-icon[name="calendar_date"]:after {
	background: conic-gradient(transparent 83%, var(--base-hlt-b-pressed) 17%);
	mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), white calc(100% - 3.5px));
}
project-term .warm > ws-icon[name="calendar_date"]:before,
task-term .warm > ws-icon[name="calendar_date"]:before {
	z-index: -1;
	background: conic-gradient(var(--lbl-today-minor) 17%, transparent 0%);
}
project-term .warm > ws-icon[name="calendar_date"]:after,
task-term .warm > ws-icon[name="calendar_date"]:after {
	background: conic-gradient(transparent 17%, var(--base-hlt-b-pressed) 0%);
	mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), white calc(100% - 3.5px));
}
project-term .related > ws-icon:first-child,
task-term .related > ws-icon:first-child {
	background: var(--base-hlt-b-pressed);
	--icon-color: var(--base-txt-btn-b);
	border: none;
}
project-term .wait > .in,
task-term .wait > .in {
	color: var(--base-txt-tertiary);
}
project-term .data > .in .gray,
task-term .data > .in .gray {
	color: var(--base-txt-tertiary);
}
project-term .wait > .in .gray,
task-term .wait > .in .gray {
	color: var(--base-txt-primary);
}
project-term .data > ws-icon[name="calendar_range"]:before,
task-term .data > ws-icon[name="calendar_range"]:before {
	background: conic-gradient(var(--base-hlt-b-invert-minor) 100%, transparent 0%);
	mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), white calc(100% - 3.5px));
}
project-term .data > ws-icon[name="calendar_range"]:after,
task-term .data > ws-icon[name="calendar_range"]:after {
	background: conic-gradient(var(--lbl-today-major) 0%, transparent 0%);
	mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), white calc(100% - 3.5px));
}
project-term .warm > ws-icon[name="calendar_range"]:after,
task-term .warm > ws-icon[name="calendar_range"]:after {
	background: conic-gradient(var(--lbl-today-major) 17%, transparent 0%);
}
project-term .tomorrow > ws-icon[name="calendar_range"]:after,
task-term .tomorrow > ws-icon[name="calendar_range"]:after {
	background: conic-gradient(var(--lbl-today-major) 83%, transparent 0%);
}
project-term .today > ws-icon[name="calendar_range"]:after,
task-term .today > ws-icon[name="calendar_range"]:after {
	background: conic-gradient(var(--lbl-today-major) 100%, transparent 0%);
}
task-term ws-icon[name=repeat] {
	width: 16px;
	height: 16px;
}
project-term span[class^=terms_label] + ws-icon,
task-term span[class^=terms_label] + ws-icon {
	margin-left: 4px;
}

a project-tags .data_place > ws-icon:first-child svg,
a project-stage .data_place > ws-icon:first-child svg,
a project-folder .data_place > ws-icon:first-child svg,
a project-assignee .data_place > ws-icon:first-child svg {
	fill: var(--base-txt-secondary)
}

project-folder ws-icon svg {
	fill: var(--folder-color);
}

/*project-term .data_place > ws-icon:first-child, project-term .data > ws-icon:first-child {*/
/*	border:1px solid var(--base-txt-tertiary)*/
/*}*/
/*a project-term .data_place > ws-icon:first-child {*/
/*	border: 1px dashed var(--base-txt-secondary);*/
/*}*/
/*a project-term .data_place > ws-icon:first-child svg {*/
/*	fill: var(--base-txt-secondary)*/
/*}*/
/*project-term .data > ws-icon:first-child {*/
/*	border: 3px solid var(--base-hlt-b-pressed);*/
/*}*/
/*project-term .hot > ws-icon:first-child {*/
/*	background: var(--base-hlt-w-pressed);*/
/*	border: none;*/
/*}*/
/*project-term .hot > ws-icon:first-child svg {*/
/*	fill: var(--base-txt-alert-major);*/
/*}*/
/*project-term .hot > .in {*/
/*	color: var(--base-txt-alert-major);*/
/*}*/
/*project-term .wait > ws-icon:first-child {*/
/*	border:1px solid var(--base-txt-tertiary)*/
/*}*/
/*project-term .wait > ws-icon:first-child svg {*/
/*	fill: var(--base-txt-tertiary);*/
/*}*/
/*project-term .wait > .in {*/
/*	color: var(--base-txt-tertiary);*/
/*}*/
/*project-term .data > .in .gray {*/
/*	color: var(--base-txt-tertiary);*/
/*}*/
/*project-term .wait > .in .gray {*/
/*	color: var(--base-txt-primary);*/
/*}*/

ws-slider.width {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}
ws-slider.width a {
	flex-grow:1;
	text-align:center;
	place-content: center;
}

/*************************************************************/

ws-date-input {
	display: inline-flex;
	background: var(--base-cont-mod-top);
	gap: 3px;
}
ws-date-input .date-segment {
	border: none;
	padding: 0;
	margin: 4px 0;
	width: 30px;
	background: transparent;
}

ws-date-input .date-segment.day {
	text-align: right;
}

ws-date-input .date-segment.month {
	width: 35px; /* щоб вміщалося Июн, Серп тощо */
	text-align: center;
}

ws-date-input .date-segment.year {
	width: 50px;
	text-align: left;
}

ws-date-input, ws-date-input input {
	font: var(--font-ui-14-regular-semi);
	font-variant-numeric: tabular-nums;
}

ws-date-input.nodate, ws-date-input.nodate input {
	color: var(--base-txt-tertiary) !important;
}

ws-date-input .separator {
	display: none;
}

ws-date-input.focused .separator {
	display: inline-flex;
	width: 3px;
	height: 24px;
	align-items: flex-end;
}

ws-date-input.focused .separator:first-of-type {
	margin-left: 2px;
	margin-right: -8px;
}

ws-date-input.focused .separator:last-of-type {
	margin-right: 2px;
	margin-left: -8px;
}
ws-chart {
	display: block;
	width:100%;
	height: 40px;
}

.modal__header > tags-group-icon ws-icon {
	padding-left: 6px;
	width: 24px;
	height: 24px;
	--icon-size: 24px;
}
tags-group-icon ws-icon.tags_group_hidden {
	--icon-color: var(--base-txt-alert-major);
}
tags-group-icon ws-icon.tags_group_required {
	--icon-color: var(--base-txt-btn-w);
}
tags-group-chips {
	display: flex;
	gap: 8px;
	.chip > span:not([class]) {
		font: var(--font-ui-11-micro-reg);
		color: var(--base-txt-tertiary);
	}
	.chip.chip-tags-group-hidden:hover ws-icon {
		--icon-color: var(--base-txt-secondary);
	}
	.chip.chip-20.chip-tags-group-hidden {
		padding: 0 4px; /* to make it round 20x20 */
	}
}

ws-marquee {
	display: inline-flex;
	overflow: hidden;
	white-space: nowrap;
	max-width: 100%;
}

ws-code-input {
	display: block;
	.ws-code-input {
		display: flex;
		gap: 4px;
		.ws-code-input__input {
			padding-left: 0;
			padding-right: 0;
			text-align: center;
			width: 2ch;
			box-sizing: border-box;
		}
	}
}

ws-checkbox {
    display: inline-block;
}

task-timers {
	ws-icon { --icon-color: var(--costs-timer-warning);animation: act-timer-dot 1s ease-in-out infinite alternate; }
}
@keyframes act-timer-dot {
	0% { transform: scale(0.9); }
	100% { transform: scale(1.12); }
}

@container (width < 100px) {
	task-priority, task-assignee, task-stage {
		max-width: 100%;
		.in {
			max-width: 100%;
			display: none !important;
		}
	}
}
task-priority, task-assignee, task-author, task-stage {
	max-width: 100%;
	.data, .data_place {
		max-width: 100%;
	}
}

td-task-name, .td-task-name * {
	font: var(--font-ui-14-regular-reg) !important;
}

.floating-window {
	@media (min-width: 481px) {
		right: var(--fw-right, 20px);
		width: var(--fw-width, 600px);
		height: var(--fw-height, auto);
		min-height: 500px;
		max-height: 500px;
		min-width: 500px;
		border-radius: var(--fw-radius, 12px 12px 0 0);
		transition: all 300ms ease;
		position: fixed;
		bottom: -100%;
		z-index: 1020;
		background: var(--base-cont-mod-input);
		box-shadow: var(--shadow-tray-major);

		&.top-layer {
			z-index: 1021;
		}

		&.floating-window--active {
			bottom: 0
		}

		&.floating-window--fullscreen {
			width: calc(100% - 64px);
			right: 0;
			height: 100%;
			max-height: 100%;
			border-radius: 0;
		}


	}
	@media (min-width: 701px) and (max-width: 800px) {
		&.floating-window--fullscreen {
			width: calc(100% - 64px);
		}
	}
	@media (max-width: 480px) {
		right: 0;
		width: 100%;
		display: block;
		height: 100%;
		position: relative;
		background: var(--base-cont-mod-top);
		--layer: 0;
		--zIndex: 1032;
		z-index: calc(var(--zIndex) + var(--layer));
		padding-bottom: var(--keyboard-height);
		box-sizing: border-box;
	}
	.floating-window__head {
		padding: 6px 8px;
		height: 44px;
		box-sizing: border-box;
	}
	.floating-window__head, .floating-window__head-content {
		gap: 4px;
		min-width: 0;
	}
	.floating-window__body {
		flex: 1 1 auto;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}
	.floating-window__footer {
		padding: 12px 20px calc(var(--app-sa-bot) + 20px) 20px;
		height: 32px;
		border-top: var(--screen-px) solid var(--base-line-tertiary);
		gap: 8px;
		width: calc(100% - 40px);
		margin: 0 auto;
	}
}


body.withTaskPanel {
	.floating-window {
		@media (min-width: 481px) {
			.floating-window__footer, .editBlock-close {
				padding-bottom: calc(calc(var(--app-sa-bot) + 20px) + 40px);
			}
		}
	}
}

body.withSidebar {
	.floating-window {
		@media (min-width: 801px) {
			&.floating-window--fullscreen {
				width: calc(100% - 324px);
				right: 0;
			}
		}
	}
}

mass-task-create-fw.floating-window {
	@media (min-width: 481px) {
		right: var(--fw-right, 20px);
		width: var(--fw-width, 600px);
		height: var(--fw-height, auto);
		min-height: 640px;
		max-height: 640px;
		min-width: 500px;
	}
	mdt-cell[name="name"] {
		position: relative;
		span {
			width: 100%;
			input {
				&:not(:placeholder-shown) + .taskMassCreate__title-placeholder {
					display: none;
				}
				z-index: 1;
				position: relative;
				background: transparent;
				width: 100%;
				height: 100%;
			}
			.taskMassCreate__title-placeholder {
				font: var(--font-ui-14-regular-semi);
				opacity: 1;
				color: var(--base-txt-tertiary);
				position: absolute;
				left: 10px;
				z-index: 0;
				white-space: nowrap;
			}

			.taskMassCreate__title-placeholder-sub {
				font: var(--font-ui-14-regular-semi);
				opacity: 1;
				color: var(--base-txt-muted)
			}
		}
	}
	.modal__dataTable__body {
		padding-bottom: 0;
	}

}

subscribers-selector {
	.taskCreate__subscribers__item--special {
		--bg-color: var(--base-hlt-selected);
		width: 24px;
		height: 24px;
		box-shadow: none;
		background: transparent;
		ws-icon {
			--icon-size: 24px;
			background: var(--bg-color);
			border: none;
			bottom: inherit;
			left: initial;
			width: var(--icon-size);
			height: var(--icon-size);
			border-radius: 14px;
			box-sizing: border-box;

			svg {
				width: 14px;
				height: 14px;
				fill: var(--icon-color);
			}

		}
	}
}
td-task .data.done {
	opacity: 0.4 !important;
	& .in {
		color: var(--base-txt-tertiary) !important;
		text-decoration-line: line-through !important;
		text-decoration-color: var(--base-line-primary) !important;
		text-decoration-thickness: calc(var(--screen-px) * 1.5) !important;
	}
}


.custom-field {
	width: 100%;
	min-height: 32px;
	position: relative;

	&.custom-field--textarea {
		&.custom-field--edit .custom-field__content { align-items: flex-start; }

		.custom-field__input {
			padding: 4px 4px 4px 8px;
			resize: none;
			overflow-y: auto;
			min-height: 100px;
		}

		.custom-field__limiter {
			position: absolute;
			top: 2px;
			right: 2px;
		}
	}

	&.custom-field--edit {
		&.custom-field--edit-mode-inline {
			--box-shadow: 0 0 0 2px var(--base-txt-link-minor, #09F);
		}

		&.custom-field--edit-mode-inline.custom-field--error {
			--box-shadow: 0 0 0 2px var(--base-txt-alert-minor);

			.custom-field__icon { --icon-color: var(--base-txt-alert-minor); }
		}
	}

	&.custom-field--user {
		.custom-field__ava-container {
			padding-left: 2px;
			transform: scale(1.166667);
		}

		.custom-field__value { padding-left: 10px; }
	}
}


.custom-field__empty,
.custom-field__display,
.custom-field__edit {
	display: flex;
	padding: 0 6px;
	align-items: center;
	gap: 4px;
	border-radius: 6px;
	width: 100%;
	height: 100%;
	min-height: 32px;
	box-shadow: var(--box-shadow, none);

	&, * { box-sizing: border-box; }

	> * {
		flex-shrink: 1;
		min-width: 0;
	}

	&:hover {
		background: rgba(from var(--base-hlt-g-easy) at 0.02);
		.custom-field__actions { display: flex; }
	}

	.custom-field__content {
		display: flex;
		padding: 2px;
		align-items: center;
		flex: 1 0 0;
		max-width: 100%;
	}

	.custom-field__value,
	.custom-field__placeholder,
	.custom-field__input {
		width: 100%;
		padding: 0 4px 0 8px;
		font: var(--font-ui-13-small-med);
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.custom-field__hint-icon { --icon-color: var(--base-txt-tertiary); }

	.custom-field__actions,
	.custom-field__hint-icon {
		cursor: pointer;
		display: none;
	}

	.custom-field__actions { gap: 4px; }

	.custom-field__limiter {
		font: var(--font-ui-10-nano-med);
		color: var(--base-txt-btn-flip);
		background: var(--base-txt-link-minor);
		display: flex;
		min-width: 16px;
		padding: 0 4px;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: 4px;
		position: relative;
		top: -6px;
		right: -2px;

		&.custom-field__limiter--error { background: var(--base-txt-alert-minor); }
	}

	.custom-field__icon {
		--icon-size: 16px;
		--icon-color: var(--base-txt-secondary);
		display: flex;
		height: 28px;
		min-width: 28px;
		justify-content: center;
		align-items: center;

		&, & > button { border-radius: 50px; }
	}
}


.custom-field__empty {
	&:hover .custom-field__hint-icon { display: flex; }

	.custom-field__icon,
	.custom-field__switch-container { border: 1px dashed var(--base-txt-secondary); }

	.custom-field__placeholder { color: var(--base-txt-tertiary); }
	.custom-field__switch-container { background: transparent; }
}


.custom-field__display {
	.custom-field__value {
		color: var(--base-txt-primary);
		white-space: nowrap;
	}
}


.custom-field__edit {
	padding: 0 2px 0 6px;
	background: var(--base-cont-input);

	.custom-field__icon { --icon-color: var(--base-txt-btn-a); }

	.custom-field__input {
		color: var(--base-txt-accent);
		outline: none;
		border: none;
		flex: 1 0 0;
		background: transparent;

		&::placeholder {
			color: var(--base-txt-muted);
			font-style: normal;
		}

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


.custom-field__switch-container {
	display: flex;
	height: 28px;
	min-width: 28px;
	justify-content: center;
	align-items: center;
	border-radius: 50px;
	background: var(--base-hlt-g-hover, rgba(0, 31, 61, 0.05));

	.sw_pre {
		display: flex;
		justify-content: center;
		align-items: center;

		.sw {
			box-shadow: 0 0 0 1px var(--base-txt-secondary) inset;
			margin: 0;
			span { background: var(--base-txt-secondary); }
		}

		&.sw_act .sw { box-shadow: 0 0 0 1px var(--base-hlt-invert) inset; }
	}
}


.custom-field__edit--menu {
	display: none;

	&.menu-active {
		display: flex;
		padding: 12px;
		height: auto;
		min-height: 0;
		border-radius: 16px;
		background: var(--base-cont-top);
		box-shadow:
				0 0 0 1px var(--shadow-outline-200),
				0 2px 12px -2px var(--shadow-color-fx-400);

		.custom-field__content {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 8px;
			padding: 0;
			width: 100%;
			max-width: 100%;
		}

		.custom-field__edit-row {
			display: flex;
			align-items: center;
			gap: 6px;
			width: 100%;

			.custom-field__icon {
				--icon-size: 16px;
				--icon-color: var(--base-txt-tertiary);
				flex-shrink: 0;

				&, & > button { border-radius: 50px; }
			}
		}
		.custom-field__edit-row-content {
			display: flex;
			height: 32px;
			padding: 2px;
			align-items: center;
			flex: 1 0 0;
			min-width: 0;
			border-radius: 8px;
			background: var(--base-cont-mod-trans-low);

			&:focus-within {
				background: var(--base-cont-input);
				box-shadow: 0 0 0 2px var(--base-txt-link-minor);
			}

			&.custom-field__edit-row-content--error {
				box-shadow: 0 0 0 2px var(--base-txt-alert-minor);
			}

			.custom-field__input {
				flex: 1 0 0;
				min-width: 0;
				width: auto;
				padding: 0 4px 0 8px;
				font: var(--font-ui-13-small-med);
				color: var(--base-txt-accent);
				background: transparent;
				outline: none;
				border: none;
				overflow: hidden;
				text-overflow: ellipsis;

				&::placeholder {
					color: var(--base-txt-muted);
					font-style: normal;
				}
			}

			.custom-field__icon {
				--icon-color: var(--base-txt-btn-a);
				border-radius: 6px;
				cursor: pointer;

				button { border-radius: 6px; }
			}
		}
	}
}

.td_custom_field {
	overflow: initial !important;
	.in {
		overflow: initial !important;
	}
	.custom-field {
		height: 100%;
		box-shadow: inset var(--box-shadow, none);
		&.custom-field--edit {
			&.custom-field--edit-mode-inline {
				--box-shadow: 0 0 0 1px var(--base-hlt-invert-minor);
			}
		}

		.custom-field__edit {
			background: transparent;
			border-radius: 0;
			input {
				background: transparent;
			}
			&.custom-field__edit--overlay {
				border-radius: 16px;
				background: var(--base-cont-top);
			}
		}
	}
	.custom-field__empty,
	.custom-field__display,
	.custom-field__edit {
		padding: 0 4px;
	}
}

.optionsListInput {
	.optionsListInput__item {
		padding: 4px 6px;
		align-items: center;
		column-gap: 6px;
		/*background: var(--base-cont-low);*/
		border-radius: 9px;

		/* brd/g/01-hover */
		box-shadow: 0 0 0 1px var(--base-line-accent) inset;


		.space {
			width: 20px;
			flex-shrink: 0;
			--icon-size: 20px;
		}
		.space.space-icon {
			padding: 6px;
			border-radius: 4px;
			background: var(--tag-bg);
			--icon-color: var(--tag-color);
		}
		.in {
			padding: 0 8px;
		}
	}

	.optionsListInput__items:not(.optionsListInput__items-row) {
		.optionsListInput__item + .optionsListInput__item {
			margin-top: 4px;
		}
	}

	.optionsListInput__item-add {
		margin-top: 4px;
		box-shadow: none;
		.in {
			padding: 0;
			display: flex;
			column-gap: 6px;
		}
	}
	.optionsListInput__items-row {
		display: flex;
		column-gap: 4px;
		align-items: center;
		.optionsListInput__item {
			flex-grow: 1;
			width: 50%;
		}
	}
	/** DRAG **/
	.optionsListInput__item-dragThis {
		background: var(--base-cont-low);
	}
	.optionsListInput__dropPlace {
		height: 2px;
		margin: 1px 10px;
		position: relative;
		z-index: 1;
		box-shadow: none;
		padding: 0;
		border-radius: 0;
	}
	.optionsListInput__dropPlace-hover {
		background: var(--base-hlt-b-invert-major);
	}
}