/*=========================================================================================================
	Application-wide styles.
  =========================================================================================================*/

:root {
	overflow-y: scroll;
	font-size: 16px;
}

body {
	font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
	background-color: #EEEEEE;
	color: #555659;
	border: none;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}

svg text {
	/* "svg text" is for Highcharts to use the same font as above */
	font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a, .linkColor {
	color: #009CB7;
	color: #559ad2;
}

a:hover {
	color: #036E9F;
}

a.planProvisionsLink {
	font-weight: normal;
	font-size: 0.9375rem;
}

a.planProvisionsLink .fa,
a.planProvisionsLink .fal,
a.planProvisionsLink .far,
a.planProvisionsLink .fas {
	padding: 0 0.325rem;
}

b, strong {
	font-weight: bold;
}

select.form-control {
	padding: 0 0.5rem;
	height: calc(2rem + 2px);
}

div.form-control {
	height: calc(2rem + 2px);
}

select::-ms-expand {
	width: 0.75rem;
	border: none;
	background-color: #FFFFFF;
}

.small, small {
	color: #666666;
	font-style: italic;
	line-height: 1.125rem;
	margin-bottom: 0.5rem;
}

h1, h2, h3, h4, h5, h6 {
	color: #555659;
}

h1 {
	font-size: 1.875rem;
	line-height: 2rem;
	margin-bottom: 0.75rem;
	color: #559AD2;
}

h2 {
	font-size: 1.375rem;
	line-height: 1.5rem;
	margin-bottom: 0.625rem;
	color: #7DBB48;
}

h3 {
	font-size: 1.125rem;
}

h4, h5, h6 {
	font-size: 1rem;
}

p {
	line-height: 1.375rem;
	margin-bottom: 1rem;
}

label {
	margin-bottom: 0.25rem;
	line-height: 1.25rem;
}

a.helpModalLink {
	text-decoration: none;
}

a.helpModalLink:hover {
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto;
}

.printOnly {
	display: none;
}

.hiddenUntilInitialized, .template, .hiddenIfWizardDisabled, .hiddenNotApplicable {
	display: none !important;
}

.notInUse {
	/* Tip: Use class="notInUse" to suppress elements not required by a particular client implementation. This is
		better than a direct style="display: none;" on an element, as it could possibly still be shown by app logic
		that performs conditional .show()/.hide() etc., while this class will always remain on the element. */
	display: none;
}

.planSpecific {
	/* Markup classed as plan-specific should start as invisible will be
		displayed only when application logic requests; e.g. if plan is part
		of the currently selected config/region, etc. */
	display: none;
}

.willHoldTemplateContent {
	/* For use on divs that will have their content populated by a text module loaded by RequireJS. */
	display: none;
}

.companyFundingRow, .companyMatchRow {
	/* Similarly, the company funding and company match rows will remain hidden
		until there is a plan active that has such a match. */
	display: none;
}

body:not(.simplifiedModelingEnabled) .simplifiedModelingOnly,
body:not(.detailedModelingEnabled) .detailedModelingOnly,
body.detailedModelingEnabled:not(.simplifiedModelingEnabled) .bothModelingModesOnly,
body.simplifiedModelingEnabled:not(.detailedModelingEnabled) .bothModelingModesOnly {
	display: none;
}

.radioCell, .checkboxCell {
	vertical-align: top;
	padding-top: 0.5em;
}

.slider {
	margin: 0.75rem 0 0.75rem 0.75rem;
	width: 65%;
	float: left;
}

.ui-slider.ui-widget-content {
	border-color: #BAD9EF;
}

.ui-slider .ui-slider-handle {
	width: 1.3em;
	height: 1.3em;
	top: -0.325em;
	margin-left: -0.65em;
	border-radius: 15px;
	border-color: #9DCAE8;
}

.ui-slider-range.ui-widget-header {
	background: #E3F0F7 none;
}

.sliderTextInput {
	width: 4.5rem;
	float: left;
	border: solid 1px #D7E7F2;
	border-radius: 3px;
	color: #495057;
	background-color: #FAFAFA;
	font-weight: bold;
	padding: 0.125rem 0.375rem;
	margin: 0.125rem 0 0 0.75rem;
}

.sliderTextInput:focus {
	background-color: #E9F4FC;
	color: #113388;
	border: solid 1px #AED0EA;
}

.sliderTextWithTooltip, .textWithTooltip {
	color: #086EAA;
	font-weight: normal;
}

.sliderTextWithTooltip {
	float: left;
}

.sliderTextNoTooltip {
	float: left;
	font-weight: normal;
}

.sliderTextWithTooltip.disabled, .textWithTooltip.disabled, .sliderTextInput.disabled, .savingsAccountSliderLabel.disabled {
	opacity: 0.4;
}

.chartTooltip {
	font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.875rem;
	margin: 0;
	padding: 0;
}

.chartTooltip .seriesName {
	color: #333333;
}

.chartTooltip > .value {
	font-size: 0.9375rem;
	font-weight: bold;
	color: #0000CC;
}

.chartTooltip .highlight {
	color: #660099;
}

/* Overrides of some Bootstrap styles */

div.topmost.container,
div.topmost.container-fluid {
	margin-bottom: 0.625rem;
	background-color: inherit;
	max-width: 1346px; /* becomes 1320 after accounting for padding */
	padding: 0 13px;
	overflow: hidden;
}

.btn {
	padding: 0.375rem 1.25rem;
	border-radius: 0;
	border: none;
	cursor: pointer;
	line-height: 1.375em;
}

.btn-primary {
	color: #FFFFFF;
	background-color: #559AD2;
	border-color: #559AD2;
}

.btn-primary:hover {
	color: #FFFFFF;
	background-color: #036E9F;
	border-color: #036E9F;
}

.btn-primary:not(:disabled):not(.disabled):active {
	color: #FFFFFF;
	background-color: #204F75;
}

.btn-secondary {
	color: #111111;
	background-color: #FFFFFF;
	border-color: #C2C2C2;
}

.btn-secondary:hover {
	color: #000000;
	background-color: #DFDFDF;
	border-color: #AAAAAA;
}

.btn-secondary:not(:disabled):not(.disabled):active {
	color: #000000;
	background-color: #CCCCCC;
	border-color: #999999;
}

.btn.disabled {
	color: #FFFFFF;
	background-color: #CECECE;
	border-color: #CECECE;
	box-shadow: none;
	opacity: 1;
}

.tooltip {
	font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 0.9375rem;
}

.tooltip.show {
	opacity: 1;
}

.tooltip .tooltip-inner {
	background-color: #DDDDDD;
	color: black;
	padding: 0.75rem;
	max-width: 20rem;
}

.tooltip .arrow:before {
	border-top-color: #DDDDDD;
}

.modal-open[style] {
	/* Prevents the page body from shifting a little to the left when a modal is open */
	padding-right: 0 !important;
}

.modal-header {
	border-bottom-color: #CCCCCC;
	padding: 0.75rem 1rem 0.625rem 1rem;
}

.modal-header .modal-title {
	font-size: 1.25rem;
	line-height: 1.375rem;
	color: #036E9F;
}

.modal-body {
	max-height: 470px;
	overflow: auto;
}

.modal-body .alert-warning {
	color: #996633;
	border-color: #CCAA88;
	padding: 0.625rem 0.75rem 0 0.75rem;
}

.modal-body .alert-warning p {
	margin-bottom: 0.625rem;
}

.modal-body h1, .modal-body h2, .modal-body h3, .modal-body h4, .modal-body h5, .modal-body h6 {
	color: inherit;
}

.modal-footer {
	border-top-color: #CCCCCC;
}

.ui-effects-transfer {
	/* for jQuery UI transfer effect */
	border: 1px dotted #777777;
	background-color: rgba(224, 224, 224, 0.4);
	border-radius: 5px;
}

/*=========================================================================================================
	Page header: Includes the logo, title, and top menu.
  =========================================================================================================*/

#pageHeader {
	background-color: transparent;
	margin-bottom: 0;
}

