.rt-progress {
	position: fixed;
	left: 0;
	right: 0;
	height: 4px;
	background: transparent;
	z-index: 99999;
	pointer-events: none; /* never intercept clicks on the menu/header below it */
}

.rt-progress--top {
	top: 0;
}

.rt-progress--bottom {
	bottom: 0;
}

.rt-progress__fill {
	height: 100%;
	width: 0;
	background: #2563eb;
	transition: width 0.1s linear;
}

/* Circular reading indicator. */
.rt-circle {
	position: fixed;
	z-index: 99998;
	width: 48px;
	height: 48px;
	pointer-events: none;
}

.rt-circle svg {
	display: block;
}

.rt-circle__fill {
	transition: stroke-dashoffset 0.1s linear;
}

.rt-circle__label {
	position: absolute;
	top: 0;
	left: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	color: #374151;
}

.rt-circle--top-left {
	top: 16px;
	left: 16px;
}

.rt-circle--top-right {
	top: 16px;
	right: 16px;
}

.rt-circle--bottom-left {
	bottom: 80px;
	left: 16px;
}

.rt-circle--bottom-right {
	bottom: 80px;
	right: 16px;
}

/* Live "time left" counter pill. */
.rt-timeleft {
	position: fixed;
	z-index: 99998;
	background: #111827;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	padding: 8px 12px;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.2 );
	pointer-events: none;
}

.rt-timeleft--top-left {
	top: 16px;
	left: 16px;
}

.rt-timeleft--top-right {
	top: 16px;
	right: 16px;
}

.rt-timeleft--bottom-left {
	bottom: 80px;
	left: 16px;
}

.rt-timeleft--bottom-right {
	bottom: 80px;
	right: 16px;
}