body {
  line-height: 1.42857143;
}

.range-slider__range {
  width: 100% !important;
}

.equityform1 {
  height: 750px;
  border-bottom: 1px solid #D4D7E0;
  border-top: 1px solid #D4D7E0;
  border-left: 1px solid #D4D7E0;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.no-header {
  padding-top: 0px !important;
}

.no-extrainitialform {
  margin-top: 0px !important;
}

.no-header-resultpage {
  padding-top: 0px !important;
}

.row {
  --bs-gutter-x: 0;
}

.checked {
  visibility: visible !important;
}

.modal-backdrop.show {
  opacity: 0 !important;
}

.modal.show .modal-dialog {
  transition: transform .3s ease-out;
  transform: translate(0, -50px)
}

.mggraphcontainer {
  overflow: hidden;
}

.loanbalanceform1 {
  height: 750px;
  border-bottom: 1px solid #D4D7E0;
  border-top: 1px solid #D4D7E0;
  border-left: 1px solid #D4D7E0;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.loanbalanceLegend .legendli {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  color: #23405e !important;
}

.netsheetLegend .legendli {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  color: #23405e !important;
}

.netsheetLegend .lightgray {
  background: #eef1fc;
}

.netsheetLegend .legendli .text-wrapper {
  font-size: 17px;
}

.netsheetLegend .legendli .text-wrapper .black {
  float: right;
  color: #23405e !important;
}

.netsheetLegend .legendcircle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  /* border-radius: 15px; */
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

.darkgreenns {
  background-color: #2AAD00;
}

.row {
  --bs-gutter-x: 0;
}

.lightgreen {
  background-color: #57FF04;
}

.orange {
  background-color: #FFB800;
}

.fontthirty {
  font-size: 24px;
}

.loanbalanceLegend .legendli .text-wrapper {
  font-family: 'Montserrat-Regular';
  width: 95%;
  margin: 5px 0;
  color: #23405e !important;
  font-size: 1.2vw;
}

.font21 {
  font-size: 21px;
  text-align: center;
}

.equityamt {
  font-size: 33px;
  padding-top: 15px;
}

.moretext {
  font-size: 14px;
  cursor: pointer;
  color: #0079ff;
}

.equityyears {
  margin: 25px 10px 10px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat-Medium';
  color: #23405e !important;
}

.rvbmodelbody {
  margin-bottom: 40px;
}

.equityLegend {
  font-family: 'Montserrat-Regular';
}

.mortageContainer .DetailContent {
  background-color: #f6f7f9;
  /* padding: 10px 15px 30px 15px; */
}

.extrapayFormcontainer {
  padding-top: 25px;
  margin-left: 0px;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
  min-height: 1px;
}

.equityLegend .legendli {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px;
  color: #23405e !important;
}

.graycolorcontainer {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding-left: 6%;
  padding-right: 6%;
  background-color: #f6f7f9;
  padding-top: 15px;
  margin-top: 30px !important;
  /* margin-top: 6%; */
  padding-bottom: 15px;
}

.graycolorcontainer .rvbtitle1 {
  font-size: 23px;
  padding-bottom: 15px;
  text-align: center;
  font-family: 'Montserrat-Medium';
  color: #23405e !important;
}

.graycolorcontainer .rvbtitle2 {
  font-size: 20px;
  color: #23405e !important;
  font-family: 'Montserrat-Regular';
}

.equityLegend .legendcircle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  /* border-radius: 15px; */
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

.equityContainer .blue {
  background-color: #007AFF;
}

.equityLegend .legendli .text-wrapper {
  width: 85%;
  margin: 5px 0;
  color: #23405e !important;
  font-size: 16px;
}

.equityLegend .legendli .text-wrapper .lbcalc {
  margin-left: 5px;
  float: left;
  margin-top: 1px;
  color: #23405e !important;
}

.equityContainer .equityLegend .legendli .text-wrapper .black {
  float: right;
  color: #23405e !important;
}

.moreinfo {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.text-wrapper4 {
  font-family: 'Montserrat-Regular';
  width: 100%;
  margin: 5px 0;
  color: #23405e !important;
  font-size: 16px !important;
}

.containerstatic2 {
  padding-top: 15px;
  padding-bottom: 13%;
  padding-left: 6%;
  padding-right: 6%;
}

.containerstatic2 .contentcheck {
  padding-top: 25px;
  font-size: 19px;
  font-family: 'Montserrat-Regular';
}

.containerstatic2 .contentcheck .title {
  color: #0079ff;
  font-size: 21px;
  padding-bottom: 15px;
}

.containerstatic2 .contentcheck .content {
  color: #303030;
}

.mortageContainer .extrapayFormcontainer .extrapayform .extrapayform1 {
  height: 750px;
  border-bottom: 1px solid #D4D7E0;
  border-top: 1px solid #D4D7E0;
  border-left: 1px solid #D4D7E0;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.mortageContainer .extrapayFormcontainer .extrapayform .extrapayform2 {
  margin-bottom: 10px;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  position: relative;
  height: 750px;
  border: 1px solid #D4D7E0;
  background-color: #F6F7F9;
}

.extrapayform2 {
  overflow: scroll;
  overflow-x: hidden;
}

.extrapayform2::-webkit-scrollbar {
  width: 0.5em;
  background-color: transparent;
}

.animatediv {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 33.5%;
  font-family: 'Montserrat-Medium';
  font-size: 22px;
  color: #23405e;
}

.animatediv1 {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 33.5%;
  font-family: 'Montserrat-Medium';
  font-size: 22px;
  color: #23405e;
}

.extrapayPiechart {
  height: 200px;
  margin-bottom: 20px;
}

.extrapayPiechartep {
  height: 410px;
  margin-top: -20px;
  margin-bottom: 20px;
}

.extraGainedyears .circle-orange {
  width: 15px;
  height: 15px;
  background-color: #FFB800;
  border-radius: 50%;
  margin-right: 8px;
}

.mortageContainer .extrapayFormcontainer .extrapayform .extrapayform1 .extrapaygraphcontainer .extraGainedyears {
  margin: 25px 10px 10px 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat-Medium';
  font-size: 19px;
  color: #23405e !important;
}

.mortageDetailHeader {
  text-align: center;
  font-size: 21px;
  font-family: 'Montserrat-Medium';
  color: #23405e !important;
}

.mortageContainer .pielegends {
  margin-top: -25px;
  line-height: 18px;
}

.mortageContainer .extraPayLegend {
  font-family: 'Montserrat-Regular';
}

.mortageContainer .extraPayLegend .legendli {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  color: #23405e !important;
}

.mortageContainer .extraPayLegend .legendli .text-wrapper {
  font-size: 16px;
}

.mortageContainer .divmore .spanmore {

  font-size: 14px;
  cursor: pointer;
  color: #0079ff;
}

.divmore {
  text-align: center !important;
  /* margin-bottom: 20px  !important; */
}

#nsdivmore {
  margin-bottom: 20px !important;
}

.yespadding {
  padding: 35px !important;
  background: #fff;
  border-radius: 6px !important;
  box-shadow: rgb(95 95 95) 0px 0px 12px;
}

.extrapayyesxs {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 75px;
  position: fixed;
  bottom: 0;
  background-color: #23405E;
  z-index: 999999;
  -webkit-transform: translateZ(999999999px);
  -moz-transform: translateZ(999999999px);
  -o-transform: translateZ(999999999px);
  transform: translateZ(999999999px);
  border: 1px solid #fff;
  padding-left: 15px;
  padding-right: 15px;
}

.mortageContainer .extraPayLegend .legendcircle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  /* border-radius: 15px; */
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

.mortageContainer .extraPayLegend .legendli .text-wrapper {
  justify-content: center;
  align-items: center;
  /* width: 85%; */
  width: 93%;
  margin: 5px 0;
  color: #23405e !important;
  font-size: 16px;
}

.mortageContainer .extraPayLegend .legendli .text-wrapper .lbcalc {
  margin-left: 5px;
  float: left;
  margin-top: 1px;
  color: #23405e !important;
}

.mortageContainer .extraPayLegend .legendli .text-wrapper .black {
  float: right;
  color: #23405e !important;
}

.mortageContainer .mortageDetailcontent {
  padding: 10px 5px 0px 5px;
  font-size: 18px;
  font-family: 'Montserrat-Regular';
  color: #23405e !important;
  line-height: 1.42857143;
}

.mortageContainer .content3 .title {
  font-size: 18px;
  font-family: 'Montserrat-Medium';
}

.mortageContainer .staticcol6container {
  padding: 10px 0px 40px 10px !important;
}

.mortageContainer .staticcol6 {
  padding: 4% 9% 0% 9% !important;
}

.mortageContainer .content1 {
  font-size: 18px;
  color: #0079ff !important;
  font-family: 'Montserrat-Regular';
  font-weight: bold;
  /* line-height: 1.42857143 ; */
}

.mortageContainer .content2 {
  padding-top: 13px;
  color: #303030;
  /* line-height: 1.42857143 ; */
}

.mortageContainer .content2 .title {
  font-family: 'Montserrat-Medium';
  font-size: 18px;
  /* line-height: 1.42857143 ; */
}

.mortageContainer .content2 .content {
  font-size: 16px;
  font-family: 'Montserrat-Regular';
  padding-top: 2px;
  /* line-height: 1.42857143 ; */
}

.mortageContainer .content .listyle {
  display: flex;
  /* line-height: 1.42857143 ; */
}

.mortageContainer .content .listyle .hypen {
  padding-right: 5px;
}

.mortageContainer .content3 .title {
  font-size: 18px;
  font-family: 'Montserrat-Medium';
  /* line-height: 1.42857143 ; */
}

.mortageContainer .content3 .content {
  font-size: 21px;
  font-family: 'Montserrat-Regular';
  padding-top: 2px;
  /* line-height: 1.42857143 ; */
}

.mortageContainer .staticcol6 {
  padding: 4% 9% 0% 9% !important;
}

.mortageContainer .content1 {
  font-size: 18px;
  color: #0079ff !important;
  font-family: 'Montserrat-Regular';
  font-weight: bold;
  /* line-height: 1.42857143 ; */
}

.paddzero {
  padding: 0px !important;
}

.mortageContainer .content2 {
  padding-top: 13px;
  color: #303030;
  /* line-height: 1.42857143 ; */
}

.lbcalc {
  margin-left: 5px;
  float: left;
  margin-top: 1px;
  color: #23405e !important;
}

.black {
  float: right;
  color: #23405e !important;
}

.text-wrapper {
  width: 85%;
  margin: 5px 0;
  color: #23405e !important;
  font-size: 16px;
}

