Module:Progression rainbow/styles.css

.progression-rainbow {
	border: 1px solid grey;
	height: 10px;
	width: 100%;
	border-spacing: 1px;
    border-collapse: separate;
}

.progression-rainbow tr td {
	height: 4px;
}

.progression-rainbow tr .remaining {
	background: #E2E2E2;
}

/* hide the text provided for blind people
https://webaim.org/techniques/css/invisiblecontent/
don't have access to clip. too new? open to abuse?
*/
.progression-rainbow span {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media all and (max-width: 800px) {
	.progression-rainbow tr td {
		display: block;
	}
}