/*=========================================================================================================
	Styles specific to the wizard feature. Selectors defined in this file must start either with class
	body.duringWizard for when an element to style lies outside of the wizard section, or #wizardSection,
	or .wizard, when an element to style lies within the wizard section.
  =========================================================================================================*/

/* Variables for those style properties that are most likely to vary by client. */
:root {
	/* Use prefix "--wizard" to avoid conflict with main stylesheet vars. */
	--wizard-color-background: #FFFFFF;
	--wizard-color-sectionMap-unvisited-background: #999999;
	--wizard-color-sectionMap-unvisited-icon: #FFFFFF;
	--wizard-color-sectionMap-unvisited-text: #FFFFFF;
	--wizard-color-sectionMap-visited-background: #333333;
	--wizard-color-sectionMap-visited-icon: #FFFFFF;
	--wizard-color-sectionMap-visited-text: #FFFFFF;
	--wizard-color-sectionMap-current-background: #C44345;
	--wizard-color-sectionMap-current-icon: #FFFFFF;
	--wizard-color-sectionMap-current-text: #FFFFFF;
	--wizard-color-sectionMap-spacer: #FFFFFF;
	--wizard-color-summary-background: #666666;
	--wizard-color-summary-header: #FFFFFF;
	--wizard-color-summary-headerMini: #FFFFFF;
	--wizard-color-summary-text: #FFFFFF;
	--wizard-color-summary-label-background: #FFFFFF;
	--wizard-color-summary-label-text: #333333;
	--wizard-color-slide-prompt: #28A745;
	--wizard-color-slide-keyInfo: #28A745;
	--wizard-color-slide-warning: #DC3545;
	--wizard-color-selectedAnswer-checkmark: #28A745;
	--wizard-color-selectedAnswer-border: #6EB77C;
	--wizard-color-selectedAnswer-background: #6EB77C;
	--wizard-color-selectedAnswer-text: #FFFFFF;
	--wizard-color-selectedAnswer-icon: #6EB77C;
	--wizard-color-answer-border: #DDDDDD;
	--wizard-color-answer-background: #FFFFFF;
	--wizard-color-answer-text: #333333;
	--wizard-color-answer-hover-border: #D2D2D2;
	--wizard-color-answer-hover-background: #D2D2D2;
	--wizard-color-answer-hover-text: #000000;
	--wizard-color-answer-icon: #BBBBBB;
	--wizard-color-answer-icon-background: #FFFFFF;
	--wizard-color-answer-icon-hover: #AAAAAA;
	--wizard-color-answer-icon-hover-background: #F2F2F2;
}

/* Override certain page-wide styles during wizard; e.g. more compact representation of page header & footer. */
@media screen {

	body.duringWizard {
	}

	body.duringWizard #pageHeader {
	}

	body.duringWizard #pageHeader #logoAndToolName {
	}

	body.duringWizard #pageHeader #topMenu {
	}

	body.duringWizard #pageFooter {
	}
}

/*=========================================================================================================
	Styles for .wizard (#wizardSection)
  =========================================================================================================*/

.wizard {
	background-color: var(--wizard-color-background);
}

.wizard .hiddenNotApplicable, .wizard .hiddenBySlideId, .wizard .hiddenBySectionId {
	display: none !important;
}

.wizard .showWhenModelingModeIsDetailed,
.wizard .showWhenModelingModeIsSimplified {
	display: none;
}

body.modelingModeIsDetailed .wizard .showWhenModelingModeIsDetailed,
body.modelingModeIsSimplified .wizard .showWhenModelingModeIsSimplified {
	display: block;
}

.wizard .configWarningsRow {
	margin: 0;
	padding: 0;
}

.wizard .configWarningsDiv {
	margin: 0.5rem 0;
	padding: 0.25rem 0.5rem;
}

/* ----- The section map just below the page header. The section map has icons, and titles. ----- */

.wizard .sectionMapRow {
	padding: 0;
	margin: 0;
}

.wizard .sectionMapTable {
	margin: 0 auto;
	padding: 0;
}

