.menu {
	z-index: 45;
	position: fixed;
	top: 64px;
	inset-inline-start: 0;
	inset-inline-end: unset;
	width: 280px;
	height: 100%;
	background-color: var(--vvvlight-color);
	border-inline-end: 1px solid var(--vvlight-color);
	overflow: scroll;
	display: block;
	opacity: 1;
}

.menu_overlay {
	display: none;
}

@media (max-width: 600px) {
	.menu {
		inset-inline-start: -290px;
		display: none;
		opacity: 1;
		-webkit-overflow-scrolling: touch;
		will-change: opacity, inset-inline-start;
	}
	
	.menu_open {
		animation-duration: 0.3s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		-webkit-animation-timing-function: ease;
		animation-timing-function: ease;
		animation-name: menu_open_kf;
	} @keyframes menu_open_kf { 
		from { inset-inline-start: -290px; }
		to { inset-inline-start: 0px; } 
	}
	
	.menu_close {
		animation-duration: 0.3s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		-webkit-animation-timing-function: ease;
		animation-timing-function: ease;
		animation-name: menu_close_kf;
	} @keyframes menu_close_kf { 
		from { inset-inline-start: 0px; }
		to { inset-inline-start: -290px; } 
	}
	
	.menu_overlay {
		display: none;
		z-index: 44;
		position: fixed;
		top: 0;
		inset-inline-start: 0;
		width: 100%;
		height: 100%;
		touch-action: none;
		background-color: var(--tp-bg-color);
	}
	
	.menu_overlay_open {
		animation-duration: 0.3s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		-webkit-animation-timing-function: ease;
		animation-timing-function: ease;
		animation-name: menu_overlay_open_kf;
	} @keyframes menu_overlay_open_kf { 
		from { opacity: 0; }
		to { opacity: 1; } 
	}
	
	.menu_overlay_close {
		animation-duration: 0.3s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		-webkit-animation-timing-function: ease;
		animation-timing-function: ease;
		animation-name: menu_overlay_close_kf;
	} @keyframes menu_overlay_close_kf { 
		from { opacity: 1; }
		to { opacity: 0; } 
	}

}
/* swiping */
@media (max-width: 600px) {
	html, body, #app, .app, .container {
		touch-action: pan-y;
	}
	.menu {
		touch-action: pan-y;
		overscroll-behavior: contain;
	}
	.menu_swiping,
	.menu_overlay_swiping {
		animation: none !important;
		transition: none !important;
	}
}
/* swiping */

.menu_item {
	width: 100%;
	height: 24px;
	padding: 20px;
	box-sizing: border-box;
}