.elementor-305 .elementor-element.elementor-element-6795a29{--display:flex;--min-height:15vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--background-transition:0.3s;}.elementor-305 .elementor-element.elementor-element-6795a29:not(.elementor-motion-effects-element-type-background), .elementor-305 .elementor-element.elementor-element-6795a29 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://enstoneinvestments.com/wp-content/uploads/2024/12/banner.png");background-size:cover;}.elementor-305 .elementor-element.elementor-element-6795a29, .elementor-305 .elementor-element.elementor-element-6795a29::before{--border-transition:0.3s;}.elementor-305 .elementor-element.elementor-element-5b151b4{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--background-transition:0.3s;--margin-top:0px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;}@media(max-width:767px){.elementor-305 .elementor-element.elementor-element-1727ea5 .elementor-heading-title{font-size:23px;}}/* Start custom CSS for html, class: .elementor-element-53e60e6 */.loan-calculator-wrapper * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

.loan-calculator-wrapper .tabular_num {
  font-variant-numeric: tabular-nums;
}

/* Main Body Container */
.loan-calculator-wrapper .main_body_container {
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Title Heading */
.loan-calculator-wrapper .main_body_container .title_heading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  row-gap: 10px;
  margin-top: 40px;
}

.loan-calculator-wrapper .main_body_container .title_heading h1 {
  font-size: 42px;
  font-weight: 600;
  color: #0c2139;
}

.loan-calculator-wrapper .main_body_container .title_heading p {
  font-size: 14px;
  font-weight: 600;
  color: #6B6B6B;
}

.loan-calculator-wrapper .main_body_container .title_heading h4 {
  position: relative;
  height: 100%;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400;
  font-size: 14px;
  color: #555c63;
  text-align: center;
}

.loan-calculator-wrapper .main_body_container .title_heading h4::after {
  position: absolute;
  content: '';
  width: 45px;
  height: 3px;
  top: 40%;
  margin-left: 10px;
  background-color: #338FD5;
  border-radius: 5px;
}

/* Rest of the styles - Continue with the .loan-calculator-wrapper prefix */

/* ... (Previous styles) */

/* Input Container */
.loan-calculator-wrapper .main_body_container .input_container {
  position: relative;
  display: inline-block;
  width: 100%;
}

.loan-calculator-wrapper .main_body_container .input_container .input {
  padding-left: 30px !important;
  width: 100% !important;
}

.loan-calculator-wrapper .main_body_container .input_container::before {
  content: '$';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #333;
  font-size: 20px;
  font-weight: 600;
}


.loan-calculator-wrapper .main_body_container .input_percentage {
  position: relative;
  display: inline-block;
  width: 100%;
}

.loan-calculator-wrapper .main_body_container .input_percentage .input {
  padding-left: 30px !important;
  width: 100% !important;
}

.loan-calculator-wrapper .main_body_container .input_percentage::before {
  content: '%';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #333;
  font-size: 20px;
  font-weight: 700;
}



/* Input Container Percentage */
.loan-calculator-wrapper .main_body_container .input_container_percentage {
  position: relative;
  display: inline-block;
  width: 100%;
}

.loan-calculator-wrapper .main_body_container .input_container_percentage .input {
  padding-right: 30px !important;
  width: 100% !important;
}

.loan-calculator-wrapper .main_body_container .input_container_percentage::before {
  content: '%';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

/* Input Styles */
.loan-calculator-wrapper .main_body_container .input {
  width: 100%;
  height: 45px;
  border: none;
  background-color: #EFF2F6;
  outline: none;
  padding: 10px;
  font-size: 19px;
  font-weight: 600;
  border-radius: 5px;
}

/* Range Input Styles */
.loan-calculator-wrapper .main_body_container input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
}



/* Range Input Styles */
.loan-calculator-wrapper .main_body_container input[type="range"]::-webkit-slider-runnable-track {
  background: #053a5f;
  height: 0.15rem;
  border-radius: 4px;
}

.loan-calculator-wrapper .main_body_container input[type="range"]::-moz-range-track {
  background: #053a5f;
  height: 0.1rem;
}

