/*=========================================================================================================
	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.
  =========================================================================================================*/

/* 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 #pageFooter {
	}
}

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

.wizard {
	background-color: #FFFFFF;
}

.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 {
	font-size: 14px;
	border-radius: 0;
	margin: 8px 0;
	padding: 4px 8px;
}

.wizard .marginForWatermark {
	margin-right: 240px;
}

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

.wizard .sectionMapRow {
	border-radius: 0;
	padding: 16px 0 0 0;
	margin-left: 26px;
	margin-right: 26px;
}

.wizard .sectionMapTable {
	margin: 0 auto;
}

.wizard .sectionMapTable tr td {
	text-align: center;
	vertical-align: middle;
	padding: 0;
}

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

.wizard .sectionMapTable tr.images td {
	padding: 0 0 6px 0;
	background-color: inherit;
}

.wizard .sectionMapTable tr.images td.rightPadding,
.wizard .sectionMapTable tr.titles td.leftPadding {
	width: 35px;
}

.wizard .sectionMapTable tr.images td.sectionIntro.t1,
.wizard .sectionMapTable tr.images td.sectionIntro.t1 img {
	width: 35px;
}

.wizard .sectionMapTable tr.images td.t1 img,
.wizard .sectionMapTable tr.images td.t2 img {
	width: 100%;
	height: 75px;
}

.wizard .sectionMapTable tr.images td.icon,
.wizard .sectionMapTable tr.images td.icon img {
	width: 75px;
	height: 75px;
}

.wizard .sectionMapTable tr.images td {
	padding: 0 0 8px 0;
	background-color: inherit;
}

.wizard .sectionMapTable tr.images td img {
	opacity: 0.4;
	filter: grayscale(100%);
	text-align: center;
	display: inline;
}

.wizard .sectionMapTable tr.images td.A img {
	/* Active state */
	opacity: 1.0;
	filter: none;
}

.wizard .sectionMapTable tr.images td.C img {
	/* Completed state */
	opacity: 1.0;
	text-align: center;
	filter: none;
}

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

.wizard .sectionMapTable tr.titles td {
	padding: 7px 6px 5px 5px;
	color: transparent;
	font-size: 13px;
	line-height: 13px;
	font-weight: bold;
	text-align: center;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}

.wizard .sectionMapTable tr.titles td.sectionIntro.A,
.wizard .sectionMapTable tr.titles td.sectionAboutYou.A,
.wizard .sectionMapTable tr.titles td.sectionFamily.A,
.wizard .sectionMapTable tr.titles td.sectionAdjustments.A {
	background-color: #41C363;
}

.wizard .sectionMapTable tr.titles td.sectionUtilization.A {
	background-color: #41C363;
}

.wizard .sectionMapTable tr.titles td.sectionInitialResults.A,
.wizard .sectionMapTable tr.titles td.sectionSavingsAccounts.A,
.wizard .sectionMapTable tr.titles td.sectionFinalResults.A {
	background-color: #41C363;
}

.wizard .sectionMapTable tr.titles td.A span {
	color: #FFFFFF;
}

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

.wizard .mainRow {
	margin: 0 18px;
	padding: 0 0 16px 0;
}

.wizard .slideArea {
	border: solid 5px #CCCCCC; /* Specific border color set per slide, further below */
	border-radius: 10px;
	padding: 0 20px 24px 20px;
	vertical-align: top;
	background: none; /* Specific watermark images set per slide, further below */
}

/* Specific slide area customizations by section; i.e. border colors, watermarks. */

.wizard .slideArea.sectionIntro,
.wizard .slideArea.sectionAboutYou,
.wizard .slideArea.sectionFamily,
.wizard .slideArea.sectionAdjustments {
	border-color: #41C363;
}

.wizard .slideArea.sectionIntro {
	background: none;
}

.wizard .slideArea.sectionAboutYou {
	background: url("../img/wizard/aboutYou_wm.png") 98% 86% no-repeat;
}

.wizard .slideArea.sectionFamily {
	background: url("../img/wizard/family_wm.png") 100% 85% no-repeat;
}

.wizard .slideArea.sectionAdjustments {
	background: url("../img/wizard/adjustments_wm.png") 100% 91% no-repeat;
}

