.toppopup {
	z-index: 100;
	display: none;
	opacity: 0;
	position: fixed;
	top: -101%;
	inset-inline-start: 0;
	width: 100%;
	height: 100%;
	background-color: var(--bg-color);
	border-inline-start: 1px solid var(--vvlight-color);
	box-sizing: border-box;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	will-change: top, opacity;
}

.toppopup_open {
	animation-duration: 0.3s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease;
	animation-name: toppopup_open_kf;
} @keyframes toppopup_open_kf { 
	from { top: -101%; opacity: 0; }
	to { top: 0; opacity: 1; } 
}

.toppopup_close {
	animation-duration: 0.3s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease;
	animation-name: toppopup_close_kf;
} @keyframes toppopup_close_kf { 
	from { top: 0; opacity: 1; }
	to { top: -101%; opacity: 0; } 
}

.toppopup_header {
	position: sticky;
	z-index: 1;
	top: 0;
	display: flex;
	width: 100%;
	border-bottom: 1px solid var(--vvlight-color);
	background-color: var(--bg-color);
}

.toppopup_close_btn {
	width: 24px;
	height: 24px;
	padding: 20px;
	cursor: pointer;
}

.toppopup_title {
	flex: 1;
	height: 24px;
	padding-top: 17px;
	padding-bottom: 20px;
	font-size: 1.3em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.toppopup_submit_btn {
	display: none;
	width: 24px;
	height: 24px;
	padding: 20px;
	cursor: pointer;
}