.wizard .sectionMapTable tr td {
	text-align: center;
	vertical-align: middle;
	padding: 0;
	margin: 0;
	overflow: hidden;
	height: 30px;
	max-height: 30px;
	background-clip: padding-box;
}

/* The section map's first row containing the icons. */

.wizard .sectionMapTable tr.icons td.divider,
.wizard .sectionMapTable tr.icons td.spacer {
	width: 25px;
	min-width: 25px;
	position: relative;
}

.wizard .sectionMapTable.chevronsDisabled tr.icons td:not(.sectionFinalResults).spacer {
	/* Use simple right border when chevrons disabled (includes when IE11 is detected) */
	border-right: solid 2px var(--wizard-color-sectionMap-spacer);
}

.wizard .sectionMapTable tr.icons td.divider canvas.chevron {
	display: none;
}

.wizard .sectionMapTable tr.icons td.divider.unvisited:not(.previousIsCurrent):not(.previousIsVisited) canvas.chevron.unvisited {
	display: block;
}

.wizard .sectionMapTable tr.icons td.divider.visited:not(.previousIsCurrent) canvas.chevron.visited,
.wizard .sectionMapTable tr.icons td.divider.current.previousIsVisited canvas.chevron.visited {
	display: block;
}

.wizard .sectionMapTable tr.icons td.divider.previousIsCurrent canvas.chevron.current {
	display: block;
}

.wizard .sectionMapTable tr.icons td {
	background-color: var(--wizard-color-sectionMap-unvisited-background);
	color: var(--wizard-color-sectionMap-unvisited-icon);
}

.wizard .sectionMapTable tr.icons td canvas {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}

.wizard .sectionMapTable tr.icons td.icon {
	padding-bottom: 0.375rem;
}

.wizard .sectionMapTable tr.icons td.icon {
	padding: 0.875rem 0 0.375rem 0;
	vertical-align: bottom;
}

.wizard .sectionMapTable tr.icons td.icon .fa,
.wizard .sectionMapTable tr.icons td.icon .fal,
.wizard .sectionMapTable tr.icons td.icon .far,
.wizard .sectionMapTable tr.icons td.icon .fas {
	font-size: 3rem;
}

.wizard .sectionMapTable tr.icons td {
	padding: 0;
}

/* The section map's second row, containing the titles. */

.wizard .sectionMapTable tr.titles td {
	background-color: var(--wizard-color-sectionMap-unvisited-background);
	color: var(--wizard-color-sectionMap-unvisited-text);
}

.wizard .sectionMapTable tr.titles td.title {
	padding: 0.125rem 0.25rem 0.5rem 0.25rem;
	font-size: 0.9375rem;
	line-height: 1rem;
	vertical-align: top;
	text-align: center;
	width: 12.5%;
}

.wizard .sectionMapTable tr.icons td.visited,
.wizard .sectionMapTable tr.titles td.visited {
	background-color: var(--wizard-color-sectionMap-visited-background);
	color: var(--wizard-color-sectionMap-visited-text);
}

.wizard .sectionMapTable tr.icons td.visited {
	color: var(--wizard-color-sectionMap-visited-icon);
}

.wizard .sectionMapTable tr.icons td.current,
.wizard .sectionMapTable tr.titles td.current {
	background-color: var(--wizard-color-sectionMap-current-background);
	color: var(--wizard-color-sectionMap-current-text);
}

.wizard .sectionMapTable tr.icons td.current {
	color: var(--wizard-color-sectionMap-current-icon);
}

/* ----- The slide area below the section map. Contains the potential summary panel, the slides, and the bottom buttons. ----- */

.wizard .mainRow {
	margin: 0;
	padding: 0;
}

.wizard .mainRow .previousArea,
.wizard .mainRow .nextArea {
	display: inline-flex;
	align-items: flex-start;
	border: none;
	padding: 0;
	background: var(--wizard-color-background);
	color: #999999;
	font-size: 2.75rem;
	text-align: center;
	width: 60px;
}

.wizard .mainRow .previousArea .buttonContainer,
.wizard .mainRow .nextArea .buttonContainer {
	line-height: 360px;
	height: 360px;
	text-align: center;
	width: 60px;
}