.wizard .slideArea.sectionUtilization {
	border-color: #41C363;
	background: url("../img/wizard/utilization_wm.png") 97% 88% no-repeat;
}

.wizard .slideArea.sectionInitialResults,
.wizard .slideArea.sectionSavingsAccounts,
.wizard .slideArea.sectionFinalResults {
	border-color: #41C363;
}

.wizard .slideArea.sectionInitialResults {
	background: url("../img/wizard/initialResults_wm.png") 99% 88% no-repeat;
}

.wizard .slideArea.sectionSavingsAccounts {
	background: url("../img/wizard/savingsAccounts_wm.png") 99% 85% no-repeat;
}

.wizard .slideArea.sectionFinalResults {
	background: none;
}

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

.wizard .summary {
	float: right;
	vertical-align: top;
	background-color: rgba(232, 232, 232, 0.66); /* So watermark, if any, can show through */
	color: #777777;
	font-size: 13px;
	line-height: 23px;
	padding: 7px 11px 9px 11px;
	margin: 18px 0 15px 45px;
	border-radius: 8px;
}

.wizard .summary .col-5,
.wizard .summary .col-7 {
	white-space: nowrap;
}

.wizard .summary .header {
	line-height: 19px;
	margin-top: 8px;
	font-weight: bold;
	color: #606060;
}

.wizard .summary .headerMini {
	line-height: 19px;
	margin-top: 10px;
	font-size: 12px;
	color: #707070;
}

.wizard .summary .badge,
.wizard .summary .label {
	font-size: 100%;
	font-weight: normal;
	opacity: 1;
}

.wizard .summary .label {
	color: #FFFFFF;
	padding: 2px 6px;
}

.wizard .summary .subconfig.value.label,
.wizard .summary .region.value.label,
.wizard .summary .status.value.label,
.wizard .summary .incentive1Value.value.label,
.wizard .summary .incentive2Value.value.label,
.wizard .summary .incentive3Value.value.label,
.wizard .summary .incentive4Value.value.label,
.wizard .summary .incentive5Value.value.label {
	background-color: #41C363;
}

.wizard .summary .people .value.label {
	background-color: #41C363;
}

.wizard .summary .value.hsaContributionAmount,
.wizard .summary .value.fsaContributionAmount,
.wizard .summary .value.carryoverAmount {
	background-color: #41C363;
}

.wizard .summary .badge.value.unknown,
.wizard .summary .label.value.unknown {
	background-color: #AAAAAA;
	opacity: 0.5;
}

/* ----- 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: 0;
	color: #555555;
	font-size: 17px;
}

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

.wizard .slide h1,
.wizard .slide h2,
.wizard .slide h3,
.wizard .slide h4,
.wizard .slide h5,
.wizard .slide h6 {
	font-weight: bold;
}

.wizard .slide h1 {
	font-size: 27px;
	margin: 15px 0 12px 0;
}

.wizard .slide p {
	margin-top: 11px;
	margin-bottom: 9px;
	line-height: 22px;
}

.wizard .slide a:not(.btn) {
	color: #35A753;
	cursor: pointer;
	font-weight: bold;
}

.wizard .slide .keyInfo {
	font-weight: bold;
}

.wizard .slide .warning {
	color: #AA4444;
}

.wizard .slide select {
	width: auto;
	min-width: 200px;
	font-size: inherit;
	margin: 12px 2px 35px 0;
}

.wizard .slide ul.answers {
	color: #333333;
	padding-left: 45px;
	line-height: 32px;
	list-style-type: none;
	margin: 12px 0 16px 0;
}

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

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

.wizard .slide ul.answers.list-inline li {
	display: inline-block;
	padding-left: 3px;
	padding-right: 5px;
}

.wizard .slide ul.answers .selectedAnswer a.btn {
	background-color: #EC971F;
	border-color: #D58512;
	color: #FFFFFF;
}

.wizard .slide ul.answers div.check {
	width: 34px;
	height: 40px;
	float: left;
	display: none;
}

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

.wizard .slide ul.answers div.check .fa-check-square {
	color: #2A77C2;
	padding-top: 6px;
	font-size: 31px;
}

.wizard .slide .fa-lightbulb,
.wizard .slide .fa-pencil-alt,
.wizard .slide .fa-flag {
	padding-top: 2px;
	padding-right: 2px;
}

.wizard .slide .fa-lightbulb {
	font-size: 120%;
	color: #E6CA4D;
}

.wizard .slide .fa.fa-pencil-alt {
	color: #3377AA;
}

.wizard .slide .fa.fa-flag {
	font-size: 110%;
}

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

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

/* --- slideIntro --- */