.monthlyaffordform1 {
  height: 750px;
  border-bottom: 1px solid #D4D7E0;
  border-top: 1px solid #D4D7E0;
  border-left: 1px solid #D4D7E0;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.rentvsbuyform1 {
  height: 750px;
  border-bottom: 1px solid #D4D7E0;
  border-top: 1px solid #D4D7E0;
  border-left: 1px solid #D4D7E0;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.rvbform1 {
  height: 900px;
  border-bottom: 1px solid #D4D7E0;
  border-top: 1px solid #D4D7E0;
  border-left: 1px solid #D4D7E0;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.rvbform2 {
  margin-bottom: 10px;
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
  position: relative;
  height: 900px;
  border: 1px solid #D4D7E0;
  background-color: #F6F7F9;
}

.qualifyform1 {
  height: 745px;
  border-bottom: 1px solid #D4D7E0;
  border-top: 1px solid #D4D7E0;
  border-left: 1px solid #D4D7E0;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.rentvsbuyTotalPayment {
  height: 80px;
  width: 100%;
  border-top-left-radius: 5px;
  border-bottom: 1px solid #D4D7E0;
  background-color: #F6F7F9;
  font-family: 'Montserrat-Medium';
  font-size: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  color: #23405e !important;
}

.rentvsbuyGainedyears {
  margin: 60px 10px 40px 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat-Medium';
  font-size: 21px;
  color: #23405e !important;
}

.rentvsbuychart {
  display: flex;
  justify-content: center;
  height: 307px;
}

.margbot10 {
  margin-bottom: 10px;
}

.refiGainedyears {
  margin: 60px 10px 10px 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat-Medium';
  font-size: 21px;
  color: #23405e !important;
}

.refiContainer .refiLegendChange {
  font-family: 'Montserrat-Regular';
}

.refiLegendChange .legendli {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  color: #23405e !important;
}

.legendli .text-wrapper {
  width: 85%;
  margin: 5px 0;
  color: #23405e !important;
  font-size: 16px;
}

.refiLegendChange .legendli .text-wrapper .lbcalc {
  margin-left: 5px;
  float: left;
  margin-top: 1px;
  color: #23405e !important;
}

.closingcost-container .title {
  text-align: center;
  font-family: 'Montserrat-Medium';
  color: #23405E;
  font-size: 24px;
  margin-bottom: 12px;
}

.closingleadgenmodal {
  overflow: auto;
}

.closingcost-container .banner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: transparent;
  color: #23405E;
  margin-top: 10px;
}

.closingcost-container .banner .total-costs {
  font-family: 'Montserrat-Medium';
  font-size: 20px;
}

.closingcost-container .banner .total-price {
  font-family: 'Montserrat-Medium';
  font-size: 20px;
}

.closingcost-container .banner .costs-fees {
  font-family: 'Montserrat-Medium';
  font-size: 18px;
}

.rentvsbuyheader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 80%;
}

.rvbmodelheader {
  background-color: #007AFF;
  border: 1px solid #007AFF;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.rvbmodelcontent {
  padding-top: 15px;
  color: #555555;
  text-align: center;
  font-size: 15px;
}

.rvbmenu-title {
  text-align: center;
  font-family: 'Montserrat-Medium';
  color: #23405E;
  font-size: 24px;
  margin-bottom: 12px;
}

.brief {
  text-align: center;
  font-family: 'Montserrat-Regular';
  color: #23405E;
  font-size: 16px;
}

.height20 {
  height: 20px;
}

.closingdateselection {
  font-family: 'Montserrat-Medium';
  color: #23405E;
  font-size: 16px;
  margin-bottom: 12px;
  cursor: pointer;
}

.floatleft {
  float: left;
}

.alignright {
  text-align: right;
}

.rvbmodelcontent {
  padding-top: 15px;
  color: #555555;
  text-align: center;
  font-size: 15px;
}

.moreinfo-container .contentmoreinfo {
  overflow: auto;
  padding-right: 15px !important;
  padding-left: 15px !important;
}

.boldheader {
  font-size: 17px !important;
  font-family: 'Montserrat-Medium';
}

.lefttd {
  text-align: left;
}

.righttd {
  text-align: right;
}

.rvbmodelcontent {
  padding-top: 15px;
  color: #555555;
  text-align: center;
  font-size: 15px;
}

.rvbmodeldetails table {
  font-size: 17px;
  width: 75%;
  margin-left: 10%;
}

.rvbmodeldetails {
  padding: 15px !important;
  font-family: 'Montserrat-Regular';
  line-height: 28px;
  padding-bottom: 0px !important;
}

.menu-title {
  text-align: center;
  font-family: 'Montserrat-Medium';
  color: white;
  margin-top: 20px;
  font-size: 23px;
  margin-bottom: 18px;
}

.closingcost-container .banner .costs-title {
  font-family: 'Montserrat-Regular';
  font-size: 16px;
}

.closingcost-container .banner .costs-price {
  font-family: 'Montserrat-Regular';
  font-size: 16px;
}

.rentvsbuyContainer .lightgreen {
  background-color: #57FF04;
}

.rentvsbuyContainer .lightgreen {
  background-color: #57FF04;
}

.rentvsbuyLegend .legendli {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  color: #23405e !important;
}

.qualifytop {
  text-align: center;
  font-size: 18px;
  color: #23405e !important;
  font-family: 'Montserrat-Medium';
}

.qualifydonutcenter {
  margin-top: 35px;
  margin-bottom: 35px;
}

.donutcontainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.qualifybottom {
  text-align: center;
  font-size: 18px;
  color: #23405e !important;
  font-family: 'Montserrat-Medium';
}

.rentvsbuyLegend .legendli .text-wrapper {
  width: 85%;
  margin: 5px 0;
  color: #23405e !important;
  font-size: 16px;
}

.circlewidth {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-right: 8px;
}

.monthlyaffordLegend .legendli {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  color: #23405e !important;
}

.monthlyaffordLegend .legendli .text-wrapper {
  width: 100%;
  margin: 5px 0;
  color: #23405e !important;
  font-size: 16px;
}