.loan-calculator-wrapper .main_body_container input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -10px;
  background-color: #7CB5EC;
  height: 1.5rem;
  width: 1.5rem;
  border-radius: 100%;
  border: 2px solid #484848;
}

.loan-calculator-wrapper .main_body_container input[type="number"] {
  -moz-appearance: textfield !important;
}

/* For Chrome */
.loan-calculator-wrapper .main_body_container input[type="number"]::-webkit-inner-spin-button,
.loan-calculator-wrapper .main_body_container input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Mortgage Calculation Wrapper */
.loan-calculator-wrapper .mortgage_calculation_wrapper {
  background-color: #fff;
  margin-top: 50px;
  border-radius: 4px;
  display: flex;
  box-shadow: rgba(136, 165, 191, 0.2) 6px 2px 16px 0px, rgba(136, 165, 191, 0.2) 6px 2px 16px 0px;
  padding-top: 20px;
  padding-bottom: 20px;
}


.loan-calculator-wrapper .mortgage_sidebar_left {
  max-width: 400px;
  min-width: 400px;
  border-right: 1px solid #CFCFD4;
  padding: 20px;
}

.loan-calculator-wrapper .mortgage_sidebar_left .range_wrapper {
  margin-top: 20px;
}

.loan-calculator-wrapper .mortgage_sidebar_left .homeprice_group {
  display: flex;
  align-items: center;
  column-gap: 15px;
}

.loan-calculator-wrapper .mortgage_sidebar_left .homeprice_group p {
  font-size: 15px;
  width: 50%;
  font-weight: 500;
}

.loan-calculator-wrapper .mortgage_sidebar_left .input_group {
  margin-top: 20px;
}

.loan-calculator-wrapper .mortgage_sidebar_left .input_group .downpayment_wrapper {
  display: flex;
  column-gap: 2px;
}

.loan-calculator-wrapper .mortgage_sidebar_left .input_group label {
  margin-bottom: 8px;
  display: block;
  color: #333333;
}

.loan-calculator-wrapper .mortgage_sidebar_left .advance_options {
  color: #3A54FF;
  text-transform: capitalize;
  margin-top: 15px;
  display: block;
  text-align: center;
  font-size: 15px;
  cursor: pointer;
  font-weight: 600;
}

.loan-calculator-wrapper .mortgage_sidebar_left .advance_options:hover {
  text-decoration: underline;
}

/* Mortgage Sidebar Right */
.loan-calculator-wrapper .mortgage_sidebar_right {
  padding: 20px;
}

.loan-calculator-wrapper .mortgage_sidebar_right .range_wrapper {
  margin-top: 30px;
}

.loan-calculator-wrapper .mortgage_sidebar_right .estimated_payment {
  display: flex;
  column-gap: 30px;
  align-items: center;
}

.loan-calculator-wrapper .mortgage_sidebar_right .estimated_payment h2 {
  font-size: 30px;
  color: #6B6B6B;
  font-weight: 800;
}

.loan-calculator-wrapper .mortgage_sidebar_right .tab_wrapper {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  justify-content: center;
}

.loan-calculator-wrapper .mortgage_sidebar_right .tab_wrapper .active {
  color: #333333;
  font-weight: 600;
}




.loan-calculator-wrapper .mortgage_sidebar_right .canvas {
  max-width: 350px;
  max-height: 350px;
}

.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 50px;
  margin-top: 30px;
  width: 100%;
}

.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper .canvas-container {
  position: relative;
}

.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper #infoDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  border-radius: 100%;
  z-index: 1;
  text-align: center;
  height: 220px;
  width: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper .monthly_payment_amt {
  font-size: 24px !important;
  font-weight: 600;
}


loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper .monthly_payment_text {
  font-size: 16px !important;
  font-weight: 400 !important;
}

.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper canvas {
  max-width: 350px;
  max-height: 350px;
}

