.m5-roll {
	.roll-title {
		text-align: center;
		vertical-align: middle;
		padding: 0.3rem 0 0.1rem 0;
		font-weight: bold;
		font-size: 1.3rem;
	}

	.roll-spell-details {
		text-align: right;
		padding-right: 1rem;
		font-weight: bold;
	}

	.roll-result {
		text-align: right;
		padding-right: 1rem;
		font-weight: bold;

		display: flex;
		flex-direction: row;

		.roll-total {
			width: 100%;
		}

		.roll-detail {
			width: 100%;
			margin-left: -100%;
		}
	}

	.roll-row:not( :hover ) {
		.roll-total {
			visibility: visible;
		}
		.roll-detail {
			visibility: hidden;
		}
	}

	.roll-row:hover {
		.roll-total {
			visibility: hidden;
		}
		.roll-detail {
			visibility: visible;
		}
	}

	.roll-ew-result-fumble {
		background-color: rgb(202, 54, 54, 0.5);
		color: rgb(255, 255, 255);
	}

	.roll-ew-result-critical {
		background-color: rgb(202, 197, 54, 0.5);
		color: rgb(0, 0, 0);
	}

	.roll-ew-result-high {
		background-color: rgb(54, 138, 202, 0.5);
		color: rgb(255, 255, 255);
	}

	.roll-ew-result-fail {
		background-color: rgb(117, 63, 131, 0.5);
		color: rgb(255, 255, 255);
	}

	.roll-ew-result-pass {
		background-color: rgb(54, 202, 88, 0.5);
		color: rgb(0, 0, 0);
	}
}