@font-face {
  font-family: CharlesModern;
  src: url(../fonts/CharlesModern-Regular.eot);
  src: url(../fonts/CharlesModern-Regular.eot#iefix) format("embedded-opentype"), url(../fonts/CharlesModern-Regular.ttf) format("truetype"), url(../fonts/CharlesModern-Regular.woff) format("woff"), url(../fonts/CharlesModern-Regular.svg) format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: CharlesModern;
  src: url(../fonts/CharlesModern-Bold.eot);
  src: url(../fonts/CharlesModern-Bold.eot#iefix) format("embedded-opentype"), url(../fonts/CharlesModern-Bold.woff) format("woff"), url(../fonts/CharlesModern-Bold.svg) format("svg");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: CharlesModern;
  src: url(../fonts/CharlesModern-Light.eot);
  src: url(../fonts/CharlesModern-Light.eot#iefix) format("embedded-opentype"), url(../fonts/CharlesModern-Light.ttf) format("truetype"), url(../fonts/CharlesModern-Light.woff) format("woff"), url(../fonts/CharlesModern-Light.svg) format("svg");
  font-weight: 200;
  font-style: normal;
}
section { max-width: 1232px; box-sizing: border-box; margin: 0 auto; }
#CCCalculator {background-color: #f7f7f7; padding: 24px 0; }
#CCCalculator * {box-sizing: border-box; font-family: CharlesModern}
#CCCalculator h2 {font-family: CharlesModern; font-weight: lighter; font-size: 34px; line-height: 1.2; margin: 0 0 10px}
#CCCalculator .dropdown-icon {position: relative;}
#CCCalculator .dropdown-icon::after {content: ''; pointer-events: none; position: absolute; right: 10px; bottom: 20px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 12px solid #037dae; }
.input-group {position: relative; font-size: 16px; margin-bottom: 15px}
input, textarea, select {min-height: 57px;}
input, select, label { font-size: 18px; font-weight: 200; }
.select-label-replace { font-size: 24px; font-weight: 200; }
.select-label-replace { border-bottom: 1px solid #aaa; width: 100%; padding-bottom: 10px; }
#CCCalculator input, #CCCalculator select {background-color: #fff;color: #037dae}
/*.input-block { width: 100%; float: left; margin-bottom: 5px; position: relative;}*/
input, select {display: block; width: 100%; padding: 12px 0 12px; margin: 0 0; border: 1px solid #aaa; line-height: 1.15; padding-left: 8px; border-radius: 0}
select {-webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 28px; white-space: normal; }
select:not(:-internal-list-box) {  }
label {display:inline-block; padding: 5px 0;position: relative;}
[data-input="$"] > label::after {content: '$';position: absolute; display: block; height: 50px; left: 7px; top: 48px; font-size: 20px; color: #666;}
[data-input="$"] > input {padding-left: 22px}
[data-input="years"] > label::after {content: 'years';position: absolute; display: block; height: 50px; left: 37px; top: 48px; font-size: 20px; color: #666;}
.btn { padding: 8px 40px; font-size: 1.3em; line-height: 1.3em; display: block; width: 100%; margin-bottom: 15px; border: 1px solid transparent; }
.btn-blue {background-color: #037dae; color: #fff}
.field-wrapper input { padding-left: 20px; }
.flex-s[data-input="years"] > .field-wrapper input { padding-left: 8px; }
.visually-hidden { clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}
.group:before,
.group:after {
  content: "";
  display: table;
} 
.group:after {
  clear: both;
}
.group {
  zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.result-container {padding: 20px 20%; text-align:center;display: none; /*min-height: 244px;*/ height: 340px; }
  .result-summary {font-size: 26px; line-height: 1.2; display: none;font-weight: 200;}
  .result-summary strong {font-weight: bold}
.result-duration {background-color: #037dae; color: #fff}
.result-income {background-color: #4a5663; color: #fff; padding-left: 5%; padding-right: 5%}
.result-income .result-number {background-color: #6b7681}
.result-income .number-animated {background-color: #fff; color: #037dae}
.result-duration .number-animated {background-color: #fff;color: #333}
.result-category {color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 20px}
.error-result {color: #fff; background: #6a7782 url(../img/alert-icon-white-64.png) no-repeat center 35px; font-size: 20px; padding: 120px 20% 0; line-height: 1.5}
.years-container, .income-container {margin: 30px;}
.result-default {display: block;}
.result-comma { font-size: 32px; }
.years-container > p {display: flex; width: 150px; vertical-align: middle; margin: 0 auto;}
.result-number {display: inline-block; width: 30px; font-size: 32px; line-height: 39px; height: 39px; background-color: #5796BB;margin-right: 3px; border-radius: 5px; position: relative; overflow: hidden}
.result-number b{display: inline-block; position: absolute; right: 0; letter-spacing: 6px}
.result-label {display: inline-block; height: 39px; font-size: 32px; line-height: 39px; font-weight: bold; padding-left: 5px; }
.result-income .result-label {vertical-align: top;font-weight: 300; font-size: 38px}
.income-label {display: inline-block; height: 50px; font-size: 20px; font-weight: bold; line-height: 24px; vertical-align: top; text-align: left}
input[aria-invalid], select[aria-invalid] {border-color: red;}
.error-cntr {margin: 5px 0; width: 100%;}
.error-content {border: 1px solid red; padding: 5px 7px 5px 25px; background: #F6E5EA url('../img/error-icon-sprite.png') no-repeat 0 -86px; font-size: 12px}
.error-global .error-content{min-height: 28px; background-position: 0 6px; padding-left: 38px;}
.error-summary-cntr {border: 1px solid red; padding: 8px 7px 8px 42px; background: #F6E5EA url('../img/error-icon-sprite.png') no-repeat 0 6px; font-size: 12px; margin-bottom: 15px}
.error-list {list-style-type: disc; padding-left: 15px; }
.error-list > li {margin-top: 5px;}

.result-number::after {display: block; width: 30px; height: 39px; font-size: 32px; line-height: 39px; content:''; }
.icn-info {background: url(../img/tooltip-icon-DCB-16.png) no-repeat center bottom; width: 20px; height: 20px; border-radius: 15px; margin-right: 8px; padding: 14px 0 0; border-color: transparent; display: inline-block;}
.clear {clear: both;}
.disclosure {margin: 20px auto; max-width: 1300px}
.disclosure p {font-size: 12px; line-height: 1.4; margin: 0 0 12px; font-family: sans-serif;}
.howitworks { font-size: 12px; text-align: right; padding-bottom: 8px; }
.howitworks a { text-decoration: none; color: #026d97; }
.howitworks a:hover,
.howitworks a:active,
.howitworks a:focus { text-decoration: underline; }
.toggle-disclosure { display: none; }
.toggle-disclosure.enabled { display: block; }
#calculator-submit{font-weight: 900; font-size: 19px;padding: 11px 20px;}
#calculator-submit:hover{ cursor: pointer;background-color: rgb(28, 103, 153);}
.icn-info:focus, #calculator-submit:focus,#calculator-submit:focus-visible {
  outline: 2px solid #297dae;
  outline-offset: 2px;
}
@media (min-width: 568px) {
  #CCCalculator .dropdown-icon::after {content: ''; pointer-events: none; position: absolute; bottom: auto; right: 10px; top: 20px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 12px solid #037dae; }
  .flex-s input, .flex-s select {width: inherit;}
  .flex-s select {-webkit-appearance: inherit; -moz-appearance: inherit; appearance: inherit;}
 
  .flex-s {display: flex;}
  input, select, label { font-size: 22px; }
  [data-input="$"] > label::after {top: 60px; font-size: 24px;}
  [data-input="years"] > label::after {top: 60px; font-size: 24px;}
  .flex-s label {margin-right: 8px}
  .flex-s select, .flex-s .field-wrapper {flex-grow:1}
  .flex-s .field-wrapper input { width: 100%; }
  .flex-s[data-input="$"] > label::after {right: -26px; top: 13px; left:inherit}
  .flex-s.has-tooltip[data-input="$"] > label::after {right: -54px; top: 13px; left:inherit}
  .flex-s[data-input="years"] > label::after {right: -104px; top: 14px; left: inherit}
  .right-s {text-align: right}
  .icn-info {
    /* height: 37px; */
    align-self: center;}
  label {padding: 14px 0;}
  .btn {width: inherit; display: inline-block;}
}
@media (min-width: 999px) {
	.outerflex { display: flex; justify-content: space-between; }
	.calculator-block { flex-grow: 1; padding-left: 24px; }
	/*.error-summary-cntr { max-width: 61.5%; }*/
  .col-6-l { }
  .right-spacer-l {padding-right: 1.5%}
  .left-spacer-l {padding-left: 1.5%}
  .btn {margin: inherit}
  .hide-large { display: none; }
  .result-block { padding: 0 24px; width: 42.2%; }
}
@media (min-width: 1100px) {
  .calculator-block { padding-left: 50px; }
  .result-block { padding: 0 50px; }
  #CCCalculator { padding: 50px 0; }
}
@media (max-width: 470px) {
	.result-income { padding-left: 3%; padding-right: 3%; }
	.income-container { margin: 30px 0; }
	.income-label { display: block; text-align: center; height: auto; }
	.hide-large { display: none; }
}


@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  #CCCalculator .dropdown-icon::after {content: ''; display: none !important; }
}

.furl { font-size: 12px; }
.furl__title {
	padding: 0.5em;
	padding-left: 3em;
	background: none;
	font-size: inherit;
	font-weight: normal;
	position: relative;
	line-height: 2em;
	display: block;
	text-decoration: none;
	color:inherit;
	border:none;
	display: block;
	cursor: pointer; 
} 

.furl__title::before {
	content: "\002B";
	position: absolute;
	left: 0;
	top: 0;
	font-family: CharlesModern;
	font-weight: 300;
	color: #111;
	text-align: center;
	width: 1.5em;
	height: 1.5em;
	font-size: 2em;
	line-height: 1.4em;
	display: inline-block;
	vertical-align: middle;
}

.furl__title.furl-open::before {
 	content: "\2212";
}

@media reader, speech, aural {
	.furl__title::before {
		display: none;
	}
}
.furl__body {
	padding: 1em;
	padding-left: 4em;
	display: none;
}