:root {
	--mobile-primary-menu-default-opened-swipe-width: 40px;
	--mobile-primary-menu-half-opened-swipe-width: 64px;
	--mobile-primary-menu-full-opened-swipe-width: 88px;
	--mobile-primary-menu-swipe-width: var(--mobile-primary-menu-default-opened-swipe-width);
}

#mobileMenu__overlay {
	display: none;
	z-index: 1031;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}
body.mobileMenuHidden #mobileMenu__wrapper {
	display: none;
}
body.mobileMenuHalfOpen,
body.mobileMenuOpen {
	#mobileMenu__overlay {
		display: block;
	}
}

.mobileMenu__wrapper {
	position: fixed;
	z-index: 1032;
	top: calc(100% - var(--primary-menu-height));
	height: 100%;
	left:0;
	right:0;
	display: none;
	transition: top .3s ease-in-out;
	box-shadow: 0 -1px 0 var(--base-line-tertiary);
}

body.mobileMenuHalfOpen .mobileMenu__wrapper {
	top: calc(100% - var(--mobile-primary-menu-swipe-zone-height) - var(--mobile-primary-menu-half-opened-conent-height) - var(--primary-menu-height));
}
body.mobileMenuHalfOpen .mobileMenu__bar {
	/* display: none */
}

body.mobileMenuOpen .mobileMenu__wrapper {
	top: calc(100% - var(--mobile-primary-menu-swipe-zone-height) - var(--mobile-primary-menu-full-opened-conent-height) - var(--primary-menu-height));
}

.mobileMenu {
	background: var(--base-cont-top-elevated);
	/* box-shadow: 0 0 40px -2px var(--colors-graphite-trans-400); */
	transition: border-radius .3s ease-in-out, box-shadow .15s linear .15s;
	height: 100%;
}

.mobileMenu__head {
	height: var(--mobile-primary-menu-swipe-zone-height);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	position: relative;
	pointer-events: none;
}

.mobileMenu__swipe {
	display: block;
	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;
}

body[data-page="none"] .mobileMenu__wrapper {
	background: var(--base-cont-top-elevated);
}
@media (max-width: 480px) {
	.mobileMenu__wrapper {
		display: block;
		box-shadow: var(--hairline-top);
	}
	.mobileMenu__wrapper-loaded {
		box-shadow: unset;
	}
}
.mobileMenu__wrapper-loaded .mobileMenu {
	box-shadow: var(--hairline-top);
}

body.mobileMenuHalfOpen .mobileMenu__wrapper,
body.mobileMenuOpen .mobileMenu__wrapper {
	box-shadow: unset;
}

body.mobileMenuHalfOpen .mobileMenu,
body.mobileMenuOpen .mobileMenu {
	border-radius: 20px 20px 0 0;
	box-shadow: var(--hairline-top), 0 600px 0 400px var(--base-cont-mod-top), 0 0 40px -2px var(--colors-graphite-trans-400);
}

body.mobileMenuHalfOpen .mobileMenu__head,
body.mobileMenuOpen .mobileMenu__head {
	padding: 0 12px;
}

.mobileMenu__wrapper.swype-self .mobileMenu__swipe {
	background-color: var(--base-txt-accent);
}

body.mobileMenuHalfOpen .mobileMenu__swipe {
	--mobile-primary-menu-swipe-width: var(--mobile-primary-menu-half-opened-swipe-width);
	background-color: var(--base-txt-accent);
}

body.mobileMenuOpen .mobileMenu__swipe {
	--mobile-primary-menu-swipe-width: var(--mobile-primary-menu-full-opened-swipe-width);
	background-color: var(--base-txt-accent);
}

.mobileMenu__bar {
	display: flex;
	padding: 0 8px;
	height: var(--mobile-primary-menu-tap-bar-height);
	box-sizing: border-box;
	position: fixed;
	left: 0;
	right: 0;
	bottom: calc(1px + max(var(--sa-bot), 13px));
	justify-content: center;
}