.wizard .slideArea.slideIntro {
	background: url("../img/wizard/intro_pic.jpg") bottom right no-repeat;
	background-size: 580px 487px;
}

.wizard .slide.slideIntro .slideContent {
	margin-right: 300px;
	font-size: 19px;
}

.wizard .slide.slideIntro p {
}

.wizard .slide.slideIntro p.para1 {
	margin-right: 125px;
}

.wizard .slide.slideIntro p.para2 {
	margin-right: 170px;
}

.wizard .slide.slideIntro p.para3 {
	margin-right: 270px;
}

.wizard .slide.slideIntro p.para4 {
	margin-right: 280px;
}

/* --- slideStatus --- */

.wizard .slideStatus .answers a {
	min-width: 160px;
}

/* --- slideSpouse --- */

.wizard .slideSpouse .answers a {
	min-width: 90px;
}

.wizard .slideSpouse .marginForWatermark {
	margin-right: 310px;
}

.wizard .slideSpouse ul.answers.partnerStatusAnswers.list-inline li {
	margin: 10px 0 10px 10px;
}

.wizard .slideSpouse .partnerStatusAnswers.list-inline a.btn {
	background-image: url("../img/wizard/slideSpouse-hasSpouseOrDP.jpg");
	background-size: 270px 180px;
	background-position: 15px 32px;
	background-repeat: no-repeat;
	width: 300px;
	height: 230px;
}

.wizard .slideSpouse .partnerStatusAnswers.list-inline a.btn[data-answer-id="noSpouseOrDP"] {
	background-image: url("../img/wizard/slideSpouse-noSpouseOrDP.jpg");
}

/* --- slideChildren --- */

.wizard .slideChildren .answers a {
	min-width: 170px;
}

.wizard .slideChildren .marginForWatermark {
	margin-right: 310px;
}

/* --- slideUtilization --- */

.wizard .slideUtilization .utilizationAnswers {
	padding: 2px 0 3px 0;
}

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

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

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

.wizard .slideUtilization .utilizationAnswers .col-md-4,
.wizard .slideUtilization .utilizationAnswers .col-md-6 {
	padding: 0;
}

.wizard .slideUtilization .answers a.btn {
	margin: 0;
	padding: 4px 12px;
}

.wizard .slideUtilization .utilizationAnswers .header {
	padding-bottom: 2px;
}

.wizard .slideUtilization .utilizationAnswers .header a {
	font-size: 14px;
	padding-left: 6px;
}

.wizard .slideUtilization .utilizationAnswers select {
	min-width: 100px;
	font-size: 14px;
	margin: 0 5px 2px 5px;
}

.wizard .slideUtilization .individual .personLabel,
.wizard .slideUtilization .individual .categoryLabel {
	font-size: 15px;
	padding-top: 3px;
}

.wizard .slideUtilization .marginForWatermark {
	margin-right: 325px;
}

/* --- slideInitialResults --- */

.wizard .slideInitialResults {
	padding-bottom: 5px;
}

.wizard .slideInitialResults div.coverageLevelHeading {
	font-size: 16px;
	font-weight: bold;
	padding-left: 0;
}

.wizard .slideInitialResults .resultsTable {
	margin-top: 10px;
	margin-bottom: 60px; /* prevents button overlap in case where summary area is quite tall */
}

/* --- slideSavings --- */

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

.wizard .slideSavings table tr td:not(:first-child) {
	padding: 8px 12px 8px 12px;
}

.wizard .slideSavings table tr td:first-child {
	padding-left: 0;
}

.wizard .slideSavings table tr.savingsAccountSliderRow td:first-child {
	padding-top: 10px;
	padding-bottom: 12px;
	padding-left: 0;
}

.wizard .slideSavings table tr.carryoverSliderRow td:first-child {
	padding-top: 5px;
}

/* --- slideFinalResults --- */

.wizard .slideFinalResults {
	padding-bottom: 5px;
}

