/*=========================================================================================================
	Cookie Constent styling
=========================================================================================================*/
#consent-banner {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 3147483647;
}
#consent-banner p
{
	font-size: 12px;
	font-weight: 400;
	color: #ffffff;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 1rem;
	line-height: 1rem;
}

#consent-banner a
{
	font-size: 12px;
}
#teconsent a
{
	font-size: 12px;
	position: fixed;
	bottom: 0;
}
/*=========================================================================================================
	End Cookie Constent styling
=========================================================================================================*/


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

/* Variables for those style properties that are most likely to vary by client. */
:root {
	--color-body-background: #EEEEEE;
	--color-pageHeader-background: #000000;
	--color-pageHeader-toolName: #FFFFFF;
	--color-pageHeader-topMenu-link: #444444;
	--color-pageHeader-topMenu-icon: #444444;
	--color-pageHeader-topMenu-icon-hover: #000000;
	--color-main-content-background: #FFFFFF;
	--color-headings: #000000;
	--color-plain-text: #333333;
	--color-lighter-text: #666666;
	--color-link: #9A3365;
	--color-link-hover: #753053;
	--color-modal-title: #000000;
	--color-neutral-background: #F2F3F4;
	--color-sectionHeader-background: #000000;
	--color-sectionHeader-text: #FFFFFF;
	--color-adjustSection-modeling-pane: #DEDEDE;
	--color-adjustSection-modeling-pane-link: #9A3365;
	--color-adjustSection-modeling-pane-link-hover: #753053;
	--color-adjustSection-detailed-modeling-odd-rows: #EDEDED;
	--color-hsaSlider-background: #EFA1A2;
	--color-fsaSlider-background: #F0DDAD;
	--color-carryoverSlider-background: #9BD1D0;
	--color-resultsTable-header-background: #000000;
	--color-resultsTable-header-text: #FFFFFF;
	--color-resultsTable-regular-background: #FFFFFF;
	--color-resultsTable-cell-border: #000000;
	--color-resultsTable-summaryRow-background: #FFFFFF;
	--color-pageFooter-background: #000000;
	--color-pageFooter-text: #FFFFFF;
	--color-btn-primary: #D9534F;
	--color-btn-primary-text: #FFFFFF;
	--color-btn-primary-hover: #C9302C;
	--color-btn-primary-active: #BD2130;
	--boxshadow-btn-primary-focus: 0 0 0 0.2rem rgba(225, 83, 97, 0.5);
	--color-tooltip-background: #204F75;
	--color-tooltip-text: #FFFFFF;
	--color-plain-value: #0022BB;
	--color-highlight-value: #6611FF;
	--color-positive-value: #28A745;
	--color-negative-value: #DC3545;
	--color-warning-value: #FD7E14;
	--color-zero-value: #AAAAAA;
	--font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--sectionHeaderIcon-display: initial; /* "initial" to show, or "none" to hide */
}

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

body {
	font-family: var(--font-family);
	background-color: var(--color-body-background);
	color: var(--color-plain-text);
	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: var(--font-family);
}

[v-cloak] {
	/* Used to hide Vue elements before Vue has been loaded. */
	display: none;
}

a {
	cursor: pointer;
	color: var(--color-link);
	text-decoration: none;
}

a.btn {
	text-decoration: none;
}

a:hover {
	color: var(--color-link-hover);
	text-decoration: none;
}

button.nakedButton,
button[data-toggle="modal"] {
	background: none;
	border: none;
	padding: 0;
	font-family: var(--font-family);
	color: var(--color-link);
	text-decoration: underline;
	cursor: pointer;
}

button.nakedButton:hover,
button[data-toggle="modal"]:hover {
	color: var(--color-link-hover);
	text-decoration: none;
}

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: var(--color-main-content-background);
}

.small, small {
	color: var(--color-lighter-text);
	font-style: italic;
	margin-bottom: 0.5rem;
	font-size: 0.8125rem;
	line-height: 0.9375rem
}

h1, h2, h3, h4, h5, h6 {
	color: var(--color-headings);
}

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

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

