.dfrt-progress {
	--dfrt-box-bg: #f7f7f7;
	--dfrt-border: #e5e5e5;
	--dfrt-text: #222;
	--dfrt-track: #e2e2e2;
	--dfrt-fill: #f0a500;
	--dfrt-complete: #2e9e5b;
	--dfrt-marker: #fff;
	--dfrt-marker-txt: #555;
	--dfrt-height: 10px;
	--dfrt-radius: 999px;

	box-sizing: border-box;
	background: var(--dfrt-box-bg);
	border: 1px solid var(--dfrt-border);
	color: var(--dfrt-text);
	border-radius: 8px;
	padding: 14px 16px 12px;
	margin: 0 0 1.25em;
	font-size: 15px;
	line-height: 1.4;
	transition: opacity .2s;
}
.dfrt-progress.is-hidden { display: none; }
.dfrt-progress.is-loading { opacity: .6; }
.dfrt-progress *, .dfrt-progress *::before, .dfrt-progress *::after { box-sizing: border-box; }

.dfrt-progress__msg { margin-bottom: 10px; }

.dfrt-progress__bar {
	position: relative;
	height: var(--dfrt-height);
	background: var(--dfrt-track);
	border-radius: var(--dfrt-radius);
	margin: 0 0 34px;
}
.dfrt-progress__fill {
	position: absolute;
	inset: 0 auto 0 0;
	height: 100%;
	background: var(--dfrt-fill);
	border-radius: var(--dfrt-radius);
	transition: width .5s ease, background-color .3s;
	max-width: 100%;
}
.dfrt-progress.is-free .dfrt-progress__fill { background: var(--dfrt-complete); }

.dfrt-progress__marker {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	pointer-events: none;
}
.dfrt-progress__dot {
	width: calc(var(--dfrt-height) + 8px);
	height: calc(var(--dfrt-height) + 8px);
	border-radius: 50%;
	background: var(--dfrt-marker);
	border: 3px solid var(--dfrt-track);
	transition: border-color .3s;
}
.dfrt-progress__marker.is-reached .dfrt-progress__dot { border-color: var(--dfrt-fill); }
.dfrt-progress.is-free .dfrt-progress__marker.is-reached .dfrt-progress__dot { border-color: var(--dfrt-complete); }
.dfrt-progress__label {
	position: absolute;
	top: calc(100% + 2px);
	white-space: nowrap;
	font-size: 11px;
	line-height: 1.2;
	text-align: center;
	color: var(--dfrt-marker-txt);
	font-weight: 600;
}
.dfrt-progress__label small { display: block; font-weight: 400; font-size: 10px; }
.dfrt-progress__marker:last-child .dfrt-progress__label { right: 0; text-align: right; }

.dfrt-progress__hint { font-size: 13px; opacity: .8; margin-top: -4px; }

@media (prefers-reduced-motion: reduce) {
	.dfrt-progress__fill, .dfrt-progress__dot { transition: none; }
}