#pageHeader div#logoAndToolName {
	display: table;
	background-color: #FFFFFF;
	box-shadow: 0 0.4375rem 0.4375rem rgba(0, 0, 0, 0.2);
	z-index: 1;
	margin-bottom: 0;
	padding: 0.75rem 0.75rem 0.75rem 1.5rem;
}

#pageHeader p#logoContainer {
	display: table-cell;
	vertical-align: middle;
	width: auto;
	text-align: left;
}

#pageHeader p#logoContainer img#logo {
/*	width: auto;
	height: auto; */
	padding-top: 15px;
	padding-bottom: 15px;
}

#pageHeader p#toolName {
	color: #666666;
	font-size: 1.675rem;
	font-weight: normal;
	padding: 0 0.75rem 0 0;
	display: table-cell;
	vertical-align: middle;
	text-align: right;font-family: "Segoe UI", Optima, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 32px;
}

#pageHeader div#topMenu {
	background-color: #FFFFFF;
	padding: 1rem 1rem 0.5rem 1rem;
}

#pageHeader div#topMenuLinks {
	cursor: pointer;
	text-align: right;
	padding-right: 0.75rem;
}

#pageHeader #topMenu a {
	color: #001689;
	text-transform: uppercase;
	font-weight: bold;
	cursor: pointer;
	padding-left: 0.75rem;
}

#pageHeader #topMenu a .fa,
#pageHeader #topMenu a .fal,
#pageHeader #topMenu a .far,
#pageHeader #topMenu a .fas {
	color: #001689;
	padding-right: 0.125rem;
}

#pageHeader #topMenu a:hover,
#pageHeader #topMenu a:hover .fa,
#pageHeader #topMenu a:hover .fal,
#pageHeader #topMenu a:hover .far,
#pageHeader #topMenu a:hover .fas {
	text-decoration: none;
	color: #559AD2;
}

body.taxViewOnly .switchModesContainer {
	display: none; /* Hides the "Guide Me" / "Full Tool" links while only in the tax view */
}

body.duringWizard .useWizardLink {
	display: none; /* Hides the "Guide Me" link while already using wizard */
}

body:not(.duringWizard) .useFullToolLink {
	display: none; /* Hides the "Full Tool" link while already using full tool */
}

