.enneagram-test-results {
    overflow: hidden;
}

.enneagram-graph {
	display: inline-block;
	width: 40%;
	height: 350px;
	padding: 0 4%;
	vertical-align: top;
}

.enneagram-graph-small {
	display: inline-block;
	width: 20%;
	min-width: 150px;
	padding: 0 4%;
	vertical-align: top;
}

.enneagram-graph-large {
	display: inline-block;
	width: 59%;
	padding: 0 4%;
	vertical-align: top;
}

.enneagram-score-percentage {
	height: 120px;
}

/* Override default border to show the right border */
#enneagram-score-percentage table,
#enneagram-score-percentage th,
#enneagram-score-percentage td {
	border: 1px solid white;
}

/**
 * Percentage table, in the twig template of the e-mail this is inline styled!
 * So if you change the css of the table, you also have to change it in the twig template (e-mail-score-table.html.twig)
 */

.enneagram-table {
	width: 30%;
	float: left;
}

.enneagram-table th,
.enneagram-table td {
	border: 1px solid white;
	padding: 10px 5px;
	text-align: center;
	font-weight: normal;
	line-height: 1.3em;
}

.enneagram-region-stomach {
	background-color: #fae9ea;
}

.enneagram-region-heart {
	background-color: #e6f3ed;
}

.enneagram-region-head {
	background-color: #e9f1f7;
}

.enneagram-region-stomach tfoot,
.enneagram-region-stomach .selected {
	background-color: #ca2026;
	color: #fff;
}

.enneagram-region-heart tfoot,
.enneagram-region-heart .selected {
	background-color: #008944;
	color: #fff;
}

.enneagram-region-head tfoot,
.enneagram-region-head .selected {
	background-color: #1a75b0;
	color: #fff;
}

/**
 * On the relation card
 */

.mod-relation #enneagram {
	min-width: 700px;
}