.mobileMenu__bar__item {
	flex-shrink: 0;
	flex-grow: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 20%;
	height: 48px;
	font: var(--font-ui-10-nano-med);
	color: var(--base-txt-secondary);
	transition:
		opacity 0.1s ease-out,
		transform 0.3s ease-out;
	--item-offset: 0;
	--item-scale: 1;
	transform: translateX(var(--item-offset)) scale(var(--item-scale));
	&:hover {
		color: var(--base-txt-secondary);
	}
}

.mobileMenu__bar .mobileMenu__bar__item {
	box-sizing: border-box;
	padding-top: 8px;
	line-height: 12px;
}

.mobileMenu__bar__item--tab {
	border-radius: 16px;
}
.mobileMenu__bar__item--general {
	z-index: 0;
}
.mobileMenu__bar__item--plus {
	z-index: 1;
	padding-top: 0;
	padding-bottom: 2px;
	justify-content: flex-end;
}

.mobileMenu__bar__item--part1 > .ripple-host,
.mobileMenu__bar__item--general > .ripple-host {
	border-radius: 50%;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.mobileMenu__bar__item--general > .ripple-host {
	clip-path: inset(calc((100% - 25px) / 2 - 12px) 0 0 0);
}

.mobileMenu__bar__item--general {
	transition:
		opacity .18s ease-out .12s,
		transform .3s ease-out 0s;
	&.item1 {
		transition-duration: .24s, .3s;
		transition-delay: .06s, 0s;
	}
	&.item4 {
		transition-duration: .24s, .3s;
		transition-delay: .06s, 0s;
	}
}

.mobileMenu__bar.debug .mobileMenu__bar__item--general,
body.mobileMenuOpen .mobileMenu__bar__item--general,
body.mobileMenuHalfOpen .mobileMenu__bar__item--general {
	opacity: 0;
	--item-scale: 0.75;
	transition:
		opacity .18s ease-in,
		transform .3s ease-in;
	&.item1 {
		--item-offset: 200%;
		transition-duration: .24s, .3s;
	}
	&.item2 {
		--item-offset: 100%;
	}
	&.item3 {
		--item-offset: -100%;
	}
	&.item4 {
		--item-offset: -200%;
		transition-duration: .24s, .3s;
	}
}

body[data-page="account_dashboard"] .mobileMenu__bar__item--part1 {
	display: none;
}
.mobileMenu__bar__item--part1 {
	opacity: 0;
}
body:not(.mobileMenuHalfOpen) .mobileMenu__bar__item--part1 {
	transition:
		opacity 0.05s ease-out,
		transform 0s ease 0.05s;
}
body.mobileMenuHalfOpen .mobileMenu__bar__item--part1 {
	opacity: 1;
	transition:
		opacity 0.1s ease 0.2s,
		transform 0.3s ease 0.2s;
	&.item1 {
		--item-offset: 100%;
	}
	&.item2 {
		--item-offset: -100%;
	}
}

body.mobileMenuHalfOpen .mobileMenu__wrapper.swype-self .mobileMenu__bar__item--part1 {
	transition-delay: unset;
}
body.mobileMenuOpen .mobileMenu__bar__item--part1 {
	opacity: 0;
	&.item1 {
		--item-offset: 100%;
	}
	&.item2 {
		--item-offset: -100%;
	}
}

.mobileMenu__bar__item.menu_open {
	color: var(--base-txt-accent);
}

.mobileMenu__plus {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	border: 1.5px solid transparent;
	border-radius: 50%;
	background:
		linear-gradient(var(--base-cont-top-elevated), var(--base-cont-top-elevated)) padding-box,
		var(--gradient-btn-secondary) border-box;
}
.mobileMenu__plus .icon_plus {
	position: relative;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .25s ease-in-out;
	&:before,
	&:after {
		content: '';
		position: absolute;
		background: var(--base-txt-primary);
		width: 2px;
		height: 12px;
		border-radius: 2px;
	}
	&:after {
		transform: rotate(90deg);
	}
}
body.mobileMenuOpen .mobileMenu__plus:before,
body.mobileMenuHalfOpen .mobileMenu__plus:before {
	content: '';
	position: absolute;
	background: var(--base-hlt-g-hover);
	border-radius: inherit;
	inset: 0;
}
body.mobileMenuOpen .mobileMenu__plus .icon_plus,
body.mobileMenuHalfOpen .mobileMenu__plus .icon_plus {
	transform: rotate(135deg);
}

.mobileMenu__bar__icon {
	--icon-size: 28px;
	position: relative;
	width: var(--icon-size);
	height: var(--icon-size);
}
.mobileMenu__bar__icon ws-icon {
	--icon-color: var(--base-txt-tertiary);
	width: var(--icon-size);
	height: var(--icon-size);
	svg use:last-child:not(:first-child) {
		display: none;
	}
}
.mobileMenu__bar__icon .av_nm {
	transform: scale(calc(28 / 48));
	transform-origin: left top;
}

.mobileMenu__bar__item.menu_open .mobileMenu__bar__icon ws-icon {
	--icon-color: var(--base-txt-accent);
	svg use:first-child {
		display: none;
	}
	svg use:last-child {
		display: block;
	}
}

.mobileMenu__counter {
	position: absolute;
	top: -2px;
	left: 50%;
	transform: translateX(30%);
	transition: all .2s ease-in-out;
}

.mobileMenu__counter span[class] {
	position: relative;
	display: inline-block;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 16px;
	box-shadow: 0 0 0 1px var(--base-line-tertiary) inset, 0 0 0 2px var(--base-cont-top-elevated);
	font: var(--font-ui-11-micro-semi);
	color: var(--sidebar-badge-txt);
	text-align: center;
	margin: 0;
}

.mobileMenu__counter span.cnt_new {
	background: var(--sidebar-badge-base);
	color: var(--sidebar-badge-txt);
	border: unset;
}

.mobileMenu__counter span.cnt_hot {
	background: var(--sidebar-badge-alert);
	color: var(--sidebar-badge-txt);
	border: unset;
}

.mobileMenu__counter span.cnt_warm {
	background: var(--sidebar-badge-upcoming);
	color: var(--sidebar-badge-txt);
	border: unset;
}

.mobileMenu__counter span.cnt_all {
	background: var(--sidebar-badge-ghost);
	color: var(--sidebar-badge-txt);
	border: unset;
}
.mobileMenu__counter team-timer span.cnt_new {
	background: var(--lbl-today-major);
	font-size: 0;
	min-width: unset;
	width: 8px;
	height: 8px;
	padding: 0;
}

#mobileMenu__event__counter span.cnt_new {
	background: var(--sidebar-badge-ghost);
}