.wizard .mainRow .previousArea:not(.disabled):focus,
.wizard .mainRow .nextArea:not(.disabled):focus {
	outline: dotted 2px #CCCCCC;
}

.wizard .mainRow .previousArea.disabled:focus,
.wizard .mainRow .nextArea.disabled:focus {
	outline: none;
}

.wizard .mainRow .previousArea:not(.disabled):hover,
.wizard .mainRow .nextArea:not(.disabled):hover {
	background-color: #EDF1F5;
	color: #0072A3;
	cursor: pointer;
}

.wizard .mainRow .previousArea.disabled {
	opacity: 0;
}

.wizard .mainRow .nextArea.disabled {
	opacity: 0.33;
}

/* Pulse animation for the right area next button, but only on the first slide */
@keyframes shadow-pulse {
	0% { box-shadow: 0 0 0 0 rgba(128, 128, 128, 0.5); }
	100% { box-shadow: 0 0 0 11px rgba(0, 0, 0, 0); }
}

.wizard.slideIntro .mainRow .nextArea.nextButton i {
	border-radius: 50%;
	animation: shadow-pulse 1s infinite;
}

/* Hide the next button right area on the last slide */
.wizard.slideFinalResults .mainRow .nextArea.nextButton i {
	display: none;
}

.wizard .slideArea {
	padding: 0 0 0.75rem 0;
	vertical-align: top;
}

/* ----- The summary that appears floated at top right of many slides. ----- */

.wizard .summary {
	width: 22rem;
	float: right;
	vertical-align: top;
	background-color: var(--wizard-color-summary-background);
	color: var(--wizard-color-summary-text);
	font-size: 0.8125rem;
	line-height: 1.4375rem;
	padding: 0.5rem 0.8125rem;
	margin: 1.875rem 1.25rem 1.25rem 1.25rem;
}

.wizard .summary .col-1, .wizard .summary .col-2, .wizard .summary .col-3, .wizard .summary .col-4, .wizard .summary .col-5,
.wizard .summary .col-6, .wizard .summary .col-7, .wizard .summary .col-8, .wizard .summary .col-9, .wizard .summary .col-10,
.wizard .summary .col-11, .wizard .summary .col-12 {
	white-space: nowrap;
}

.wizard .summary .header, .wizard .summary .mainHeader {
	font-size: 1rem;
	margin-top: 0.5rem;
	margin-bottom: 0.125rem;
	font-weight: bold;
	color: var(--wizard-color-summary-header);
}

.wizard .summary .mainHeader {
	font-size: 1.125rem;
	margin-top: 0;
}

.wizard .summary .headerMini {
	font-size: 0.9375rem;
	margin-top: 0.5rem;
	color: var(--wizard-color-summary-headerMini);
}

.wizard .summary .label {
	color: var(--wizard-color-summary-label-text);
	background-color: var(--wizard-color-summary-label-background);
	padding: 2px 5px 2px 5px;
	border-radius: 2px;
}

.wizard .summary .label.value.unknown {
	opacity: 0.67;
}

/* ----- The slides which appear in the slide area.  Only one is visible at a time. ----- */

/* First, styles/elements common to many slides. */

.wizard .slide {
	position: relative;
	display: none;
	padding: 1.5rem 1rem 0.75rem 1rem;
	color: var(--color-plain-text);
	font-size: 1.125rem;
}

.wizard .slide.slideVisible {
	display: block;
}

.wizard .slide .small {
	font-size: 0.875rem;
}

.wizard .slide .prompt {
	color: var(--wizard-color-slide-prompt);
	font-weight: bold;
}

.wizard .slide .keyInfo {
	color: var(--wizard-color-slide-keyInfo);
	font-weight: bold;
}

.wizard .slide .warning {
	color: var(--wizard-color-slide-warning);
}

.wizard .slide button[data-toggle="modal"] {
	font-weight: bold;
}

.wizard .slide button .fa, .wizard .slide button .fal, .wizard .slide button .far, .wizard .slide button .fas {
	padding-right: 0.25rem;
}