/*=========================================================================================================
	Page main body: Sections include #loadingMpceSection, #toolIntroSection, #wizardSection (optional,
	with content loaded at run-time), #personalSection, #adjustSection, #mpceSection, #taxIntroSection,
	and #taxCalcSection (which is hidden until requested for a specific plan).

	NOTE: Styles for #wizardSection are contained in custom.wizard.css; don't include wizard styles here.
  =========================================================================================================*/

#loadingMpceSection, #toolIntroSection, #warning, #error {
	background-color: #FFFFFF;
	font-size: 1.125rem;
	padding: 4rem 3.5rem 3.25rem 3.5rem;
}

#warning, #error {
	background-color: #FFEEEE;
	border: solid 1px #EE7777;
	color: #EE1111;
}

#warning code, #error code {
	background-color: #E2E2E2;
	color: #111111;
}

/* Things in common across sections */

.sectionHeader {
	color: #FFFFFF;
	background-color: #6EB77C;
	font-size: 1.125rem;
	font-weight: bold;
	padding: 0.375rem 1rem;
	vertical-align: middle;
}

.sectionHeader .sectionHeaderIcon {
	display: none; /* optional */
	float: left;
	padding: 0.1875rem 0.375rem 0 0;
}

.sectionHeader .sectionHeaderTitle {
}

.sectionBody {
	background-color: #FFFFFF;
	padding: 1rem 2rem 0.75rem 2rem;
}

#pageHeader, #loadingMpceSection, #toolIntroSection, #personalSection, #adjustSection,
#mpceSection, #taxIntroSection, #taxCalcSection, #pageFooter {
	margin: 0;
}

/*=========================================================================================================
	Styles primarily for #personalSection / "Tell us about you"
  =========================================================================================================*/

#personalSection .sectionHeader {
}

#personalSection .sectionHeader .sectionHeaderIcon {
}

#personalSection .dropdownDiv {
}

#personalSection .dropdownDiv select {
	margin: 0 0.5rem 0.75rem 0;
}

#personalSection .labelForReadOnlyValue {
	line-height: 1.25rem;
	margin-bottom: 0.375rem;
}

#personalSection .form-control.readOnlyValue {
	color: #334477;
	border-color: #C7DDE2;
	background-color: #E6F3F7;
	padding-top: 0.25rem;
	margin-bottom: 0.75rem;
}

/*=========================================================================================================
	Styles primarily for #adjustSection / "Enter your expected plan usage here"
  =========================================================================================================*/

#adjustSection {
	height: auto;
}

#adjustSection .sectionHeader {
}

#adjustSection .sectionHeader .sectionHeaderIcon {
}

#adjustSection #modellerPaneTabs {
	float: left; /* or "right" to move tabs to right side instead */
	margin: 0.5rem 1.25rem 0 1rem;
}

#adjustSection .tab-content {
	overflow: visible;
	padding-right: 0;
	padding-left: 0;
}

#adjustSection .tab-pane {
	background-color: #A4B5EA;
	overflow: auto;
	margin: 0 0 5px 0;
	padding-right: 0;
	padding-left: 0;
}

#adjustSection .tab-pane a {
	color: #3468A8;
}

#adjustSection .tab-pane a .fa,
#adjustSection .tab-pane a .fal,
#adjustSection .tab-pane a .far,
#adjustSection .tab-pane a .fas {
	padding-right: 0.25rem;
}

#adjustSection .nav-tabs {
	line-height: 2rem;
	border-bottom: 0;
}

#adjustSection .nav-tabs > li > a, #adjustSection .nav-pills > li > a {
	padding: 8px 11px;
	background-color: #E4E4E4;
	text-decoration: none;
	margin-right: 2px;
}

#adjustSection .nav-tabs > li > a:hover, #adjustSection .nav-pills > li > a:hover {
	background-color: #CCCCCC;
}

#adjustSection .nav-tabs > .active > a, #adjustSection .nav-tabs > .active > a:hover {
	color: #333333;
	font-weight: bold;
	background-color: #A4B5EA;
	border: 1px solid #A4B5EA;
	border-bottom-color: transparent;
	cursor: default;
}

/* simplifiedModelingContents */

#simplifiedModelingContents, #detailedModelingContents {
	padding: 0;
	margin: 0.125rem 0.25rem 0.25rem 0.5rem;
}

#simplifiedModelingContents .personContainer {
	float: left;
	width: auto;
	padding: 0 0 0.5rem 0;
}

#simplifiedModelingContents .personContainer.headings .title,
#simplifiedModelingContents .personContainer .personTitle {
	min-height: 1.75rem;
	font-weight: bold;
	padding: 0.625rem 0.25rem 0 0.25rem;
}

#simplifiedModelingContents .personContainer.headings .usageCategory {
	min-height: 44px;
	line-height: 44px;
	font-weight: bold;
	text-align: right;
	background-color: #A4B5EA;
	padding: 0 8px 0 12px;
}

#simplifiedModelingContents .personContainer.headings .usageCategory.category2,
#simplifiedModelingContents .personContainer .usageCategoryDropdownOuter.usageCategory.category2 {
	background-color: #A4B5EA;
}

#simplifiedModelingContents .personContainer .usageCategoryDropdownOuter {
	display: table;
	height: 44px;
	background-color: #A4B5EA;
	padding: 0 0.375rem 0.25rem 0.125rem;
}

