a.secondary-navigation__link.font-meta-4.disabled {
  pointer-events: none;
  color: #a7a8aa;
}

.aemformcontainer{
  .retirement_savings {
    display: flex;
    padding: var(--page-vspace-3, 48px) 0;
    flex-direction: column;
    align-items: center;
    align-self: stretch;
    div{
      flex-direction: column;
      align-items: center;
      align-self: stretch;
      width: 100%;
    }
    .row{
      display: flex;
      min-width: 130px;
      flex-direction: row;
      align-items: flex-start;
      align-self: stretch;
    }
    .tooltip-hook {
      text-decoration: none;
      color: var(--mediumBlue);
      cursor: pointer;
      border: 0px;
      padding: 0px;
      background: none;
      font-family: "Noto Sans";
      font-size: var(--body-b2-base, 16px);
      font-style: normal;
      font-weight: 600;
      line-height: var(--body-lh-2, 24px);
      &.unbold{
        font-weight: 400;
      }
    }
  }
}

.guideFieldWidget.dropDownList{
  select{
    display: flex;
    min-width: 130px;
    min-height: var(--form-inputs-height, 64px);
    margin-bottom: 7px !important;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--form-inputs-vspace-field-msg, 8px);
    flex: 1 0 0;
    border-radius: var(--form-inputs-radius-base, 8px) var(--form-inputs-radius-base, 8px) 0px 0px !important;
    border-top: 0px !important;
    border-right: 0px !important;
    border-left: 0px !important;
    &:hover{
      padding: 20px 24px !important;
    }
  }
}
.yourResults__Stats{
  .tooltip-hook{
    font-weight: 400 !important;
  }
}

p.body-b3.bold{
  font-weight: 700;
  margin: 0px !important;
}

.yourResults__TaxTimingWrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