.wizard .slide select:not(.taxCalcPlanSelect) {
	width: auto;
	min-width: 12rem;
	margin: 0.125rem 0.125rem 1.25rem 0;
}

/* Standard unordered list of answer buttons (stacked vertically) */

.wizard .slide ul.answers {
	color: var(--color-plain-text);
	padding-left: 2rem;
	line-height: 2.75rem;
	list-style-type: none;
	margin: 0.75rem 0 1rem 0;
}

.wizard .slide ul.answers li {
	margin: 0;
	line-height: 2.75rem;
	vertical-align: middle;
}

.wizard .slide ul.answers .btn {
	border: solid 1px var(--wizard-color-answer-border);
	background-color: var(--wizard-color-answer-background);
	color: var(--wizard-color-answer-text);
}

.wizard .slide ul.answers .btn:hover {
	border: solid 1px var(--wizard-color-answer-hover-border);
	background-color: var(--wizard-color-answer-hover-background);
	color: var(--wizard-color-answer-hover-text);
}

.wizard .slide ul.answers .selectedAnswer .btn {
	border: solid 1px var(--wizard-color-selectedAnswer-border);
	background-color: var(--wizard-color-selectedAnswer-background);
	color: var(--wizard-color-selectedAnswer-text);
}

.wizard .slide ul.answers div.check {
	width: 2.125rem;
	height: 2.5rem;
	float: left;
	display: none;
}

.wizard .slide ul.answers li.selectedAnswer div.check {
	display: block;
}

.wizard .slide ul.answers div.check .fa-check-square {
	color: var(--wizard-color-selectedAnswer-checkmark);
	padding-top: 0.375rem;
	font-size: 2rem;
}

/* Inline list of small answer buttons (with text only) */

.wizard .slide ul.answers.list-inline {
	display: inline;
	padding: 0;
}

.wizard .slide ul.answers.list-inline li {
	display: inline-block;
	padding: 0 0.25rem 0 0;
}

/* Inline list of large answer buttons (large icon with text) */

.wizard .slide ul.answers.list-inline.with-icons {
	margin: 0;
}

.wizard .slide ul.answers.list-inline.with-icons li {
	margin: 1rem 1rem 1.5rem 0;
	padding: 0;
	line-height: initial;
}

.wizard .slide ul.answers.list-inline.with-icons li .btn {
	width: 15rem;
	background-color: var(--wizard-color-answer-icon-background);
	color: var(--wizard-color-answer-icon);
	box-shadow: 0 0 0.25rem 0.25rem rgba(160, 160, 160, 0.1);
	padding: 0;
	margin: 0;
}

.wizard .slide ul.answers.list-inline.with-icons li .btn:hover {
	background-color: var(--wizard-color-answer-icon-hover-background);
	color: var(--wizard-color-answer-icon-hover);
	box-shadow: 0 0 0.25rem 0.25rem rgba(0, 0, 0, 0.2);
}

.wizard .slide ul.answers.list-inline.with-icons li.selectedAnswer .btn {
	background-color: var(--wizard-color-answer-icon-background);
	color: var(--wizard-color-selectedAnswer-icon);
	box-shadow: 0 0 0.25rem 0.25rem rgba(0, 0, 0, 0.2);
	border: solid 1px #CCCCCC;
}

.wizard .slide ul.answers.list-inline.with-icons li .btn .fa,
.wizard .slide ul.answers.list-inline.with-icons li .btn .fal,
.wizard .slide ul.answers.list-inline.with-icons li .btn .far,
.wizard .slide ul.answers.list-inline.with-icons li .btn .fas {
	font-size: 7rem;
	padding: 1.5rem 1rem;
}

.wizard .slide ul.answers.list-inline.with-icons li .btn div {
	height: 3.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.125rem;
	line-height: 1.25rem;
	margin: 0 0.5rem 0.5rem 0.5rem;
	padding: 0.5rem;
	background-color: var(--wizard-color-answer-icon);
	color: var(--wizard-color-answer-icon-background);
	font-weight: bold;
}