h3 {
	font-size: 1.1875rem;
}

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

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

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

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

input[type="checkbox"] {
	transform: scale(1.4);
}

input[type="radio"] {
	transform: scale(1.3);
	margin-right: 0.375rem;
}

input[type="radio"]:checked+label {
	font-weight: bold;
}

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

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

body:not(.saveScenarioEnabled) .saveScenarioButton {
	display: none;
}

body:not(.scenarioLoaded) .clearScenarioButton {
	display: none;
}

body:not(.planRecommendationEnabled) #prioritiesSection,
body:not(.planRecommendationEnabled) .planRecommendationResult,
body:not(.planRecommendationEnabled) .planRecommendationResultNone {
	display: none;
}

body:not(.simpleFeedbackEnabled) .simpleFeedback {
	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: 5rem;
	float: left;
	border: solid 1px #D7E7F2;
	border-radius: 3px;
	color: #343A40;
	background-color: #F9F9F9;
	font-weight: bold;
	padding: 0.125rem 0.375rem;
	margin: 0.125rem 0.125rem 0 0.75rem;
}

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

.sliderTextWithTooltip, .textWithTooltip {
	color: var(--color-link-hover);
	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: var(--font-family);
	font-size: 0.875rem;
	margin: 0;
	padding: 0;
}

.chartTooltip .seriesName {
	color: var(--color-plain-text);
}

.chartTooltip > .value {
	font-size: 0.9375rem;
	font-weight: bold;
	color: var(--color-plain-value);
}

.chartTooltip .highlight {
	color: var(--color-highlight-value);
}

.feedbackButton {
	margin-left: 0.125rem;
	margin-right: 0.125rem;
}

todo, .todo {
	background-color: #FFFF00;
}

/* Overrides of some Bootstrap styles */

.alert {
	padding-bottom: 0;
}

.alert-primary {
	background-color: #E6F2FF;
	color: var(--color-plain-text);
}

.alert-secondary {
	background-color: var(--color-neutral-background);
}

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: var(--color-btn-primary-text);
	background-color: var(--color-btn-primary);
	border-color: var(--color-btn-primary);
}

.btn-primary:hover {
	color: var(--color-btn-primary-text);
	background-color: var(--color-btn-primary-hover);
	border-color: var(--color-btn-primary-hover);
}

.btn-primary:focus, .btn-primary.focus {
	color: var(--color-btn-primary-text);
	background-color: var(--color-btn-primary-hover);
	border-color: var(--color-btn-primary-hover);
	box-shadow: var(--boxshadow-btn-primary-focus);
}

.btn-primary.disabled, .btn-primary:disabled {
	color: var(--color-btn-primary-text);
	background-color: var(--color-btn-primary);
	border-color: var(--color-btn-primary);
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
	color: var(--color-btn-primary-text);
	background-color: var(--color-btn-primary-active);
	border-color: var(--color-btn-primary-active);
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
	box-shadow: var(--boxshadow-btn-primary-focus);
}

.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: var(--font-family);
	font-size: 0.9375rem;
}

.tooltip.show {
	opacity: 1;
}

.tooltip .tooltip-inner {
	background-color: var(--color-tooltip-background);
	color: var(--color-tooltip-text);
	padding: 0.75rem;
	max-width: 20rem;
}

.tooltip .arrow:before {
	border-top-color: var(--color-tooltip-background);
}

.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: var(--color-modal-title);
}

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

.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: var(--color-pageHeader-background);
	margin-bottom: 0;
}

#pageHeader #logoAndToolName {
	display: table;
	background-color: var(--color-pageHeader-background);
	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: 138px;
	height: auto;
	margin: 1rem;
}

#pageHeader p#toolName {
	color: var(--color-pageHeader-toolName);
	font-size: 1.675rem;
	font-weight: normal;
	padding: 0 0.75rem 0 0.75rem;
	display: table-cell;
	vertical-align: middle;
	text-align: right;
}

#pageHeader #topMenu {
	background-color: #DEDEDE;
	padding: 0.5rem 1.75rem 0.25rem 1rem;
	text-align: right;
	line-height: 1.5;
}