#simplifiedModelingContents .personContainer .usageCategoryDropdown {
	display: table-cell;
	vertical-align: middle;
}

#simplifiedModelingContents .personContainer .usageCategoryDropdown select {
	width: 95px;
}

#simplifiedModelingContents .personContainer .usageCategoryDropdown select.form-control {
	padding-left: 2px;
}

/* detailedModelingContents */

#detailedModelingContents table {
	float: left;
	margin-bottom: 0.25rem;
}

#detailedModelingPane table select {
	padding: 0;
	margin: 0.125rem 0 0.25rem 0;
}

#detailedModelingContents th {
	height: 1rem;
	text-align: center;
	padding: 0.1875rem 0;
	color: #333333;
}

#detailedModelingContents th:first-child {
	color: #444444;
	font-weight: normal;
	text-align: right;
	vertical-align: bottom;
}

#detailedModelingContents th:first-child .usageCategory {
	min-height: 34px;
	vertical-align: middle;
	font-weight: bold;
	text-align: right;
	padding-right: 5px;
}

#detailedModelingContents th:first-child .usageCategory {
	margin-right: 5px;
}

#detailedModelingContents .personTypeHeader {
	font-weight: bold;
	padding: 0.625rem 0 0.3125rem 0;
}

#detailedModelingPane th.person {
	padding: 3px 0 0 5px;
}

#detailedModelingPane th.person select {
	font-weight: normal;
	margin-bottom: 3px;
}

#detailedModelingPane table td .form-control {
	width: 50px;
	height: 30px;
	margin-left: 8px;
}

#detailedModelingPane table td:not(:first-child) {
	padding: 0 5px;
}

/*=========================================================================================================
	Styles primarily for #mpceSection / "Compare how much you'll spend"
  =========================================================================================================*/

#mpceSection .sectionHeader {
}

#mpceSection .sectionHeader .sectionHeaderIcon {
}

/* Currently, for demo feature only:

#mpceSection .nav-tabs {
	border-bottom: solid 5px #6EB77C;
}

#mpceSection .nav-tabs .nav-link {
	border: none;
	padding-top: 0.25rem;
	padding-bottom: 0.125rem;
}

#mpceSection .nav-tabs > li > a {
	background-color: #DDDDDD;
	color: #666666;
	font-size: 1.125rem;
	text-decoration: none;
}

#mpceSection .nav-tabs > li:not(.active) > a:hover {
	color: #333333;
	background-color: #CCCCCC;
}

#mpceSection .nav-tabs > li:not(.active) > a:hover .sectionHeaderIcon {
	color: #555555;
}

#mpceSection .nav-tabs > .active > a,
#mpceSection .nav-tabs > .active > a:hover {
	color: #FEFFFF;
	font-weight: bold;
	background-color: #6EB77C;
	cursor: default;
}

#mpceSection .nav-tabs li.active .sectionHeaderIcon {
	color: #ECEDD3;
	margin-right: 3px;
	display: none;
}

#mpceSection .nav-tabs li:not(.active) .sectionHeaderIcon {
	color: #888888;
	margin-right: 3px;
	display: none;
}
*/

/* Left side: MPCE chart options, chart, and legend. These are not prefixed #mpceSection as they also appear in the wizard. */

.chartArea {
	padding-right: 0;
}

.coverageLevelHeading {
	color: #333333;
	font-weight: bold;
}

.chartOptions {
	padding-bottom: 0.5rem;
}

.chartOptions label {
	font-size: 0.9375rem;
	margin: 0 0 0 0.1875rem;
	display: inline;
	vertical-align: middle;
	padding-right: 0.75rem;
}

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

.chartOptions label span {
	font-weight: normal;
}

#mainChart {
	height: 535px;
	padding: 0.625rem 0 0 0;
}

.mainChartFootnotes {
	margin: 0.75rem 0 0.75rem 0;
}

.mainChartFootnotes p {
	display: inline-block;
	margin: 0.25rem;
	color: #666666;
	font-size: 0.9375rem;
	line-height: 1.125rem;
}

.dynamicFootnoteForPlanColumnClick {
	margin: 0.75rem 0.625rem 0 2.75rem;
	min-height: 3rem;
}

.dynamicFootnoteForPlanColumnClick p {
	margin-bottom: 0.25rem;
}

.dynamicFootnoteForPlanColumnClick b {
	color: #11AA11;
}

.mainChartTooltip .planName {
	color: #000000;
	font-style: italic;
	margin: 2px 0 5px 0;
}

.mainChartTooltip .chartSeriesDetails {
	color: #666666;
	font-weight: normal;
	margin: 12px 12px 6px 12px;
}

.mainChartTooltip .chartSeriesDetails > tbody > tr > td {
	vertical-align: top;
}

.mainChartTooltip .chartSeriesDetails table tr td {
	padding: 1px 2px 1px 1px;
}

.mainChartTooltip .chartSeriesDetails table tr td.name {
	padding-left: 5px;
	padding-right: 12px;
}

.mainChartTooltip .chartSeriesDetails table tr td.value {
	min-width: 40px;
	text-align: right;
	margin: 0 6px 0 0;
}