.wizard .slideFinalResults label.showTotalCostsItem {
	padding-top: 0;
}

.wizard .slideFinalResults label.showTotalCostsItem span {
	font-size: 14px;
	font-weight: normal;
}

.wizard .slideFinalResults div.coverageLevelHeading {
	font-size: 16px;
	font-weight: bold;
}

.wizard .slideFinalResults .resultTips {
	font-size: 14px;
	border-radius: 12px;
	padding: 8px 12px 5px 12px;
	margin: 6px 0 55px 0; /* bottom margin prevents button overlap in case where summary area is quite tall */
}

.wizard .slideFinalResults .resultTips p,
.wizard .slideFinalResults .resultTips ul,
.wizard .slideFinalResults .resultTips ul li {
	margin: 2px 0 1px 0;
	line-height: 19px;
}

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

.wizard .slideFinalResults .resultsTable {
	margin-top: 2px;
	margin-bottom: 12px;
}

.wizard .mpceChart,
.wizard .mpceChartNoEmployeeFunding {
	padding-top: 8px;
	height: 460px;
}

.wizard .chartOptions {
	padding-bottom: 8px;
}

.wizard .chartOptions label {
	margin: 0 0 0 3px;
	display: inline;
	vertical-align: middle;
	padding-right: 12px;
}

.wizard .chartOptions input {
	margin: 0;
	padding: 0;
	transform: scale(1.2);
	vertical-align: middle;
}

.wizard .chartOptions label span {
	font-weight: normal;
	margin-left: -1px;
}

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

.wizard .buttonsBelowSlide {
	text-align: right;
	padding: 0 25px 8px 0;
	vertical-align: middle;
	position: absolute;
	bottom: 0;
	right: 0;
}

.wizard .buttonsBelowSlide .previousButton,
.wizard .buttonsBelowSlide .nextButton,
.wizard .buttonsBelowSlide .finalFullToolButton {
	min-width: 125px;
	margin: 4px 0 8px 4px;
	padding: 5px 0;
}

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

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

@media screen and (max-width: 1200px) {
	.wizard .slideSpouse .partnerStatusAnswers.list-inline a.btn {
		background-size: 210px 140px;
		background-position: 10px 32px;
		width: 230px;
		height: 182px;
	}

	.wizard .slideUtilization .answers a.btn {
		padding: 3px 6px;
	}
}

@media screen and (max-width: 991px) {
	.wizard .slideSpouse .partnerStatusAnswers.list-inline a.btn {
		background-size: 180px 120px;
		background-position: 10px 32px;
		width: 200px;
		height: 162px;
	}

	.wizard .slideSpouse ul.answers.partnerStatusAnswers.list-inline li {
		margin: 5px 0 5px 5px;
	}

	.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 .slideUtilization .individual .personLabel,
	.wizard .slideUtilization .individual .categoryLabel {
		font-size: 13px;
		padding: 7px 5px 0 20px;
	}
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	.wizard .sectionMapTable tr.images td.rightPadding,
	.wizard .sectionMapTable tr.titles td.leftPadding {
		width: 31px;
	}

	.wizard .sectionMapTable tr.images td.sectionIntro.t1 {
		width: 22px;
	}

	.wizard .sectionMapTable tr.images td.t1 img,
	.wizard .sectionMapTable tr.images td.t2 img {
		height: 62px;
	}

	.wizard .sectionMapTable tr.images td.icon,
	.wizard .sectionMapTable tr.images td.icon img {
		width: 62px;
		height: 62px;
	}

	.wizard .mainRow {
		margin: 0 12px;
	}

	.wizard .slideArea {
		padding-left: 12px;
		padding-right: 12px;
	}

	.wizard .slide h1 {
		font-size: 24px;
		line-height: 24px;
		margin: 12px 0 0 0;
	}

	.wizard .slideArea:not(.slideIntro) {
		background-size: 300px 300px !important; /* slightly smaller watermarks */
	}

	.wizard .slideArea.slideIntro {
		background: url("../img/wizard/intro_pic.jpg") bottom right no-repeat;
		background-size: 450px 378px;
	}

	.wizard .slide.slideIntro .slideContent {
		margin-right: 110px;
		font-size: 18px;
	}

	.wizard .slide.slideIntro p.para1 {
		margin-right: 10px;
	}

	.wizard .slide.slideIntro p.para2 {
		margin-right: 115px;
	}

	.wizard .slide.slideIntro p.para3 {
		margin-right: 265px;
	}

	.wizard .slide.slideIntro p.para4 {
		margin-right: 340px;
	}
}