.wizard .slide ul.answers.list-inline.with-icons li .btn:hover div {
	background-color: var(--wizard-color-answer-icon-hover);
	color: var(--wizard-color-answer-icon-hover-background);
}

.wizard .slide ul.answers.list-inline.with-icons li.selectedAnswer .btn div {
	background-color: var(--wizard-color-selectedAnswer-icon);
	color: var(--wizard-color-answer-icon-background);
}

.wizard .slideSavings .savingsAccountSliderRow .slider,
.wizard .slideSavings .carryoverSliderRow .slider {
	width: 60%;
}

.wizard .slide .checkboxCell {
	vertical-align: middle;
}

.wizard .slide .answerRequired {
	color: var(--wizard-color-slide-warning);
}

/* Specific customizations for individual slides and slide elements. */

/* --- slideIntro --- */

.wizard .slide.slideIntro p {
	font-size: 1.25rem;
	line-height: 1.5rem;
	margin-bottom: 1.25rem;
}

/* --- slideStatus --- */

.wizard .slideStatus .answers button {
	min-width: 10rem;
}

/* --- slideSpouse --- */

.wizard .slideSpouse .answers button {
	min-width: 5rem;
}

/* --- slideChildren --- */

.wizard .slideChildren .answers button {
	min-width: 12rem;
}

/* --- slideUtilization --- */

#wizardSection.slideUtilization .summary {
	margin-bottom: 9rem; /* so that the rows of buttons don't wrap weird when there are a lot of individuals */
}

.wizard .slideUtilization h1 {
	font-size: 1.75rem; /* so the title doesn't wrap to the next line */
}

.wizard .slideUtilization .utilizationAnswers {
	padding: 0.125rem 0 0.125rem 0;
}

.wizard .slideUtilization ul.answers li {
	line-height: inherit;
}

.wizard .slideUtilization .utilizationAnswers :not(.header):not(personLabel) .col-md-2,
.wizard .slideUtilization .utilizationAnswers :not(.header):not(personLabel) .col-md-4,
.wizard .slideUtilization .utilizationAnswers :not(.header):not(personLabel) .col-md-6 {
	min-height: 2.125rem;
	line-height: 2.125rem;
}

.wizard .slideUtilization .utilizationAnswers .col-md-4 span,
.wizard .slideUtilization .utilizationAnswers .col-md-6 span {
	font-size: 0.875rem;
}

.wizard .slideUtilization .answers .btn {
	font-size: 0.9375rem;
	margin: 0;
	padding: 0.25rem 0.75rem;
}

.wizard .slideUtilization .utilizationAnswers .header {
	padding-bottom: 0.125rem;
}

.wizard .slideUtilization .utilizationAnswers .header .usageCategory {
}

.wizard .slideUtilization .utilizationAnswers .header button {
	font-size: 1rem;
}

.wizard .slideUtilization .utilizationAnswers select {
	min-width: 6rem;
	font-size: 0.9375rem;
	margin: 0 0.25rem 0.125rem 0.25rem;
}

.wizard .slideUtilization .individual .personLabel,
.wizard .slideUtilization .individual .categoryLabel {
	font-size: 1rem;
	padding-top: 0.75rem;
}

/* --- slideInitialResults --- */

.wizard .slideInitialResults .resultsTable {
	margin-top: 0.25rem;
}

.wizard .slideInitialResults .simpleFeedback {
	display: none;
}

.wizard .slideInitialResults button.planProvisionsButton,
.wizard .slideInitialResults div.mainResultsTableDivCopy button {
	font-weight: normal;
}

.wizard .slideInitialResults .planRecommendationResult,
.wizard .slideInitialResults .planRecommendationResultNone {
	display: none;
}

/* --- slideSavings --- */

.wizard .slideSavings .sliderMaximumNote {
	white-space: nowrap;
	margin-top: 0.75rem;
}

.wizard .slideSavings .savingsAccountSliderRow,
.wizard .slideSavings .carryoverSliderRow {
	width: 100%;
}