.moreinfo {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.slidercontainerdiv {
  padding-left: 7%;
  padding-right: 7%;
}

.monthlyaffordLegend {
  font-family: 'Montserrat-Regular';
}

.monthlyaffordLegend .legendcircle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  /* border-radius: 15px; */
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

.legendcircle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  /* border-radius: 15px; */
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

.netsheetLegend {
  font-family: 'Montserrat-Regular';
}

.blue {
  background-color: #007aff;
}

.lightgreen {
  background-color: #57ff04;
}

.green {
  background-color: #2aad00;
}

.orange {
  background-color: #ffb800;
}

.Graycircle {
  border: 1px solid #EEF1FC;
  background-color: #EEF1FC;
}

.buycostinfo {
  font-family: 'Montserrat-Regular';
  width: 100%;
  font-size: 14px;
}

.bclefttd {
  text-align: left;
  height: 20px;
}

.bcrighttd {
  text-align: right;
}

.formpadding {
  padding-left: 25px;
  padding-right: 25px;
  /* height: 640px; */
  height: auto;
  overflow: hidden;
  overflow-y: auto;
}

.extrapayptag {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  height: 100px;
  font-family: 'Montserrat-Regular';
  font-size: 15px;
  color: #23405e !important;
  text-align: center;
}

.btntext {
  color: #23405e !important;
  font-family: 'Montserrat-Medium';
  width: 100%;
  text-align: center;
  font-size: 14px;
}


/* MoreInfopopup */
.MoreInfocontent {
  top: -22px;
  left: 0px;
  max-width: 460px;
  /* padding: 20px !important; */
  padding: 15px !important;
  width: 100%;
  height: auto;
  border: none;
  background: none;
  overflow: auto;
  border-radius: 6px;
  outline: none;
  /* padding: 35px; */
  /* padding: 0px; */
  box-shadow: rgb(95 95 95) 0px 0px;
}

.moreinfo-container.paddzero {
  padding: 0px !important;
}

.moreinfo-container .subpopup-title {
  text-align: center;
  font-family: 'Montserrat-Medium';
  color: #0e2f51;
  margin-top: 10px;
  font-size: 24px;
  margin-bottom: 10px;
}

.moreinfo-container .contentmoreinfo {
  overflow: auto;
  padding-right: 15px !important;
  padding-left: 15px !important;
}

/* .height20 {
    height: 20px;
  } */
.moreinfo-container .infosection {
  margin-bottom: 20px;
}

.moreinfo-container .infoheading {
  font-family: 'Montserrat-Medium';
  color: #0e2f51;
  font-size: 15px;
  margin-top: 5px;
  margin-bottom: 8px;
}

.moreinfo-container .infodesc {
  line-height: 20px;
  font-size: 14px;
  font-family: 'Montserrat-Regular';
  text-align: justify;
  color: #333;
}

.mgmodeldetails {
  font-family: 'Montserrat-Regular';
  line-height: 28px;
  padding-bottom: 10px !important;
}

.mgmodeldetails .boldheadermg {
  font-family: 'Montserrat-Medium';
  text-align: left;
}

.mgmodeldetails table {
  font-size: 17px;
  width: 100%;
}

.mgmodelcontent {
  text-align: center;
  font-size: 15px;
  padding: 0 15px;
}

.lefttd {
  text-align: left;
}

.righttd {
  text-align: right;
}

.moreinfo-container .contentgreeting {
  overflow: auto;
  padding-right: 15px !important;
  padding-left: 15px !important;
}

.yesbtncontent {
  top: -22px;
  left: 0px;
  /* max-width: 460px; */
  width: 100%;
  margin: auto;
  height: auto;
  border: none;
  background: none;
  overflow: auto;
  border-radius: 6px;
  outline: none;
  /* padding: 35px; */
  padding: 15px !important;
  /* padding: 20px !important; */
  box-shadow: rgb(95 95 95) 0px 0px
}

.moreinfo-container .greetbtn {
  text-align: center;
  padding-top: 10px;
  /* padding-bottom: 20px; */

}

.moreinfo-container .yesbtn {
  background: #428BFE;
  border-radius: 35px;
  color: #ffffff;
  width: 250px;
  height: 50px;
  box-shadow: none;
  border-style: none;
  border-image: none;
  border-color: none;
  margin-top: 7px;
  font-family: 'Montserrat-Medium';
  letter-spacing: 1px;
  outline: none;
  font-size: 19px;
}

.gobtn {
  margin-top: 0px !important;
}

.yesbtn {
  background: #508AFF !important;
}

.closemark {
  padding: 0px 50px;
}

.closepopup {
  z-index: 9999999 !important;
  position: absolute !important;
  max-width: 480px !important;
  text-align: right !important;
  margin-left: 13%;
  top: -47px;
  cursor: pointer;
}

.closepopup img {
  cursor: pointer;
  width: 15px;
}

/* MoreInfopopup End*/
/* //******************************* */
.overlay1 {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 18px;
  left: 17px;
  background-color: transparent;
}

.ReactModal__Content {
  animation: showSweetAlert .7s;
  -webkit-animation: showSweetAlert .7s;
}

.ErrorPopupClose {
  z-index: 9999999 !important;
  position: absolute;
  margin-top: -45px;
  max-width: 520px;
  text-align: right;
  margin-left: -111px;
}

.ErrorPopupClose img {
  height: 15px;
  width: 15px;
}

img {
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.errormsg-blue-button {
  background-color: #508AFF;
  color: #FFFFFF;
  padding: 5px 20px;
  border-radius: 5px;
  margin-top: 13px;
  font-family: 'Montserrat-Medium';
  letter-spacing: 1px;
  width: 100%;
  border: 1px solid #508AFF;
  outline: none;
  font-size: 15px !important;
}

.ErrorMsgContent {
  padding: 15px;
  text-align: center;
}

.ReactModal__Overlay--after-open {
  z-index: 999999;
}

.ErrorMsgContent .ErrorMsgText {
  font-size: 21px;
  font-family: 'Montserrat-Medium';

  color: #777777;
  margin-bottom: 20px;
}

/* ep styles start */



.extraTotalPayment {
  height: 50px;
  width: 100%;
  /* border-top: 1px solid #D4D7E0; */
  border-top-left-radius: 5px;
  border-bottom: 1px solid #D4D7E0;
  background-color: #F6F7F9;
  font-family: Montserrat-Medium;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  color: #23405e !important;
}

.extraGainedyears {
  margin: 80px 10px 15px 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: Montserrat-Medium;
  font-size: 19px;
  color: #23405e !important;
}

.extra-circle-orange {
  width: 15px;
  height: 15px;
  background-color: #FFB800;
  border-radius: 50%;
  margin-right: 8px;
}

/* ep styles ends */
/* qf styles start */
.qualifyleftform1 {
  height: 750px;
  border-bottom: 1px solid #D4D7E0;
  border-top: 1px solid #D4D7E0;
  border-left: 1px solid #D4D7E0;
  border-top-left-radius: 7px;
  /* border-right: 1px solid #D4D7E0; */
  border-bottom-left-radius: 7px;
}

.qualifycontainer1 {
  margin-top: 25px;
  margin-bottom: 15px;
  margin-left: auto;
  margin-right: auto;
}

.qualifyContainer1 {
  font-family: Montserrat-Medium;
}

.qualifytop {
  text-align: center;
  font-size: 18px;
  color: #23405e !important;
  font-family: Montserrat-Medium;
}

.qualifydonutcenter {
  margin-top: 35px;
  margin-bottom: 35px;
}

.donutcontainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.qualifypiecontainercircle {
  width: 158px;
  height: 158px;
  border-radius: 50%;
  background-color: #007AFF;
  margin: 10px;
  cursor: pointer;
}

.qualifypiecontainercircle .qualifytext {
  height: 100%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-direction: column;
  /* font-weight: bold; */
}

.qualifypiered {
  background-color: #E55032 !important;
}

.qualifypieyellow {
  background-color: #FFB800 !important;
}

.qualifybottom {
  text-align: center;
  font-size: 1.5vw;
  color: #23405e !important;
  font-family: Montserrat-Medium;
}

/* qf styles ends */
/* ns styles start */
.ns_paddzero {
  padding: 0;
}

.NSLegend_Cover {
  padding-left: 0px;
}

/* ns styles ends */
.RangeSliderPading {
  padding-right: 35px;
}

.clsheight {
  padding: 0px;
}

#equityPiechart1 {
  /* height: 320px; */
  width: 55%;
  margin: 0 auto;
}

.rc-slider-dot-active {
  border-color: #96dbfa;
  box-shadow: (0 0 5px #57c5f7);
  cursor: grabbing;
}

.extrapayContainer .slider-cls .rc-slider-mark {
  width: 97%;
  margin-left: 17px;
  position: absolute;
  top: 18px;
  left: -18px;
  width: 100%;
  font-size: 12px;
  padding-top: 10px
}

.rc-slider-mark-text {
  color: #23405e !important;
  font-size: 15px;
}

.rc-slider-mark-text-active {
  color: #23405e !important;
  font-size: 20px;
}

.rc-slider-mark-text {
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  cursor: pointer;

}

/* qf styles start */
@media screen and (max-width: 760px) {
  .content2 {
    padding-top: 13px;
    height: auto;
  }

  .title {
    font-size: 14px;
  }

  .content {
    font-size: 13px;
  }

  .mortageDetailHeader {
    font-size: 17px;
  }

  .mortageDetailcontent {
    font-size: 15px !important;
  }

  .staticcol6container {
    padding: 10px 0px 40px 0px !important;
  }

  .staticcol6 {
    padding: 4% 20px 0% 20px !important;
  }

  .animatediv {}

  .animatediv1 {}



}

@media only screen and (min-width: 768px) and (max-width: 1027px) {
  .HeaderContainer {
    padding: 5px;
    position: fixed;
    background-color: #fff;
    z-index: 999999;
    box-shadow: 0px 0px 7px 4px #d9e5ed;
  }

  .rvb_buyRentDiff {
    font-size: 18px !important;
  }

  .formalign {
    /* padding-top: 100px !important; */
  }

  .avatarcontainer {
    /* display: none; */
  }

  .Calctypecontainer {
    /* display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column; */
  }

  .ipadpropayform {
    /* padding-top: 70px !important; */
  }

  .extraGainedyears {
    text-align: center;
  }

  .mortageContainer .extraPayLegend .legendli .text-wrapper {
    width: 100%;
  }

  .lbcalc {
    /* width: 50%; */
  }

  .extrapayPiechart {
    height: 150px;
    margin-top: -20px;
    margin-bottom: 20px;
  }

  .animatediv {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 34.5%;
    font-family: 'Montserrat-Medium';
    font-size: 20px;
    color: #23405e;

  }

  .animatediv1 {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 34.5%;
    font-family: 'Montserrat-Medium';
    font-size: 16px;
    color: #23405e;

  }

  .ipad {
    width: 5%;
  }

  .ipadpropayform {
    width: 90%;
  }
}

@media only screen and (max-width: 768px) {
  .HeaderContainer {
    padding: 5px;
    position: fixed;
    background-color: #fff;
    z-index: 999999;
    box-shadow: 0px 0px 7px 4px #d9e5ed;
  }

  .formalign {
    /* padding-top: 100px !important; */
  }

  .avatarcontainer {
    /* display: none; */
  }

  .extrapayyesxs {
    /* display: none; */
  }


  .mortageContainer .formpadding {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }

  .content3 .title {
    padding-top: 25px;
  }

  .Calctypecontainer {
    /* display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; */
  }

  .mggraphcontainer .mgGainedyears {
    margin: 25px 10px 0px 10px !important;
  }

  .MoreInfocontent {
    top: 0px;
    /* left: 18px; */
    max-width: 460px;
    padding: 20px;
    width: 100%;
    height: auto;
    border: none;
    background: none;
    overflow: auto;
    border-radius: 6px;
    outline: none;
    /* padding: 0px !important; */
    /* padding: 15px; */
    box-shadow: rgb(95 95 95) 0px 0px;
  }

  /* .mggraphcontainer .mg_Legend .legendcircle{
    width: 12px !important;
    height: 12px !important;
  } */
  .yesbtncontent {
    top: 0px !important;
    left: 0px;
    /* max-width: 460px; */
    /* width: 90%; */
    margin: auto;
    height: auto;
    border: none;
    background: none;
    overflow: auto;
    border-radius: 6px;
    outline: none;
    padding: 20px !important;
    /* padding: 0 2%; */
    box-shadow: rgb(95 95 95) 0px 0px;
  }

  /* style for eq calculator start */

  #equityPiechart1 {
    /* width: 320px;
    margin: 0 auto; */
  }

  /* style for eq calculator ends */
}

@media only screen and (max-width: 340px) {
  .HeaderContainer {
    padding: 5px;
    position: fixed;
    background-color: #fff;
    z-index: 999999;
    box-shadow: 0px 0px 7px 4px #d9e5ed;
  }

  .formalign {
    /* padding-top: 100px !important; */
  }

  .text-wrapper {
    font-size: 13px !important;
  }

  .extrapayptag {
    margin-top: 40px;
  }

  /* style for eq calculator start */
  .equityform1 {
    border-right: 1px solid #D4D7E0;
    border-radius: 7px;
  }

  /* style for eq calculator ends */
  /* ns styles start */
  .ns_paddzero {
    padding: none;
  }

  /* ns styles ends */

}

@media screen and (max-width: 1237px) and (min-width: 768px) {
  .Calctypecontainer {
    /* width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-direction: column !important; */
  }

  .ipadpro1 {
    width: 20% !important;
  }

  .ipadpro {
    width: 60% !important;
  }

  .ipadpro2 {
    width: 20% !important;
  }

  .RangeSliderPading {
    padding-right: 26px;
  }

}

@media screen and (min-width: 321px) and (max-width: 391px) {
  .datepicker1 {
    width: 14% !important;
  }

  .text-wrapper {
    font-size: 13px;
  }

  .extrapayptag {
    margin-top: 40px;
  }

}

@media only screen and (min-width:250px) and (max-width:399px) {

  .text-wrapper2 {
    font-size: 2.5vw !important;
  }

  .refiLegendChange1 {
    padding-left: 9%;
    padding-right: 9%;
  }

  #mortgage_legend {
    padding-left: 9px !important;
  }

  #mortgage_legend1 {
    padding-left: 9px !important;
  }

  .mg_Legend ul {
    padding-left: 0px !important;
  }
}

@media only screen and (min-width:378px) and(max-width:399px) {
  .refiLegendChange ul {
    padding-left: 5px !important;
  }
}