#pageHeader #topMenu a,
#pageHeader #topMenu button {
	background: none;
	border: none;
	padding: 0 0 0 0.625rem;
	font-family: var(--font-family);
	color: var(--color-pageHeader-topMenu-link);
	text-decoration: none;
	text-transform: uppercase;
	font-weight: bold;
	white-space: nowrap;
	cursor: pointer;
}

#pageHeader #topMenu button:hover span {
	text-decoration: underline;
}

#pageHeader #topMenu a .fa, #pageHeader #topMenu button .fa,
#pageHeader #topMenu a .fal, #pageHeader #topMenu button .fal,
#pageHeader #topMenu a .far, #pageHeader #topMenu button .far,
#pageHeader #topMenu a .fas, #pageHeader #topMenu button .fas {
	color: var(--color-pageHeader-topMenu-icon);
	padding-right: 0.125rem;
}

#pageHeader #topMenu a:hover, #pageHeader #topMenu button:hover,
#pageHeader #topMenu a:hover .fa, #pageHeader #topMenu button:hover .fa,
#pageHeader #topMenu a:hover .fal, #pageHeader #topMenu button:hover .fal,
#pageHeader #topMenu a:hover .far, #pageHeader #topMenu button:hover .far,
#pageHeader #topMenu a:hover .fas, #pageHeader #topMenu button:hover .fas {
	text-decoration: none;
	color: var(--color-pageHeader-topMenu-icon-hover);
}

body.taxView .hiddenInTaxView {
	display: none; /* e.g. Hides the "Guide Me" / "Full Tool" links while only in the tax view */
}

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

body:not(.duringWizard) .useFullToolButton {
	display: none; /* e.g. Hides the "Full Tool" button 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.
  =========================================================================================================*/

body:not(.launchPage) #pageBody {
	background-color: var(--color-main-content-background);
}

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

#warning, #error {
	font-size: 1.125rem;
	padding: 1.75rem 2rem 1.5rem 2rem;
	background-color: #FFF9F9;
	border: solid 1px #E3B8B8;
	color: #AA1122;
}

#warning p.detail, #error p.detail {
	background-color: #FFFFFF;
	border: solid 1px #E3B8B8;
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	font-size: 0.9375rem;
	color: #000000;
}

#warning code, #error code {
	font-size: inherit;
	color: inherit;
	white-space: pre-line;
}

/* Things in common across sections */

.sectionHeader {
	color: var(--color-sectionHeader-text);
	background-color: var(--color-sectionHeader-background);
	font-size: 1.125rem;
	font-weight: bold;
	padding: 0.375rem 1rem;
	vertical-align: middle;
}

.sectionHeader .sectionHeaderIcon {
	display: var(--sectionHeaderIcon-display);
	float: left;
	padding: 0.1875rem 0.375rem 0 0;
}

.sectionHeader .sectionHeaderTitle {
}

.sectionBody {
	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 .textInputDiv {
	margin-bottom: 0.75rem;
}

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

#personalSection .form-control.readOnlyValue {
	color: #334455;
	border-color: #E0E0E0;
	background-color: #F7F7F7;
	padding-top: 0.25rem;
	margin-bottom: 0.75rem;
}

/*=========================================================================================================
	Styles primarily for #prioritiesSection / "Tell us what's most important to you about a healthcare plan"
  =========================================================================================================*/

.planPriorityRadioButtons input[type="radio"] {
	margin-left: 2rem;
	margin-right: 0.5rem;
}