@media screen and (max-width: 767px) {
	body.duringWizard #pageHeader div#logoAndToolName img {
		margin-bottom: 2px;
	}

	.wizard .sectionMapRow {
		padding: 5px 0 0 0;
		margin: 0 16px;
	}

	.wizard .sectionMapTable tr.images td.rightPadding,
	.wizard .sectionMapTable tr.titles td.leftPadding {
		display: none;
	}

	/* At 767px or narrower, the images in the section map disappear, but the titles remain. */
	.wizard .sectionMapTable tr.images {
		display: none !important;
	}

	.wizard .sectionMapTable tr.titles td {
		padding: 6px 6px 3px 6px;
		width: 13%;
	}

	.wizard .mainRow {
		margin: 0 8px;
	}

	.wizard .slideArea,
	.wizard .summary {
		width: 100%;
		float: inherit;
		vertical-align: inherit;
		line-height: inherit;
	}

	.wizard .summary {
		display: none;
	}

	.wizard .marginForWatermark {
		margin-right: 0 !important;
	}

	.wizard .slideArea {
		background-image: none !important; /* no watermarks at these widths */
		border-width: 4px;
		padding: 0 12px 6px 12px;
	}

	.wizard .summary {
		margin: 8px 0 0 0;
		padding: 5px 9px;
		line-height: 22px;
	}

	.wizard .slide {
		font-size: 16px;
		line-height: 19px;
		padding-bottom: 0;
	}

	.wizard .slide p {
		margin-top: 10px;
		margin-bottom: 8px;
	}

	.wizard .slide ul.answers {
		padding-left: 22px;
	}

	.wizard .buttonsBelowSlide {
		position: relative;
		padding: 5px 0 0 0;
	}

	.wizard .slide .col-md-5,
	.wizard .slide .col-md-7 {
		padding: 0;
	}

	.wizard .slide.slideIntro .slideContent,
	.wizard .slide.slideIntro p.para1,
	.wizard .slide.slideIntro p.para2,
	.wizard .slide.slideIntro p.para3,
	.wizard .slide.slideIntro p.para4 {
		font-size: inherit;
		background-color: inherit;
		margin-right: 0;
	}

	.wizard .slideInitialResults .resultsTable {
		margin-bottom: 5px;
	}

	.wizard .slideSavings select {
		display: block;
	}

	.wizard .slideFinalResults .resultTips {
		margin-bottom: 5px;
	}

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

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

	.wizard .sectionMapRow {
		display: none;
	}

	/* At 479px or narrower, the entire section map disappears; i.e. titles too. */
	.wizard .sectionMapTable tr.titles {
		display: none !important;
	}

	/* The slide area loses the left and right borders to make more room for content. */
	.wizard .mainRow {
		margin: 0;
	}

	.wizard .slideArea {
		padding: 0 10px 0 12px;
		border-top-width: 4px !important;
		border-right-width: 0 !important;
		border-bottom-width: 4px !important;
		border-left-width: 0 !important;
		border-radius: 0;
	}

	.wizard .slide {
		font-size: 15px;
		margin-bottom: 0;
	}

	.wizard .slide h1 {
		font-size: 22px;
		line-height: 22px;
		margin: 12px 0 0 0;
	}

	.wizard .slide ul.answers {
		padding-left: 10px;
	}

	.wizard .slideUtilization .individual .personLabel,
	.wizard .slideUtilization .individual .categoryLabel {
		font-size: 12px;
		padding: 11px 3px 0 12px;
	}

	body.duringWizard #pageFooter {
		margin-top: 0;
	}
}

@media screen and (max-width: 399px) {
	/* At 399px or narrower, the summary disappears. Only slide content remains. */
	.wizard .summary {
		display: none !important;
	}
}

@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; } }

/*=========================================================================================================
	Responsive adjustments based on portrait vs. landscape modes.
  =========================================================================================================*/

@media screen and (orientation: portrait) {
}

@media screen and (orientation: landscape) {
}