@media only screen and (min-width:250px) and (max-width:377px) {
  .refiLegendChange ul {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .refiLegendChange2 ul {
    padding-left: 0px !important;
  }
}

@media screen and (min-width:389px) and (max-width:419px) {
  .txtcenter {
    font-size: 12px !important;
  }
}

@media screen and (min-width:420px) and (max-width:541px) {
  .txtcenter {
    font-size: 14px !important;
  }
}

@media screen and (max-width: 767px) {
  .extraGainedyears {
    text-align: center;
  }

  .mortageContainer .mortageContentContainer .extrapayFormcontainer .extrapayform .extrapayform1 .extrapaygraphcontainer .extraGainedyears {
    font-size: 17px !important;
  }

  .loanbalanceform1 {
    border-bottom: none;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border-top-left-radius: 0px !important;
  }

  .qualifyback {
    margin-left: 0 !important;
  }

  .text-wrapper {
    font-size: 12px !important;
    font-family: 'Montserrat-Regular';
  }

  #rentvsbuyLegend .rvb_text-wrapper {
    font-size: 2.7vw !important;
    font-family: 'Montserrat-Regular';
    width: 100% !important;
  }

  .mortageContainer .divmore .spanmore {
    /* font-size: 12px; */
    cursor: pointer;
    color: #0079ff;
  }

  .extrapayform2 {
    margin-bottom: 10px;
    /* border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important; */
    border-radius: 0px !important;
    position: relative;
    /* height: 630px !important; */
    border: 1px solid #D4D7E0;
    background-color: #F6F7F9;
    height: auto !important;
  }

  .contentcheck {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .legendli .text-wrapper4 {
    width: 100% !important;
  }

  .moreinfo-container .yesbtn {
    width: 170px !important;
    height: 35px !important;
    font-size: 15px !important;
    margin-bottom: 14px !important;
  }

  .contheight {
    /* height: 250px; */
    /* height: 204px; */
    height: fit-content;
  }

  .netsheet_form1 {
    border: none !important;
    border-radius: 0px !important;
  }

  #equityPiechart1 {
    padding: 0px !important;
  }

  .equityamt {
    padding-top: 10px !important;
  }

  .qualifyleftform1 {
    border: none !important;
    border-radius: 0px !important;
  }

  .rentvsbuyform1 {
    border: none !important;
    border-radius: 0px !important;
  }

  .stn_form1 {
    border: none !important;
    border-radius: 0px !important;
  }

  .equityform1 {
    border: none !important;
    border-radius: 0px !important;
  }

  .extrapayptag {
    padding-left: 15px;
    padding-right: 15px;
  }

  .mortageContainer .DetailContent {
    padding: 0px !important;
  }

  .yespadding {
    padding: 20px !important;
  }

  .graycolorcontainer {
    padding-left: 15px !important;
    padding-right: 15px !important;
    margin-top: 50px !important;
  }

  .containerstatic2 {
    /* padding-left: 15px !important;
  padding-right: 15px !important; */
    padding-top: 15px !important;
    padding-bottom: 13% !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .rvbform1 {
    height: fit-content !important;
  }

  .refipadding {
    padding: 0% !important;
  }

  .legendli .text-wrapper4 {
    font-size: 2.5vw !important;
  }

  #eplegend {
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .epchartheight {
    height: 220px !important;
  }

  .moreinfo {
    margin-bottom: 0px !important;
  }

  .refiLegendChange {
    /* padding-right: 11% !important;
  padding-left: 11% !important;
  padding-top: 30% !important; 
  padding-top: 37% !important; */
    /* height: 216px; */
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .refiLegendChange1 {
    /* height: 254px !important; */
    height: 185px !important;
  }

  .refiLegendChange2 {
    height: 280px !important;
  }

  .rentvsbuyLegend {
    /* height: 304px; */
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* .rentvbuyheight{
  height: 280px !important;
} */

  /* .refiLegendChange ul{
  width: 80% !important;
} */
  .moreinfo1 {
    margin-bottom: 37px !important;
    /* margin-top: 41px !important; */
    margin-top: 15px !important;
  }

  .refiform2 {
    height: auto;
  }

  .clsheight {
    margin: 0 40px;
  }

  .rentvsbuyGainedyears {
    margin: 20px 10px 30px 10px !important;
  }

  .RangeSliderPading {
    padding-right: 40px;
  }

  .extraGainedyears {
    font-size: 17px !important;
  }

  .extrapayFormcontainer {
    padding-top: 60px;
    padding-left: 0px;
    padding-right: 0px;
  }

  .extrapayform {
    width: 100%;
    padding: 0px;
    margin: 0px;
  }

  .extrapayform1 {
    /* border-right: 1px solid #D4D7E0;
  border-radius: 7px; */
    border: none !important;
    height: fit-content !important;
    border-radius: 0px !important;
  }

  .rentvbuyheight {
    height: 220px !important;
  }

  .refiCoverchart {
    height: 240px !important;
  }

  .rvb_buyRentDiff {
    font-size: 14px !important;
    text-align: center;
    width: 80%;
  }

  .row {
    --bs-gutter-x: 0;
  }

  .qualifybottom {
    font-size: 4.3vw;
  }

  /* ns styles start */
  /* .NSLegend_Cover{
  padding: 0 20%;
} */
  .text-wrapper {
    /* font-size: 3.0vw !important; */
    width: 100% !important;
  }

  .text-wrapper1 {
    font-size: 2.0vw !important;
    width: 100% !important;
  }

  .text-wrapper3 {
    font-size: 2.5vw !important;
  }

  /* ns styles ends */
  /* qf styles start */
  .donutcontainer {
    width: 33%;
  }

  .equityLegend {
    padding: 0px;
  }

  /* .qualifypiecontainercircle{
   width: 25vw;
  height: 25vw; 
  width: 150px;
  height: 150px;
} */
  .qualifypiecontainercircle .qualifytext {
    font-size: 2.5vw;

  }

  .qualifyleftform1,
  .loanbalanceform1,
  .equityform1,
  .monthlyaffordform1,
  .rentvsbuyform1 {
    height: fit-content;

  }

  .monthlyaffordform1 {
    border-radius: 0px !important;
  }

  /* qf styles start */
  #equityPiechart1 {
    /* height: auto; */
    width: 50%;
  }

  .custom_xs {
    width: 45%;
  }

  .netsheetLegend {
    padding: 0 17%;
  }

  .rvbtitle1 {
    font-size: 21px !important;
  }

  .rvbtitle2 {
    font-size: 16px !important;
  }

  .monthlyaffordform1 {
    border-bottom: 0px !important;
  }

  .backicon {
    /* width: 8px !important; */
    margin-bottom: 0px !important;
  }

  .qualifyspan {
    font-size: 13px !important;
  }
}

@media only screen and (max-width:541px) {

  .text-wrapper {
    font-size: 9px !important;
  }
}

@media only screen and (min-width: 576px) {
  .text-wrapper2 {
    /* font-size: 1.2vw !important; */
    width: 100% !important;
  }
}

@media screen and (min-width:576px) and (max-width:767px) {

  /* .rentvsbuyLegend ul {
    padding-left: 17% !important;
    padding-right: 17% !important;
  } */
  .text-wrapper5 {
    font-size: 2.5vw !important;
  }

  #eplegend ul {
    padding-left: 0px !important;
    width: 100%;
  }
}

@media only screen and (min-width:767px) and (max-width:877px) {
  .text-wrapper2 {
    font-size: 1.5vw !important;
  }
}

@media only screen and (min-width:574px) and (max-width:782px) {
  .clsheight {
    margin-bottom: 10% !important;
  }

  .RangeSliderPading {
    padding-right: 19px;
  }

  .extrapayPiechart {
    height: 135px;
    margin-top: 0px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
  }

  .animatediv {
    font-size: 18px;
  }

  .animatediv1 {
    font-size: 16px;
  }

  /* style for eq calculator start */
  #equityPiechart1 {
    /* width: 200px;
    margin: 0 auto; */
  }

  .equityLegend {
    padding: 0 0;
  }

  .equityLegend .legendli .text-wrapper {
    width: 85%;
    margin: 5px 0;
    color: #23405e !important;
    font-size: 2vw;
  }

  /* style for eq calculator ends */
  /* style for qf calculator start */
  /* .qf_RightView{
        height: 795px !important;
    } */
  /*  .qualifyleftform1{
      height: 795px;
    } */
  .qualifybottom {
    font-size: 15px;
  }

  /* style for qf calculator ends */
  /* style for stn calculator start */
  .stn_RightView {
    height: 750px !important;
  }

  /* .text-wrapper{
    font-size: 14px !important;
  } */
  /* style for stn calculator ends */
  /* ns styles start */

  /* ns styles ends */
}

.slider-cls {
  padding: 0px !important;
}

.clsheight {
  margin-top: 30px;
}

.rc-slider {
  padding: 10px 0px 13px 0px !important;
  position: relative;
  height: 14px;
  padding: 5px 0;
  width: 100%;
  border-radius: 6px;
  -ms-touch-action: none;
  touch-action: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;

}

@media screen and (min-width: 321px) and (max-width: 575px) {
  .datepicker1 {
    width: 14% !important;
  }

  .text-wrapper {
    font-size: 13px;
  }

  .text-wrapper2 {
    font-size: 2.5vw !important;
  }

  .extrapayptag {
    margin-top: 40px;
  }

  .extrapayPiechart {
    height: 135px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
  }


}

@media screen and (max-width: 767px) and (min-width: 500px) {

  /* .refiLegendChange{
    padding: 0px 10% !important;
    padding-top: 4% !important;
    margin-top: 28%; 
  } */
  .refiContainer .refiLegendChange .legendli .text-wrapper {
    font-size: 16px;
  }

}

@media screen and (min-width:400px) and (max-width:575px) {
  .refiLegendChange ul {
    padding-left: 0px !important;
    width: 100% !important;
  }

  #refiLegend ul {
    width: 90% !important;
    padding-left: 0px !important;
  }
}

@media screen and (min-width:200px) and (max-width:575px) {
  .rentvsbuyLegend ul {
    width: 80% !important;
  }

}

/* @media screen and (max-width:499px) and (min-width:370px){
  .refiLegendChange{
    margin-top: 29%;
  }
} */
/* @media screen and (max-width:499px) and (min-width:370px){
  .refiLegendChange{
    margin-top: 38%;
  }
} */
@media screen and (min-width:767px) {
  .refiContainer .refiLegendChange ul {
    padding-left: 0px !important;
    padding-top: 0px !important;

  }

  .refiContainer .refiLegendChange .legendli .text-wrapper {
    width: 100% !important;
  }

  .refiheight {
    display: flex;
    justify-content: center;
    /* height: 300px !important; */
  }

  .extrapayContainer .slider-cls {
    padding: 0px !important;
  }

  .extrapayContainer .clsheight {
    margin-top: 30px;
  }

  .extrapayContainer .rc-slider {
    padding: 10px 0px 13px 0px !important;
    position: relative;
    height: 14px;
    padding: 5px 0;
    width: 100%;
    border-radius: 6px;
    -ms-touch-action: none;
    touch-action: none;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;

  }
}

@media only screen and (min-width:576) and (max-width:766px) {
  .text-wrapper {
    font-size: 2.1vw ​ !important;
  }

  /* .rentvsbuyLegend ul {
      padding-left: 17% !important;
      padding-right: 17% !important;
    
  } */
}

/* @media screen and (max-width: 767px){
 
} */
@media screen and (max-width: 576px) {}

@media screen and (max-width: 499) and (min-width:100px) {
  .refiLegendChange {
    padding: 0px 14% !important;
    /* margin-top: 28%; */
  }

  .refigraphcontainer .legendli .text-wrapper {
    font-size: 2vw !important;
  }

}

@media screen and (min-width:767px) {
  .refigraphcontainer .refiLegendChange ul {
    padding-left: 0px !important;
    padding-top: 0px !important;

  }

  .refigraphcontainer .refiLegendChange .legendli .text-wrapper {
    font-family: 'Montserrat-Regular';
    width: 100% !important;
  }
}


/* Mar 19*/

/* .mggraphcontainer{
  margin: 25px 10px 10px 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat-Medium';
  font-size: 19px;
  color: #23405e !important;
} */
.mgform1 {
  height: 750px;
  border-bottom: 1px solid #D4D7E0;
  border-top: 1px solid #D4D7E0;
  border-left: 1px solid #D4D7E0;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.mggraphcontainer .mgGainedyears {
  margin: 25px 10px 0px 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat-Medium';
  font-size: 19px;
  color: #23405e !important;
}