/*=========================================================================================================
	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: var(--color-adjustSection-modeling-pane);
	overflow: auto;
	margin: 0;
	padding-right: 0;
	padding-left: 0;
}

#adjustSection .tab-pane button {
	color: var(--color-adjustSection-modeling-pane-link);
}

#adjustSection .tab-pane button:hover {
	color: var(--color-adjustSection-modeling-pane-link-hover);
}

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

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

#adjustSection .nav-tabs > li > button, #adjustSection .nav-pills > li > button {
	padding: 8px 11px;
	background-color: #E8E8E8;
	text-decoration: none;
	margin-right: 2px;
	line-height: 1.125rem;
	color: var(--color-link);
}

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

#adjustSection .nav-tabs > .active > button, #adjustSection .nav-tabs > .active > button:hover {
	color: var(--color-plain-text);
	font-weight: bold;
	background-color: var(--color-adjustSection-modeling-pane);
	border: 1px solid var(--color-adjustSection-modeling-pane);
	border-bottom-color: transparent;
	cursor: default;
}

/* simplifiedModelingContents */

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

#simplifiedModelingContents button[data-toggle="modal"],
#detailedModelingContents button[data-toggle="modal"] {
	font-weight: bold;
}

#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: var(--color-adjustSection-modeling-pane);
	padding: 0 8px 0 12px;
}

#simplifiedModelingContents .personContainer.headings .usageCategory.category2,
#simplifiedModelingContents .personContainer .usageCategoryDropdownOuter.usageCategory.category2 {
	background-color: var(--color-adjustSection-modeling-pane);
}

#simplifiedModelingContents .personContainer .usageCategoryDropdownOuter {
	display: table;
	height: 44px;
	background-color: var(--color-adjustSection-modeling-pane);
	padding: 0 0.375rem 0.25rem 0.125rem;
}

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

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

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

/* detailedModelingContents */

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

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

#detailedModelingContents th {
	height: 1rem;
	text-align: center;
	padding: 0.1875rem 0;
	color: var(--color-plain-text);
}

#detailedModelingContents th:first-child {
	color: var(--color-plain-text);
	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 tr:nth-child(odd) td {
	background-color: var(--color-adjustSection-detailed-modeling-odd-rows);
}

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

#detailedModelingPane table td {
	padding: 2px 5px 0 5px;
}

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

#mpceSection .sectionHeader {
}

#mpceSection .sectionHeader .sectionHeaderIcon {
}

#mpceSection .sectionBody {
	padding-bottom: 0.25rem;
}

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

.chartArea {
	padding-left: 0;
	padding-right: 0;
}

.chartArea .coverageLevelHeading {
	font-size: 1.125rem;
	color: var(--color-lighter-text);
	font-weight: normal;
}

.chartArea .coverageLevel {
	color: var(--color-plain-text);
	font-weight: bold;
}

.chartOptions {
	background-color: var(--color-neutral-background);
	color: var(--color-plain-text);
	font-size: 1rem;
	border: solid 1px #D6D8DB;
	padding: 0.375rem 1.25rem 0.3125rem 2rem;
	margin-bottom: 0.5625rem;
}

button.planProvisionsButton {
	font-weight: normal;
	font-size: 1rem;
}

button.planProvisionsButton .fa,
button.planProvisionsButton .fal,
button.planProvisionsButton .far,
button.planProvisionsButton .fas {
	padding: 0 0.325rem;
}

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

.mainChartFootnotes, .mainChartFootnotesCopy {
	margin: 0.5625rem 0 0.625rem 0;
}

.mainChartFootnotes p, .mainChartFootnotesCopy p {
	display: inline-block;
	color: var(--color-plain-text);
	font-size: 0.9375rem;
	line-height: 1.222;
}

.mainChartTooltip .planName {
	color: var(--color-plain-text);
	font-style: italic;
	margin: 2px 0 5px 0;
}

.mainChartTooltip .chartSeriesDetails {
	color: var(--color-lighter-text);
	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: var(--color-warning-value);
}

.mainChartTooltip .oopCostsDetails table tr.totalMedicalAndDrugCosts td.value {
	color: var(--color-negative-value);
	border-top: solid 1px var(--color-plain-text);
}

.mainChartTooltip .oopCostsDetails table tr.totalFundAmountOffset td.value {
	color: var(--color-positive-value);
}

.mainChartTooltip .oopCostsDetails table tr.totalMedicalAndDrugCostsLessFundOffset td.value {
	color: var(--color-plain-value);
	border-top: solid 1px var(--color-plain-text);
	border-bottom: double var(--color-plain-text);
	padding-top: 3px;
	padding-bottom: 2px;
}