.mainChartTooltip .oopCostsDetails table tr.totalCopays td.value,
.mainChartTooltip .oopCostsDetails table tr.totalDeductibles td.value,
.mainChartTooltip .oopCostsDetails table tr.totalCoinsurance td.value,
.mainChartTooltip .oopCostsDetails table tr.totalExpensesNotCovered td.value {
	color: #EE7700;
}

.mainChartTooltip .oopCostsDetails table tr.totalMedicalAndDrugCosts td.value {
	color: #FF3300;
	border-top: solid 1px black;
}

.mainChartTooltip .oopCostsDetails table tr.totalFundAmountOffset td.value {
	color: #009900;
}

.mainChartTooltip .oopCostsDetails table tr.totalMedicalAndDrugCostsLessFundOffset td.value {
	color: #0000CC;
	border-top: solid 1px black;
	border-bottom: double black;
	padding-top: 3px;
	padding-bottom: 2px;
}

.mainChartTooltip .oopCostsDetails .notes {
	min-width: 150px;
	float: right;
	color: #666666;
	margin-left: 12px;
}

.mainChartTooltip .oopCostsDetails .notes .header {
	text-decoration: underline;
	margin-bottom: 6px;
}

.mainChartTooltip .oopCostsDetails .notes ul {
	margin: 0 0 0 18px;
	padding: 0;
}

.mainChartTooltip .oopCostsDetails .notes ul li {
	white-space: normal;
	margin-top: 4px;
}

.mainChartTooltip .oopCostsDetails .ifDeductibleNotMet,
.mainChartTooltip .oopCostsDetails .ifDeductibleMet,
.mainChartTooltip .oopCostsDetails .ifOopMaxNotReached,
.mainChartTooltip .oopCostsDetails .ifOopMaxReached,
.mainChartTooltip .oopCostsDetails .applyERFundsOnly,
.mainChartTooltip .oopCostsDetails .applyERCoreFundsOnly,
.mainChartTooltip .oopCostsDetails .applyEEFundsOnly,
.mainChartTooltip .oopCostsDetails .applyNoFunds {
	display: none;
}

.mainChartTooltip .oopCostsDetails.deductibleMet .ifDeductibleMet,
.mainChartTooltip .oopCostsDetails:not(.deductibleMet) .ifDeductibleNotMet,
.mainChartTooltip .oopCostsDetails.oopMaxReached .ifOopMaxReached,
.mainChartTooltip .oopCostsDetails:not(.oopMaxReached) .ifOopMaxNotReached,
.mainChartTooltip .oopCostsDetails.applyERFundsOnly:not(.noFundAmountOffset) .applyERFundsOnly,
.mainChartTooltip .oopCostsDetails.applyERCoreFundsOnly:not(.noFundAmountOffset) .applyERCoreFundsOnly,
.mainChartTooltip .oopCostsDetails.applyEEFundsOnly:not(.noFundAmountOffset) .applyEEFundsOnly,
.mainChartTooltip .oopCostsDetails.applyNoFunds .applyNoFunds {
	display: list-item;
}

.mainChartTooltip .employeePremiumsDetails table tr.adjustmentAmount td.name,
.mainChartTooltip .employerPremiumsDetails table tr.adjustmentAmount td.name {
	padding-left: 18px;
}

.mainChartTooltip .employeePremiumsDetails table tr td.value,
.mainChartTooltip .employerPremiumsDetails table tr td.value {
	color: #EE7700;
}

.mainChartTooltip .employeePremiumsDetails table tr td.value.incentive,
.mainChartTooltip .employerPremiumsDetails table tr td.value.incentive {
	color: #009900;
}

.mainChartTooltip .employeePremiumsDetails table tr td.value.surcharge,
.mainChartTooltip .employerPremiumsDetails table tr td.value.surcharge {
	color: #DD0000;
}

.mainChartTooltip .employeePremiumsDetails table tr.totalAnnualPayrollContributions td.value,
.mainChartTooltip .employerPremiumsDetails table tr.employerPlanPremium td.value {
	color: #0000CC;
	border-top: solid 1px black;
	border-bottom: double black;
	padding-top: 3px;
	padding-bottom: 2px;
}

.mainChartTableDiv, .taxChartTableDiv {
	margin: 1rem 0.25rem;
	float: none;
}

.mainChartTable, .taxChartTable {
	margin: auto;
	width: 92%;
	line-height: 1.125rem;
}

.mainChartTable th, .taxChartTable th {
	padding: 0.25rem;
	border-collapse: collapse;
}

.mainChartTable th, .taxChartTable th {
	border-bottom: solid 1px #333333;
}

.mainChartTable td, .taxChartTable td {
	padding: 0.25rem;
	border-collapse: collapse;
}

.mainChartTable td:first-child {
	width: 180px;
	text-align: left;
}

.mainChartTable .planName, .taxChartTable .resultName {
	text-align: right;
	vertical-align: bottom;
	font-weight: bold;
}

.mainChartTable .summaryRow td {
	padding-top: 1.125rem;
	font-weight: bold;
}

.mainChartTable .summaryRow td {
	border-top: solid 1px #333333;
	border-bottom: double #333333;
}

.taxChartTable .resultName {
	font-weight: normal;
	text-align: center;
}