.wizard .slideSavings tr.over55Row td {
	padding: 0.5rem 0.375rem 0 0;
	font-size: 1rem;
}

.wizard .slideSavings tr.applyFundsToCostOfCareRow td {
	padding: 0.625rem 0.5rem 0 0;
}

.wizard .slideSavings select.applyFundsToCostOfCareDropdown {
	display: inline-block;
	margin: 0.25rem 0 0 0;
}

/* --- slideFinalResults --- */

.wizard .slideFinalResults .resultTips {
	font-size: 0.875rem;
	padding: 0.5rem 0.75rem 0.25rem 0.75rem;
	margin-top: 0.25rem;
}

.wizard .slideFinalResults .resultTips p, .wizard .slideFinalResults .resultTips ul {
	margin-bottom: 0.125rem;
}

.wizard .slideFinalResults .resultTips ul {
	padding-left: 25px;
}

.wizard .slideFinalResults .resultsTable {
	margin-top: 0.25rem;
}

.wizard .mpceChart,
.wizard .mpceChartNoEmployeeFunding {
	padding-top: 0.5rem;
	height: 510px;
}

.wizard .slideFinalResults h2 {
	font-size: 1.375rem;
}

.wizard .slideFinalResults button.planProvisionsButton,
.wizard .slideFinalResults div.mainResultsTableDivCopy button {
	font-weight: normal;
}

/* ----- The buttons that appear below each slide. ----- */

.wizard .buttonsBelowSlide {
	text-align: right;
	padding: 0 1rem 0.75rem 0;
	vertical-align: middle;
	position: absolute;
	bottom: 0;
	right: 1.25rem;
	display: none; /* buttonsBelowSlide only used for narrower screens (see further below) */
}

.wizard .buttonsBelowSlide .previousButton,
.wizard .buttonsBelowSlide .nextButton,
.wizard .buttonsBelowSlide .finalFullToolButton {
	min-width: 8rem;
	margin: 0.25rem 0 0.5rem 0.25rem;
	padding: 0.25rem 0;
}

.wizard .buttonsBelowSlide .nextButton.disabled {
	pointer-events: initial; /* Overrides Bootstrap; we want to display a message if disabled "Next" is clicked. */
}

.wizard .buttonsBelowSlide .previousButton.disabled {
	display: none;
}

/*=========================================================================================================
	Responsive adjustments for specific mobile screen resolutions (tablets, phones, etc.)
  =========================================================================================================*/

@media screen and (max-width: 1200px) {

	.wizard .summary {
		padding: 0.375rem 0.75rem;
		margin: 1.5rem 1rem 0.75rem 1rem;
	}

	.wizard .slide ul.answers.list-inline.with-icons li .btn {
		width: 12rem;
	}

	.wizard .slide ul.answers.list-inline.with-icons li .btn .fa,
	.wizard .slide ul.answers.list-inline.with-icons li .btn .fal,
	.wizard .slide ul.answers.list-inline.with-icons li .btn .far,
	.wizard .slide ul.answers.list-inline.with-icons li .btn .fas {
		font-size: 6rem;
		padding: 1rem 0.5rem;
	}

	.wizard .slideUtilization .individual .personLabel,
	.wizard .slideUtilization .individual .categoryLabel {
		font-size: 0.875rem;
		padding: 0.75rem 0.25rem 0 0.75rem;
	}

	.wizard .slideUtilization .answers .btn {
		font-size: 0.875rem;
		padding: 0.1875rem 0.375rem;
	}
}

@media screen and (max-width: 1024px) {
	.wizard .slide {
		padding-top: 1.5rem;
	}

	.wizard .summary {
		width: 18rem;
		font-size: 0.75rem;
		line-height: 1.25rem;
		padding: 0.375rem 0.5rem;
		margin: 1.5rem 0.75rem 0.75rem 0.75rem;
	}

	.wizard .summary .headerMini {
		font-size: 0.8125rem;
	}

	.wizard .slideUtilization .individual .personLabel {
		font-size: 0.8125rem;
		padding-top: 0.75rem;
	}
}

