/**
* @stylesheet review-screen.css Review Screen
* @parent ux.features
*
* The review screen is accessed via the last tab in each block of discrete items. Review screen content changes based on the number of unanswered items in a block.
*
* * When only one item is unanswered, the word “questions” in the second sentence becomes singular (i.e., “question”).
* * When no items are unanswered,
*   * The _warning_ icon changes to a _timer_ icon.
*   * The second sentence and the list of unanswered items are removed.
*
* Use the dropdown menu in the demo below to see how review screen content changes based on the number of unanswered items.
* @iframe ../../demos/review-screen/review-screen.html 650
**/

.item-stem-wrapper.review {
	padding: 2em 0.56em 0 0.56em;
}

.response-area.review {
	align-items: center;
	background: #eee;
	border: 0.05em solid #ddd;
	border-radius: 0.15em;
	display: flex;
	font-weight: bold;
	position: relative;
}

.review-img {
	color: #5a5a5a;
	float: left;
	font-family: 'icons';
	font-size: 4em;
	line-height: 1;
	position: relative;
	speak: none;
}

.review-img:before {
	content: '\e93d';
	position: relative;
	z-index: 1;
}

.review-img:after {
	color: #EECD89;
	content: '\e93c';
	margin-left: -1em;
}

.review-answered .review-img:before {
	content: '\e93b'; }
.review-answered .review-img:after {
	content: '';
}

.item-stem-wrapper.review p,
.response-area.review p {
	display: inline-block;
}

.list-unordered.list-review {
	margin-left: 5.56em;
}

.review-unanswered .stem-paragraph:nth-of-type(2),
.review-answered .stem-paragraph {
	padding-left: 5em;
}

.response-area.review .stem-paragraph {
	padding: 1em;
}

.response-area.review .stem-paragraph:first-of-type {
	padding-bottom: 0;
}

.response-area.review .btn.btn-next-section {
	flex: 0 0 auto;
	margin: 0 1em 0 1.5em;
	width: 9em;
}