.mainChartTooltip .oopCostsDetails .notes {
	min-width: 150px;
	float: right;
	color: var(--color-lighter-text);
	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: var(--color-warning-value);
}

.mainChartTooltip .employeePremiumsDetails table tr td.value.incentive,
.mainChartTooltip .employerPremiumsDetails table tr td.value.incentive {
	color: var(--color-positive-value);
}

.mainChartTooltip .employeePremiumsDetails table tr td.value.surcharge,
.mainChartTooltip .employerPremiumsDetails table tr td.value.surcharge {
	color: var(--color-negative-value);
}

.mainChartTooltip .employeePremiumsDetails table tr.totalAnnualPayrollContributions td.value,
.mainChartTooltip .employerPremiumsDetails table tr.employerPlanPremium td.value {
	color: var(--color-plain-value);
	border-top: solid 1px var(--color-plain-text);
	border-bottom: double var(--color-plain-text);
	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 var(--color-plain-text);
}

.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 var(--color-plain-text);
	border-bottom: double var(--color-plain-text);
}

.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:not(.notInUse) {
	display: table;
	padding-left: 0;
}

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

.savingsArea p {
	margin: 0.625rem 0 0.75rem 0;
}

.savingsAccountSliderRow:not(.notInUse) {
	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: var(--color-lighter-text);
	font-weight: bold;
}

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

.sliderMinimum, .sliderMaximum {
	color: var(--color-lighter-text);
	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 6px 0 0;
	float: left;
}

.sliderMaximum {
	padding-left: 10px;
}

.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: var(--color-hsaSlider-background) none;
}

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

body:not(.duringWizard) .carryoverSlider .ui-slider-range.ui-widget-header {
	background: var(--color-carryoverSlider-background) 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: var(--color-positive-value);
	padding: 0.375rem 0 0.25rem 0.1875rem;
}

.resultsTable {
	width: 100%;
	color: var(--color-plain-text);
	font-size: 0.875rem;
	line-height: 0.875rem;
	border: none;
	margin-top: 0.5rem;
}

.resultsTable caption {
	caption-side: top;
	color: var(--color-plain-text);
	padding: 0 0 0.3125rem 0;
	font-style: italic;
}

.resultsTable tr th {
	font-weight: bold;
	background-color: var(--color-resultsTable-header-background);
	color: var(--color-resultsTable-header-text);
	border-bottom: solid 1px var(--color-resultsTable-cell-border);
	vertical-align: bottom;
	text-align: center;
	padding: 0.625rem 0.25rem 0.375rem 0.375rem;
}

.resultsTable tr th.resultName {
	text-align: left;
	font-style: italic;
	width: 45%;
}

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

.resultsTable tr td {
	padding: 0.5rem 0.25rem 0.3125rem 0.375rem;
	background-color: var(--color-resultsTable-regular-background);
	border-top: dotted 1px var(--color-resultsTable-cell-border);
	border-collapse: collapse;
	text-align: center;
}

.resultsTable td.sliderHighlight {
	color: var(--color-positive-value);
	background-color: #F4FFF6;
	font-weight: bold;
}

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

.resultsTable tr.summaryRow td {
	padding: 0.5625rem 0.25rem 0.375rem 0.375rem;
	border-top: solid 1px var(--color-resultsTable-cell-border);
	border-bottom: double var(--color-resultsTable-cell-border);
	background-color: var(--color-resultsTable-summaryRow-background);
}

.resultsTable tfoot tr td {
	background-color: transparent;
	border-top: none;
	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.planFundAndMatchTotalPaid 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: var(--color-zero-value);
}

.resultsTable tr td.negative {
	color: var(--color-negative-value);
}

.resultsTable tr td.limitedRolloverAmount {
	color: var(--color-warning-value);
}

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

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

#nonWizardSections .resultsTable tr.intermediateResultsVersion {
	display: none; /* Hide rows classed "intermediateResultsVersion" (used only by the wizard) from appearing in the main tool. */
}