.mggraphcontainer .pielegends {
  margin-top: -25px;
  line-height: 18px;
}

.mggraphcontainer .mg_Legend {
  font-family: 'Montserrat-Regular';
}

.mggraphcontainer .mg_Legend .legendli {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  color: #23405e !important;

}

.mg_Legend {
  font-family: 'Montserrat-Regular';
}

.mggraphcontainer .mg_Legend .legendcircle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  /* border-radius: 15px; */
  display: inline-block;
  vertical-align: middle;
  margin-right: 4px;
}

.mg_Piechart {
  /* transform: scaleX(-1); */
  height: 200px;
  margin-bottom: 20px;
}

.mg_text-wrapper {
  justify-content: space-between;
  align-items: center;
  display: flex;
  width: 80%;
  margin: 5px 0;
  color: #23405e !important;
  font-size: 16px;
}

.mg_text-wrapper1 {
  align-items: center;
  /* justify-content: space-between; */
  display: flex;
  width: 80%;
  margin: 5px 0;
  color: #23405e !important;
  font-size: 16px;
}

.mglbcalc {
  /* margin-left: 5px; */
  margin-left: 3px;
  float: left;
  margin-top: 1px;
  color: #23405e !important;
}

.mg_divmore {
  text-align: center !important;

}

.mg_divmore .mg_spanmore {
  font-size: 14px;
  cursor: pointer;
  color: #0079ff;
}

/* Loan balance Calculator web view */

.lb_extraGainedyears {
  margin: 25px 10px 10px 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat-Medium';
  font-size: 19px;
  color: #23405e !important;
}

.lb_fontthirty {
  font-size: 30px;
}

.lb_legendcircle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  /* border-radius: 15px; */
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}

.lb_text-wrapper {
  font-family: 'Montserrat-Regular';
  width: 95%;
  margin: 5px 0;
  color: #23405e !important;
  font-size: 1.2vw;
}

/* loan Balance Calculator ends webview ends  */

/* MonthlyAffordability web view starts here  */
.ma_extraGainedyears {
  margin: 80px 10px 50px 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat-Medium';
  font-size: 19px;
  color: #23405e !important;
}

.ma_font30 {
  font-size: 30px;
}

.ma_text-wrapper {
  font-family: 'Montserrat-Regular';
  width: 100%;
  margin: 5px 0;
  color: #23405e !important;
  font-size: 1.2vw;
}

/* Monthlyaffordability web view ends here  */

/* ExtraPayment webview starts here */

.ep_extraGainedyears {
  margin: 40px 10px 15px 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat-Medium';
  font-size: 19px;
  color: #23405e !important;
}

.ep_text-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Montserrat-Regular';
  width: 85%;
  margin: 5px 0;
  color: #23405e !important;
  font-size: 1.2vw;
}

.clsheightep {
  margin-top: 30px;
}

/* ExtraPayment web view ends here  */

/* rentvsbuy webview legend starts here  */
.rvb_text-wrapper {
  width: 85%;
  font-family: 'Montserrat-Regular';
  margin: 5px 0;
  color: #23405e !important;
  font-size: 1.2vw;
}

/* rentvsbuy legend ends here  */

/* Loan balance responsive starts here  */
@media only screen and (max-width: 767px) {
  .lb_text-wrapper {
    font-family: 'Montserrat-Regular';
    font-size: 3.6vw !important;
  }

  #loanbalancePiechart {
    height: 240px !important;
  }


}

@media screen and (max-width: 900px) and (min-width: 650px) {
  .lb_fontthirty {
    font-size: 24px;
  }

  #loanbalancePiechart {
    height: 240px !important;
  }
}

/* loan balance reponsive ends here  */

/* Monthly affordability responsive starts here  */
@media screen and (max-width: 767px) {
  .ma_extraGainedyears {
    margin: 25px 10px 20px 10px;
  }

  .ma_text-wrapper {
    font-family: 'Montserrat-Regular';
    font-size: 2.6vw;
  }

  .ma_font30 {
    font-size: 24px;
  }

  #monthlyaffordPiechart {
    height: 240px !important;
    margin-top: 0px !important;
  }
}

@media screen and (max-width: 576px) {
  .monthlyaffordLegend {
    padding: 0 10%;
  }
}


/* Monthly affordability responsive ends here  */

/* Extra Payment responsive starts here */
@media screen and (max-width: 767px) {
  .ep_text-wrapper {
    font-family: 'Montserrat-Regular';
    font-size: 2.4vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .clsheightep {
    margin-top: 30px;
    height: 100px !important;
    /* margin-bottom: 40px; */
    padding: 0px 20px !important;
  }
}

/* Extra Payment responsive ends here */

/* rentvsbuy responsive starts here  */
@media only screen and (max-width: 767px) {

  .buycostinfo {
    font-size: 10px;
  }

}

/* rentvsbuy responsive ends here  */


@media screen and (max-width: 767px) {
  .mgform1 {
    border: none !important;
    height: fit-content !important;
  }

  .mgGainedyears {
    font-size: 16px !important;
    text-align: center;
  }

  .legendcircle {
    width: 12px !important;
    height: 12px !important;
    margin-right: 0px !important;
  }

  .mg_text-wrapper {
    width: 80%;
    /* width: 100%; */
    font-size: 12px !important;
  }

  .mg_divmore .mg_spanmore {
    font-size: 12px;
  }

  .mg_morediv {
    margin-bottom: 10px !important;
  }

  .mggraphcontainer {
    font-size: 17px !important;
  }

  .animatediv1 {
    font-size: 18px !important;
  }
}

@media screen and (min-width: 321px) and (max-width: 575px) {
  .mg_Piechart {
    height: 135px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
  }
}

@media screen and (max-width:541px) {
  .mg_text-wrapper {
    font-size: 10px !important;
    /* width: 80%; */
    width: 100%;
  }
}

@media only screen and (min-width: 574px) and (max-width: 782px) {
  .mg_Piechart {
    height: 135px;
    margin-top: 0px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
  }
}

/* //kalp   refi  */


.refiform {
  height: 750px;
  border-bottom: 1px solid #D4D7E0;
  border-top: 1px solid #D4D7E0;
  border-left: 1px solid #D4D7E0;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.refibot10 {
  margin-bottom: 10px;
}

.refianimatediv {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 33.5%;
  font-family: 'Montserrat-Medium';
  font-size: 22px;
  color: #23405e;
}

.mortageContainer .refidivmore .refispanmore {

  font-size: 14px;
  cursor: pointer;
  color: #0079ff;
}

.refidivmore {
  text-align: center !important;
}

.moreinfo {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

@media screen and (max-width: 767px) {

  .refiform {
    /* border-right: 1px solid #D4D7E0; */
    border-radius: 7px;
    border: none !important;
    height: fit-content !important;
    ;
  }

  .refiform {
    font-size: 17px !important;
  }

  .mortageContainer .refidivmore .refispanmore {
    font-size: 12px;
    cursor: pointer;
    color: #0079ff;
  }

  .refimoreinfo {
    margin-bottom: 0px !important;
  }

  .netsheetLegend,
  .loanbalanceLegend,
  .equityLegend {
    padding: 0px 12%;
  }
}


@media only screen and (min-width:574px) and (max-width:782px) {

  .refianimatediv {
    font-size: 18px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1027px) {

  .refianimatediv {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 34.5%;
    font-family: 'Montserrat-Medium';
    font-size: 20px;
    color: #23405e;

  }

  .ma_text-wrapper {
    font-size: 1.8vw !important;
  }

  .stn_text_wrapper {
    font-size: 1.8vw !important;
  }

  .equityLegend .legendli .text-wrapper {
    font-size: 1.8vw !important;
  }

  .ns_text_wrapper {
    font-size: 1.8vw !important;
  }

  .rvb_text-wrapper {
    font-size: 1.8vw !important;
  }

  .ep_text-wrapper {
    font-size: 1.8vw !important;
  }

  .eqr_down {
    width: 95% !important;
  }

  .eqr_t2 {
    padding-right: 5% !important;
  }
}

/* KMS start */
/* STN start */
.stn_form1 {
  height: 750px;
  border-bottom: 1px solid #D4D7E0;
  border-top: 1px solid #D4D7E0;
  border-left: 1px solid #D4D7E0;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.stn_Gainedyears {
  margin: 60px 10px 40px 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat-Medium';
  font-size: 26px;
  color: #23405e !important;
}

.stn_Legend {
  font-family: 'Montserrat-Regular';
}

.stn_legendli {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  color: #23405e !important;
}

.stn_text_wrapper {
  font-size: 1.3vw;
  width: 95%;
  margin: 5px 0;
  color: #23405e !important;
  font-family: Montserrat-Regular;
}

.stn_legengui {
  padding: 3% 0 0 0;
}

.refiCoverchart {
  height: 320px;
}

.rentvbuyheight {
  height: 320px;
}

.rvb_buyRentDiff {
  font-size: 20px;
}

/* STN ends */

/* netsheet start */
.netsheet_form1 {
  height: 750px;
  border-bottom: 1px solid #D4D7E0;
  border-top: 1px solid #D4D7E0;
  border-left: 1px solid #D4D7E0;
  border-top-left-radius: 7px;
  border-bottom-left-radius: 7px;
}

.ns_Gainedyears {
  margin: 60px 10px 40px 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  font-family: 'Montserrat-Medium';
  font-size: 26px;
  color: #23405e !important;
}

.ns_text_wrapper {
  font-size: 1.3vw;
  width: 95%;
  margin: 5px 0;
  color: #23405e !important;
  font-family: Montserrat-Regular;
}

.ns_legengui {
  padding: 3% 0 0 0;
}

.ns_legendli {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0px;
  color: #23405e !important;
}

/* netsheet ends */
/* eq start */

.rc-slider-mark-text {
  font-size: 15px;
}

.equityLegend .legendli .text-wrapper {
  font-size: 1.2vw;
  font-family: 'Montserrat-Regular';
}

#equityPiechart1 {
  height: 320px;
  padding: 0 0 0 15%;
}

/* eq ends */
@media screen and (max-width: 767px) {
  /* STN start */

  .stn_text_wrapper {
    font-size: 3.2vw;
    width: 100% !important;

  }

  .stn_form1 {
    height: fit-content;
  }

  .stn_legengui {
    padding: 3% 5% 0 5%;
  }

  .stn_Gainedyears {
    margin: 20px 10px 0 10px;
    font-size: 23px;
    ;
  }

  #stnChartht {
    height: 230px !important;
  }

  /* STN ends */
  /* NS start */
  .ns_text_wrapper {
    font-size: 2.8vw !important;
    width: 100% !important;
  }

  .netsheet_form1 {
    height: fit-content;
  }

  .ns_Gainedyears {
    margin: 20px 10px 30px 10px;
    font-size: 23px;
  }

  .ns_Legend {
    font-family: 'Montserrat-Regular';
  }

  .ns_legengui {
    padding: 3% 10% 0 10%;
  }

  #nsChartht {
    height: 250px !important;
  }

  /* NS ends */
  .equityPiechart {
    height: 100%;
  }

  .equityLegend {
    position: relative;
    /* top: 25%; */
    padding: 0 5% !important;
  }

  .equityLegend .legendli .text-wrapper .lbcalc {
    width: 50% !important;
  }

  .equityLegend .legendli .text-wrapper {
    font-size: 3.0vw !important;
  }

  .equityamt {
    font-size: 20px;
  }

  .equityLegendCover {
    display: flex;
    align-items: center;
  }
}

