.RuleValueVignette {
	margin: 0 1em 0;
	text-align: center;
	width: 25%;
}

.RuleValueVignette li a {
	text-decoration: none;
}
.RuleValueVignette .rule-type {
	color: white;
	border: none;
	font-size: 85%;
	line-height: 2em;
	font-weight: 600;
	margin: .6em 0 .1em;
}

.RuleValueVignette .rule-box {
	padding: .6em 1em;
	color: #333350;
	background: white;
	border-radius: 3px;
	white-space: nowrap;
	height: 6em;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.RuleValueVignette .rule-name {
	font-size: 175%;
	font-weight: 600;
}

.RuleValueVignette p {
	margin: 0;
	padding: 0 0;
	font-size: 120%;
	color: inherit;
	width: 100%;
}
.RuleValueVignette.number p {
	color: #4A89DC;
	font-weight: bold;
}
.RuleValueVignette.unsatisfied p {
	font-style: italic;
}
.RuleValueVignette.irrelevant p {
	font-weight: 600;
}
.RuleValueVignette p .figure {
	font-size: 250%;
}


.RuleValueVignette:not(.unsatisfied):not(.irrelevant) .rule-box {
	border-bottom: .8em solid #4A89DC;
}

.RuleValueVignette:hover .rule-box {
	background: #ddd;
}
.RuleValueVignette.irrelevant .rule-box {
	background: rgba(255, 255, 255, 0.35);
}



.RuleValueVignette.irrelevant .rule-type {
	color: rgba(255, 255, 255, 0.35);
}

.RuleValueVignette.irrelevant .rule-name {
	text-decoration: line-through;
}




@media (max-width: 1280px) {


	.RuleValueVignette .rule-box p {
		padding: 0.6em;
	}

	.RuleValueVignette .rule-name {
		font-size: 150%;
	}
}