.mainChartTable .resultName {
	min-width: 150px;
	text-align: left;
}

.mainChartTable .resultValue {
	text-align: right;
}

.taxChartTable .resultValue {
	text-align: center;
}

/* Right side: Savings account contribution area. */

.savingsArea {
	display: table;
	padding-left: 0;
}

.savingsArea select.applyFundsToCostOfCareDropdown {
	display: inline-block;
	width: auto;
	border-radius: 5px;
	height: auto;
	margin: 0 4px;
	padding: 3px;
}

.savingsAccountSliderRow {
	display: table-row;
	width: 100%;
	height: 2.5rem;
}

.savingsAccountSliderRow .savingsAccountSliderLabel {
	width: 3rem; /* The "HSA:" and "FSA:" labels that may appear before each slider */
	margin-top: 3px;
	color: #666666;
	font-weight: bold;
}

.savingsAccountSliderRow .slider {
	width: 62%;
	margin: 8px 0 4px 6px;
}

.sliderMinimum, .sliderMaximum {
	color: #6B8EA5;
	font-style: italic;
	display: none; /* TIP: Use display: block to show slider min & max to left and right of slider; adjust slider width above */
	margin: 0 5px 0 2px;
	padding: 3px 0 0 0;
	float: left;
}

.sliderMaximum {
	padding-left: 8px;
}

.savingsAccountSliderRow .sliderTextInput {
	/* The dollar value following the slider */
	margin: 2px 0 0 15px;
	display: block; /* TIP: Use display: none if you're going to use the sliderMinimum and sliderMaximum labels above */
}

body:not(.duringWizard) .hsaSlider .ui-slider-range.ui-widget-header {
	background: #E8A2B9 none;
}

body:not(.duringWizard) .fsaSlider .ui-slider-range.ui-widget-header {
	background: #C1DDC5 none;
}

.carryoverSliderRow {
	height: 4.5rem;
}

.carryoverSliderRow.savingsAccountSliderRow .slider {
	width: 73%;
}

.savingsAccountSliderRow .sliderChangedTip {
	/* for mobile; appears below sliders only when value changed */
	clear: both;
	display: none;
	color: #00AA00;
	padding: 0.375rem 0 0.125rem 0.1875rem;
}

.resultsTable {
	width: 100%;
	color: #333333;
	font-size: 0.875rem;
	border: none;
	margin-top: 0.25rem;
}

.resultsTable caption {
	caption-side: top;
	color: #333333;
	padding: 0;
}

.resultsTable tr th {
	font-weight: bold;
	background-color: #559AD2;
	border-bottom: solid 1px #559AD2;
	vertical-align: bottom;
	text-align: center;
	line-height: 1rem;
	padding: 0.25rem 0.375rem 0.25rem 0.25rem;
	font-size: 0.8125rem;
}

.resultsTable tr th.resultName {
	text-align: left;
	font-style: italic;
	width: 48%;
	font-size: 0.875rem;
}

.resultsTable tr.limitedPotentialRollover td:not(.resultName),
.resultsTable tr.totalMedicalAndDrugCostsLessFundOffset td:not(.resultName) {
	font-weight: bold;
}

.resultsTable tr td {
	padding: 0.25rem 0.375rem 0.1875rem 0.375rem;
	background-color: #EAF2F9;
	border-top: 1px solid #559AD2;
	border-collapse: collapse;
	text-align: center;
}

.resultsTable td.sliderHighlight {
	color: #007700;
	background-color: #F4FFF4;
	font-weight: bold;
}

.resultsTable td.resultName {
	text-align: left;
	padding-left: 0.5rem;
	padding-right: 0.25rem;
	font-size: 0.875rem;
}

.resultsTable tr.summaryRow td {
	border-top: solid 1px #559AD2;
	border-bottom: double #559AD2;
}

.resultsTable tr.limitedPotentialRollover td {
	background-color: #AACCE8;
}

.resultsTable tfoot tr td {
	background-color: transparent;
	font-style: italic;
	text-align: left;
}

.resultsTable tr td.zero:after {
	/* Table cells classed "zero" will be empty. This style inserts the default content of "$0". It's done
	   this way so certain styles (just below) can selectively override "$0" with an n-dash instead. */
	content: "$0"
}

.resultsTable tr.planFundAmount td.zero:after,
.resultsTable tr.planFundAdditionalMatchAmount td.zero:after,
.resultsTable tr.totalFundAmount td.zero:after,
.resultsTable tr.forfeitedPotentialRollover td.zero:after,
.resultsTable tr td.noValue:after {
	content: "\2013"; /* CSS equivalent of – */
	color: #BBBBBB;
}

.resultsTable tr td.negative {
	color: #DD0000;
}

.resultsTable tr td.limitedRolloverAmount {
	color: #FF7700;
}

.resultsTable tr td.limitedRolloverAmount:after {
	content: "*";
}

.resultsTable tr td.limitedRolloverAmount.zero:after {
	content: "$0*";
}

.premiumsByPayPeriodTable {
	margin: 0.75rem 0 0 0;
}

.premiumsByPayPeriodTable tr th {
	background-color: transparent;
	border-bottom: solid 1px #AAAAAA;
	padding-top: 0;
}

