#check-in-view-controller * {
	--check-in-header-height: 66px;
	--check-in-diameter: 60px;
	--check-in-padding: 14px;
	--check-in-height: calc(var(--check-in-diameter) + (var(--check-in-padding) * 2));
}

#check-in-view-controller h1 {
	color: #242424;
}

#check-in-view-controller card-collection-view {
	position: absolute;
	top: var(--check-in-header-height);
	left: 0;
	right: 0;
	bottom: var(--check-in-height);
	overflow-y: auto;
}

#check-in-view-controller .check-in-container {
	position: absolute;
	width: 100%;
	height: var(--check-in-height);
	left: 0;
	bottom: 0;
	z-index: 10000;
}

#check-in-view-controller .check-in-container .no-card-label {
	text-align: center;
	height: 100%;
}

#check-in-view-controller .check-in-container .no-card-label * {
	vertical-align: middle;
}

#check-in-view-controller .check-in-container check-in-view {
	display: block;
	height: 100%;
}

#check-in-view-controller .check-in-container .check-in-bar {
	height: calc(100% - var(--check-in-padding));
	border-radius: 100vw;
	border: 0.1em solid rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	margin: 0.5em;
	padding-left: 0.5em;
	padding-right: 0.5em;
}

#check-in-view-controller .check-in-container .check-in-slider {
	margin: 0;
	padding: 0;
	height: 100%;
	border: none;
	background-color: unset;
	appearance: none;
	width: 100%;
}

#check-in-view-controller .check-in-container .check-in-slider::-webkit-slider-thumb {
	appearance: none;
	width: var(--check-in-diameter);
	height: var(--check-in-diameter);
	background-color: var(--design-color);
	border-radius: 100%;
	font-size: 3em;
	box-shadow: var(--input-shadow), -1px -1px 2px white;
}

/* Keep in sync with above! */
#check-in-view-controller .check-in-container .check-in-slider::-moz-range-thumb {

}