/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/** Styling for the My Account Holistic Journey Entry Tables **/

.hj-tab-title {
	color: #04a2ac;
}

.step-list,
.evaluation-list {
	column-count: 2;
	list-style-type: none;
	padding-left: 0;
}

.evaluation-list {
	column-count: 1;
}

.step-list a:link,
.step-list a:visited,
.evaluation-list a:link,
.evaluation-list a:visited {
	color: #a1d5da;
}

.vip-title-header.separate {
	border: 0;
	color: #04a2ac;
}

.hj-tab-title {
	border-bottom: 5px solid #04a2ac;
	color: #04a2ac;
}

.holistic-journey-entries {
	width: 100%;
	margin-bottom: 30px;
}

.holistic-journey-entries .section-title {
	color: white;
	background-color: #04a2ac;
	text-align: left;
	padding: 2px 15px;
}

.holistic-journey-entries .field-title,
.holistic-journey-entries .field-value {
	text-align: left;
	padding: 2px 15px;
}

.holistic-journey-entries .field-value ul {
	margin: 0;
}

.holistic-journey-entries .consent-desc {
	max-height: 200px;
    overflow: auto;
    margin: 10px 0;
    padding: 20px;
    background-color: #efefef;
    border: 1px solid #aaa;
}

.holistic-journey-entries .checkmark {
	color: green;
	font-size: large;
}

.holistic-journey-entries .xmark {
	color: red;
	font-size: small;
}

.holistic-journey-entries .correct-answer {
	margin: 10px 0 30px;
	padding: 5px 25px;
	font-style: italic;
	font-weight: 500;
	color: white;
	background-color: #04a2ac; /* #a1d5da is the new light blue color */
}

a.step-link {
	float: right;
	font-family: "avenir", sans-serif;
	text-transform: capitalize;
	color: #a1d5da;
}

/* Style the HJ sidebar */

main.holistic-journey-results {
    margin-top: 50px;
    margin-bottom: 100px;
}

main.holistic-journey-results .row  {
	display: grid;
	grid-template-columns: 65% 30%;
	grid-column-gap: 5%;
}

@media (max-width: 992px) {
	main.holistic-journey-results .row {
    	grid-template-columns: 100%;
	}
}