/*
==================================
PORTRAIT STYLES
===================================
*/

.resultscontainer {
	width: 100%;
}

.one-result {
	background-color: #eee;
	border: 1px solid black;
	padding: 1em 1em 0 1em;
	margin: 1em 0;
	font-weight: 300;
}

.one-result h2 {
	margin: 0 0 1em 0;
}

.one-result p {
	margin: .5em 0;
}

.portrait-graph tr, .portrait-continua tr {
	background-color: inherit;
}

.portrait-graph, .portrait-continua {
	width: 100%;
}

.portrait-graph td, .portrait-continua td {
	vertical-align: middle;
}

.portrait-graph .label {
	width: 42%;
	text-align: right;
}

.portrait-graph .graph {
	width: 58%;
	vertical-align: middle;
}

.graph-table {
	width: 100%;
}

.graph-table .value {
	background-color: var(--color-purple);
	border-right: 2px solid white;
}

.graph-table .remainder {
	background-color: var(--color-yellow-pale);
}

.continua-positive, .continua-negative {
	width: 35%;
}

.continua-negative {
	text-align: right;
}

.portrait-question {
	padding-right: 50px;
}

.portrait-continua .continua-label {
	width: 28%;
}

.portrait-continua .graph {
	width: 44%;
	vertical-align: middle;
}

.portrait-continua .negative {
	text-align: right;
}