#mobileMenu__event__counter span.cnt_mention {
	background: var(--sidebar-badge-alert);
}

.mobileMenu__content {
	position: absolute !important;
	/* height: calc(100% - var(--primary-menu-height) - var(--swipe-window-top)); */
	top:100%;
	width:100%;
	padding: 12px 12px 0;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.5s ease, top 0.1s ease;
	box-sizing: border-box;
}
.mobileMenu__content-part1 {
	display: flex;
	flex-direction: column;
	gap: 12px;
	transition: opacity 0.5s ease, top 0.15s ease 0.15s;
}
body.mobileMenuHalfOpen .mobileMenu__content-part1 {
	opacity: 1;
	top: var(--mobile-primary-menu-swipe-zone-height);
	transition: opacity 0.5s ease, top 0.1s ease;
}
.mobileMenu__content-part2 {
	transition: opacity 0.5s ease, top 0.15s ease 0.15s;
	padding-top: 0;
}
body.mobileMenuOpen .mobileMenu__content-part2 {
	opacity: 1;
	top: var(--mobile-primary-menu-swipe-zone-height);
	transition: opacity 0.5s ease, top 0.1s ease;
}
body.mobileMenuOpen .mobileMenu__content-part1 {
	transition: opacity 0.1s ease, top 0.5s ease;
}