@media screen and (max-width: 1023px) {

	.wizard .sectionMapTable tr.icons td.divider,
	.wizard .sectionMapTable tr.icons td.spacer {
		width: 12px;
		min-width: 12px;
		position: relative;
	}

	/* At 1023px and narrower, the previous and next areas at left and right disappear, and the bottom buttons appear. */

	.wizard .mainRow .previousArea, .wizard .mainRow .nextArea {
		display: none;
	}

	.wizard .buttonsBelowSlide {
		display: block;
	}

	.wizard .slideArea {
		padding-bottom: 3rem; /* Prevent previous/next buttons at bottom from overlapping with slide content */
	}

	.wizard .slide {
		/* More padding now that left and right areas are hidden */
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

@media screen and (max-width: 991px) {

	.wizard .slide ul.answers.list-inline.with-icons li .btn {
		width: 9rem;
	}

	.wizard .slide ul.answers.list-inline.with-icons li .btn .fa,
	.wizard .slide ul.answers.list-inline.with-icons li .btn .fal,
	.wizard .slide ul.answers.list-inline.with-icons li .btn .far,
	.wizard .slide ul.answers.list-inline.with-icons li .btn .fas {
		font-size: 4rem;
		padding: 1rem 0.5rem;
	}

	.wizard .slide ul.answers.list-inline.with-icons li .btn div {
		font-size: 1rem;
		line-height: 1rem;
		padding: 0.375rem;
	}

	.wizard .slideUtilization .utilizationAnswers .col-md-2,
	.wizard .slideUtilization .utilizationAnswers .col-md-4,
	.wizard .slideUtilization .utilizationAnswers .col-md-6 {
		line-height: inherit;
		min-height: inherit;
	}

	.wizard .slide.slideUtilization ul.answers {
		line-height: 2rem;
	}

	.wizard .slideUtilization .answers .btn {
		font-size: 0.875rem;
		padding: 0.1875rem 0.3125rem;
	}
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	.wizard .sectionMapTable tr.icons td.sectionIntro.divider {
		width: auto;
	}

	.wizard .slide {
		padding: 1.25rem 1.5rem 1.25rem 1.5rem;
	}

	.wizard .slide h1 {
		font-size: 1.75rem;
		line-height: 1.75rem;
		margin: 0.5rem 0;
	}
}

@media screen and (max-width: 767px) {

	/* At 767px or narrower, the icons in the section map disappear, but the titles remain. */

	.wizard .sectionMapTable tr.icons {
		display: none !important;
	}

	.wizard .sectionMapTable tr.titles td.title {
		vertical-align: middle;
		padding: 0.5rem 0.375rem 0.375rem 0.375rem;
		font-size: 0.8125rem;
	}

	.wizard .slideArea {
		width: 100%;
		float: inherit;
		vertical-align: inherit;
		line-height: inherit;
		padding-bottom: 0;
	}

	/* At 767px or narrower, the summary disappears. Only slide content remains. */
	.wizard .summary {
		display: none;
	}

	.wizard .slide {
		padding: 1rem 1rem 0.75rem 1rem;
	}

	.wizard .slide ul.answers {
		padding-left: 1.25rem;
	}

	.wizard .slideInitialResults .resultsTable {
		margin-bottom: 0.5rem;
	}

	.wizard .slideSavings select {
		display: block;
	}

	.wizard .slideUtilization .individual .personLabel {
		text-decoration: underline;
		font-weight: bold;
	}

	.wizard .buttonsBelowSlide {
		position: unset;
	}
}

@media screen and (max-width: 479px) {

	body.duringWizard #pageHeader #topMenu {
		border-bottom: solid 2px #DDDDDD;
	}

	/* At 479px or narrower, the entire section map disappears */
	.wizard .sectionMapRow {
		display: none;
	}

	.wizard .slide h1 {
		font-size: 1.625rem;
		line-height: 1.625rem;
	}

	.wizard .slide h2 {
		font-size: 1.1875rem;
		line-height: 1.3125rem;
	}

	.wizard .slide ul.answers.list-inline.with-icons li .btn {
		width: 8.5rem;
	}

	.wizard .slide ul.answers.list-inline.with-icons li .btn .fa,
	.wizard .slide ul.answers.list-inline.with-icons li .btn .fal,
	.wizard .slide ul.answers.list-inline.with-icons li .btn .far,
	.wizard .slide ul.answers.list-inline.with-icons li .btn .fas {
		font-size: 3rem;
		padding: 0.75rem 0.25rem;
	}

	.wizard .slide ul.answers.list-inline.with-icons li .btn div {
		font-size: 0.9375rem;
		font-weight: normal;
		line-height: 1rem;
		padding: 0.25rem;
	}

	.wizard .slideUtilization .answers .btn {
		padding: 0.25rem 0.625rem;
	}

	.wizard .slideUtilization .individual .personLabel,
	.wizard .slideUtilization .individual .categoryLabel {
		padding: 0.75rem 0.1875rem 0 0.75rem;
	}

	.wizard .slideSavings .savingsAccountSliderRow .slider,
	.wizard .slideSavings .carryoverSliderRow .slider {
		width: 58%;
	}

	.wizard .slideSavings .sliderMaximumNote {
		display: none;
	}

	.wizard .coverageLevelHeading {
		font-size: 1rem;
	}
}

@media screen and (max-width: 360px) {

	.wizard .slideUtilization .utilizationAnswers .col-4,
	.wizard .slideUtilization .utilizationAnswers .col-8 {
		margin-bottom: 0.375rem;
	}

	.wizard .slideUtilization .answers .btn {
		font-size: 0.8125rem;
		padding: 0.375rem 0.5rem 0.4375rem 0.5rem;
	}
}

@media screen and (max-height: 599px) {
	/* At under 600px high, the section map icons and summary disappear, if they hadn't already due to insufficient width */

	.wizard .sectionMapTable tr.icons {
		display: none !important;
	}

	.wizard .sectionMapTable tr.titles td.title {
		vertical-align: middle;
		padding: 0.5rem 0.375rem 0.375rem 0.375rem;
		font-size: 0.875rem;
	}

	.wizard .summary {
		display: none;
	}
}

@media screen and (min-width: 768px) and (min-height: 320px) { .wizard .mainRow, .wizard .slideArea { min-height: 82px; } }
@media screen and (min-width: 768px) and (min-height: 370px) { .wizard .mainRow, .wizard .slideArea { min-height: 94px; } }
@media screen and (min-width: 768px) and (min-height: 460px) { .wizard .mainRow, .wizard .slideArea { min-height: 188px; } }
@media screen and (min-width: 768px) and (min-height: 480px) { .wizard .mainRow, .wizard .slideArea { min-height: 200px; } }
@media screen and (min-width: 768px) and (min-height: 559px) { .wizard .mainRow, .wizard .slideArea { min-height: 287px; } }
@media screen and (min-width: 768px) and (min-height: 568px) { .wizard .mainRow, .wizard .slideArea { min-height: 290px; } }
@media screen and (min-width: 768px) and (min-height: 628px) { .wizard .mainRow, .wizard .slideArea { min-height: 355px; } }
@media screen and (min-width: 768px) and (min-height: 660px) { .wizard .mainRow, .wizard .slideArea { min-height: 382px; } }
@media screen and (min-width: 768px) and (min-height: 672px) { .wizard .mainRow, .wizard .slideArea { min-height: 396px; } }
@media screen and (min-width: 768px) and (min-height: 720px) { .wizard .mainRow, .wizard .slideArea { min-height: 464px; } }
@media screen and (min-width: 768px) and (min-height: 768px) { .wizard .mainRow, .wizard .slideArea { min-height: 512px; } }
@media screen and (min-width: 768px) and (min-height: 800px) { .wizard .mainRow, .wizard .slideArea { min-height: 544px; } }
@media screen and (min-width: 768px) and (min-height: 916px) { .wizard .mainRow, .wizard .slideArea { min-height: 644px; } }
@media screen and (min-width: 768px) and (min-height: 928px) { .wizard .mainRow, .wizard .slideArea { min-height: 650px; } }