.checkpoint {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 8px 8px 0 0;
	line-height: 0;
	font-size: 40px;
	color: var(--text-color);
	text-align: left;
	opacity: 0.9;
	clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
	background-color: var(--surface-color);
}

.checkpoint > div {
	margin: 0 0 6px 6px;
	padding: 0 16px 0 16px;
	clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
	background-color: var(--surface-tertiary-color);
}

.checkpoint > div > span > span {
	display: inline-block;
	width: 0.5em;
	text-align: center;
}