.ample {
	margin-left: 0.3em;
	margin-top: 0.4em;
	border: 1px solid #a9a9a9;
	border-radius: .25em;
	display: inline-block;
}

.ample-red {}

.ample-yellow {}

.ample-green {}

.ample .light {
	margin: 0.4em;
	border: 1px solid #a9a9a9;
	border-radius: 50%;
	width: 1.5em;
	height: 1.5em;
}

.single-light {
	border: 1px solid #a9a9a9;
	border-radius: 50%;
	width: 1em;
	height: 1em;
}

.ample-red .light-red, .single-light.light-red {
	background-color: red;
}

.ample-yellow .light-yellow, .single-light.light-yellow {
	background-color: yellow;
}

.ample-green .light-green, .single-light.light-green {
	background-color: green;
}

.dots-fill {
	overflow: hidden;
	white-space: nowrap;
}

.dots-fill .dots-after:after {
	color: lightgray;
	content: " ..........................................................................................................................................................................................................................................................................................................................................................................................................";
}