.mobileMenu__content__head {
	padding: 4px 0 calc(4px + var(--mobile-primary-menu-swipe-zone-height));
	ws-icon[name="info_circle-line"] {
		--icon-color: var(--colorize-orange);
		--icon-size: 16px;
		width: 16px;
		height: 16px;
	}
	.mobileMenu__content__title {
		color: var(--base-txt-primary);
		font: var(--font-ui-16-title-3-bold);
	}
	.mobileMenu__content__hint {
		color: var(--base-txt-secondary);
		font: var(--font-ui-10-nano-reg);
		.in {
			padding: 0 6px;
		}
	}
}

.mobileMenu__plus {
	/* padding: 12px 24px; */
}

.mobileMenu__card {
	padding: 16px;
	margin-bottom: 8px;
	border-radius: 16px;
	background: var(--base-hlt-g-hover);
}

.mobileMenu__card__buttons {
	gap: 12px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--base-line-tertiary);
}

.mobileMenu__card__buttons ws-btn:first-child {
	flex-grow: 1;
}

.mobileMenu__profile {
	gap: 12px;
	height: 40px;
	padding-top: 20px;
	cursor: pointer;
}

.mobileMenu__profile .av_nm {
	transform: scale(0.84);
	margin: -4px;
	border-radius: 8px;
}

.mobileMenu__profile .in span:first-child {
	font: var(--font-ui-15-large-reg);
	color: var(--base-txt-accent);
}

.mobileMenu__profile .in span:last-child {
	font: var(--font-ui-12-mini-reg);
	color: var(--base-txt-secondary);
}

.mobileMenu__profile > ws-icon {
	width: 28px;
	height: 28px;
	margin-right: 6px;
}

.mobileMenu__pages {
	display: flex;
	flex-direction: column;
	padding: 12px 0;
}

.mobileMenu__pages-tiles {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
}

.mobileMenu__pages__item {
	overflow: hidden;
	gap: 8px;
	padding: 16px;
	box-sizing: border-box;
	border-radius: 16px;
	cursor: pointer;
}

a.mobileMenu__pages__item {
	opacity: .15;
	pointer-events: none;
}
a.mobileMenu__pages__item[onclick],
a.mobileMenu__pages__item[href] {
	opacity: 1;
	pointer-events: unset;
}