.premiumsByPayPeriodTable tr td {
	background-color: transparent;
	border: none;
	padding: 2px 0 1px 0;
}

/*=========================================================================================================
	Styles primarily for #taxIntroSection / "View your potential tax savings"
  =========================================================================================================*/

#taxIntroSection .sectionHeader {
}

#taxIntroSection .sectionHeader .sectionHeaderIcon {
}

#taxIntroSection .sectionBody {
	padding-bottom: 1.125rem;
}

/*=========================================================================================================
	Styles primarily for #taxCalcSection / "___ Tax Calculator" (dynamic title based on chosen plan)
  =========================================================================================================*/

#taxCalcSection {
	display: none; /* Initially not visible! Displayed when user requests it. */
}

#taxCalcSection .sectionHeader {
}

#taxCalcSection .sectionHeader .sectionHeaderIcon {
}

#taxCalcSection .taxCalcTopNotes p:last-child {
	margin-bottom: 1.25rem;
}

#taxCalcSourcePlanDiv {
	padding: 0 0 0 1rem;
}

#taxCalcSourcePlanName {
	font-weight: bold;
}

#taxChart {
	height: 535px;
	padding: 1rem 0 0 0;
}

#taxCalcSection .taxChartFootnotes {
	margin: 0.25rem 0 0.75rem 0;
}

#taxCalcSection .taxChartFootnotes p {
	display: inline-block;
	margin: 0.25rem;
	color: #666666;
	font-size: 0.875rem;
	line-height: 1rem;
}

#taxCalcInputs label {
	display: block;
	font-weight: normal;
	padding-top: 0.375rem;
	padding-right: 0.25rem;
}

#taxCalcInputs select.form-control {
	width: inherit;
}

#taxNumDependents small {
	white-space: nowrap;
	padding: 0.5rem 0 0 0.25rem;
}

#taxCalcSliders {
	display: table;
	clear: both;
	width: 100%;
	margin-top: 0.25rem;
}

#taxCalcSection .taxCalcSliderDiv {
	display: table-row;
	height: 62px;
}

#taxCalcSection .sliderTextInput {
	width: 6rem;
}

#taxCalcSlidersHelp {
	width: 100%;
	margin: 0.25rem 0 0 0;
}

#taxCalcSlidersHelp p {
	background-color: #E4F2FB;
	border: solid 1px #AED0EA;
	padding: 0.5rem 0.5rem;
	margin: 0.375rem 0 1rem 0;
}

/*=========================================================================================================
	Page footer: Includes the copyright notice.
  =========================================================================================================*/

#pageFooter {
	font-size: 0.875rem;
	background-color: #333333;
	color: #999999;
	padding: 0.875rem 0.5rem 0.875rem 0.5rem;
}

#pageFooter select.form-control {
	height: 1.5rem;
}

/*=========================================================================================================
	Styles primarily for modal help dialogs.
  =========================================================================================================*/

/* costsAssumptionsTable */

.costsAssumptionsTable {
	border: none;
	border-collapse: separate;
	border-top: 1px solid #CBD9ED;
	border-spacing: 0;
}

.costsAssumptionsTable tr th {
	background-color: #B6C3D8;
	border-top: solid 0.75rem #FFFFFF;
	padding: 0.5rem 0.25rem 0.25rem 0.25rem;
}

.costsAssumptionsTable tbody tr td {
	border-top: none;
	border-bottom: 1px solid #CBD9ED;
	padding: 0.25rem 0.5rem;
	text-align: right;
}

.costsAssumptionsTable td:first-child {
	color: #444444;
	text-align: left;
}

.costsAssumptionsTable td:last-child {
	color: #000044;
	text-align: right;
	width: 4rem;
}

table.costsAssumptionsTable tr:nth-child(odd) {
	background-color: #F1F4FA;
}

table.costsAssumptionsTable tr:nth-child(even) {
	background-color: #DBE3F0;
}

/* planProvisionsTable */

table.planProvisionsTable {
	background-color: #F2F2F2;
	font-size: 0.9375rem;
}

table.planProvisionsTable tr th,
table.planProvisionsTable tr td {
	padding: 0.75rem 1rem 0.625rem 1rem;
	line-height: 1.375rem;
}

table.planProvisionsTable tr th {
	text-align: center;
	vertical-align: bottom;
}

table.planProvisionsTable tr th:first-child {
	text-align: left;
	vertical-align: top;
	font-weight: normal;
	font-style: italic;
}

table.planProvisionsTable tr td {
	background-color: #FFFFFF;
	vertical-align: middle;
	text-align: center;
	min-width: 130px;
}

table.planProvisionsTable tr:hover:not(.separator) td {
	background-color: #ECEEF2;
	color: #111111;
}

table.planProvisionsTable tr:hover:not(.separator) td:first-child {
	background-color: #E4E6EA;
	color: #2A828C;
}

table.planProvisionsTable tr:not(.separator) td:first-child {
	background-color: inherit;
	color: inherit;
	text-align: left;
	min-width: 160px;
	max-width: 300px;
	font-weight: bold;
}

table.table.planProvisionsTable tr th.selected,
table.table.planProvisionsTable tr td.selected {
	background-color: #DFF0F2;
	border-top: solid 1px #C0E0E5;
}