.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper .legend_total_wrapper {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper .legend_total_wrapper .total_payment_wrapper {
  display: flex;
  justify-content: space-between;
}

.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper .legend_total_wrapper .total_payment_wrapper span {
  color: #333333;
}

.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper .legend_wrapper h3 {
  font-size: 14px;
  color: #333333;
}

.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper .legend_wrapper .legend_label_group {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #CFCFD4;
  margin-top: 20px;
  width: 400px;
  color: #333333;
  font-weight: 500;
}

.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper .legend_wrapper .legend_label_group .legend_input_wrapper {
  max-width: 120px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper .legend_wrapper .legend_label_group .legend_input_wrapper input {
  border: 1px solid #6B6B6B;
  height: 35px;
}

.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper .legend_wrapper .legend_label_group .legend_color_group {
  display: flex;
  align-items: center;
  column-gap: 8px;
  padding-bottom: 5px;
}

.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper .legend_wrapper .legend_label_group .legend_color_group .blue_div,
.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper .legend_wrapper .legend_label_group .legend_color_group .green_div,
.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper .legend_wrapper .legend_label_group .legend_color_group .red_div,
.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper .legend_wrapper .legend_label_group .legend_color_group .yellow_div,
.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper .legend_wrapper .legend_label_group .legend_color_group .lime_div
{
  width: 15px;
  height: 15px;
}

.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper .legend_wrapper .legend_label_group .legend_color_group .blue_div {
  background-color: #338fd4;
}

.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper .legend_wrapper .legend_label_group .legend_color_group .green_div {
  background-color: #7BD896;
}

.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper .legend_wrapper .legend_label_group .legend_color_group .red_div {
  background-color: #D97F9F;
}

.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper .legend_wrapper .legend_label_group .legend_color_group .yellow_div {
  background-color: #F6E7CE;
}


.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper .legend_wrapper .legend_label_group .legend_color_group .lime_div {
  background-color: #83BE4E;
}

.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper .legend_wrapper p {
  font-size: 12px;
}

.loan-calculator-wrapper .mortgage_sidebar_right .canvas_cart_legend_wrapper .legend_wrapper .legend_label {
  font-size: 13px;
  color: #333333;
}





/* ... (Previous styles) */

/* Media Query for Small Screens - Continued */
 @media only screen and (max-width: 1100px) {
  .loan-calculator-wrapper .main_body_container {
    width: 100%;
  }
  
  .loan-calculator-wrapper .title_heading > h1 {
    font-size: 22px !important;
    text-align: center !important;
    text-wrap: wrap !important;
    width: 80%;
  }
  
  .loan-calculator-wrapper .title_heading > p {
    font-size: 12px !important;
    text-align: center !important;
    text-wrap: wrap !important;
    width: 80%;
  }
  
  .loan-calculator-wrapper .homeprice_group {
    flex-direction: column-reverse !important;
  }
  
  .loan-calculator-wrapper .homeprice_group > p {
    margin-top: 8px !important;
    width: 100% !important;
    margin-bottom: 10px;
    color: #333333;
  }
  
  .loan-calculator-wrapper .downpayment_wrapper {
    flex-direction: column !important;
    gap: 10px;
  }
  
  .loan-calculator-wrapper .mortgage_calculation_wrapper {
    flex-direction: column !important;
    box-shadow: none;
  }
  
  .loan-calculator-wrapper .mortgage_sidebar_left {
    padding: 20px !important;
    max-width: 100% !important;
    border: none !important;
  }
  
  .loan-calculator-wrapper .canvas_cart_legend_wrapper {
    flex-direction: column !important;
  }
  
  .loan-calculator-wrapper .estimated_payment {
    flex-direction: column;
  }
  
  .loan-calculator-wrapper .range_wrapper {
    margin: 20px !important;
  }
  
  .loan-calculator-wrapper .tab_wrapper {
    justify-content: center !important;
  }
  
  .loan-calculator-wrapper .legend_wrapper,
  .loan-calculator-wrapper .legend_total_wrapper {
    margin-top: 20px !important;
  }
  
  .loan-calculator-wrapper .legend_label_group {
    width: 100% !important;
  }

}/* End custom CSS */