/* STN KMS ends */

@media screen and (max-width: 575px) {
  .eq_xs_left {
    width: 45%;
  }

  .eq_xs_right {
    width: 55%;
  }

  .equityLegend {
    padding: 0 5% !important;
  }

  .equityLegend .legendli .text-wrapper .lbcalc {
    width: 50% !important;
  }

  .equityLegend .legendli .text-wrapper {
    font-size: 3.0vw !important;
  }

  #equityPiechart1 {
    height: 250px !important;
  }
}

/* KMS ends */






@media screen and (max-width: 768px) and (min-width: 550px) {
  .qualifytop {
    font-size: 17px;
  }

  .qualifybottom {
    font-size: 15px;
  }

  .qualifypiecontainercircle {
    width: 150px;
    height: 150px;
  }
}

@media screen and (max-width: 1237px) and (min-width: 768px) {
  .qualifytop {
    font-size: 1.4vw;
  }

  .qualifybottom {
    font-size: 1.4vw;
  }

  .mggraphcontainer .mgGainedyears {
    font-size: 14px;
  }
}

@media screen and (max-width: 549px) and (min-width: 400px) {
  .qualifytop {
    font-size: 16px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .qualifybottom {
    font-size: 12px;
  }

  .qualifypiecontainercircle {
    width: 120px;
    height: 120px;
  }
}

@media screen and (max-width: 399px) and (min-width: 200px) {
  .qualifybottom {
    font-size: 10px;
  }

  .qualifytop {
    font-size: 14px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .lb_fontthirty {
    font-size: 6vw !important;
  }

  .qualifypiecontainercircle {
    width: 90px;
    height: 90px;
  }

  .refiLegendChange ul {
    width: 85% !important;
    padding-left: 0px !important;
  }
}

@media screen and (min-width:768px) {

  /* .moreinfo-container .greetbtn{
    padding-bottom: 20px !important;
  } */
  .buycostinfo {
    width: 90% !important;
  }
}

.CalHFA_style {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.ScLink_1 {
  text-decoration: underline;
  color: #303030;
  /*color: #00B2FF;
   font-size: 11px;
  //cursor: pointer; */
}

.Content_css {
  font-family: 'Montserrat-Regular';
  color: #303030 !important;
  font-weight: bold;
}

.width100 {
  width: 100%;
}

.width50 {
  width: 50%;
}

.width70 {
  width: 60%;
}

.width30 {
  width: 40%;
}

@media screen and (min-width:900px) {
  .mggraphcontainer .mgGainedyears {
    margin: 15px 10px 0px 10px !important;
  }
}

/* ==  EQR ==*/
.margin_apply_arr3 {
  padding: 16px 10px 10px 10px;
}

.box_arr_1 {
  width: 95%;
  margin: auto;
  border-radius: 19px;
  margin-bottom: 10px;
  padding: 5px;
  display: flex;
  padding: 1% 8%;
  height: 48px;
  ;
  align-items: center;
}

.web_aar_padding {
  padding: 2% 8% !important;
}

.box_arr_2 {
  margin-bottom: 20px;
  padding: 6% 8%;
}

.slide_text1 {
  font-size: 15px;
  font-family: "Inter_Regular";
  line-height: 18px;
  letter-spacing: -0.07999999821186066px;
  color: #5B5B5B;
}

.arr_box {
  width: 80%;
}

.web_content5_year {
  font-size: 13px !important;
  font-family: 'Montserrat-Medium';
  color: #23405e;
}

.sub_text {
  font-family: "Inter_Medium";
  font-size: 18px;
  line-height: 20px;
  letter-spacing: -0.07999999821186066px;
  text-wrap: nowrap;
  color: #414141;
  text-align: left;
}

.web_content5_value {
  font-size: 17px !important;
  font-family: 'Montserrat-Medium';
  color: #23405e;
}

.arr_box1 {
  width: 20%;
  margin-left: 10%
}

.slide_text {
  font-family: "Inter_SB";
  font-size: 20px;
  line-height: 20px;
  letter-spacing: -0.07999999821186066px;
  color: #414141;
  text-align: left;
}

.web_content5_value1 {
  font-size: 18px !important;
  font-family: 'Montserrat-Medium';
  color: #23405e;
}

.hr_line {
  width: 85%;
  margin: auto;
  border: 1px solid #41414140;
  margin-bottom: 10px;
  margin-top: 20px;
  background: linear-gradient(0deg, rgba(65, 65, 65, 0.25), rgba(65, 65, 65, 0.25)),
    linear-gradient(0deg, #E1E1E1, #E1E1E1);
  opacity: 1 !important;
  height: 0px !important;
}

.box-3 {
  background: rgba(188, 202, 237, 0.5) !important;
  border: 1px solid rgba(171, 192, 240, 1) !important;
}

.bottom_margin_eqr {
  margin-bottom: 0 !important;
}

.eqr_down {
  background: #F4F4F4;
  width: 75%;
  margin: auto;
  /* border-radius: 0px 0px 16px 16px; */
  border-radius: 16px;
  padding: 8px 0px 16px 0px;
}

.result_lable_eqr {
  display: flex;
  justify-content: center;
}

.result_val_eqr {
  width: 50%;
  padding-bottom: 8px;
  font-size: 17px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.07999999821186066px;
}

.eqr_t1 {
  text-align: start;
  padding-left: 7%;
  font-family: 'Montserrat-Medium';
  color: #23405e;
}

.eqr_t2 {
  text-align: end;
  padding-right: 7%;
  font-family: 'Montserrat-Medium';
  color: #23405e;
}

.eqr_hrline {
  width: 91%;
  margin: auto;
  border: 1px solid #B9B9B9;
  margin-bottom: 8px;
  margin-top: 0px;
  background: linear-gradient(0deg, rgba(65, 65, 65, 0.25), rgba(65, 65, 65, 0.25)),
    linear-gradient(0deg, #E1E1E1, #E1E1E1);
  opacity: 1 !important;
  margin-left: 4%;
  height: 0px !important;
}

.current_eqt_div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 5%;
  font-family: 'Montserrat-Medium';
  color: #23405e;
  background: #F4F4F4;
  padding: 4%;
  width: fit-content;
  border-radius: 24px;
  margin: auto;
  border: 0.5px solid #e5e5e5;
}

.current_eqt_title {
  font-size: 24px;
  font-family: 'Montserrat-Medium';
  color: #23405e;
}

.current_eqt_amount {
  font-size: 26px;
}

.eqr_lable_title {
  font-size: 3vw;
}

.eqr_first_content {
  color: #b3abab;
  font-size: 11px;
  font-family: 'Montserrat-Regular';
}

.eqr_formpadding {
  padding-left: 20px;
  padding-right: 20px;
  height: auto;
  overflow: hidden;
  overflow-y: auto;
}

/* --------------LeadGen EQR ----------------- */
.eqr_heading {
  color: #000;
  font-family: "Roboto-SemiBold";
  font-size: 45px;
  line-height: normal;
}

.eqr_header_container {
  padding: 3% 0% 2% 0%;
  background: #FAFAFA;
}

.bg_body_colour {
  background: #FAFAFA;
}

.step_text {
  color: #3D3D3D;
  text-align: center;
  font-family: "Heebo-Regular";
  font-size: 17px;
  font-style: normal;
  line-height: normal;
}

.form_container {
  display: inline-flex;
  padding: 40px;
  flex-direction: column;
  gap: 30px;
  border-radius: 24px;
  background: #FFF;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
}

.home_container {
  display: inline-flex;
  padding: 40px;
  flex-direction: column;
  gap: 30px;
  border-radius: 24px;
  background: #FFF;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
}

.form_container_width {
  width: 79%;
}

.main_content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  align-self: stretch;
}

.original_text {
  color: #000;
  text-align: center;
  font-family: "Roboto-Medium";
  font-size: 29px;
  line-height: normal;
}

.details_text {
  color: #3D3D3D;
  text-align: center;
  font-family: "Heebo-Regular";
  font-size: 17px;
  line-height: 30px;
}

.field_box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
}

.form_label {
  color: #000;
  font-family: "Roboto-Medium";
  font-size: 21px;
  line-height: normal;
}

.input_eqr {
  /* border-radius: 2px !important; */
  border: 2px solid #CFCFCF !important;
  border-radius: 0px 8px 8px 0px !important;
  font-family: "Heebo-Regular" !important;
  font-size: 17px !important;
}

.input_eqr_loan {
  border: 2px solid #CFCFCF !important;
  border-radius: 0 !important;
  font-family: "Heebo-Regular" !important;
  font-size: 17px !important;
}

.next_btn_cc {
  background: #278AE5 !important;
  display: flex;
  width: 100%;
  padding: 7px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  cursor: pointer;
}

.next_label_cc {
  color: #FFF !important;
}

.next_btn {
  display: flex;
  width: 100%;
  padding: 7px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: #EDEDED;
  /* background: #278AE5; */
  cursor: pointer;
}

.next_label {
  /* color: #FFF; */
  color: #CFCFCF;
  font-family: "Heebo-Regular";
  font-size: 21px;
  font-style: normal;
  line-height: normal;
}

.gray_icon_box {
  border-radius: 8px 0px 0px 8px !important;
  border: 2px solid #CFCFCF !important;
  display: inline-flex;
  padding: 12px 9px;
  align-items: flex-start;
}

.blue_icon_box {
  display: inline-flex;
  padding: 12px 9px;
  align-items: flex-start;
  border-radius: 8px 0px 0px 8px !important;
  border: 2px solid #278AE5 !important;
}

.input-group_width {
  /* width: 332px !important; */
  margin-top: 0px !important;
  height: 48px;
}

.border_left {
  border-left: none !important;
  border-radius: 0px 8px 8px 0px !important;
}

.profile_container {
  display: flex;
  justify-content: end;
  padding: 3% 5% 2.8% 0;
}

.profile_img {
  width: 85px;
  height: 85px;
  flex-shrink: 0;
  border-radius: 85px;
}

.profile_name {
  color: #000;
  text-align: right;
  font-family: "Roboto-Medium";
  font-size: 21px;
  line-height: normal;
}

.profile_text {
  color: #000;
  text-align: right;
  font-family: "Heebo-Regular";
  font-size: 21px;
  line-height: normal;
}

.Profile_name_div {
  display: flex;
  flex-direction: column;
  padding: 1% 3%;
  justify-content: center;
}

.input_loan_balance {
  border-radius: 5px;
  width: 80%;
}

.online_green_img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  position: absolute;
  top: 0;
}

.Profile_img_div {
  position: relative
}

.address_input_div {
  display: flex;
  /* width: 332px; */
  padding: 10px;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  border: 2px solid #CFCFCF;
  background: #fff !important;
}

#homeaddress_field::placeholder,
#homeaddress_email::placeholder,
#homeaddress_field_eqr::placeholder,
#homeaddress_email_eqr::placeholder,
.input_eqr::placeholder,
.input_eqr_loan::placeholder {
  color: #CFCFCF;
  font-family: "Roboto-Regular";
  font-size: 17px;
  line-height: normal;
}

.skip_link {
  color: #278AE5 !important;
  cursor: pointer;
}

.find_loan {
  font-family: "Roboto-Medium";
  color: #000;
  text-align: center;
  font-size: 20px;
  line-height: normal;
}

.find_loan_text {
  color: #3D3D3D;
  text-align: center;
  font-family: "Roboto-Regular";
  font-size: 16px;
  line-height: 24px;
}

.contact_btn {
  display: flex;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 12px;
  background: #278AE5;
}

.contact_btn_text {
  color: #FFF;
  text-align: center;
  font-family: 'Jost-Medium' !important;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 27px;
}

.contact_profile_text {
  color: #000;
  text-align: right;
  font-family: "Roboto-Regular";
  font-size: 16px;
  line-height: normal;
  text-wrap: nowrap;
}

.center_align {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ----------------------- EQR Modal screen styels --------------------------*/
.eqr_modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}

.eqr_modal-dialog {
  /* margin: 10% auto; */
  width: 412px;
  /* background-color: #fff; */
  /* border-radius: 24px; */
  /* background: #FFF;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12); */
}

.eqr_modal_conatct_dialog {
  margin: 10% auto;
  text-align: center;
  width: 412px;
  height: max-content;
}

.eqr_modal_container {
  /* display: inline-flex; */
  flex-direction: column;
  border: none !important;
  padding: 0px 15px;
}

.eqr_modal_loan_container {
  display: inline-flex;
  /* padding: 40px; */
  padding: 10px 40px;
  flex-direction: column;
  /* gap: 30px; */
  gap: 12px;
  border-radius: 24px;
}

.cc_alert_Modal_Close {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
}

.border_none {
  border: none !important;
  border-radius: 24px !important;
  border-radius: 24px;
  background: #FFF !important;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
}

.eqr_modal_contact_me {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
}

/* ----------------------- EQR Result screen styels --------------------------*/
.result_1 {
  display: flex;
  flex-direction: column;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}

.result_text_1 {
  color: #3D3D3D;
  text-align: center;
  font-family: Roboto-Regular;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.result_text_2 {
  display: flex;
  color: #3CC98E;
  text-shadow: 0px 4px 24px rgba(0, 216, 125, 0.35);
  font-family: Roboto-SemiBold;
  font-size: 96px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}

.result_2 {
  /* width: 100%; */
  width: 322px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  align-self: stretch;
}

.flex_1 {
  width: 100%;
  display: flex;
}

.result_sub {
  width: 50%;
  color: #3D3D3D;
  font-family: Roboto-Regular;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.result_sub2 {
  width: 50%;
  color: #000;
  font-family: "Roboto-Medium";
  font-size: 21px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-align: end;
}

.result_sub2_values {
  font-size: 17px !important;
}

.result_slider .input {
  width: 100%;
  margin: 20px;
}

.result_color {
  color: #278AE5 !important;
}

.result_3 {
  display: flex;
  /* width: 297px; */
  width: 322px;
  padding: 24px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  border-radius: 12px;
  border: 2px solid #CFCFCF;
}

.Dollar_sym {
  font-size: 64px !important;
}

.result_box_1 {
  color: #000;
  font-family: "Roboto-Medium";
  font-size: 21px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-align: center;
}

.result_4 {
  color: #3D3D3D;
  text-align: center;
  font-family: "Roboto-Regular";
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.form_container2 {
  display: inline-flex;
  padding: 40px;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  border-radius: 24px;
  background: #FFF;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
  margin-bottom: 5%;
  /* margin-left: auto;
  margin-right: auto; */
  /* width: 72%; */
}

.resultcontact_txt {
  color: #000;
  text-align: center;
  font-family: "Roboto-Medium";
  font-size: 29px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 3%;

}

.resultcontact_txt1 {
  color: #3D3D3D;
  text-align: center;
  font-family: "Roboto-Regular";
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  margin-bottom: 5%;
}

.result_maincontainer {
  display: flex;
  flex-direction: column;
}

.result_content {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.result_txt3 {
  color: #278AE5;
  text-align: center;
  font-family: "Roboto-Regular";
  font-size: 37px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.result_txt4 {
  color: #256198;
  text-align: center;
  font-family: "Roboto-Regular";
  font-size: 21px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 36px */
}

.rc {
  width: 65%;
  margin: auto;
}

.collapse_div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.collapse_text {
  width: 100%;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
  background: #FFF;
  font-family: "Roboto-Regular";
  font-size: 17px;
}

.collapse_content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-radius: 12px;
  background: #FFF;
  padding: 18px 40px;
  cursor: pointer;
  flex-direction: column;
}

.collapse_title {
  color: #000;
  font-family: "Roboto-Medium";
  font-size: 29px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.other_pop_text {
  text-align: left !important;
  padding: 2%;
}

.result_payment_container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  align-self: stretch;
}

.extra_payment_div {
  display: flex;
  padding: 40px;
  flex-direction: column;
  align-items: flex-start;
  gap: 35px;
  /* border-radius: 24px;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12); */
}

.result_bottom_imgs {
  width: 80px;
  height: 80px;
}

.text_start {
  text-align: left !important;
}

.eqr_dollerdownPercent {
  border-left: none !important;
  background-color: #EDEDED;

}

.eqr_percdownPercent {
  border-right: none !important;
  background-color: #EDEDED;

}

.border_right_R {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.border_left_R {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.vl {
  border-left: 1px solid #D9D9D9;
  height: 13px;
}

.range-slider_eqr {
  padding-top: 10px;
  /* width: 80%; */
  width: 95%;
}

.range_lable_container {
  display: flex;
  /* justify-content: space-around; */
  /* margin-top: 10px; */
  margin: 10px 0 15px 0;
  justify-content: space-between;
}

.result_txt5 {
  color: #256198;
  text-align: center;
  font-family: "Roboto-Regular";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  /* 36px */
}

.result_c1 {
  display: flex;
  flex-direction: column;
  justify-content: start;
  /* margin: 0 4%; */
  margin: 0 8% 0 2.5%;
}

.result_left_container {
  display: flex;
  flex-direction: column;
  margin: 0 2.5% 0 4%;
  pointer-events: none;
}

.result_form2 {
  margin: 5% 0;
  display: flex;
  justify-content: end;
}

.result_form1 {
  /* margin: auto; */
  display: flex;
  justify-content: end;
}

.loan_modal_label {
  color: #3D3D3D;
  font-family: "Roboto-Medium";
  font-size: 17px;
  line-height: 30px;
}

.profile_contact_div {
  width: 100%;
  margin-top: 5%;
}

.contact_me_btn {
  padding: 10px 12px !important;
}

.margin_bot {
  margin-bottom: 5%;
}

.margin_top {
  margin-top: 5%;
}

.loan_field_box {
  gap: 12px !important;
}

.first_modal_animat {
  animation: conditionalOpen 0.5s normal forwards ease-in-out;
  transform-origin: 50% 0%;
}

.animationfirst {
  -webkit-animation: fadeinout 0.2s linear forwards;
  animation: fadeinout 0.2s linear forwards;
}

/** slider changes**/

.slider_count {
  margin-top: 10px;
}

.graph_slider {
  margin-top: 20px;
  display: flex;
  width: 100%;
  /* justify-content: space-between; */
  font-size: 12px;
  font-family: Montserrat-Medium !important;
}

#customTooltip {
  position: absolute;
  display: none;
  padding: 10px;
  background-color: white;
  border: 1px solid black;
}

.slider_tooltip {
  position: absolute;
  left: 346;
  top: 103px;
}

/** Tooltip changes**/
.avg_cus {
  border: 2px solid #007aff;
}

.avg_cus1 {
  background-color: #007aff;
}

.high_cus {
  border: 2px solid #ffb700;
}

.high_cus1 {
  background-color: #ffb700;
}

.low_cus {
  border: 2px solid #2bad00;
}

.low_cus1 {
  background-color: #2bad00;
}

.custom-tooltip1 {
  color: #fff;
  font-size: 15px;
  width: 102%;
  border-radius: 10px 10px 0px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40%;
}

.custom-tooltip2 {
  font-size: 20px;
  background-color: #fff;
  width: 100%;
  border-radius: 0px 0px 10px 10px;
  height: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-tooltip {
  width: 75px;
  height: 75px;
  background-color: #fff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.graph_vertivcal_line {
  border-left: 2px solid rgb(54, 150, 42);
  position: absolute;
  top: 72px;
}

.historicalmenu-title {
  font-size: 22px;
  margin-bottom: 15px;
  text-align: center;
  font-family: Montserrat-Medium;
}

.chart_container {
  display: flex;
}

.graph_div {
  width: 85%;
}

.g_btn {
  width: 15%;
}

.legendhistorical {
  margin-bottom: 93px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: 22px;
}

.high {
  padding: 3px;
  border-radius: 25px;
  border: 1px solid #ffb700;
  color:
    #ffb700;
  cursor: pointer;
  width: 100px;
  text-align: center
}

.avg {
  padding: 3px;
  border-radius: 25px;
  border: 1px solid #007aff;
  color: #007aff;
  cursor: pointer;
  margin: 20px 0px;
  width: 100px;
  text-align: center
}

.low {
  padding: 3px;
  border-radius: 25px;
  border: 1px solid #2bad00;
  color: #2bad00;
  cursor: pointer;
  width: 100px;
  text-align: center
}

.highactive {
  padding: 3px;
  border-radius: 25px;
  border: 2px solid #ffb700;
  color: #fff;
  background-color:
    #ffb700;
  cursor: pointer;
  width: 100px;
  text-align: center
}

.avgactive {
  padding: 3px;
  border-radius: 25px;
  border: 2px solid #007aff;
  color: #fff;
  background-color: #007aff;
  cursor: pointer;
  margin: 20px 0px;
  width: 100px;
  text-align: center
}

.lowactive {
  padding: 3px;
  border-radius: 25px;
  border: 2px solid #2bad00;
  color: #fff;
  background-color: #2bad00;
  cursor: pointer;
  width: 100px;
  text-align: center
}

/* Style the slider thumb for WebKit */

/* Range Handle*/
.chart_mySlider::-webkit-slider-thumb {
  appearance: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #508AFF;
  cursor: pointer;
  /* border: 1px solid #BBBBBB; */
}

.chart_mySlider::-moz-range-thumb {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: #508AFF;
  cursor: pointer;
  transition: background .15s ease-in-out;
}

.chart_mySlider {
  -webkit-appearance: none;
  width: 98%;
  margin-left: 5px;
  height: 4px;
  border-radius: 5px;
  background: #d7dcdf;
  outline: none;

}

.historicaluse {
  position: absolute;
  right: 10%;
  top: 14px;
  color: #fefeff;
  background-color: #007aff;
  border-radius: 20px;
  padding: 4px 18px;
  cursor: pointer;
}

#rotatedFullWidthModal {

  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  background-color: rgba(0, 0, 0, 0.5);
}

#graph_modal-content {
  background-color: #fff;
  max-width: none;
  margin: auto;
  transform-origin: top left;
  transform: rotate(90deg) translateY(-100%);
  width: 100vh;
  height: 100vw;
  justify-content: center;
}

canvas {
  height: 250px !important;
  margin-right: 10px;
}

.loan2_btn {
  margin-top: 55%;
}

.ipad_graph_close {
  top: 10px !important;
  right: 0px !important;
}

.ipad_historicaluse {
  top: auto !important;
  right: 6% !important;
}

.slidercount {
  width: 24.9px;
}

.slider-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 12px;
  margin: 5px 0px 5px 22px;
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 15px;
  color: #414141;
  text-align: center;
  font-family: "Inter_Regular";
  font-size: 15px;
  line-height: normal;
}

.slider-label {
  flex: 1;
  text-align: center;
}

.address_input_width {
  width: 332px !important;
  margin: auto !important;
}

.address_form_container {
  box-shadow: none !important;
  padding: 0 0 20px 0 !important;
}

.address_modal_conatct {
  margin: 10% auto;
  text-align: center;
  width: 100%;
  height: max-content;
}

.add_text_font_size {
  font-size: 29px !important;
}

.arrow_icon_size {
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.qn_icon_size {
  width: 34px;
  height: 34px;
  cursor: pointer;
}

.bg_body_colour {
  background: #FAFAFA;
}

.down_arrow {
  display: flex;
  justify-content: end;
}

.rotate {
  transition: transform 0.5s ease;
  /* Add a smooth transition for the rotation */
}

.rotate-180 {
  transform: rotate(180deg);
}

/********graph changes **********/
.webmodal_close {
  right: 2% !important;
  top: 3% !important;
}

.web_graph_modal {
  padding: 30px !important;
}

.Web_historicaluse {
  top: auto !important;
  right: 6% !important;
}

.web_graph_vertivcal_line {
  top: 88px !important;
}

.web_graph_close {
  top: 10px !important;
  right: 0px !important;
}

.web_legendhistorical {
  margin-left: 5% !important;
}

.video_modal_radius {
  border-radius: 7px;
  width: 100%;
  padding: 30px;
  border: none;
}

.VideoClose {
  z-index: 9999999 !important;
  position: absolute;
  top: -35px;
  max-width: 495px;
  text-align: right;
  cursor: pointer;
  right: -35px;
}

.result_main_div {
  display: flex;
  justify-content: space-around;
}

.animationfirst {
  -webkit-animation: fadeinout 0.2s linear forwards;
  animation: fadeinout 0.2s linear forwards;
}

.modal-content {
  padding: 13px;
}

.modalclose {
  /* background-color: #fff; */
  background: none;
  border: none;
  width: auto !important;
  text-align: initial !important;
  color: #007AFF;
  font-size: 15px;
}

.bottom_modal {
  position: absolute;
  bottom: 3%;
  right: 2%;
  margin: 0 !important;
}

.bottom_modal_container {
  backdrop-filter: blur(0px) !important;
}

#RS_Slider_eqr::-webkit-slider-thumb {
  background: #278AE5;
}

#RS_Slider_eqr::-moz-range-thumb {
  background: #278AE5;
}

#RS_Slider_eqr::-ms-thumb,
#RS_Slider_eqr::thumb {
  background: #278AE5;
}

.modal_animat_bottom {
  transform: translateY(100%);
  transition: opacity 0.9s ease, transform 0.9s ease;
  animation: slideIn 0.9s forwards;
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cursor {
  cursor: pointer;
}

@media only screen and (min-width: 1920px) {

  .form_container,
  .home_container {
    width: 80%;
  }

  .form_container_width {
    width: 60%;
  }

  .result_container_width {
    width: 80%;
  }

  .align_center {
    display: flex;
    justify-content: center;
  }

  .eqr_header_container {
    padding: 2% 0% 2% 0%;
  }

  .profile_container {
    padding: 1.6% 5% 2% 0;
  }

  .eqr_modal-dialog {
    width: 100%;
  }

  .eqr_modal_loan_container {
    padding: 27px 30px;
    gap: 20px;
  }

  .field_box {
    gap: 25px;
  }

  .form_container,
  .home_container {
    gap: 40px;
  }

  .input_eqr,
  .details_text,
  .step_text,
  .loan_modal_label,
  .result_sub,
  .result_sub2_values,
  .resultcontact_txt1 {
    font-size: 20px;
  }

  .profile_text,
  .profile_name,
  .next_label,
  .form_label,
  .result_sub2,
  .result_txt4 {
    font-size: 24px;
  }

  .original_text,
  .resultcontact_txt,
  .collapse_title {
    font-size: 32px;
  }

  .eqr_heading {
    font-size: 48px;
  }

  .result_text_1 {
    font-size: 18px;
  }

  .result_txt3 {
    font-size: 40px;
  }
}

@media only screen and (min-width: 767px) {
  .profile_name {
    font-size: 20px;
  }
}

@media only screen and (min-width: 768px) and (max-width:1024px) {

  .form_container,
  .home_container {
    width: 95%;
  }

  .result_2,
  .result_3 {
    width: 100%;
  }

  .address_input_width {
    width: 100% !important;
  }

  .rc {
    width: 90%;
  }
}

@media only screen and (min-width: 1920px) {

  .form_container,
  .home_container {
    width: 80%;
  }

  .form_container_width {
    width: 60%;
  }

  .result_container_width {
    width: 80%;
  }

  .align_center {
    display: flex;
    justify-content: center;
  }

  .eqr_header_container {
    padding: 2% 0% 2% 0%;
  }

  .profile_container {
    padding: 1.6% 5% 2% 0;
  }

  .eqr_modal-dialog {
    width: 100%;
  }

  .eqr_modal_loan_container {
    padding: 27px 30px;
    gap: 20px;
  }
}

@media (min-width: 350px) {
  .video_iframe {
    position: initial;
    top: 16px;
    left: 0px;
    margin: 100px auto;
    max-width: 950px;
    /* height: 371px; */
    height: auto;
    border: none;
    background: rgb(255, 255, 255);
    /* overflow: auto; */
    border-radius: 6px;
    outline: none;
    padding: 6px;
    box-shadow: rgb(95, 95, 95) 0px 0px 12px 3px;
    cursor: pointer;
  }
}

@media screen and (max-width:430px) {
  .modal_rotate {
    transform: rotate(90deg);
    width: 100vh;
  }
}

@media only screen and (min-width: 320px) and (max-width:480px) {
  .VideoClose {
    top: 22px;
    right: 3%;
  }

  .avg,
  .low,
  .high {
    width: 80px !important;
  }

  .step_text,
  .details_text,
  .result_sub,
  .result_text_1,
  .resultcontact_txt1,
  .collapse_text {
    font-size: 16px;
  }

  .original_text,
  .form_label,
  .next_label,
  .result_sub2,
  .result_box_1,
  .resultcontact_txt,
  .result_txt4,
  .profile_name {
    font-size: 20px;
  }

  .input-group_width {
    /* width: 278px; */
    height: 40px;
  }

  .input_icon {
    width: 20px;
  }

  #homeaddress_field::placeholder,
  #homeaddress_email::placeholder,
  #homeaddress_field_eqr::placeholder,
  #homeaddress_email_eqr::placeholder,
  .input_eqr::placeholder,
  .input_eqr_loan::placeholder {
    font-size: 16px;
  }

  .input_eqr {
    font-size: 16px !important;
  }

  .skip_link {
    font-size: 20px !important;
  }

  .result_txt3,
  .collapse_title {
    font-size: 24px;
  }

  .form_container {
    /* width: 100%; */
    width: 90%;
    margin: auto;
    display: flex;
    padding: 25px;
  }

  .home_container {
    box-shadow: none;
    display: inline-flex;
    padding: 0;
    flex-direction: column;
    gap: 30px;
    border-radius: 0px;
    background: #FFF;
    box-shadow: none;
  }

  .rc {
    width: 85%;
  }

  .home_content {
    width: 90%;
    margin: auto;
  }

  .eqr_heading {
    font-size: 32px;
  }

  .address_input_width {
    width: 100% !important;
  }

  .result_2 {
    width: 100%;
  }

  .third_container {
    width: 98% !important;
  }

  .collapse_content {
    padding: 18px 25px;
  }

  .form_container2 {
    padding: 40px 25px;
    width: 95%;
  }

  .result_c1 {
    justify-content: center;
    align-items: center;
    margin: auto;
  }

  .form_container_mobile {
    width: 100% !important;
  }

  .arrow_icon_size {
    width: 24px;
    height: 24px;
  }

  .qn_icon_size {
    width: 24px;
    height: 24px;
  }

  .eqr_header_container {
    padding: 6% 1% 5% 1%;
  }

  .profile_container {
    padding: 3% 7% 2.8% 0;
  }

  .eqr_modal_conatct_dialog {
    margin: 37% auto;
    width: 100%;
  }

  .eqr_modal_loan_container {
    padding: 27px 15px;
    gap: 15px;
  }

  .modal_animat_top {
    transform: translateY(-100%);
    transition: opacity 0.9s ease, transform 0.9s ease;
    animation: slideIn 0.7s forwards;
    border-radius: 0 0 24px 24px !important;
  }

  @keyframes slideIn {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@media only screen and (min-width: 320px) and (max-width:767px) {

  .homeLink_modal2_al_set {
    margin: 0px;
    overflow-y: scroll;
    height: 55vh;
    /* position: fixed;  */
    top: 25px;
  }

  .homeLink_modal2_al_unset {
    margin: 0px;
    /* height: 80vh; */
    /* position: fixed; */
    top: unset;
    bottom: 0;
    border-radius: 10px 10px 0px 0px;
  }

  .homeLink_modal2 {
    /* position: fixed;
      bottom: 0; */
    margin: 0px;
    /* height: 90vh; */
    border-radius: 10px 10px 0px 0px;
    /* padding-bottom: 0px !important; */
    /* overflow-y: scroll; */
  }
}

.subpopup_title{
  text-align: center;
  font-family: 'Montserrat-Medium';
  color: #0e2f51;
  font-size: 24px;
}