table.table.planProvisionsTable tr:hover td.selected {
	background-color: #BEE1E5;
}

table.planProvisionsTable tr.separator td {
	padding: 0.125rem;
}

/*=========================================================================================================
	Disagree page.
  =========================================================================================================*/

.disagreePage #pageBody, #pageBodyUnsupportedBrowser {
	background-color: #FFFFFF;
	color: #333333;
	padding: 4rem 0 2.5rem 0;
	text-align: center;
}

#pageBodyUnsupportedBrowser p {
	background-color: white;
	padding: 2rem;
}

/*=========================================================================================================
	Responsive adjustments for narrower screens (tablets, phones, etc.)
  =========================================================================================================*/

@media (max-width: 1199px) {
	.chartArea {
		padding-right: 15px;
	}
}

@media (min-width: 992px) {
	.costsAssumptionsTable {
		min-width: 500px;
	}
}

@media (max-width: 1024px) {

	div.topmost.container, div.topmost.container-fluid {
		padding: 0;
	}

	#pageHeader div#logoAndToolName {
		box-shadow: 0 0.25rem 0.25rem rgba(0, 0, 0, 0.2);
	}

	#pageHeader div#topMenu {
		padding: 0.5rem 0.25rem 0.25rem 0.5rem;
	}

	.sectionBody {
		padding: 1rem;
	}

	a.planProvisionsLink {
		font-size: 0.875rem;
	}

	.savingsAccountSliderRow .slider {
		width: 46%;
	}

	.sliderTextInput {
		width: 4.5rem;
	}
}

@media (min-width: 768px) {
	.modal-dialog { max-width: 640px; }
	#modal_PlanProvisions .modal-dialog { max-width: 1200px; }
	#modal_PlanProvisions .modal-dialog .preamble { margin: 0 0 20px 0; }
}

@media (max-width: 768px) {

	:root {
		font-size: 15px;
	}
}

@media (max-width: 767px) {

	div.topmost.container,
	div.topmost.container-fluid {
		overflow: initial;
	}

	#pageHeader div#topMenu {
		height: auto !important;
		float: right;
		padding: 0.875rem 0.25rem 0.5rem 0.5rem;
		background: #FFFFFF;
		width: 100%;
	}

	#mpceSection .nav-tabs .nav-link {
		padding-top: 0.375rem;
		text-align: left;
	}

	.savingsArea {
		margin-top: 1rem;
		padding-left: 15px;
	}

	.sectionHeader {
		padding: 0.5rem 1rem 0.5rem 1rem;
	}

	#taxIntroSection .btn {
		margin-top: 0.5rem;
	}

	#taxCalcSection .col-auto.form-control {
		margin-left: 15px;
		margin-bottom: 0.5rem;
	}

	#modal_UserAgreement {
		position: absolute;
		left: 0;
		top: 0;
		margin-left: 0;
		width: 100%;
	}

	.modal-dialog {
		max-width: inherit;
		margin: 0.75rem;
	}

	.modal-header, .modal-footer {
		padding: 0.67rem;
	}

	.modal.fade.show {
		top: 10px; /* Helps fix modal not displaying on some mobile displays, w/height adjustments below */
	}

	#taxCalcInputs label {
		padding-top: 0;
		margin-bottom: 2px;
	}
}

@media (max-width: 480px) {

	body {
		line-height: 1.25rem;
	}

	.modal-body {
		padding: 0.75rem;
	}

	.modal-body p, .modal-body ul {
		margin-bottom: 0.5rem;
	}

	#pageHeader p#toolName {
		font-size: 1.25rem;
	}

	#loadingMpceSection, #toolIntroSection, #warning, #error {
		padding: 2rem 1.5rem 0.75rem 1.5rem;
	}

	.sectionBody {
		padding: 0.75rem;
	}

	#adjustSection .tab-content {
		padding-left: 0;
		padding-right: 0;
	}

	.savingsAccountSliderRow .slider {
		width: 50%;
	}

	.savingsAccountSliderRow .sliderTextInput {
		width: 4.5rem;
	}

	.carryoverSliderRow.savingsAccountSliderRow .slider {
		width: 60%;
	}
}

@media (max-width: 360px) {

	#pageHeader div#logoAndToolName {
		padding: 0.5rem 0.5rem 0.5rem 1rem;
	}
}

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

@media (min-height: 800px) { #modal_PlanProvisions .modal-body { max-height: 650px; }}
@media (min-height: 910px) { #modal_PlanProvisions .modal-body { max-height: 760px; }}

@media (max-height: 736px) { .modal-body { max-height: 470px; } }
@media (max-height: 667px) { .modal-body { max-height: 408px; } }
@media (max-height: 568px) { .modal-body { max-height: 318px; } }
@media (max-height: 480px) { .modal-body { max-height: 260px; } }
@media (max-height: 420px) { .modal-body { max-height: 216px; } }
@media (max-height: 375px) { .modal-body { max-height: 185px; } }
@media (max-height: 360px) { .modal-body { max-height: 168px; } }
@media (max-height: 320px) { .modal-body { max-height: 134px; } }

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

@media screen and (orientation: portrait) {
}

@media screen and (orientation: landscape) {
}