#timerView__contentScrollOut {
	overflow: hidden;
	background: var(--base-cont-mod-low);
	border-top: var(--screen-px) solid var(--base-line-tertiary);
}
@media (min-width: 481px) {
	.timerView__wrapper {
		position: fixed;
		bottom: -100%;
		right: 20px;
		z-index: 1020;
		background: var(--base-cont-mod-low);
		width: 416px;
		max-height: 100%;
		box-shadow: var(--shadow-tray-major);
		border-radius: 12px 12px 0 0;
		transition: all 0.3s ease;
	}
	.timerView__wrapper.top-layer {
		z-index: 1021;
	}
	.timerView__wrapper-active {
		bottom: 0
	}
	.timerView {
		max-height: 65vh;
		height: 590px;
	}
}

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

	body.mobileTimerView main {
		display: none;
	}

	body.mobileTimerView .timerView__wrapper {
		display: block;
		height: 100%;
		position: relative;
		background: var(--base-cont-mod-top);
	}

	.timerView__wrapper.top-layer {
		z-index: 1032;
	}
	.timerView {
		height: 100%;
	}
}

.timerView {
	min-height: 352px;
}

.timerView__head {
	padding: 6px 6px 0 6px;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}
.timerView__head .timerView__head-ava,
.timerView__head .timerView__head-loader {
	width: 32px;
	height: 32px;
	display: flex;
	justify-content: center;
	align-items: center
}
.timerView:not(.timerView--loading) .timerView__head-loader {
	display: none;
}
.modal:not(.modal--timerViewLoading) .modal__header .timerView__head-loader,
.modal.modal--timerViewLoading:has(.ws-loading) .modal__header .timerView__head-loader {
	display: none !important;
}
.modal[data-group="timerView"] .modal__header__tabs > a.act:after {
	background: var(--base-hlt-g-invert);
}
.modal[data-group="timerView"] .modal__header .timerView__head-ava {
	width: 36px;
	height: 36px;
	.avaWrapper {
		display: block;
		width: 36px;
		height: 36px;
		.av_nm {
			transform: scale(calc(36 / 48));
			transform-origin: 0 0;
			border-radius: calc(8px / calc(36 / 48));
			transition: box-shadow 0.15s ease;
		}
		&:hover .av_nm {
			box-shadow: var(--shadow-brd-focus-alt);
		}
	}
}
.modal[data-group="timerView"] .modal__header .timerView__head-loader {
	position: absolute;
	left: 56px;
	display: flex;
	justify-content: center;
	width: 32px;
}
.timerView__head .timerView__head-ava .av_nm {
	transform: scale(calc(28 / 48));
	transform-origin: 0 0;
	border-radius: calc(8px / calc(28 / 48));
}
.timerView__head > .in {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.timerView__head .avaWrapper {
	display: block;
	width: 28px;
	height: 28px;
}
.timerView__head > .buttons {
	margin-left: auto;
}
.timerView__head > .buttons ws-btn {
	padding: 2px;
}
.timerView__date {
	display: flex;
	justify-content: center;
	padding: 14px 0 2px;
	ws-btn.date .btns-row {
		gap: 6px;
	}
	ws-btn.date .btns-row .btn {
		flex-shrink: 0;
		width: unset;
	}
	ws-btn.date .btns-row .btn {
		span:not([class]) {
			font: var(--font-ui-12-mini-med);
		}
		&.btn-solid {
			span:not([class]) {
				font: var(--font-ui-12-mini-bold);
			}
		}
	}
	.btns-row button:nth-child(2) span {
		width: 136px;
	}
	.btns-row button:nth-child(2) span.ws-loading__loader {
		width: unset;
	}
}
.timerView__tabs {
	padding: 0 20px;
	justify-content:center;
	box-shadow: 0 var(--screen-px) var(--base-line-secondary);
}
.timerView__progress {
	padding: 8px 20px 16px;
	height: 20px;
}
.modal .timerView__progress {
	margin-top: 0;
}
.timerView__progress ws-icon {
	width: 32px;
	--icon-size: 16px;
	--icon-color: var(--base-txt-tertiary);
}
.timerView__progress progress-bar2 {
	border:1px solid var(--base-line-secondary);
	padding:3px;
	border-radius:8px;
	height:8px;
	display: block;
}
.timerView__progress progress-bar2 .progress2 {
	display: block;
	height: 8px;
	background: var(--base-cont-mod-trans-low);
	border-radius: 4px;
	overflow: hidden;
	margin:0 0 -8px;
}
.timerView__progress progress-bar2 .progress2_over.progress2_hlt_b, .timerView__progress progress-bar2 .progress2_over2.progress2_hlt_b {
	box-shadow: 0 8px var(--base-hlt-b-invert) inset;
}
.timerView__progress progress-bar2 .progress2_over.progress2_hlt_g, .timerView__progress progress-bar2 .progress2_over2.progress2_hlt_g {
	box-shadow: 0 8px var(--base-hlt-g-invert) inset;
}
.timerView__progress progress-bar2 i {
	width:12.5%;
	border-right:2px solid var(--base-cont-mod-top);
	height: 8px;
	float:left;
	box-sizing:border-box
}
.timerView__progress progress-bar2 i:last-child {
	margin-right:-100%;
}
.timerView__progress progress-bar2 .progress2 div {
	height: 8px !important;
}

.timerView__head .space, .timerView__head ws-icon {
	width: 28px;
	height: 28px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 4px;
	fill: var(--colors-graphite-700);
	font: 14px/20px var(--font-base);
	font-weight: 400;
}

.timerView__head .space ~ .space {
	margin-left:4px;
}

.timerView__head .space ws-icon svg {
	width: 16px;
	height: 16px;
}

.timerView__head .minimize {
	/*cursor: zoom-out;*/
	/*margin-right: 4px;*/
}

.timerView__head .space:hover {
	background: var(--colors-alpha-dark-05);
}

.timerView__head .space:hover:active {
	background: var(--colors-alpha-dark-10);
}

.timerView__head > .in {
	padding: 0 8px;
	color: var(--base-txt-primary);
	font: var(--font-ui-16-title-3-bold);
}

.timerView__head > .in .date {
	gap: 4px;
}

.timerView__head .loader_sm {
	display: none;
	border: 1px solid var(--colors-graphite-700);
	border-left-color: transparent;
	width: 12px;
	height: 12px
}
.timerView__head .costs {
	color: var(--base-hlt-b-invert);
	background: var(--base-hlt-b-notr-selected);
	height: 20px;
	border-radius: 4px;
	font: var(--font-ui-12-mini-bold);
	display: inline-flex;
	align-items: center;
	padding: 0 4px;
	margin: 0 0 0 8px;
}

.timerView__content {
	padding: 12px 20px;
	min-height: 156px;
}
.timerList__item, .timerList__itemAdd {
	padding: 6px;
	background: var(--base-cont-mod-top);
	margin:0 0 6px;
	box-shadow: var(--shadow-cont-minor-outline);
	border-radius: 12px;
	position: relative;
	&.completed {
		cursor: default;
	}
}
.timerList__item-failed {
	background: var(--base-cont-mod-mid);
}
.timerList__item-failed .in {
	color: var(--base-txt-tertiary);
	/* text-decoration:line-through; */
	/* text-decoration-color: var(--base-hlt-w-invert-minor); */
}
.timerList__item-primary {
	padding: 12px 6px 12px;
}
.timerList__item:last-child {
	margin-bottom: 0;
}
.timerList__item:not(.timerList__item-primary) .data {
	display: none;
}
.timerList__item .space-icon ws-icon.proj_color {
	width: 24px;
	height: 24px;
	border-radius: 5px;
}
.timerList__item .data {
	padding: 0 4px;
}
.timerList__item span.link {
	color: inherit;
	overflow: hidden;
	border-radius: 8px;
	height: 28px;
}
.timerList__item span.link:hover {
	background: var(--base-hlt-g-hover);
}
.timerList__item:not(.timerList__item-primary) span.link {
	pointer-events: none;
}
.timerList__item span.link ws-icon[name=open_in_new] {
	display: none
}
.timerList__item span.link:hover ws-icon[name=open_in_new], .timerList__item-primary span.link ws-icon[name=open_in_new] {
	display: flex;
	width: 28px;
}
.timerList__item .loader_sm {
	display: none
}
.timerList__item ws-icon[name=open_in_new] {
	--icon-color: var(--base-txt-act-minor);
}
.timerList__item .costs {
	display: flex;
	height: 24px;
	min-width: 0;
	border-radius: 5px;
	margin: 0 2px 0 8px;
	--icon-color: var(--base-txt-btn-a);
	color: var(--base-txt-btn-a);
	background: var(--base-hlt-selected);
	justify-content: space-between;
	align-items: center;
	font-variant-numeric: tabular-nums;
	padding: 0 6px;
}
.timerList__item .costs-empty {
	background: var(--base-line-ghost);
	color: var(--base-txt-secondary);
	--icon-color: var(--base-txt-secondary);
}
.timerList__item .costs-noText {
	width: auto;
}
.timerList__item .costs ws-icon {
	--icon-size:16px;
}
.timerList__item .costs .in, .timerList__item .costs-timer b {
	font: var(--font-ui-11-micro-med);
	color: inherit;
}
.timerList__item .costs-fromTimer {
	--icon-color: var(--base-txt-btn-b);
	background: var(--base-hlt-b-selected);
	color: var(--base-txt-btn-b);
}
.timerList__item-primary .costs-fromTimer {
	display: none
}
.timerList__item .costs-timer {
	--icon-color: var(--white-accent);
	background: var(--costs-timer-play);
}
.timerList__item-primary .costs-timer {
	display: none
}
.timerList__item .costs-timer b {
	color: var(--white-accent);
	font-variant-numeric: tabular-nums;
}
.timerList__item .costs-timer b i {
	font: var(--font-ui-10-nano-reg);
	color: var(--white-accent);
	font-variant-numeric: tabular-nums;
	margin: 0;
	opacity: 0.7
}
.timerList__item .costs-plan {
	background: none;
	color: var(--base-txt-tertiary);
}

.timerList__item .costs[data-over=warning] {
	background: var(--costs-timer-warning);
	color: var(--white-accent);
	--icon-color: var(--white-accent);
}

.timerList__item .costs[data-over=alert] {
	background: var(--costs-timer-alert);
	color: var(--white-accent);
	--icon-color: var(--white-accent);
}

.timerList__item .timer_buttons  {
	gap: 8px
}
.timerList__item .timer_buttons .timer, .timerList__item .timer_buttons .pause {
	height:32px;
	color: var(--white-accent);
	--icon-color: var(--white-accent);
	background: var(--costs-timer-play);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius:7px;
	box-shadow: var(--shadow-brd-enable);
	gap: 4px;
	font:14px/16px var(--font-base)
}
.timerList__item .timer_buttons .pause {
	background: var(--base-hlt-b-invert);
}

.timerList__item .timer_buttons .timer b, .timerList__item .timer_buttons .pause b {
    font: bold 14px/16px var(--font-base);
    font-variant-numeric: tabular-nums;
}
.timerList__item .timer_buttons .timer i {
	margin: 0;
	color: var(--white-accent);
    font: 11px/16px var(--font-base);
	font-variant-numeric: tabular-nums;
	vertical-align: 0;
	opacity: 0.7
}
.timerList__item .timer_buttons .timer strong {
	display: none;
}

.taskView__timer, .taskView__timer:hover {
	background: var(--costs-timer-play);
	color: var(--white-primary);
	width:84px;
	height:32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 7px;
	font: 13px/20px var(--font-mono);
	box-shadow: 0 0 0 1px var(--inp-cont-brd) inset;
	cursor: pointer;
}

.timerList__item .timer_buttons .timer[data-over=warning],
.taskView__timer[data-over=warning] {
	background: var(--costs-timer-warning)
}

.timerList__item .timer_buttons .timer[data-over=alert],
.taskView__timer[data-over=alert] {
	background: var(--costs-timer-alert)
}

.taskView__timer i {
	font: 13px/20px var(--font-mono);
	opacity: 0.5
}
.timerList__buttons {
	padding: 8px 0;
}
.timerList__item .in {
	align-items: center;
}
.timerList__item:not(:hover) ws-btn[right-icon="trash_can"] {
	display: none;
}
.timerList__item:hover ws-btn[right-icon="trash_can"] ~ * {
	display: none;
}
.timerList__itemDivider {
	border-top:2px dashed var(--base-line-secondary);
	width:150px;
	margin:16px auto
}
.timerList__item progress-pie {
	width:20px;
	height: 20px;
	display: block;
	margin:2px 8px 2px 4px;
}
.timerList__item i {
	font:inherit;
	color:var(--base-txt-muted);
	margin-left: 4px;
}
.timerList__item .time {
	gap:4px;
	margin: 0 4px 0 4px;
}
.timerList__item .time span {
	font: var(--font-ui-13-small-semi);
	background: var(--base-cont-mod-low);
	padding:2px;
	border-radius: 5px;
	display:inline-flex;
	width:40px;
	justify-content: center;
	cursor: pointer;
}
.timerList__itemAdd {
	--icon-color: var(--base-txt-tertiary);
	border: 1px dashed var(--base-line-primary) !important;
	box-shadow: none;
	box-sizing: border-box;
	padding: 6px;
	margin-top: 16px; /* 12px + 4px */
	background: none;
}
.timerList__itemAdd ws-icon[name*=info] {
	--icon-size: 16px;
}
.timerList__itemAdd ws-btn {
	padding: 2px;
}
.timerList__itemAdd[data-action="add_plan"]:hover .in {
	color: var(--base-txt-primary);
}
.timerList__itemAdd .in {
	font: var(--font-ui-13-small-reg);
	padding: 0 4px;
	align-items: center;
	color: var(--base-txt-tertiary);
}
.timerList__itemAdd[data-action="add_fact"] .in {
	color: var(--base-txt-primary);
}
.timerList__itemAdd[data-action="add_fact"] ws-btn svg {
	fill: var(--base-txt-primary);
}
.timerView ws-slider {
	background: var(--base-cont-mod-trans-low);
}
/*--------------------------------------------------------------------------------------------------------------------*/
.timerList__dropPlace {
	height: 2px;
	margin: -3px -10px 1px -10px;
	position: relative;
	z-index: 1;
}

.timerList__dropPlace-hover {
	background: var(--base-hlt-b-invert-major);
}
body.body-dragInProgress .timerView__wrapper.drag_over,
body.body-dragInProgress .timerView__wrapper:has(.timerList__dropPlace-hover) {
	box-shadow:0 0 0 3px var(--base-hlt-b-invert-major);
}
.timerList {
	margin: -12px -20px 0 -20px;
	padding: 12px 20px 0 20px;
	border-bottom: var(--screen-px) solid transparent;
}
.modal .timerList {
	margin: -12px -20px 0 -20px !important;
}
.timerView[data-type="fact"] .timerView__content {
	padding-bottom: 0;
}
.timerView[data-type="plan"] .timerView__content {
	padding-bottom: max(12px, var(--sa-bot));
}
.modal .timerView[data-type="plan"] .timerView__content {
	padding-bottom: max(24px, var(--sa-bot));
}
.timerView[data-type="fact"] .timerList {
	padding-bottom: max(24px, calc(12px + var(--sa-bot)));
	border: unset;
}
.timerView[data-type="plan"] .timerList {
	padding-bottom: 12px;
}
.timerView[data-type="plan"] .timerList.scrollZone-bottom {
	border-bottom: var(--screen-px) solid var(--base-line-secondary);
	box-shadow: unset;
}
body.body-dragInProgress .timerList {
	pointer-events: none
}
.timerList__item ws-icon[name="drag_indicator"] {
	position: absolute;
	left: -20px;
	top: 10px;
	display: none
}
.timerList__item .costs > .in {
	font-family: monospace;
}

.timerList__item.drag_clone {
	display:none;
}
.timerView-withDrag .timerList__item:hover ws-icon[name="drag_indicator"] {
	display: block
}
.timerView-withDrag .sidePanel__list__item[data-task] {
	cursor: grab;
}

#timerStopGoMenu {
	padding-bottom: 0;
	.timer {
		height: 16px;
		position: relative;
		margin: 0 6px 0 0;
		font: var(--font-ui-13-small-reg);
		font-family: monospace;
		font-variant-numeric: tabular-nums;
		display: block;
		background: var(--costs-timer-play);
		color: var(--white-accent);
		padding: 2px 6px;
		text-align: left;
		border-radius: 5px;

		b { font: var(--font-ui-11-micro-bold); }

		i {
			opacity: 0.7;
			font: var(--font-ui-10-nano-reg);
			font-variant-numeric: tabular-nums;
			margin: 0 0 0 2px;
			font-style: normal;
		}

		&[data-over="warning"] {
			background: var(--costs-timer-warning);
		}
		&[data-over="alert"] {
			background: var(--costs-timer-alert);
		}
	}

	.timer ~ span {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font: var(--font-ui-15-large-reg);
	}
	a .timer ~ ws-icon { opacity: 0.2; }
	a:hover .timer ~ ws-icon { opacity: 1; }
}

.timerList__item .timer_buttons .pause .not_aval {
	display: none;
}
.no_timers {
	.timerList__item .timer_buttons .pause .aval,
	.timerList__item .timer_buttons .pause ws-icon,
	.timerList__item .costs-fromTimer:not(.costs-isTimer),
	.timerList__item .costs-fromTimer.costs-isTimer ws-icon {
		display: none;
	}

	.timerList__item .costs-fromTimer.costs-isTimer,
	.timerList__item .timer_buttons .pause {
		pointer-events: none;
		opacity: 0.75;
	}

	.timerList__item .timer_buttons .pause .not_aval {
		display: inline;
	}
}