div.callout.guideFieldNode  {
  display: flex;
  min-width: 224px;
  max-width: 1268px;
  padding: var(--padding-l, 24px) !important;
  flex-direction: column;
  align-items: flex-start !important;
  gap: var(--vspace-base, 8px);
  align-self: stretch;
  text-align: left;
  border-radius: var(--radius-m, 16px);
  border: 3px solid var(--Brand-Gradients-Diagonal-Gradient, #0090DA);
  background: var(--highlight-card-featured-w-border-bg, #FFF);

  background:  linear-gradient(to right, white, white),linear-gradient(205deg, #0090DA 14.14%, #A4CE4E 87.91%);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  border: 3px solid transparent;
  h3{
    padding: 0px !important;
    font-weight: 600 !important;
    font-size: var(--body-b2-base, 16px);
    margin: 0px !important;
  }
}

:root {
  --mediumBlue: #007abc;
  --green: #a4ce4e;
  --fontFamily: 'MetLife Circular', Verdana, sans-serif;
  --grey: #d9d9d6;
  --lightGrey: #f2f2f2;
  --white: #ffffff;
  --lightBlue: #0090da;
  --lightBlueHover: #b2ddf3;
  --black: #000000;
}

.citation {
  text-align: left;
  color: var(--general-content-copy-all, #333);
  font-family: "Noto Sans";
  font-size: var(--body-b4, 12px);
  font-style: normal;
  font-weight: 400;
  line-height: var(--body-lh-4, 18px); /* 150% */
  margin-top: 60px;
  p {
    margin: 0px;
    font-size: var(--body-b4, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--body-lh-4, 18px); /* 150% */
  }
}

.cleanTextBox {
  display: flex;
  min-width: 130px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--form-inputs-hspace-base, 8px);
  align-self: stretch;
  background: transparent;
  border-top: 0px;
  border-right: 0px;
  border-left: 0px;
  border-image: initial;
  border-bottom: 2px solid var(--mediumBlue);
  width: 100%;
  height: 48px;
  padding: 0px;
  min-height: 96px;
  margin-bottom: var(--formGap) !important;
  outline: 0px;
  border-radius: 0px;
  appearance: none;
  color: inherit;
  &::focus {
    border-top: 0px;
    border-right: 0px;
    border-left: 0px;
    border-image: initial;
    border-bottom: 2px solid var(--green);
    width: 100%;
    height: 48px;
    padding: 0px;
    outline: 0px;
    border-radius: 0px;
    appearance: none;
    color: inherit;
  }
  @media screen and (max-width: 766px) {
    min-height: 64px;
    height: 100%;
  }
}

.aemform {
  display: flex;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: nowrap;
  -webkit-box-pack: start;
  justify-content: flex-start;
  flex-direction: column;
  padding: 0 16px;
  flex-direction: column;
  align-items: center;
  gap: var(--vspace-xl, 32px);
}

.rootPanel {
  padding: 0px 1px 0px 0px;
}

@media  screen and (max-width: 1023x) {
 .rootPanel{
  padding: 0 16px !important;   
 } 
}

.aemformcontainer {
  max-width: 660px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: nowrap;
  -webkit-box-pack: start;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  display: flex;
}

#guideContainerForm{
  width: 100%;
}
.guideRootPanel{
  color: var(--general-content-copy-all, #333);
  font-family: "Noto Sans";
  font-size: var(--body-b2-base, 16px);
  font-style: normal;
  display: flex;
  flex-direction: column;
  font-weight: 400;
  line-height: var(--body-lh-2, 24px); /* 150% */
  #guideContainer-rootPanel-panel___guide-item{
    .row{
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: var(--vspace-base, 8px);
      align-self: stretch;
      width: 100%;
      div{
        display: flex;
        flex-direction: column;
        width: 100%;
      }
    }
  }

}
label.focus-state{
  transform: none !important;
}
.guideFieldWidget.textField input{
  border: 0px;
}

.guideFieldWidget.textField {
  display: flex;
  align-items: flex-start;
  align-self: stretch;
  input{

    display: flex;
    align-self: stretch;
    padding: 8px 24px 8px 24px !important;
    min-width: 130px;
    min-height: 64px;
    flex-direction: column;
    margin-bottom: 7px !important;
    gap: 8px;
    align-self: stretch;
    padding: 8px 24px 8px 24px !important;
    border-radius: 8px 8px 0px 0px !important;
    margin: 0px !important;
    border-top: 0px !important;
    border-right: 0px !important;
    border-left: 0px !important;
    border-bottom: 2px solid  #6E6E6E;
    background: #FFF;

    color:  #6E6E6E;
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height:  24px; /* 150% */
    @media screen and (max-width: 766px) {
      display: flex;
      height: var(--form-input-height, 64px);
      padding: var(--form-input-padding-TB-base, 8px) var(--form-input-padding-LR-l, 24px);
      gap: var(--form-input-hspace-base, 8px);

      align-items: center;
      flex: 1 0 0;
      align-self: stretch;
      
    }
  }
}

 @media screen and (max-width: 766px) {
  .guideTextBox label{
    top: 21px!important;
  }
  .nh-pfml-two-column .gridFluidLayout .row {
      display: flex;
      gap: 32px;
      &::before, &::after {
        display: none;
      }

  }
}
.guideRadioButtonGroupItems{
  flex-direction: row !important; 
}
.select-styled:focus{
  border: 3px solid #0061a0!important;
}

.select-styled {
  margin-left: 8px;
  padding: 20px 45px 20px 21px !important;
  background-repeat: no-repeat;
  background-size: 16px;
  background-position: right 24px top 50%;
  background-color: #f8f9fa;
}
.nhpfml-panel-title,.panelTitle{
  color:  #333;
  display: flex;
  text-align: center;
  padding-bottom: var(--vspace-base, 8px);
  margin: 0px;
  font-family: var(--header-Family, "MetLife Circular");
  font-size: var(--header-h4, 32px);
  font-style: normal;
  font-weight: var(--header-weight-medium, 500);
  line-height: var(--header-lh-4, 48px); /* 150% */
  }

  .panelTitle h2,.nh-pfml-panel-title h2{
  color:  #333;
  display: flex;
  width: auto;
  text-align: center;
  padding:0;
  margin: 0px;
  font-family: var(--header-Family, "MetLife Circular");
  font-size: var(--header-h4, 32px);
  font-style: normal;
  font-weight: var(--header-weight-medium, 500);
  line-height: var(--header-lh-4, 48px); /* 150% */
  }
.businessNameText {
  margin-bottom: 16px;
}
.undertext{
  color: var(--general-content-copy-all, #333);
  text-align: center;
  font-family: "Noto Sans";
  font-size: var(--body-b3, 14px);
  font-style: normal;
  font-weight: 400;
  margin-bottom: var(--formGap);
  line-height: var(--body-lh-3, 21px); /* 150% */
}
.guidetextbox.guidefield {
  margin-bottom: var(--formGap) !important;
}
.nh-pfml-field-title{
  margin-bottom: var(--vspace-m, 16px) !important;
  align-items: flex-start !important;
  text-align: left !important;
  &.largeMargin{
    margin-bottom: var(--vspace-xl, 32px) !important;
  }
}

.aemformcontainer .guideFieldNode.guideCheckBox.segmented-control .guideRadioButtonGroupItems{
  margin-bottom: 23px !important;
}

.addedText {
  background: transparent;
  border-top: 0px !important;
  border-right: 0px !important;
  padding: 30px 24px 16px 21px !important;
  border-left: 0px !important;
  border-image: initial !important;
  border-bottom: 2px solid var(--mediumBlue) !important;
  width: 50% !important;
  height: 48px !important;
  outline: 0px !important;
  border-radius: 0px !important;
  appearance: none !important;
  color: inherit !important;
}
div.buttonPanel.guidePanelNode {
  display: flex;
  position: sticky;
  flex-direction: row;
  box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, 0.15);
  padding: 24px 0px;
  z-index: 100;
  bottom: 0;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  margin-top: var(--formGap);
  background: #FFF;
  div:not(.gridFluidLayout) {
    display: flex;
    padding: 0px !important;
    position: sticky;
    flex-direction: row;
    z-index: 1;
    justify-content: center;
    align-items: center !important;
    align-self: stretch;
    width: auto;
  }
    .guideFieldWidget.xfaButton {
      padding: 0 8px !important;
      button.button-default.button-medium {
      margin: 0px !important;
      z-index: 1;
      display: flex;
      min-width: 130px;
      padding: 16px 24px;
      justify-content: center;
      align-items: center;
      gap: 8px;
    }
  }
  
}
@media screen and (max-width: 766px) {
  div.buttonPanel div.row {
    gap: 16px;
  }

}
.guideFieldNode div.tooltip, div.tooltip{
  display: flex;
  min-width: 212px;
  max-width: var(--desktop-width-max, 1300px);
  align-self: stretch;
  border-radius: 8px;
  padding: var(--vspace-l, 24px) var(--hspace-l, 24px);
  margin: 8px;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: var(--vspace-m, 16px) !important;
  flex: 1 0 0;

  border: 2px solid #0061A0;

  button{
    width: 16px;
    height: 26px;
    border: 0px;
    margin: 0px;
    position: absolute;
    right: 12px;
    top: 12px;
    cursor: pointer;
    color: var(--mediumBlue);
    transition: none;
    z-index: 100;
    font-size: 20px;
  }
  
  h4{
    margin-top: 0px;
    margin-bottom: 0px;
    color: var(--popover-label, #333);
    font-family: "Noto Sans";
    font-size: var(--ui-elements-overlay-header-1, 20px);
    margin: 0px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    align-self: flex-start !important;
  }
  p.body-b2{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0px;
    font-weight: 400 !important;
    gap: var(--vspace-m, 16px);
    align-self: stretch;
  }
}
.paragraphText{
  padding: 20px 0px 0px;
  max-width: 575px;
  padding-bottom: 20px;
  p {
    margin: 0px;
    padding-top: 20px;
  }
  p + p{
    margin-top: 20px;
  }
  a {
    color: var(--mediumBlue);
  }
}
.encouragement{
  width: 50%;
  text-align: center;
  font-weight: bold;
  margin: 0px auto;
  p{
    margin: 0px;
    padding-top: 20px;
  }
}
.rinP{
  margin-left: auto;
  margin-right: auto;
  margin-bottom:24px;

  ul{
    margin-top: 20px;
    margin-bottom: 0px;
    padding: 0px;
    list-style: none;
    li{
      position: relative;
      padding-left: 24px;
    }
    li::before{
      content: "";
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #333;
      position: absolute;
      left: 0px;
      top: 8px;
    }
  }
  p{
    padding-top: 20px;
  }
}
.addedText p {
  padding-top: 20px;
  font-size: 16px;
  font: inherit;
  font-weight: 400;
  font-family: 'Noto Sans', 'Arial', 'Helvetica', 'sans-serif';
}

.dollar::before {
  content: "$";
  position: absolute;
  font-size: 16px;
  top: 17px;
  left: 8px;
}

.slimButton .button-medium {
  display: flex;
  min-width: var(--buttons-min-width, 130px);
  padding: var(--buttons-padding-TB-m, 16px) var(--buttons-padding-LR-l, 24px);
  justify-content: center;
  align-items: center;
  gap: var(--buttons-hspace-gap, 8px);


  color: white;
  cursor: pointer;
  iconButton-label{
    color: var(--button-button-secondary-label, #007ABC);
    text-align: center;
    font-family: "Noto Sans";
    font-size: var(--ui-elements-cta-base, 16px);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }
}

.guidebutton{
  display: flex;
  min-width: var(--buttons-min-width, 130px);
  padding: var(--buttons-padding-TB-m, 16px) var(--buttons-padding-LR-l, 24px);
  justify-content: center;
  align-items: center;
  gap: var(--buttons-hspace-gap, 8px);

}
.guideContainerNode{
  display: flex;
  flex-direction: column;
  @media screen and (min-width: 1024px) {
    padding-left: 16px;
    padding-right: 16px;
  }
  
}
form .guideContainerNode .guidefield.guidedropdownlist .guideFieldLabel.top label.focus-state, 
form .guideContainerNode .guidefield.guidetextbox .guideFieldLabel.top label.focus-state, 
form .guideContainerNode .guidefield.date-picker-metlife .guideFieldLabel.top label.focus-state, 
form .guideContainerNode .guidefield.searchabledropdown .guideFieldLabel.top label.focus-state, 
form .guideContainerNode .guidefield.guidepasswordbox .guideFieldLabel.top label.focus-state{
  top: 0px !important;
}
.guidebutton{
  .button-default {
    display: flex;
    min-width: 130px;
    padding: 16px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: #007ABC;
    align-self: flex-start;
  }
  .backButton{
    align-items: flex-end;
  }
  .movePrev, .backButton button {
    display: flex;
    min-width: 130px;
    padding: 16px 24px !important;
    justify-content: center;
    align-items: center;
    justify-self: flex-end;
    gap: 8px;
    border-radius: 8px !important;
    border: 2px solid #007ABC !important;
    background: transparent !important;
    align-self: flex-end;
    &:hover,&:focus {
      background: #007ABC !important;
      span{
        color: #FFF !important;
      }
    }
    span {
      color: #007ABC;
      text-align: center;
      font-family: "Noto Sans";
      font-size: 16px;
      font-weight: 600;
      line-height: normal;
    }
  }
  span{
    color: var(--button-button-primary-label, #FFF);
    text-align: center;
    /* UI Elements/CTA Label */
    font-family: "Noto Sans";
    font-size: var(--ui-elements-cta-base, 16px);
    font-style: normal;
    font-weight: 600;
    line-height: normal;
  }
}
span.iconButton-icon {
  display: none;
}
.select-options {
  left: 8px !important;
  top: 48px !important;
}

.blueText{
  color: var(--mediumBlue);
  &.guideFieldNode.guideTextDraw{
    padding: var(--vspace-xl) 0 !important;
  }

  text-align: center;
}

.guideradiobutton.guidefield {
  @media  screen and (min-width: 766px) {
      margin-top: 8px;
  }
}


.yourResults__ColumnWrapper .duJLNg {
  text-align: center;
  color: var(--white);
  max-width: 660px;
  margin: 0px auto;
}

.yourResults__ColumnWrapper .duJLNg h2 {
  margin: 0px;
}

.yourResults__ColumnWrapper .yourResults__Stats {
  margin: 0px;
  padding: 0px;
  list-style: none;
  flex: 1 0 200px;
}

.yourResults__ColumnWrapper .yourResults__Stats .amount {
  position: relative;
}

.yourResults__ColumnWrapper .yourResults__Stats .rc-slider-handle {
  width: 30px;
  height: 30px;
  margin-top: -10px;
  background-color: rgb(0, 144, 218);
  border: 2px solid rgb(255, 255, 255);
  opacity: 1;
}

.aemformcontainer .guideFieldNode.guideCheckBox.segmented-control.defaultFieldLayout  .guideRadioButtonGroupItems{
  padding: 8px !important;
}

.yourResults__ColumnWrapper .rc-slider-dot {
  border: none;
  background: rgb(167, 168, 170);
  height: 4px;
  width: 4px;
  bottom: 0px;
  top: calc(50% - 2px);
}

.yourResults__ColumnWrapper .rc-slider-dot-active {
  border-color: #96dbfa;
}

.yourResults__ColumnWrapper .rc-slider-dot {
  position: absolute;
  bottom: -2px;
  width: 8px;
  height: 8px;
  vertical-align: middle;
  background-color: #fff;
  border: 2px solid #e9e9e9;
  border-radius: 50%;
  cursor: pointer;
}

.tooltip-hook {
  text-decoration: none;
  color: var(--mediumBlue);
  cursor: pointer;
  background: none;
  border: 0px;
  padding: 0px;
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 600;
  line-height: var(--body-lh-2, 24px);
 
}

.circle {
  width: 22px;
  height: 22px;
  display: inline-block;
  border-radius: 50%;
  position: absolute;
  left: -39px;
  top: 3px;
}
.amount-item{
  ::before{
    content: " ";
    width: 24px;
    height: 24px;
    display: inline-block;
    border-radius: 50%;
    position: absolute;
    left: -32px;
    top: 3px;
  }


  
}
.incomeGapText .amount::before{
  background-color: var(--grey);
}
.annuitizedText .amount::before{
  background-color: #007abc;
}
.estimatedMonthlyIncomeText .amount::before{
  background-color: var(--green);
}
.content-parsys8{
  background: linear-gradient(180deg, var(--GR-2-1, #1E4C76) 0%, var(--GR-2-2, #007ABC) 100%);
}
.resultWrapper {
  display: flex;
  padding: var(--page-vspace-3, 64px) var(--padding-m, 16px);
  flex-direction: column;
  align-items: center;
  gap: var(--formGap);
  align-self: stretch;
  .gridItems{
    padding:32px;
  }


  .resultWrapper {
    background-color: var(--dynamic-color);
  }
  .yourResults-IntroText{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vspace-m, 16px);
    
  }
  .chart__ChartWrapper{
    padding-top: 32px;
    @media screen and (max-width: 766px) {
      flex-direction: column;
      align-self: stretch;
      align-items: center;
      display: flex;
    }
  }
  .yourResults__ColumnWrapper{
    display: flex;
    align-items: flex-start;
    gap: var(--hspace-xl, 32px);
    align-self: stretch;

    .yourResults__Column{
      display: flex;
      padding: var(--formGap, 32px);
      flex-direction: column;
      align-items: flex-start;
      flex: 1 0 0;
      align-self: stretch;
      border: 1px solid var(--brand-neutrals-gray-light, #D9D9D6);
      background: var(--brand-neutrals-white, #FFF);
      box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
      max-width: 617px;
      .yourResults-IntroText {
        display: flex;
        align-items: flex-start;
        align-content: flex-start;
        gap: var(--vspace-l, 24px);
        align-self: stretch;
        flex-wrap: wrap;
        p.body-b3{
          margin: 0 !important;
        }
      }
      .yourResults__StatsWrapper{
        @media screen and (max-width: 766px) {
          flex-direction: column-reverse;
          
        }
        display: flex;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
        margin: 16px 0px;
        border-top: 12px #D9D9D6 solid;
        border-bottom: 12px #D9D9D6 solid;

        .yourResults__Stats{
          display: flex;
          padding: 16px 0;
          flex-direction: column;
          align-items: flex-start;
          gap: 16px;
          flex: 1 0 0;
          .amount-item{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            padding-left: 35px;
            gap: 8px;
            align-self: stretch;
          }
        }
      }
    }
    .yourResults__Column-right{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 32px;
      flex: 1 0 0;
      .gridItems{
        display: flex;
        padding: var(--formGap, 32px);
        flex-direction: column;
        align-items: flex-start;
        p,h6{
          margin: 0;
        }
        margin: 0;
        gap: 24px;
        align-self: stretch;
        border: 1px solid #D9D9D6;
        background: #FFF;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
        .yourResults__ControlWrapper{
          display: flex;
          flex-direction: column;
          padding: 8px;
          align-items: center;
          gap: var(--hspace-base, 8px);
          width: 100%;
          align-self: stretch;
          .sliderContainer{
            display: flex;
            align-items: center;
            flex-direction: column;
            padding-top: 12.5px;
            gap: var(--padding-base, 8px);
            align-self: stretch;
            .slider-values{
              display: flex;
              height: 24px;
              justify-content: space-between;
              align-items: center;
              align-self: stretch;
              span {
                width: 32px;
                text-align: center;
                color: var(--form-input-outside-label, #333);
                text-align: center;
                font-family: "Noto Sans";
                font-size: var(--ui-elements-label-base, 16px);
                font-style: normal;
                font-weight: 400;
                line-height: var(--body-lh-2, 24px); /* 150% */
              }
            }
          }
        }
      }
    }
  }
  .yourResults__Column-bottom{
    display: flex;
    padding: var(--formGap, 32px);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--vspace-l, 24px);
    align-self: stretch;
    border: 1px solid var(--brand-neutrals-gray-light, #D9D9D6);
    background: var(--brand-neutrals-white, #FFF);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.15);
  }
  .header{
    color: var(--white);
    text-align: center;
    h4{
      margin-bottom: 16px !important;
      @media screen and (max-width: 766px) {
        margin-bottom: 0px !important;
        
      }
    }
  }
}

.green-bg {
  background-color: rgb(164, 206, 78);
}

.grey-bg {
  background-color: rgb(217, 217, 214);
}

.mediumBlue-bg {
  background-color: rgb(0, 122, 188);
}

.duJLNg {
  text-align: center;
  color: var(--white);
  max-width: 660px;
  margin: 0px auto;
}
.iKjoFA {
  padding: 8px 17px 8px 16px;
  border-radius: 2px;
  border: 1px solid rgb(117, 120, 123);
  background: rgb(117, 120, 123);
  color: rgb(255, 255, 255);
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}

.toggleButton__Wrapper .toggleButton__ToggleOptionList{
  display: flex;
  height: 40px;
  align-items: center;
  border-radius: 400px;
  border: var(--form-input-stroke-default, 2px) solid var(--form-input-stroke-default, #6E6E6E);
  background: var(--form-input-toggle-fill, #FFF);
  width: fit-content;
  .toggleButton__ToggleOption{
    display: flex;
    height: 32px;
    min-width: 60px;
    padding: 0px var(--padding-l, 24px);
    justify-content: center;
    align-items: center;
    gap: var(--hspace-base, 8px);
    text-align: center;
    margin: 0 2px;
    cursor: pointer;
    font-family: "Noto Sans";
    font-size: var(--body-b3, 14px);
    font-style: normal;
    font-weight: 700;
    line-height: var(--body-lh-3, 21px); /* 150% */
  }
  .inactive {
    border-radius: var(--radius-l, 24px);
    background: var(--form-input-toggle-fill, #FFF);
  }
  .active {
    border-radius: var(--radius-l, 24px);
    color: #FFF;
    background: var(--form-input-toggle-on-fill, #528320);
  }
}

.aMXJa {
  margin-top: 16px;
}
.customSliders{
  -webkit-appearance: none !important;
  -moz-appearance:    none !important;
  appearance: none !important;
  width: 100%;
  outline: none;
  padding: 0px !important;
  height: 7px;
  outline: none;
  background: rgb(216, 216, 216);
  -webkit-transition: .2s;
  transition: opacity .2s;

}
.slider{
  display: flex;
  height: 7px;
  align-items: center;
  flex: 1 0 0;
  -webkit-appearance: none !important;
  -moz-appearance:    none !important;
  appearance: none !important;
  width: 100%;
  outline: none;
  padding: 0px !important;
  outline: none;
  background: rgb(216, 216, 216);
  -webkit-transition: .2s;
  transition: opacity .2s;
}

div#track{
  background: rgb(216, 216, 216);
}
::-webkit-slider-thumb{
  -webkit-appearance: none !important;

  display: flex;
  width: 32px;
  height: 32px;
  justify-content: center;
  align-items: center;

  background-color:#333 !important;
  border-radius: 50% !important;
  -webkit-appearance: none;
  cursor: pointer;
  appearance: none;
  opacity: 1;
  position: relative;
  z-index: 90;
}

::-webkit-slider-runnable-track {
  -webkit-appearance: none !important;
  appearance: none !important;
  min-inline-size: 0px;
  align-self: center;
  box-sizing: border-box;
  display: block;
}

.smallText {
  margin: 20px 0px 7px;
  text-align: left;
  max-width: 430px;
  font-size: clamp(12px, 2vw, 14px);
  line-height: 20px;
}
.spaceAfter{
  text-align: left;
  margin-bottom: var(--vspace-l, 24px); ;
}

.largeText{
  margin: 0px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
}
.yourResults__ColumnWrapper .yourResults__Stats .amount.amount-large {
  font-weight:600;
}

.guideFieldNode.guideTextDraw.textdraw1730216377485.largeText.guideStaticText{
  padding-bottom: 16px;
}
.centerText{
  position: relative;
  display: flex;
  text-align: left !important;
  margin-top: 22px !important;
  color: var(--Brand-Neutrals-Gray-Darkest, var(--brand-neutrals-gray-darkest, #333));
  font-family: "Noto Sans";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.header__logo-container {
  z-index: 1;
}
.citation{
  p{
    display: flex;
    flex: 1 1 0%;
    margin: 0px;
  }
  b{
    display: inline-block;
    margin-right: 4px;
    font-weight: 400;
  }
  p+p {
    margin-top: 4px !important;
  }
  a{
    display: contents;
  }
}


datalist {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: clamp(16px, 2vw, 18px);
  line-height: 1;
  font-weight: 500;

  color: rgb(51, 51, 51);
  margin-top: clamp(14px, 3%, 20px);
  ::before{
    content: "●";
    display: block;
    height: 0px;
    color: rgb(167, 168, 170);
    font-size: 10px;
    border-radius: 50%;
    margin-top: -30px;
    display:grid;
    margin-bottom: 34px;
    margin-right: 2px;
    margin-left: 2px;
  }
}
.tooltip-hook:focus-visible {
  outline: 1px solid var(--mediumBlue) !important;
  outline-offset: -1px;
  border: none;
}
.textdraw_18411808021726598631697 p+p {
  font-size: 14px;
}
@media screen and (max-width: 1023px) {
  .yourResults__ColumnWrapper {
    display: flex;
    flex-direction: column;
    .yourResults__Column {
      max-width: 100% !important;
    }
    
  }
}
@media screen and (max-width: 766px) {
  .aem-form-mobile .guideFieldWidget select, .aem-form-mobile .guidedropdownlist .guideFieldNode .dropDownList select.selected-state {
    padding: 20px 36px 12px 22px !important;
  }
  .panel1730127518775 .row{
    display: flex;
  }
  .pensionIncome .row{
    display: flex;
  }
  .firstNext{
    align-self: center;
  }
  .otherIncome .row{
    display: flex;
  }
  .eCZccr {
    grid: 1fr / 1fr;
    display: block;
  }
  .kpRTU {
    padding-top: 34px;
  }
  .cyYAsK {
    padding: 37px 0px 41px;
  }
  .centerText{
    overflow: hidden;
    color: var(--Brand-Neutrals-Gray-Darkest, var(--brand-neutrals-gray-darkest, #333));
    text-overflow: ellipsis;
    font-family: "Noto Sans";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    @media screen and (min-width: 767px) and (max-width: 1023px) {
      font-size: 24px;
    }
  }
}

.estimateForMebtn{
  div button.button-medium.Button{
    display: flex !important;
    padding: 8px 16px !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 24px !important;
    border: 2px solid #007ABC !important;
    background: #FFF ;
    margin-top: 0px !important;
    span {
      color: #007ABC;
      text-align: center !important;
      font-family: "Noto Sans" !important;
      font-size: 16px !important;
      font-style: normal !important;
      font-weight: 600 !important;
      line-height: 24px !important; 
    }
    &:hover {
      background: #007ABC !important;
      span{
        color: #FFF !important;
        background: #007ABC !important;
      }
    }
  }
}

.guideFieldWidget.textField input[type="text"]:hover, .guideFieldWidget input[type="password"]:hover, .guideFieldWidget input[type="date"]:hover, .guideFieldWidget select:hover{
  padding:8px 24px !important;
}
@media  screen and (min-width: 767px) {
  .firstNext{
    max-width: 130px;
    align-self: center !important;
  }
}

.aemformcontainer .guideRadioButtonGroupItems .guideRadioButtonItem.segmented-control .guideWidgetLabel label{
  padding: 8px 24px !important;
}
.fontWeightSemiBold{
  font-weight: 600 !important;
  p{
    font-weight: 600 !important;
  }
  
}
/* Fonts */
.body-b2,p.body-b2,.body-b2 p{
  color: #333;
  font-family: 'Noto Sans', 'Arial', 'Helvetica', 'sans-serif';
  font-size: 16px;
  font-style: normal;
  text-align: left;
  line-height: 24px;
  @media screen and (max-width: 1023px) {
    font-size: 18px;
  }
  @media screen and (max-width: 766px) {
    font-size: 16px;
  }
}
.body-b3,p.body-b3,.body-b3 p{
  color: #333;
  font-family: 'Noto Sans', 'Arial', 'Helvetica', 'sans-serif';
  font-size: 14px;
  font-style: normal;
  line-height: 21px;
  text-align: left;
  @media screen and (max-width: 1023px) {
    font-size: 16px;
    line-height: 24px;
  }
  @media screen and (max-width: 766px) {
    font-size: 14px;
    line-height: 20px;
  }
}

.body-b4,p.body-b4,.body-b4 p{
  font-family: "Noto Sans";
  font-size: var(--body-b4,);
  font-style: normal;
  font-weight: 400;
  line-height: var(--body-lh-4);
}

.header-h4,p.panelTitle,p.header-h4, .panelTitle p, .header-h4 p{
  font-family: 'MetLifeCircular', 'Arial', 'Helvetica', 'sans-serif';
  font-size: var(--header-h4);
  font-style: normal;
  font-weight: 500;
  line-height: var(--header-lh-4);
}
.greyText p{
  color: #6E6E6E;
  text-align: left;
}
:root {
  --page-vspace-3: 64px; 
  --formGap: 32px;
  --vspace-xl: 32px;
  --body-b4: 12px;
  --header-h4: 32px;
  --header-lh-4: 48px;
  --body-lh-4: 18px;
  --header-h5: 28px;
  --header-Family: "MetLife Circular", Verdana, sans-serif;
  --header-lh-5:42px; 
  --body-b3: 14px;
  --vspace-m: 16px;
  --body-lh-3: 21px;
  --body-b2: 16px;
  --body-lh-2: 24px;
}

@media screen and (max-width: 766px) {
  :root {
    --page-vspace-3: 32px;
    --header-h4: 22px;
    --formGap: 24px;
    --header-lh-4:33px;
    --header-h5: 26px; 
    --header-lh-5: 39px;
    --body-b3: 14px;
  }
}
@media screen and (max-width: 1023px) and (min-width: 767px) {
  :root {
    --page-vspace-3: 48px;
    --header-h5: 20px;
     --header-h4: 30px;
     --header-lh-4: 45px;
     --formGap: 24px;
    --header-lh-5:30px;
    --body-b3: 14px;
  }
  
}

/* Header/H5 */
.header-h5,p.header-h5, .header-h5 p{
  font-family: var(--header-Family, "MetLife Circular");
  font-size: var(--header-h5, 28px);
  font-style: normal;
  font-weight: var(--header-weight-medium, 500);
  line-height: var(--header-lh-5, 42px); /* 150% */
}

/* Stepper */
.stepperBackground{
  background: linear-gradient(180deg, var(--GR-2-1, #1E4C76) 0%, var(--GR-2-2, #007ABC) 125.51%);
}
.stepper{
  display: flex;
  padding: 16px 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  background: linear-gradient(180deg, var(--GR-2-1, #1E4C76) 0%, var(--GR-2-2, #007ABC) 125.51%);
  .stepRow{
    color: var(--slider-label, #FFF);
    display: flex;
    align-items: center;
    gap: var(--hspace-xs, 2px);
    align-self: stretch;
    .stepBold{
      display: flex;
      gap: 2px;
      color: var(--slider-label, #FFF);
      font-family: "Noto Sans";
      font-size: var(--body-b3, 14px);
      font-style: normal;
      font-weight: 700;
      line-height: var(--body-lh-3, 21px); /* 150% */
    }
    .stepOf{
      display: flex;
      width: 100%;
      min-inline-size: fit-content;
    }
    .stepText{
      color: var(--slider-label, #FFF);
      display: flex;
      font-family: "Noto Sans";
      font-size: var(--body-b3, 14px);
      font-style: normal;
      font-weight: 400;
      line-height: var(--body-lh-3, 21px); /* 150% */
    }
    .stepName{
      color: var(--slider-label, #FFF) !important ;
    }
    p{
      margin: 0 !important;
    }
  }

  .steps{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--vspace-s, 4px);
    position: relative;
    align-self: stretch;
    @media screen and (max-width: 766px) {
      gap:12px !important;
    }
    justify-content: center;
    .stepLine{
      width: 90% !important;
      height: 2px !important;
      background: var(--slider-line, #FFF);
      position: absolute !important;
      top: 17% !important;
      flex-shrink: 0;
    }

    .step{
      width: 12.6%;
      display: flex;
      flex-direction: column;
      align-self: stretch;
      position: relative;
      align-items: center;
      z-index: 1;
      &.inactive {
        stroke: var(--slider-stroke-inactive, #FFF);
        color: #FFF;
        fill: #125E91;
      }
      &.active{
        stroke: var(--slider-stroke-active, #A4CE4E);
        fill: #FFF !important;
        color:  #333 !important;
        .checkmark{
          display: none;
        }
      }
      &.completed{
        fill: var(--slider-fill-active, #A4CE4E);
        stroke-width: 2px;
        color: #A4CE4E ;
        .checkmark{
          position: absolute;
        }
      }
      .circlestep{
        display: flex;
        position: relative;
        flex-direction: column;
        width: 32px;
        height: 32px;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        stroke-width: 2px;
      
        .stepNum{
          
          text-align: center;
          margin: 0;
          position: absolute;
          font-family: "Noto Sans";
          font-size: var(--body-b3, 14px);
          font-style: normal;
          font-weight: 700;
          line-height: var(--body-lh-3, 21px); /* 150% */
        }
      }
      .stepText{
        color: var(--slider-label, #FFF);
        text-align: center;
        font-family: "Noto Sans";
        font-size: var(--body-b3, 14px);
        font-style: normal;
        font-weight: 400;
        line-height: var(--body-lh-3, 21px); /* 150% */
      }

    }
  }
}

.button-default {
  display: flex;
  min-width: 130px;
  padding: 16px 24px;
  justify-content: center;
  border: 1px solid #007ABC;
  color: #FFF;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  background: #007ABC;
  align-self: flex-start;
  &:hover {
    background: #0061a0;
    text-decoration: none;
  }
  span{
    text-align: center;
    font-family: "Noto Sans";
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
  }
}
.backButton{
  align-items: flex-end;
}
.movePrev, .backButton button {
  display: flex;
  min-width: 130px;
  padding: 16px 24px !important;
  justify-content: center;
  align-items: center;
  justify-self: flex-end;
  gap: 8px;
  border-radius: 8px !important;
  border: 2px solid #007ABC !important;
  background: transparent !important;
  align-self: flex-end;
  &:hover {
    background: #007ABC !important;
    span{
      color: #FFF !important;
    }
  }
  span {
    color: #007ABC;
    text-align: center;
    font-family: "Noto Sans";
    font-size: 16px;
    font-weight: 600;
    line-height: normal;
  }
}
button-label.span{
  color: var(--button-button-primary-label, #FFF);
  text-align: center;
  /* UI Elements/CTA Label */
  font-family: "Noto Sans";
  font-size: var(--ui-elements-cta-base, 16px);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.buttonPanel.guidePanelNode.resultsButtonPanel {
  gap: 16px;
  position: sticky;
  bottom: 0;
  z-index: 1000;
  overflow: visible;
}

/* Column Changes */
.aem-form-tablet form .col-md-6:nth-child(1), .aem-form-tablet .guideContainer form .col-md-6:nth-child(1), .aem-form-tablet form .hidden~.col-md-6:nth-child(2), .aem-form-tablet .guideContainer form .hidden~.col-md-6:nth-child(2), .aem-form-desktop form .col-md-6:nth-child(1), .aem-form-desktop .guideContainer form .col-md-6:nth-child(1), .aem-form-desktop form .hidden~.col-md-6:nth-child(2), .aem-form-desktop .guideContainer form .hidden~.col-md-6:nth-child(2) {
    padding-right: 16px !important;
}
.aem-form-tablet form .col-md-6:last-child:not(:only-child), .aem-form-tablet .guideContainer form .col-md-6:last-child:not(:only-child), .aem-form-desktop form .col-md-6:last-child:not(:only-child), .aem-form-desktop .guideContainer form .col-md-6:last-child:not(:only-child) {
  padding-left: 16px !important;
}

/* Grid Alignment */
@media screen and (min-width: 1024px){
  .aemformcontainer{
    padding: 0 5px !important;
  }
}
@media screen and (max-width: 766px){
.step{
  .stepText{
    display: none;
  }
}
.aemformcontainer{
  padding: 0 !important;
}
}
@media screen and (min-width: 767px) and (max-width: 1023px){
  .aemformcontainer{
    padding: 0 !important;
    max-width: 100% !important;
    margin: 0 !important; 
  }
  }

  form .guideContainerNode .guidefield .guideFieldNode div.guideFieldError{
    color: var(--form-input-error-text, #D42123);
    font-family: "Noto Sans";
    font-size: var(--body-b4, 12px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--body-lh-4, 18px); /* 150% */
  }
  .yourResults__TaxCopy {
    margin: 0px !important;
  }

  .keyboard-active .guidebutton .guideFieldNode:not(.convo-back-button) .guideFieldWidget button:not(.af-icon-button):focus{
    span{
      color: #FFF;
    }
  }
  .monthyNeeds{
    font-weight: 400 !important;
  }
  p.greyText{
    color: var(--form-input-help-text, #6E6E6E) !important;
  }
  h2{
    margin: 0;
    display: flex;
    font-family: var(--header-Family);
  }

.component.static-content{
  width: 100%;
}
.content-parsys8{
  width: 100%;
}
.spacingBottomXL{
  padding-bottom: var(--vspace-xl, 32px) !important;
}

.buttonPanel.mainPanel{
  .gridFluidLayout,
  .guideLayout{
    width: 100% !important;
  }
  .row{
      justify-content: center !important;
    }
}

.header .header__container{
  div.header__navigation-container{
      height: 45%;
      align-items: center;
      border-right: 1.6px solid #0090DA;
      padding-right: var(--hspace-m, 16px);
      margin-right: 16px;
      justify-content: flex-end;
      padding: 0;
  }
  .header__logo-container{
    margin-right: var(--hspace-m, 16px);
    height: 33px;
  }
  @media screen and (max-width: 766px) {
    div.header__navigation-container{
        height: 45%;
        align-items: center;
        border-right: 1.6px solid #0090DA;
        padding-right:8px;
        margin-right: 8px;
        justify-content: flex-end;
        padding: 0;
        display: flex !important;
      }
      .header__logo-container{
        margin-right: 8px;
        height: 20px;
        margin-right: -19%;
        padding-right: 8px;
        img{
          clip-path: inset(0 74% 0 0);
        }
        
      }
      .header__mobile-navigation{
        display: none;
      }
  }
  @media screen and (min-width: 767px) and (max-width: 1023px){
    a{
      margin-left:0px;
    }
    div.header__navigation-container{
      height: 45%;
      align-items: center;
      border-right: 1.6px solid #0090DA;
      padding-right: var(--hspace-m, 16px);
      margin-right: 16px;
      justify-content: flex-end;
      display: flex !important;
      padding: 0;
    }
    .header__logo-container{
      margin-right: var(--hspace-m, 16px);
      height: 33px;
    }
    .header__mobile-navigation{
       display: none;
    }
  }
}
.vspace-m{
  margin-bottom: var(--vspace-m, 16px) !important;
}
.vspace-xl{
  margin-bottom: var(--vspace-xl, 32px) !important;
  padding-bottom: 0 !important;
}