/*!*******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/tool--retirement-calculator/style.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************/
.wp-block-frs-blocks-lead-in ~ .wp-block-frs-blocks-tool--retirement-calculator {
  margin-top: clamp(18px, 1.125rem + (1vw - 10.25px) * 13.012, 72px);
}

.retirement-calculator {
  --accent-color: var(--wp--preset--color--main-primary-soft);
  --border-color: var(--wp--preset--color--accent-secondary-2);
  --shadow-color: var(--wp--preset--color--accent-secondary-6);
  --slider-handle-color: var(--wp--preset--color--neutral);
  --input-area-background: var(--wp--preset--color--accent-secondary-1);
  --graph-background-color: var(--wp--preset--color--neutral);
  --info-panel-border-color: var(--wp--preset--color--main-primary);
  --info-panel-background-color: var(--wp--preset--color--accent-secondary-1);
  --color--needed-income: var(--wp--preset--color--supplemental-secondary-2);
  --color--social-security-income: var(--wp--preset--color--supplemental-primary-2);
  --color--retirement-income: var(--wp--preset--color--supplemental-primary-3);
  --color--shortfall: var(--wp--preset--color--supplemental-tertiary-2);
  --color--surplus: var(--wp--preset--color--supplemental-primary-3);
  --color--placeholder: var(--wp--preset--color--accent-secondary-3);
  --footnote-text-color: var(--wp--preset--color--footer-text-dark);
  --tooltip-color: var(--wp--preset--color--supplemental-primary-3);
  --graph-height: 400px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 5%;
}
@media (max-width: 1024px) {
  .retirement-calculator {
    flex-direction: column;
    gap: 36px;
  }
}
.retirement-calculator__controls {
  width: 65%;
}
@media (max-width: 1024px) {
  .retirement-calculator__controls {
    width: 100%;
  }
}
.retirement-calculator__inputs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 66px 6%;
  /**/
}
@media (max-width: 1024px) {
  .retirement-calculator__inputs {
    gap: 24px 6%;
  }
}
@media (max-width: 767px) and (orientation: portrait) {
  .retirement-calculator__inputs {
    flex-direction: column;
    gap: 12px;
  }
}
.retirement-calculator__inputs input[type=number]::-webkit-outer-spin-button,
.retirement-calculator__inputs input[type=number]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.retirement-calculator__inputs input[type=number] {
  -moz-appearance: textfield;
}
.retirement-calculator__inputs input[type=range] {
  --track-height: 9px;
  --thumb_size: 26px;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
}
.retirement-calculator__inputs input[type=range]::-webkit-slider-runnable-track {
  background-color: var(--border-color);
  height: var(--track-height);
  border-radius: 5px;
}
.retirement-calculator__inputs input[type=range]::-moz-range-track {
  background-color: var(--border-color);
  height: var(--track-height);
  border-radius: 5px;
}
.retirement-calculator__inputs input[type=range]:focus::-webkit-slider-runnable-track {
  background-color: var(--border-color);
  height: var(--track-height);
  border-radius: 5px;
}
.retirement-calculator__inputs input[type=range]:focus::-moz-range-track {
  background-color: var(--border-color);
  height: var(--track-height);
  border-radius: 5px;
}
.retirement-calculator__inputs input[type=range]::-webkit-slider-thumb {
  margin: 0;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 1px 1px 1px var(--shadow-color);
  background-color: var(--slider-handle-color);
  border-radius: 50%;
  width: var(--thumb_size);
  height: var(--thumb_size);
  transform: translateY(-35%);
}
.retirement-calculator__inputs input[type=range]::-moz-range-thumb {
  margin: 0;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  box-shadow: 1px 1px 1px var(--shadow-color);
  background-color: var(--slider-handle-color);
  border-radius: 50%;
  width: var(--thumb_size);
  height: var(--thumb_size);
}
.retirement-calculator__inputs input[type=range]:focus::-webkit-slider-thumb {
  margin: 0;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 1px 1px 1px var(--shadow-color);
  background-color: var(--slider-handle-color);
  border-radius: 50%;
  width: var(--thumb_size);
  height: var(--thumb_size);
}
.retirement-calculator__inputs input[type=range]:focus::-moz-range-thumb {
  margin: 0;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  box-shadow: 1px 1px 1px var(--shadow-color);
  background-color: var(--slider-handle-color);
  border-radius: 50%;
  width: var(--thumb_size);
  height: var(--thumb_size);
}
.retirement-calculator__inputs .standard-input {
  margin-bottom: 12px;
  padding: 8px;
  border-radius: 5px;
  border: 1px solid var(--border-color);
  width: 100%;
  max-width: 140px;
  color: var(--accent-color);
  font-size: 111.111%;
}
.retirement-calculator__inputs .standard-input.view-only {
  border: none;
  font-size: 90%;
  background-color: transparent;
  opacity: 1;
}
@media (max-width: 767px) and (orientation: portrait) {
  .retirement-calculator__inputs .standard-input {
    max-width: unset;
  }
}
.retirement-calculator__inputs .converted-value {
  display: flex;
  flex-direction: row;
  gap: 0;
}
.retirement-calculator__inputs .converted-value input {
  width: 50%;
}
.retirement-calculator__inputs .slider-input {
  margin-top: auto;
}
.retirement-calculator__input {
  width: 47%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
}
@media (max-width: 1024px) {
  .retirement-calculator__input {
    width: 47%;
  }
}
@media (max-width: 767px) and (orientation: portrait) {
  .retirement-calculator__input {
    width: 100%;
    background-color: var(--input-area-background);
    padding: 16px;
  }
}
.retirement-calculator__input__control-wrapper {
  margin: 0;
  padding: 0;
  border: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.retirement-calculator__input__control-wrapper label {
  display: block;
  padding: 0 0 12px 0;
  color: var(--shadow-color);
}
.retirement-calculator__input .tooltip {
  position: relative;
  z-index: 99;
  left: 21px;
  vertical-align: text-bottom;
}
.retirement-calculator__input .tooltip:after,
.retirement-calculator__input .tooltip span {
  transition: 0.25s all ease-in-out;
}
.retirement-calculator__input .tooltip.dynamic {
  left: auto;
  display: inline-block;
  text-indent: -5000px;
  overflow: hidden;
  position: relative;
  width: 20px;
  height: 20px;
  font-size: 1px;
  color: transparent;
  text-decoration: none;
}
.retirement-calculator__input .tooltip.dynamic:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: var(--accent-color);
  transform: translate(-50%, -50%);
  clip-path: path("M13.246,8.531c-0.154,0.329 -0.439,0.68 -0.79,1.03l-0.855,0.79c-0.241,0.241 -0.417,0.482 -0.505,0.724c-0.087,0.241 -0.153,0.548 -0.153,0.943l-2.127,0c0,-0.724 0.088,-1.294 0.241,-1.711c0.154,-0.417 0.439,-0.789 0.789,-1.096c0.373,-0.307 0.658,-0.593 0.834,-0.856c0.197,-0.263 0.285,-0.548 0.285,-0.855c0,-0.746 -0.329,-1.118 -0.965,-1.118c-0.307,0 -0.548,0.109 -0.724,0.329c-0.175,0.219 -0.285,0.504 -0.285,0.877l-2.522,0c0,-0.987 0.329,-1.777 0.943,-2.325c0.614,-0.548 1.492,-0.833 2.588,-0.833c1.118,0 1.974,0.263 2.588,0.767c0.614,0.505 0.921,1.25 0.921,2.193c0,0.417 -0.088,0.79 -0.263,1.141Zm-2.347,6.644c-0.263,0.242 -0.592,0.351 -0.987,0.351c-0.394,0 -0.723,-0.109 -0.987,-0.351c-0.263,-0.241 -0.394,-0.548 -0.394,-0.899c0,-0.372 0.131,-0.68 0.394,-0.899c0.264,-0.241 0.593,-0.351 0.987,-0.351c0.395,0 0.724,0.11 0.987,0.351c0.263,0.241 0.395,0.548 0.395,0.899c0,0.373 -0.132,0.68 -0.395,0.899Zm-0.899,-15.175c-5.526,0 -10,4.474 -10,10c0,5.526 4.474,10 10,10c5.526,0 10,-4.474 10,-10c0,-5.526 -4.496,-10 -10,-10Z");
}
@media (max-width: 767px) and (orientation: portrait) {
  .retirement-calculator__input .tooltip.dynamic:after {
    margin-left: 0.5em;
    transform: translate(-50%, -50%) scale(0.8);
    transform-origin: bottom center;
  }
}
.retirement-calculator__input .tooltip.dynamic:hover:after, .retirement-calculator__input .tooltip.dynamic:focus:after, .retirement-calculator__input .tooltip.dynamic:active:after {
  background-color: var(--color--surplus);
}
.retirement-calculator__input .tooltip img {
  cursor: help;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.retirement-calculator__input .tooltip span {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 100%;
  background-color: #FFFFFF;
  border: 1px solid var(--tooltip-color);
  box-shadow: 2px 2px 4px rgba(11, 76, 61, 0.16);
  transform: translate(12px, -12px);
  width: 245px;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.4;
  letter-spacing: -0.008em;
  color: var(--tooltip-color);
  opacity: 0;
}
@media (max-width: 767px) and (orientation: portrait) {
  .retirement-calculator__input .tooltip span {
    visibility: visible;
    display: block;
    width: 100%;
    position: static;
    transform: translateX(-20px);
    max-height: 1px;
    padding: 0;
  }
}
.retirement-calculator__input .tooltip:focus span, .retirement-calculator__input .tooltip:hover span {
  visibility: visible;
  display: block;
  opacity: 1;
  max-height: 300px;
  padding: 16px;
}
@media (max-width: 767px) and (orientation: portrait) {
  .retirement-calculator__input .tooltip:focus span, .retirement-calculator__input .tooltip:hover span {
    margin-top: 12px;
  }
}
.retirement-calculator__results {
  width: 30%;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 1.75em;
}
.retirement-calculator__results[data-shortfall=true] .figures dl dd[data-output=expected_monthly_total] {
  color: var(--color--shortfall);
}
.retirement-calculator__results[data-shortfall=false] .legend--shortfall {
  display: none;
}
.retirement-calculator__results[data-shortfall=false] .figures dl dd[data-output=expected_monthly_total] {
  color: var(--color--surplus);
}
@media (max-width: 1024px) {
  .retirement-calculator__results {
    width: 100%;
  }
}
.retirement-calculator__results .figures {
  padding: 18px;
  border: 2px solid var(--info-panel-border-color);
  border-radius: 4px;
  background-color: var(--info-panel-background-color);
}
.retirement-calculator__results dl {
  margin: 0;
  font-size: 16px;
}
.retirement-calculator__results dl ~ dl {
  margin-top: 1em;
}
.retirement-calculator__results dl dt,
.retirement-calculator__results dl dd {
  margin: 0;
  padding: 0;
  display: inline;
}
.retirement-calculator__results dl dd {
  font-weight: bold;
  color: var(--accent-color);
}
.retirement-calculator__results [data-output=budget_status] {
  text-transform: capitalize;
}
.retirement-calculator__results .chart {
  position: relative;
}
.retirement-calculator__results .chart__scale {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--graph-height);
  z-index: 1;
}
.retirement-calculator__results .chart__scale li {
  border-bottom: 1px solid var(--shadow-color);
}
.retirement-calculator__results .chart table {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.retirement-calculator__results .chart table tbody {
  --graph-height-unit: calc(var(--graph-height) / 100);
  --adjusted-height: calc(var(--graph-height) - calc(var(--graph-height-unit) * 8.4));
  display: flex;
  margin: 2.5em 0 0 0;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  position: relative;
  height: var(--adjusted-height);
  gap: 0 4%;
  padding-top: var(--top-padding);
}
.retirement-calculator__results .chart table tbody tr {
  display: flex;
  flex-direction: column-reverse;
  width: 35%;
  height: 100%;
}
.retirement-calculator__results .chart table tbody th,
.retirement-calculator__results .chart table tbody td {
  display: block;
  text-align: center;
}
.retirement-calculator__results .chart table tbody td {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  opacity: 0.9;
  color: var(--graph-background-color);
  overflow: hidden;
  padding: 0;
  transition: 0.5s all ease-in-out;
  transition-delay: 0.1s;
}
.retirement-calculator__results .chart table tbody td.sliver-value {
  justify-content: flex-start;
  overflow: visible;
  min-height: 1px;
  z-index: 4;
}
.retirement-calculator__results .chart table tbody td.sliver-value[data-output=expected_social_security_income] {
  justify-content: flex-end;
}
.retirement-calculator__results .chart table tbody td[data-output=required_retirement_income] {
  height: var(--required-retirement-income__height);
}
.retirement-calculator__results .chart table tbody td[data-output=expected_social_security_income] {
  height: var(--expected-social-security-income__height);
  order: 1;
}
.retirement-calculator__results .chart table tbody td[data-output=expected_retirement_income] {
  height: var(--expected-retirement-income__height);
  order: 2;
}
.retirement-calculator__results .chart table tbody td[data-output=expected_retirement_income__shortfall] {
  height: var(--monthly-income-shortfall__height);
  order: 3;
}
.retirement-calculator__results .chart table thead {
  order: 2;
}
.retirement-calculator__results .chart table thead th {
  padding: 0;
}
.retirement-calculator__results .chart table tbody {
  order: 3;
}
.retirement-calculator__results .chart table tfoot {
  order: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767px) and (orientation: portrait) {
  .retirement-calculator__results .chart table tfoot {
    margin-bottom: 0.33em;
  }
}
.retirement-calculator__results .chart table tfoot tr {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  gap: 0.33em 0;
}
.retirement-calculator__results .chart table tfoot th {
  margin: -1px 0 0 -1px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}
.retirement-calculator__results .chart table tfoot th,
.retirement-calculator__results .chart table tfoot td {
  display: block;
}
.retirement-calculator__results .chart table tfoot .color-sample {
  display: block;
  margin-right: 0.3em;
  width: 0.75em;
  height: 0.75em;
  flex-grow: 0;
  flex-shrink: 0;
  overflow: hidden;
}
.retirement-calculator__results .chart table tfoot td {
  margin: 0;
  padding: 0;
  width: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-grow: 0;
  flex-shrink: 1;
  align-items: center;
  justify-content: flex-start;
  font-size: 90%;
  font-weight: normal;
}
.retirement-calculator__results .chart table tfoot td ~ td {
  margin-left: 0.6em;
}
.retirement-calculator__results .chart table [class*=color--] {
  --color: var(--color--placeholder);
  background-color: var(--color);
}
.retirement-calculator__results .chart table .color--need {
  --color: var(--color--needed-income);
}
.retirement-calculator__results .chart table .color--social-security {
  --color: var(--color--social-security-income);
}
.retirement-calculator__results .chart table .color--retirement {
  --color: var(--color--retirement-income);
}
.retirement-calculator__results .chart table .color--shortfall {
  --color: var(--color--shortfall);
}
.retirement-calculator__results .footnotes {
  font-size: 18px;
  color: var(--footnote-text-color);
  line-height: 1.4;
}

/*# sourceMappingURL=style-index.css.map*/