.mobileMenu__pages-tiles {
	--columns: 1;
	--gap: 12px;
	gap: var(--gap);
	.mobileMenu__pages__item {
		--item-bg-color: var(--base-hlt-g-hover);
		--ripple-color: var(--item-bg-color);
		--main-icon-color: var(--base-txt-btn-flip);
		--main-icon-bg-color: var(--base-hlt-g-invert-minor);
		--main-icon-border-color: var(--base-line-secondary);
		flex-grow: 1;
		flex-basis: calc( ( 100% - var(--gap) * (var(--columns) - 1) ) / var(--columns) );
		background: var(--item-bg-color);
		border-radius: 24px;
		&.mobileMenu__pages__item--c {
			--main-icon-color: var(--base-txt-alt-light);
			--item-bg-color: rgba(20, 138, 108, 0.16); /* TODO var() */
			--main-icon-bg-color: var(--colors-pine-800);
		}
		&.mobileMenu__pages__item--b {
			--main-icon-color: var(--base-txt-alt-light);
			--item-bg-color: rgba(157, 133, 229, 0.16); /* TODO var() */
			--main-icon-bg-color: var(--base-hlt-b-invert);
		}
		&.mobileMenu__pages__item--a {
			--main-icon-color: var(--base-txt-alt-light);
			--item-bg-color: rgba(0, 153, 255, 0.16); /* TODO var() */
			--main-icon-bg-color: var(--colors-interblue-700);
		}
		&.mobileMenu__pages__item--disabled {
			--main-icon-color: var(--white-max);
			--item-bg-color: var(--base-hlt-g-hover);
			--main-icon-bg-color: var(--base-btn-notice-minor);
			ws-icon.icon_main {
				box-shadow: none;
			}
		}
		ws-icon.icon_main {
			--icon-size: 24px;
			--icon-color: var(--main-icon-color);
			width: 40px;
			height: 40px;
			border-radius: 12px;
			background-color: var(--main-icon-bg-color);
			box-shadow: 0 0 0 1px var(--main-icon-border-color) inset;
		}
		.mobileMenu__pages__item__icons {
			justify-content: space-between;
			align-items: flex-start;
			ws-icon:last-child {
				--icon-color: var(--base-txt-tertiary);
			}
		}
		.in {
			color: var(--base-txt-accent);
			font: var(--font-ui-16-title-3-semi);
		}
	}
	&.mobileMenu__pages-tiles--sm {
		padding: 8px 0;
		.mobileMenu__pages__item {
			padding: 16px;
			border-radius: 16px;
			gap: 8px;
			ws-icon.icon_main {
				--icon-size: 24px;
				width: 32px;
				height: 32px;
				border-radius: 6px;
			}
			.in {
				color: var(--base-txt-accent);
				font: var(--font-ui-14-regular-med);
			}
			&.mobileMenu__pages__item--disabled {
				.in {
					color: var(--base-txt-muted);
				}
			}
			&.flex_column {
				.in {
					text-wrap-style: balance;
				}
			}
		}
	}
	&.mobileMenu__pages-tiles-2cols .mobileMenu__pages__item {
		--columns: 2;
	}
	&.mobileMenu__pages-tiles-3cols .mobileMenu__pages__item {
		--columns: 3;
	}
}

.mobileMenu__pages__item {
	.icon_main, .in {
		opacity: 0;
		transition: opacity .1s ease-out;
	}
}
body.mobileMenuOpen .mobileMenu__content-part2 .mobileMenu__pages__item,
body.mobileMenuHalfOpen .mobileMenu__content-part1 .mobileMenu__pages__item {
	.icon_main, .in {
		opacity: 1;
		transition: opacity .2s ease-in .25s;
	}
}

/* .mobileMenu__pages__item:active,
.mobileMenu__pages__item:hover {
	background: var(--base-hlt-g-pressed);
	-webkit-tap-highlight-color: transparent;
	outline: none;
	user-select: none;
}

.mobileMenu__pages__item-active {
	box-shadow: 0 0 0 1.5px var(--base-hlt-b-invert) inset;
	background: var(--base-cont-top-elevated);
	-webkit-tap-highlight-color: transparent;
	outline: none;
	user-select: none;
}

.mobileMenu__pages__item ws-icon:first-child {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	box-shadow: 0 0 0 1px var(--base-line-secondary) inset;
	background: var(--base-txt-tertiary);
	--icon-size: 20px;
	--icon-color: var(--base-txt-alt-light);
}

.mobileMenu__pages__item-active ws-icon:first-child {
	background: var(--base-hlt-b-invert);
} */

.mobileMenu__pages__item ws-icon[name*='chevron'] {
	--icon-color: var(--base-txt-secondary);
}

.mobileMenu__pages__item-active ws-icon[name*='chevron'] {
	opacity: 0;
}

.mobileMenu__pages__item .in {
	font: var(--font-ui-15-large-med);
	color: var(--base-txt-accent);
}

.mobileMenu__pages__item-active .in {
	color: var(--base-txt-btn-b);
}

.mobileMenu__pages__item .cnt {
	min-width: 24px;
	padding: 0 8px;
	box-sizing: border-box;
	border-radius: 14px;
	box-shadow: 0 0 0 1px var(--base-line-tertiary) inset;
	background: var(--base-hlt-b-invert);
	font: var(--font-ui-12-mini-bold);
	color: var(--sidebar-badge-txt);
	text-align: center;
}