p.learnMore {
	margin: 0.625rem 0 0.75rem 0;
}

p.simpleFeedback {
	font-size: 1.1875rem;
}

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

#taxIntroSection .sectionHeader {
}

#taxIntroSection .sectionHeader .sectionHeaderIcon {
}

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

/*=========================================================================================================
	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 .sectionBody {
	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

#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: var(--color-plain-text);
	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 .sliderDiv {
	display: table-row;
}

#taxCalcSection .sliderTextInput {
	width: 6rem;
}

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

#pageFooter {
	font-size: 0.9375rem;
	background-color: var(--color-pageFooter-background);
	color: var(--color-pageFooter-text);
	padding: 0.875rem 0.5rem 0.875rem 0.5rem;
	font-weight: bold;
}

#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 {
	color: var(--color-plain-text);
	border-top: none;
	border-bottom: 1px solid #CBD9ED;
	padding: 0.25rem 0.5rem;
	text-align: right;
}

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

.costsAssumptionsTable td:last-child {
	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.1875rem;
}

table.planProvisionsTable tr th {
	text-align: center;
	vertical-align: bottom;
	line-height: 1.0625rem;
}

table.planProvisionsTable tr th:first-child {
	text-align: left;
	vertical-align: middle;
	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 td i {
	color: #000000;
	font-size: 0.875rem;
	border-bottom: dotted 1px #AAAAAA;
	line-height: 1.625rem;
}

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;
	line-height: 1.0625rem;
}

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 and unsupported browser page bodies.
  =========================================================================================================*/

#pageBodyDisagree, #pageBodyUnsupportedBrowser {
	background-color: var(--color-main-content-background);
	color: var(--color-plain-text);
	padding: 4rem 0 2.5rem 0;
	text-align: center;
}

#pageBodyDisagree p, #pageBodyUnsupportedBrowser p {
	padding: 1rem;
}

/*=========================================================================================================
	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: 991px) {
	.savingsArea {
		margin-top: 1rem;
		padding-left: 15px;
	}
}

@media (max-width: 1024px) {

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

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

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

	.sectionBody {
		padding: 1rem;
	}

	button.planProvisionsButton {
		font-size: 0.875rem;
	}

	.savingsAccountSliderRow .slider {
		width: 46%;
	}

	.sliderTextInput {
		width: 4.5rem;
	}

	.chartArea {
		padding-left: 15px;
	}
}

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

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

	.btnSwitchToTaxView {
		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;
	}

	#taxCalcSection .sliderDiv .slider {
		margin-top: 0.5625rem;
	}
}

@media (max-width: 480px) {

	body {
		line-height: 1.222;
	}

	input[type="checkbox"], input[type="radio"] {
		transform: scale(1.1);
	}

	.btn {
		padding: 0.375rem 0.75rem;
	}

	.modal-body {
		padding: 0.75rem;
	}

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

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

	#pageHeader #topMenu {
		padding: 0.75rem 0.75rem 0.375rem 0.5rem;
	}

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

	#taxCalcSection .sliderDiv .slider {
		width: 66%;
	}

	.savingsAccountSliderRow .slider {
		margin-top: 0.375rem;
		width: 55%;
	}

	.savingsAccountSliderRow .sliderTextInput {
		width: 5.5rem;
	}

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

	#taxCalcSection .sliderTextWithTooltip, #taxCalcSection .sliderTextNoTooltip {
		margin-bottom: 0.1875rem;
	}
}

@media (max-width: 360px) {

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

	.savingsAccountSliderRow .slider {
		width: 50%;
	}

	#taxCalcSection .sliderDiv .slider {
		width: 61%;
	}
}

/*=========================================================================================================
	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) {
}

/*=========================================================================================================
	Browser-specific hacks to fix stuff.
  =========================================================================================================*/

/* Scaling of checkbox and radio above currently doesn't work well in Safari. This hack reverts for Safari, only. */
@media not all and (min-resolution:.001dpcm) {
	@supports (-webkit-appearance:none) and (display:flow-root) {
		input[type="checkbox"], input[type="radio"] { transform: revert; }
	}
}