.mobileMenu__pages .separator {
	width: 100%;
	height: 1px;
	margin: 12px 0;
	background: var(--base-line-tertiary);
}

.mobileMenu__foot {
	display: flex;
	flex-direction: column;
	padding-bottom: 28px;
}

.mobileMenu__foot a.upgrade {
	position: relative;
	margin: 10px auto;
	padding: 0 4px;
	border: 2px solid var(--sidebar-ico-promo);
	border-radius: 6px;
	font: var(--font-ui-12-mini-semi);
	color: var(--sidebar-ico-promo);
	text-align: center;
	text-wrap: nowrap;
	transition: all 0.1s ease;
}

.mobileMenu__foot .app_version {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	font: var(--font-ui-13-small-reg);
	color: var(--base-txt-tertiary);
}

.mobileMenu__foot .app_version span:last-child {
	padding: 4px 8px;
	border-radius: 6px;
	box-shadow: 0 0 0 1px var(--base-line-secondary) inset;
}

.footerMobile {}
@media (max-width: 480px) {
	.footerMobile {
		height: var(--footerMobile-height);
		flex-shrink: 0;
	}
	body.w_keyboard .footerMobile {
		display: none;
	}
}
.headerMobile {}
.headerMobile__title {
	gap: 12px;
	height: 60px;
	display: flex;
	background: var(--base-cont-top-elevated);
	justify-content: space-between;
	font: var(--font-ui-16-title-3-med);
	text-align:center;
	padding: 0 20px;
	box-shadow: 0 4px 4px -4px var(--colors-graphite-trans-200), 0 2px 12px -4px var(--colors-graphite-trans-300);
}
.headerMobile__title .av_nm {
	transform: scale(0.67);
	border-radius:12px;
	margin:-6px;
}
.headerMobile__title a {
	color: inherit;
}
.headerMobile__title a.profile {
	padding-left: 8px;
}
.headerMobile__title .ws {
	width: 40px;
	height: 40px;
	--icon-size: 40px;
}
.headerMobile__title .account {
	display: flex;
	justify-content: center;
	gap: 4px;
}
@media (max-width: 480px) {
	body[data-page="user_dashboard"] .headerMain,
	body[data-page="account_dashboard"] .headerMain {
		display: none
	}
	.menu-autoWidthSmall {
		max-width: unset;
	}
}
@media (min-width: 481px) {
	.headerMobile {
		display: none
	}
}

@media (max-width: 375px) {
	.mobileMenu__card__buttons ws-btn.add_new ws-icon {
		display: none;
	}
	.mobileMenu__pages__item .in {
		font: var(--font-ui-14-regular-med);
	}
}


.mobileMenu__tabsBar {
	gap: 12px;
	padding-bottom: 2px;
}
.mobileMenu__tabsBar__btn {
	width: calc((100% - 12px) / 2);
	ws-btn {
		width: 100%;
	}
	.btn {
		border-radius: 16px;
		span:not([class]) {
			padding: 0 6px;
			margin-right: -4px;
			color: var(--base-txt-primary);
			font: var(--font-ui-12-mini-reg);
		}
		ws-icon.btn-right-icon {
			--icon-size: 16px;
			width: 20px;
			height: 20px;
			svg {
				fill: var(--base-txt-primary);
			}
		}
		ws-icon[name="arrows/guillemet-right"] {
			transform: rotate(-90deg);
		}
	}
}
.mobileMenu__tabsBar__tabs {
	.mobileMenu__bar__item {
		flex: 1 0 50%;
	}
}

#onboardingMobileHand {
	position: fixed;
	bottom: 130px;
	right: 16px;
	z-index: 1050;
	a {
		width: 40px;
		height: 40px;
		border-radius: 20px;
		box-sizing: border-box;
		justify-content: center;
		align-items: center;
		box-shadow: var(--shadow-cont-major-outline);
	}
}