/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Aug 23 2023 | 07:22:10 */
.hf-CalculateYourEMI {
    background: #f1f1f1
}

.hf-calculater-wrap {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    justify-content: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-top: 4rem
}

.hf-calculater-wrap .hf-calculater-img-wrap {
    padding: 6rem 4.4rem 6rem;
    width: 32%
}

.hf-calculater-wrap .hf-calculater-emi-wrap {
    display: block;
    width: 100%;
    background: #595c73;
    border-radius: 18px;
    padding: 2.8rem
}

.pie-chart-wrap {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 2.5rem
}

#btlegend-container ul,
#legend-container ul,
#nrlegend-container ul,
#tulegend-container ul {
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    padding: 0;
    -ms-flex-pack: center;
    justify-content: center
}

#btlegend-container li,
#legend-container li,
#nrlegend-container li,
#tulegend-container li {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 2rem
}

#btlegend-container li p,
#btlegend-container li span,
#legend-container li p,
#legend-container li span,
#nrlegend-container li p,
#nrlegend-container li span,
#tulegend-container li p,
#tulegend-container li span {
    font-size: 14px;
    line-height: 17px;
    color: rgba(255, 255, 255, .8)
}

#btlegend-container li .labelAmt,
#legend-container li .labelAmt,
#nrlegend-container li .labelAmt,
#tulegend-container li .labelAmt {
    display: block;
    color: #fff
}

#btlegend-container li:not(:last-child),
#legend-container li:not(:last-child),
#nrlegend-container li:not(:last-child),
#tulegend-container li:not(:last-child) {
    margin-right: 15px
}

#btlegend-container li .loanAmtLabel,
#legend-container li .loanAmtLabel,
#nrlegend-container li .loanAmtLabel,
#tulegend-container li .loanAmtLabel {
    display: inline-block;
    height: 30px;
    margin-right: 10px;
    width: 7px;
    background: #00aeef
}

#btlegend-container li .interstAmtLabel,
#legend-container li .interstAmtLabel,
#nrlegend-container li .interstAmtLabel,
#tulegend-container li .interstAmtLabel {
    display: inline-block;
    height: 30px;
    margin-right: 10px;
    width: 7px;
    background: #fff
}

.calculeter-wrap {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center
}

.calculeter-wrap .cp-calculator {
    width: 56%
}

.calculeter-wrap .cp-calculator .range-wrap {
    margin-bottom: 45px;
    position: relative
}

.calculeter-wrap .cp-calculator .range-wrap .goal-wrap {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 18px
}

.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .goal-title {
    font-size: 15px;
    font-weight:500;
    font-weight:500;
    color: #000;
    margin-bottom: 0;
    line-height: 2px;
  
}

.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap {
    border: 1px solid #fff;
    border-radius: 0;
    padding: 1rem;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    width: 126px;
    background: 0 0;
    height: 40px;
    -ms-flex-pack: revert;
    justify-content: revert;
    border-radius: .8rem
}

.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap .rupee {
    line-height: 2px;
    font-weight: 400;
    font-size: 18px;
    color: #000
}

.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap .rupee.yrs-s {
    padding-left: 4px
}

.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap .rupee-input {
    font-size: 16px;
    line-height: 2px;
    font-weight: 500;
    color: #000;
    padding: 0 4px 0 2px;
    text-align: end
}

.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap.error {
    border-color: red
}

.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap.percent,
.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap.years {
    padding: 0 8px 0 10px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
    justify-content: end
}

.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap.percent .rupee-input,
.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap.years .rupee-input {
    padding: 0;
    font-weight: 500
}

.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap.percent {
    width: 72px
}

.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap.years {
    width: 108px
}

.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap.months {
    width: 10.5rem
}

.calculeter-wrap .cp-calculator .range-wrap .fixed-rate {
    display: block
}

.calculeter-wrap .cp-calculator .range-wrap .fixed-rate .goal-highlight {
    font-size: 2rem;
    line-height: 2rem;
    color: #fff
}

.calculeter-wrap .cp-calculator .range-wrap .fixed-rate .goal-sub-title {
    font-size: 1.4rem;
    line-height: 2rem;
    color: #9295a9
}

.calculeter-wrap .cp-calculator .range-wrap .slider-wrap input {
    line-height: 44px;
    padding: 0 18px;
    font-size: 14px;
    box-sizing: border-box;
    margin: 0;
    background: 0 0;
    border: none;
    box-shadow: none;
    outline: 0;
    max-width: 100%;
    max-height: 120px;
    display: block;
    border-radius: 2px;
   
    position: relative;
    z-index: 2
}

.calculeter-wrap .cp-calculator .range-wrap .value-wrap {
    margin-top: 12px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: 18px;
    color: #000
}

.calculeter-wrap .cp-calculator .range-wrap .value-wrap .max .rupee,
.calculeter-wrap .cp-calculator .range-wrap .value-wrap .min .rupee {
    font-size: 18px;
    color: #000
}

.calculeter-wrap .cp-calculator .range-wrap .value-wrap .amount {
    padding-left: 4px;
    font-size: 16px;
    font-weight: 500;
    color: #000
}

.calculeter-wrap .cp-calculator .range-wrap:last-child {
    margin-bottom: 0
}

.calculeter-wrap .cp-calculator input {
    line-height: 44px;
    padding: 0;
    font-size: 14px;
    box-sizing: border-box;
    margin: 0;
    background: 0 0;
    border: none;
    box-shadow: none;
    outline: 0;
    max-width: 100%;
    max-height: 120px;
    display: block;
    border-radius: 2px;
   
    position: relative;
    z-index: 2
}

.calculeter-wrap .cp-chart {
    width: 42%;
    background-color: #45485c;
    border-radius: 1.1rem;
    padding: 2.3rem 1.4rem
}

.calculeter-wrap .cp-chart .yourEmi {
    font-size: 1.2rem;
    line-height: 1.4rem;
    color: #555;
    text-align: center;
    margin-bottom: .28rem
}

.calculeter-wrap .cp-chart .emiAmt {
    font-size: 2.0rem;
    line-height: 3.1rem;
    color: #555;
    text-align: center;
    margin-bottom: 2.2rem
}

.calculeter-wrap .cp-chart button:focus:not(:focus-visible) {
    border: 1px solid #000
}

.calculeter-wrap .cp-chart .btnwhite-small {
    color: #fff
}

.calculeter-wrap .cp-chart .btnwhite-small:active {
    color: #fff
}

.calculeter-wrap .cp-chart .btnwhite-small:hover {
    color: #fff
}

.calculeter-wrap .cp-chart .btn-primary-Xsmall {
    padding: 1.2rem 2.8rem;
 
}

.calculeter-wrap .cp-chart .btn-default {
    padding: 1.2rem 2.8rem;
    font-size: 16px;
}

.rangeslider {
    display: block;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3);
    border-radius: 10px;
    background: rgb(216, 188, 82);
    background: linear-gradient(180deg, rgba(216, 188, 82, 1) 0%, rgba(216, 188, 82, 0.06719184255733546) 100%);
    position: relative
}

.rangeslider.rangeslider--horizontal {
    height: 7px;
    width: 100%
}

.rangeslider__fill {
    display: block;
    border-radius:10px;
    background: rgb(33,128,194);
background: linear-gradient(90deg, rgba(33,128,194,1) 0%, rgba(11,147,211,1) 100%);
    position: absolute
}

.rangeslider--horizontal .rangeslider__fill {
    top: 0;
    height: 100%
}

.rangeslider--horizontal .rangeslider__handle {
    top: -7px;
    touch-action: pan-y;
    -ms-touch-action: pan-y
}

.rangeslider--vertical {
    width: 20px;
    min-height: 150px;
    max-height: 100%
}

.rangeslider--vertical .rangeslider__fill {
    bottom: 0;
    width: 100%
}

.rangeslider--vertical .rangeslider__handle {
    left: -10px;
    touch-action: pan-x;
    -ms-touch-action: pan-x
}

.rangeslider--disabled {
    opacity: .4
}

.rangeslider__handle {
    background: #2f3245;
    border: 4px solid #ffcb05;
    cursor: pointer;
    display: inline-block;
    width: 24px;
    height: 24px;
    position: absolute;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g);
    background-size: 100%;
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, .1));
    box-shadow: 0 0 8px rgba(0, 0, 0, .3);
    border-radius: 50%
}

.rangeslider__handle:after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    
    border-radius: 50%;
    background: #0b93d3
}

.rangeslider--horizontal .rangeslider__handle:hover {
    box-shadow: -2px 0 20px rgba(10, 95, 156, .76)
}

.rangeslider__handle:active {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==);
    background-size: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .12))
}

.rangeslider--active .rangeslider__handle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==);
    background-size: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .12))
}

input[type=range]:focus+.rangeslider .rangeslider__handle {
    box-shadow: 0 0 8px rgba(255, 0, 255, .9)
}



.twl-tabs .calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap {
    width: 10.5rem
}

.twl-tabs .calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap.years {
    width: 10rem
}

.twl-tabs .calculeter-wrap .cp-calculator .range-wrap .fixed-rate .percent {
    display: none
}

.error_message {
    position: absolute;
    font-size: 1.2rem;
    color: red;
    top: -19px;
    right: 0;
    display: none;
    width: 150px
}

.hf-CalculateYourEMI {
    background: #f1f1f1
}

.hf-calculater-wrap {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
    justify-content: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-top: 4rem
}

.hf-calculater-wrap .hf-calculater-img-wrap {
    padding: 6rem 4.4rem 6rem;
    width: 32%
}

.hf-calculater-wrap .hf-calculater-emi-wrap {
    display: block;
    width: 100%;
    background: #fff;
    -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.08);
box-shadow: 0 0 5px 0 rgba(0,0,0,0.08);
    border-radius: 18px;
    padding: 2.8rem
}

.pie-chart-wrap {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 2.5rem
}

#btlegend-container ul,
#legend-container ul,
#nrlegend-container ul,
#tulegend-container ul {
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    padding: 0;
    -ms-flex-pack: center;
    justify-content: center
}

#btlegend-container li,
#legend-container li,
#nrlegend-container li,
#tulegend-container li {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 2rem
}

#btlegend-container li p,
#btlegend-container li span,
#legend-container li p,
#legend-container li span,
#nrlegend-container li p,
#nrlegend-container li span,
#tulegend-container li p,
#tulegend-container li span {
    font-size: 16px;
    line-height: 17px;
    color: #000
}

#btlegend-container li .labelAmt,
#legend-container li .labelAmt,
#nrlegend-container li .labelAmt,
#tulegend-container li .labelAmt {
    display: block;
    color: #000
}

#btlegend-container li:not(:last-child),
#legend-container li:not(:last-child),
#nrlegend-container li:not(:last-child),
#tulegend-container li:not(:last-child) {
    margin-right: 15px
}

#btlegend-container li .loanAmtLabel,
#legend-container li .loanAmtLabel,
#nrlegend-container li .loanAmtLabel,
#tulegend-container li .loanAmtLabel {
    display: inline-block;
    height: 30px;
    margin-right: 10px;
    width: 7px;
    background: #00aeef
}

#btlegend-container li .interstAmtLabel,
#legend-container li .interstAmtLabel,
#nrlegend-container li .interstAmtLabel,
#tulegend-container li .interstAmtLabel {
    display: inline-block;
    height: 30px;
    margin-right: 10px;
    width: 7px;
    background: #fff
}

.calculeter-wrap {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center
}

.calculeter-wrap .cp-calculator {
    width: 56%
}

.calculeter-wrap .cp-calculator .range-wrap {
    margin-bottom: 45px;
    position: relative
}

.calculeter-wrap .cp-calculator .range-wrap .goal-wrap {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 18px
}

.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .goal-title {
    font-size: 15px;
    font-weight:500;
    color: #000;
    margin-bottom: 0;
    line-height: 2px;
    
}

.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap {
    border: 1px solid #4d4f53;
    border-radius: 0;
    padding: 1rem;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    width: 126px;
    background: 0 0;
    height: 40px;
    -ms-flex-pack: revert;
    justify-content: revert;
    border-radius: .8rem
}

.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap .rupee {
    line-height: 2px;
    font-weight: 400;
    font-size: 18px;
    color: #000
}

.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap .rupee.yrs-s {
    padding-left: 4px
}

.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap .rupee-input {
    font-size: 16px;
    line-height: 2px;
    font-weight: 500;
    color: #000;
    padding: 0 4px 0 2px;
    text-align: end
}

.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap.error {
    border-color: red
}

.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap.percent,
.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap.years {
    padding: 0 8px 0 10px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
    justify-content: end
}

.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap.percent .rupee-input,
.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap.years .rupee-input {
    padding: 0;
    font-weight: 500
}

.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap.percent {
    width: 72px
}

.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap.years {
    width: 108px
}

.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap.months {
    width: 10.5rem
}

.calculeter-wrap .cp-calculator .range-wrap .fixed-rate {
    display: block
}

.calculeter-wrap .cp-calculator .range-wrap .fixed-rate .goal-highlight {

    font-size: 2rem;
    line-height: 2rem;
    color: #fff
}

.calculeter-wrap .cp-calculator .range-wrap .fixed-rate .goal-sub-title {
    font-size: 1.4rem;
    line-height: 2rem;
    color: #9295a9
}

.calculeter-wrap .cp-calculator .range-wrap .slider-wrap input {
    line-height: 44px;
    padding: 0 18px;
    font-size: 14px;
    box-sizing: border-box;
    margin: 0;
    background: 0 0;
    border: none;
    box-shadow: none;
    outline: 0;
    max-width: 100%;
    max-height: 120px;
    display: block;
    border-radius: 2px;
   
    position: relative;
    z-index: 2
}

.calculeter-wrap .cp-calculator .range-wrap .value-wrap {
    margin-top: 12px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: 18px;
    color: #000
}

.calculeter-wrap .cp-calculator .range-wrap .value-wrap .max .rupee,
.calculeter-wrap .cp-calculator .range-wrap .value-wrap .min .rupee {
    font-size: 18px;
    color: #000
}

.calculeter-wrap .cp-calculator .range-wrap .value-wrap .amount {
    padding-left: 4px;
    font-size: 16px;
    font-weight: 500;
    color: #000
}

.calculeter-wrap .cp-calculator .range-wrap:last-child {
    margin-bottom: 0
}

.calculeter-wrap .cp-calculator input {
    line-height: 44px;
    padding: 0;
    font-size: 14px;
    box-sizing: border-box;
    margin: 0;
    background: 0 0;
    border: none;
    box-shadow: none;
    outline: 0;
    max-width: 100%;
    max-height: 120px;
    display: block;
    border-radius: 2px;
   
    position: relative;
    z-index: 2
}

.calculeter-wrap .cp-chart {
    width: 42%;
    background-color: #ebffe5;
    border-radius: 1.1rem;
    padding: 2.3rem 1.4rem
}

.calculeter-wrap .cp-chart .yourEmi {
    font-size: 17px;
    line-height: 1.4rem;
    color: #000;
    text-align: center;
    margin-bottom: .28rem
}

.calculeter-wrap .cp-chart .emiAmt {
    font-size: 2.0rem;
    line-height: 3.1rem;
    color: #000;
    text-align: center;
    margin-bottom: 2.2rem;
    font-weight:700;
}

.calculeter-wrap .cp-chart button:focus:not(:focus-visible) {
    border: 1px solid #000
}

.calculeter-wrap .cp-chart .btnwhite-small {
    color: #fff
}

.calculeter-wrap .cp-chart .btnwhite-small:active {
    color: #fff
}

.calculeter-wrap .cp-chart .btnwhite-small:hover {
    color: #fff
}

.calculeter-wrap .cp-chart .btn-primary-Xsmall {
    padding: 1.2rem 2.8rem;
   
}

.calculeter-wrap .cp-chart .btn-default {
    padding: 1.2rem 2.8rem;
    font-size: 16px;
}

.rangeslider {
    display: block;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3);
    border-radius: 10px;
    background: rgb(62,159,79);
    background: linear-gradient(90deg, rgba(62,159,79,1) 0%, rgba(107,190,81,1) 100%);
    position: relative
}

.rangeslider.rangeslider--horizontal {
    height: 18px;
    width: 100%
}

.rangeslider__fill {
    display: block;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3);
    border-radius: 10px;
    background: rgb(33,128,194);
background: linear-gradient(90deg, rgba(33,128,194,1) 0%, rgba(11,147,211,1) 100%);
    position: absolute
}

.rangeslider--horizontal .rangeslider__fill {
    top: 0;
    height: 100%
}

.rangeslider--horizontal .rangeslider__handle {
    top: -7px;
    touch-action: pan-y;
    -ms-touch-action: pan-y
}

.rangeslider--vertical {
    width: 20px;
    min-height: 150px;
    max-height: 100%
}

.rangeslider--vertical .rangeslider__fill {
    bottom: 0;
    width: 100%
}

.rangeslider--vertical .rangeslider__handle {
    left: -10px;
    touch-action: pan-x;
    -ms-touch-action: pan-x
}

.rangeslider--disabled {
    opacity: .4
}

.rangeslider__handle {
    background: #0b93d3;
    border: 4px solid #0b93d3;
    cursor: pointer;
    display: inline-block;
    width: 30px;
    height: 30px;
    position: absolute;
    
    box-shadow: 0 0 8px rgba(0, 0, 0, .3);
    border-radius: 50%
}

.rangeslider__handle:after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
   
    border-radius: 50%;
    background: #0b93d3
}

.rangeslider--horizontal .rangeslider__handle:hover {
    box-shadow: -2px 0 20px rgba(10, 95, 156, .76)
}

.rangeslider__handle:active {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==);
    background-size: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .12))
}

.rangeslider--active .rangeslider__handle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==);
    background-size: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .12))
}

input[type=range]:focus+.rangeslider .rangeslider__handle {
    box-shadow: 0 0 8px rgba(255, 0, 255, .9)
}



.twl-tabs .calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap {
    width: 10.5rem
}

.twl-tabs .calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap.years {
    width: 10rem
}

.twl-tabs .calculeter-wrap .cp-calculator .range-wrap .fixed-rate .percent {
    display: none
}

.error_message {
    position: absolute;
    font-size: 1.2rem;
    color: red;
    top: -19px;
    right: 0;
    display: none;
    width: 150px
}

.singletxt {
    text-align: center
}

.singletxt h3 {
    font-size: 2rem;
    padding: 2.4rem 0 1.8rem 0;
    font-weight: 400
}

.singletxt .btn-primary {
    padding: 1rem 0;
    width: 17rem
}

.tabPlanning .aboutloanbenefits {
    padding: 0 2.4rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.tabPlanning .aboutloanbenefits .benefits {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    padding: 1.5rem
}

.tabPlanning .aboutloanbenefits .benefits img {
    height: 4rem
}

.tabPlanning .aboutloanbenefits .benefits .partTab {
    margin-left: 1.8rem
}

.tabPlanning .aboutloanbenefits .benefits .partTab h3 {

    font-size: 18px;
    margin-top: .5rem
}

.tabPlanning .aboutloanbenefits .benefits .partTab p {
    font-size: 1.4rem;
    max-width: 21.8rem;
    margin-top: 18px
}

.tabPlanning .reportTabContainer {
    padding: 0 3rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start
}

.tabPlanning .reportTabContainer .reportTabs {
    margin-right: 2.4rem;
    width: 30%;
    border-radius: .8rem
}

.tabPlanning .reportTabContainer .reportTabs li {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 8.2rem;
    font-size: 1.8rem;
    line-height: 2.2rem;
    padding: 2.4rem 2rem;
    color: #595c73;
    background-color: #fff;
    border-radius: .8rem;
    margin-bottom: 18px;
    cursor: pointer;
    box-shadow: 0 4px 4px rgba(47, 50, 69, .2);
    transition: all .3s ease;
    position: relative
}

.tabPlanning .reportTabContainer .reportTabs li span {
    font-size: 1.4rem
}

.tabPlanning .reportTabContainer .reportTabs li:after {
    content: "";
    position: absolute;
    bottom: 1.8rem;
    right: -1rem;
    width: 0;
    height: 0;
    border-right: 2rem solid transparent;
    border-top: 2rem solid transparent;
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    transition: all .3s ease;
    display: none
}

.tabPlanning .reportTabContainer .reportTabs li:last-child {
    margin-bottom: 0
}

.tabPlanning .reportTabContainer .reportTabs li:hover {
    background-color: #ffcb05
}

.tabPlanning .reportTabContainer .reportTabs li:hover::after {
    border-right: 3.6rem solid transparent;
    border-top: 3.6rem solid #ffcb05
}

.tabPlanning .reportTabContainer .reportTabs li::-webkit-scrollbar {
    display: none
}

.tabPlanning .reportTabContainer .reportTabs li.active {
    background-color: #ffcb05;
    color: #000;
    font-weight: 700
}

.tabPlanning .reportTabContainer .reportTabs li.active:after {
    border-right: 2rem solid transparent;
    border-top: 2rem solid #ffcb05
}

.tabPlanning .reportTabContainer .content-container {
    width: 70%;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(134, 134, 134, .2);
    border-radius: 18px;
    padding: 0;
    height: 280px;
    overflow-y: scroll
}

.tabPlanning .reportTabContainer .content-container .reportPoliciesContent .centerd {
    margin: 20px
}

.tabPlanning .reportTabContainer .content-container .reportPoliciesContent .accordianPart {
    margin-left: auto;
    overflow: hidden;
    padding: 1.4rem 0;
    border-radius: 18px
}

.tabPlanning .reportTabContainer .content-container .reportPoliciesContent .accordianPart .accordItem {
    position: relative;
    margin: 0 2.4rem;
    background-color: #fff;
    padding: .5rem;
    border-bottom: 1px solid #ccc
}

.tabPlanning .reportTabContainer .content-container .reportPoliciesContent .accordianPart .accordItem .accordLinks {
    padding: 1rem;
    font-size: 18px;
    line-height: 2.4rem;
    font-weight: 400;
    color: #000;
    cursor: pointer;
    position: relative
}

.tabPlanning .reportTabContainer .content-container .reportPoliciesContent .accordianPart .accordItem .accordLinks:before {
    content: "\e914";
    font-family: icomoon !important;
    font-size: 2rem;
    font-weight: 700;
    color: #000;
    position: absolute;
    right: 0;
    padding: 0 1rem
}

.tabPlanning .reportTabContainer .content-container .reportPoliciesContent .accordianPart .accordItem .accordLinks.active {
    color: #00aeef
}

.tabPlanning .reportTabContainer .content-container .reportPoliciesContent .accordianPart .accordItem .accordLinks.active:before {
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    color: #00aeef;
    font-size: 2rem
}

.tabPlanning .reportTabContainer .content-container .reportPoliciesContent .accordianPart .accordItem .accordDesc {
    height: auto;
    padding: 1rem;
    display: none
}

.tabPlanning .reportTabContainer .content-container .reportPoliciesContent .accordianPart .accordItem .accordDesc .contentTab {
    display: -ms-flexbox;
    display: flex;
    padding: 0 2.4rem;
    -ms-flex-direction: row;
    flex-direction: row
}

.tabPlanning .reportTabContainer .content-container .reportPoliciesContent .accordianPart .accordItem .accordDesc .contentTab .rowed {
    width: 48%;
    list-style: circle;
    margin-right: 22px
}

.tabPlanning .reportTabContainer .content-container .reportPoliciesContent .accordianPart .accordItem .accordDesc .contentTab .rowed li {
    font-size: 18px;
    line-height: 30px;
    color: #595c73;
    list-style: disc
}

.tabPlanning .reportTabContainer .content-container .reportPoliciesContent .accordianPart .accordItem .accordDesc p {
    font-size: 18px;
    line-height: 3rem;
    width: 90%;
    color: #595c73
}

.tabPlanning .reportTabContainer .content-container .reportPoliciesContent .accordianPart .accordItem:last-child {
    border-bottom: none
}

.tabPlanning .reportTabContainer .content-container .reportPoliciesContent .accordianPart .accordItem.active .accordDesc {
    display: block
}

.tabPlanning .reportTabContainer .content-container .reportPoliciesContent .accordianPart .btn-wrapper {
    margin-left: 1.3rem;
    padding-top: 2rem
}

.tabPlanning .reportTabContainer .content-container .reportPoliciesContent {
    display: none
}

.tabPlanning .reportTabContainer .content-container .reportPoliciesContent.active {
    display: block
}

.tabPlanning .tabPart {
    margin: 1rem 3.4rem;
    border-radius: 18px;
    overflow-y: auto;
    height: auto;
    max-height: 454px
}

.tabPlanning .tabPart table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1.5rem;
    line-height: 1.8rem
}

.tabPlanning .tabPart table tr:nth-child(even) {
    background: rgba(0, 0, 0, .05)
}

.tabPlanning .tabPart table th {
    background: #ffcb05;
    padding: 2rem
}

.tabPlanning .tabPart table td {
    border: none;
    text-align: left;
    padding: 2rem
}

.tabPlanning .tabRowed {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row
}

.tabPlanning .tabRowed .tabpart32 {
    width: 32%
}

.tabPlanning .tabRowed .tabpart32 h3 {
    color: #00aeef;
    font-size: 2rem;
    line-height: 2.4rem;
}

.tabPlanning .tabRowed .tabpart32 ul {
    margin: 1.75rem
}

.tabPlanning .tabRowed .tabpart32 ul li {
    color: #595c73;
    font-size: 18px;
}

.tabPlanning .tabRowed .tabpart32 ul li span {
    margin-right: .8rem
}

.tabPlanning .content-container::-webkit-scrollbar,
.tabPlanning .tabPart::-webkit-scrollbar {
    transform: translateX(-10px);
    border-radius: .8rem
}

.tabPlanning .content-container::-webkit-scrollbar-track,
.tabPlanning .tabPart::-webkit-scrollbar-track {
    background: rgba(229, 229, 229, .4039215686);
    transform: translateX(-10px);
    border-radius: .8rem
}

.tabPlanning .content-container::-webkit-scrollbar-thumb,
.tabPlanning .tabPart::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0, 173, 239, 0) 0, rgba(0, 173, 239, .726618) 18.75%, #00adef 72.4%, rgba(0, 173, 239, .151078) 100%);
    border-radius: .8rem
}

.tabPlanning .content-container::-webkit-scrollbar,
.tabPlanning .tabPart::-webkit-scrollbar {
    width: 3px;
    height: 3px;
    background: rgba(229, 229, 229, .4039215686);
    border-radius: .8rem
}

.home-loan-service .hf-calculater-wrap .hf-calculater-img-wrap h4 {
    font-size: 2rem;
    line-height: 2.4rem;
    color: #00aeef
}

.home-loan-service .hf-calculater-wrap .hf-calculater-img-wrap ul li {
    font-size: 18px;
    display: -ms-flexbox;
    display: flex;
    line-height: 26.27px;
    color: #595c73
}

.home-loan-service .hf-calculater-wrap .hf-calculater-img-wrap ul li::before {
    content: "\e92e";
    font-family: icomoon !important;
    position: relative;
    font-size: 22.5px;
    margin-right: .8rem
}

.twl-tabs .tabPlanning .aboutloanbenefits {
    padding: 0 1.4rem
}

.twl-tabs .tabPlanning .aboutloanbenefits .benefits {
    padding: 2.4rem 2rem
}

.twl-tabs .tabPlanning .aboutloanbenefits .benefits img {
    width: 4rem
}

.twl-tabs .tabPlanning .aboutloanbenefits .benefits .partTab {
    margin-left: 18px;
    margin-top: 5px
}

.twl-tabs .tabPlanning .aboutloanbenefits .benefits .partTab p {
    margin-top: 1.8rem
}

.twl-tabs .tabPlanning .tabPart {
    margin: 0 3.4rem;
    height: auto;
    overflow-y: auto;
    border: .1px solid rgba(0, 0, 0, .05)
}

.twl-tabs .tabPlanning .tabPart table tbody tr:first-child {
    border-top-left-radius: 18px;
    border-top-right-radius: 18px
}

.twl-tabs .tabPlanning .tabPart table tbody tr:last-child {
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px
}

.twl-tabs .tabPlanning .tabPart table tbody tr td:first-child,
.twl-tabs .tabPlanning .tabPart table tbody tr th:first-child {
    width: 315px
}

.twl-tabs .tabPlanning .tabPart table tbody tr td {
    padding: 1.8rem 2rem;
    font-size: 1.5rem;
    line-height: 1.8rem
}

.twl-tabs .tabPlanning .tabPart table tbody tr td ul {
    font-size: 1.4rem;
    line-height: 1.7rem;
    color: #000;
    width: 85%;
    margin-left: 2rem
}

.twl-tabs .tabPlanning .tabPart table tbody tr td ul li {
    list-style-type: disc
}

.twl-tabs .tabPlanning .rate-charges tbody tr td:first-child,
.twl-tabs .tabPlanning .rate-charges tbody tr th:first-child {
    width: 450px
}

.twl-tabs .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap .newloanheading {
    font-size: 2rem;
    line-height: 2.4rem;
    color: #00aeef
}

.twl-tabs .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap p {
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 2.1rem;
    color: #666;
    margin: 1.5rem 0 5.5rem
}

.twl-tabs .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap ul li {
    margin-bottom: .8rem;
    font-size: 1.4rem;
    line-height: 2.4rem;
    color: #666;
    margin-left: 2rem;
    list-style-type: disc
}

.sme-tabs .tabPlanning .tabPart {
    margin: 0
}

.sme-tabs .tabPlanning .aboutloanbenefits {
    -ms-flex-pack: center;
    justify-content: center
}



.twl-tabs .calculeter-wrap .cp-calculator .range-wrap .goal-wrap .percent {
    width: 75px
}

.twl-tabs .service-list-wrap {
    background: #fff;
    border-radius: 1.8rem
}

.twl-tabs .service-list-wrap .service-list {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.twl-tabs .service-list-wrap .service-list .service-list-item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    gap: 1.2rem;
    grid-gap: 1.2rem;
    z-index: 10;
    -ms-transform: translateY(1px);
    transform: translateY(1px)
}

.twl-tabs .service-list-wrap .service-list .service-list-item .icon {
    color: #2f3245;
    font-size: 2.8rem;
    line-height: 2.2rem;
    padding-right: 5px
}

.twl-tabs .service-list-wrap .service-list .service-list-item a {
    color: #2f3245;
    font-size: 18px;
    line-height: 2.2rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 1.5rem 3.5rem
}

.twl-tabs .service-list-wrap .service-list .service-list-item:hover {
    cursor: pointer;
    border-color: #00aeef
}

.twl-tabs .service-list-wrap .service-list .service-list-item:hover .icon {
    color: #00aeef
}

.twl-tabs .service-list-wrap .service-list .service-list-item:hover a {
    color: #00aeef;
    font-family: Frutiger_bold
}

.twl-tabs .service-list-wrap .service-list .service-list-item.active {
    border-bottom: 1px solid #fff;
    border: 1px solid #ccc;
    border-radius: 18px 18px 0 0;
    position: relative
}

.twl-tabs .service-list-wrap .service-list .service-list-item.active::after {
    content: "";
    width: 100%;
    background: #fff;
    height: 3px;
    position: absolute;
    bottom: -1px;
    left: 0
}

.twl-tabs .service-list-wrap .service-list .service-list-item.active .icon {
    color: #00aeef
}

.twl-tabs .service-list-wrap .service-list .service-list-item.active a {
    color: #00aeef;
    font-family: Frutiger_bold
}

.twl-tabs .service-list-wrap .tab-cont {
    background: #fff;
    border-radius: 0 0 18px 18px
}

.twl-tabs .service-list-wrap .tab-cont .tab-panel {
    padding: 3rem 0;
    display: none;
    position: relative
}

.twl-tabs .service-list-wrap .tab-cont .tab-panel.active {
    display: block
}

.twl-tabs .service-list-wrap .tab-cont .tabPlanning {
    border: 1px solid #ccc;
    border-radius: 18px
}

.twl-tabs .service-list-wrap .tab-cont .tabPlanning:last-child {
    border-radius: 0 0 18px 18px
}

.twl-tabs .service-list-wrap .tab-cont .tabPlanning:first-child {
    border-radius: 0 0 18px 18px
}

.twl-tabs .service-list-wrap .tab-cont .tabPlanning .centerContent {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center
}

.twl-tabs .service-list-wrap .tab-cont .tabPlanning .centerContentMain {
    padding: 4.1rem
}

.twl-tabs .service-list-wrap .tab-cont .tabPlanning .centerContentMain h3 {
    font-size: 4rem;
    font-family: Frutiger_Light
}

.twl-tabs .service-list-wrap .tab-cont .tabPlanning .centerContentMain h3 span {
    color: #00aeef;
}

.twl-tabs .service-list-wrap .tab-cont .tabPlanning .centerContentMain .contentTab {
    padding: 2.4rem 0
}

.twl-tabs .service-list-wrap .tab-cont .tabPlanning .centerContentMain .contentTab P {
    font-size: 18px;
    line-height: 3rem;
    font-family: Frutiger_Light;
    color: #666;
    max-width: 71rem
}

.twl-tabs .tabPlanning .hf-calculater-wrap {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    margin: 0
}

.twl-tabs .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap {
    padding: 3.2rem
}

.twl-tabs .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap h3 {
    font-size: 3.2rem;
    line-height: 3.9rem;
    margin-bottom: 1.5rem
}

.twl-tabs .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap h3 span {
    color: #00aeef
}

.twl-tabs .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap p {
    color: #595c73;
    font-size: 18px;
    line-height: 1.9rem
}

.twl-tabs .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap ul {
    margin-top: 1.5rem;
    margin-bottom: 5rem
}

.twl-tabs .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap ul li {
    margin-top: .6rem;
    margin-bottom: .6rem
}

.twl-tabs .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap ul li a {
    color: #595c73;
    font-size: 18px;
    line-height: 1.9rem;
    text-decoration: underline
}

.twl-tabs .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap ul li span {
    margin-right: .8rem;
    color: #595c73;
    font-size: 18px
}

.twl-tabs .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap .btn-wrapper .btn-primarysmall {
    margin-right: 18px;
    margin-bottom: 0
}



.twl-tabs .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap .btn-wrapper .btn-outlinesmall:hover {
    color: #fff;
    border: 1px solid #2f3245
}

.twl-tabs .tabPlanning .hf-calculater-wrap .hf-calculater-emi-wrap h3 {
    text-align: left;
    font-size: 2.6rem;
    line-height: 3.1rem;
    margin-bottom: 1.2rem;
    color: #fff;
}

.twl-tabs .tabPlanning .hf-calculater-wrap .hf-calculater-emi-wrap h3 .primary-text {
    color: #ffcb05;
}

.twl-tabs .special-wrapper {
    padding: 0 6rem 4rem
}

.twl-tabs .special-wrapper .special-title .title-inner {
    font-size: 3.2rem;
    line-height: 3.9rem;
    color: #000;
    font-weight: 400
}

.twl-tabs .special-wrapper .special-title .title-inner span {
    font-weight: 700;
    color: #00aeef
}

.twl-tabs .special-wrapper .special-inner-wrap {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.twl-tabs .special-wrapper .special-inner-wrap .special-cards {
    border: 1px solid #00adef;
    border-radius: 18px;
    padding: 2.4rem 3.4rem;
    width: 48%;
    margin-top: 4rem;
    background-color: #fff;
    transition: all .7s ease-in
}

.twl-tabs .special-wrapper .special-inner-wrap .special-cards h4 {
    margin-bottom: 1.4rem;
    font-weight: 700;
    font-size: 2rem;
    line-height: 2.4rem;
    color: #000
}

.twl-tabs .special-wrapper .special-inner-wrap .special-cards ul {
    margin-left: 2.4rem
}

.twl-tabs .special-wrapper .special-inner-wrap .special-cards ul li {
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;
    color: #595c73;
    list-style-type: disc
}

.twl-tabs .special-wrapper .special-inner-wrap .special-cards .hl-box {
    background-color: #cceffc;
    padding: .8rem 1.8rem;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    color: #003a59;
    margin-top: 1.4rem
}

.twl-tabs .special-wrapper .special-inner-wrap .special-cards:last-child {
    margin-right: 0
}

.twl-tabs .special-wrapper .special-inner-wrap .special-cards.active,
.twl-tabs .special-wrapper .special-inner-wrap .special-cards:hover {
    background: linear-gradient(95.22deg, #01b1f0 11.11%, #2e53a2 98.8%)
}

.twl-tabs .special-wrapper .special-inner-wrap .special-cards.active h4,
.twl-tabs .special-wrapper .special-inner-wrap .special-cards:hover h4 {
    color: #fff;
    font-weight: 700
}

.twl-tabs .special-wrapper .special-inner-wrap .special-cards.active ul li,
.twl-tabs .special-wrapper .special-inner-wrap .special-cards:hover ul li {
    font-weight: 700;
    color: #fff
}

.twl-tabs .apply-btn {
    text-align: center;
    margin-top: 2.4rem
}

.twl-tabs .apply-btn p {
    font-size: 2rem;
    line-height: 2.4rem;
    color: #000;
    margin-bottom: 1.8rem
}

.twl-tabs .apply-btn .twl-btn {
    padding: 1rem 4rem;
    font-weight: 400;
    font-size: 18px;
    line-height: 2rem;
    color: #000
}

.contentOfTab {
    padding: 2rem
}

.sme-tabs .service-list-wrap .service-list {
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly
}

.sme-tabs .service-list-wrap .service-list .service-list-item.active::after {
    bottom: -.2rem;
    height: 3px
}

.sme-tabs .service-list-wrap .tab-cont .tab-panel {
    padding: 3rem
}

.sme-tabs .service-list-wrap .tab-cont .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap {
    padding: 2.2rem 3.2rem 0;
    width: 30%
}

.sme-tabs .service-list-wrap .tab-cont .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap ul li {
    margin: .6rem 0 .6rem 2rem
}

.sme-tabs .service-list-wrap .tab-cont .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap p {
    font-size: 1.4rem;
    line-height: 2.1rem;
    color: #666
}

.sme-tabs .service-list-wrap .tab-cont .tabPlanning .hf-calculater-wrap .hf-calculater-emi-wrap {
    width: 70%
}

.sme-tabs .service-list-wrap .tab-cont .tabPlanning .rate-charges {
    height: 36.4rem;
    overflow-y: scroll;
    margin: 0
}

.sme-tabs .service-list-wrap .tab-cont .tabPlanning .rate-charges table tbody tr:first-child {
    position: -webkit-sticky;
    position: sticky;
    top: 0
}

.sme-tabs .service-list-wrap .tab-cont .tabPlanning .rate-charges table tbody tr td {
    padding: 1.8rem 5rem 1.8rem 2rem
}

.sme-tabs .service-list-wrap .tab-cont .tabPlanning .rate-charges table tbody tr td:first-child {
    width: 45%
}

.sme-tabs .service-list-wrap .tab-cont .tabPlanning .charge-warp {
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 18px;
    padding: 0 3.4rem;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.sme-tabs .service-list-wrap .tab-cont .tabPlanning .charge-warp .charge-content {
    width: 50%;
    margin-bottom: 2.4rem
}

.sme-tabs .service-list-wrap .tab-cont .tabPlanning .charge-warp .charge-content h4 {

    font-size: 2rem;
    line-height: 2.4rem;
    color: #00aeef
}

.sme-tabs .service-list-wrap .tab-cont .tabPlanning .charge-warp .charge-content p {
    font-size: 1.4rem;
    line-height: 2.4rem;
    color: #666;
    margin-top: .8rem
}

@media screen and (max-width:1440px) {
    .sme-tabs .tabPlanning .aboutloanbenefits .benefits {
        padding: 2.4rem 1rem
    }
}

@media only screen and (max-width:1366px) {
    .calculeter-wrap .cp-chart {
        padding: 2.3rem .5rem
    }

    .calculeter-wrap .cp-chart {
        padding: 2.3rem .5rem
    }
}

@media only screen and (max-width:1199px) {
    .calculeter-wrap .cp-calculator .range-wrap .goal-wrap .goal-title {
        font-size: 14px
    }

    .calculeter-wrap .cp-chart .btn-primary-Xsmall {
        padding: .9rem 1.4rem
    }

    .calculeter-wrap .cp-chart .btn-default {
        padding: .9rem 1.4rem
    }

    .calculeter-wrap .cp-calculator .range-wrap .goal-wrap .goal-title {
        font-size: 14px
    }

    .calculeter-wrap .cp-chart .btn-primary-Xsmall {
        padding: .9rem 1.4rem
    }

    .calculeter-wrap .cp-chart .btn-default {
        padding: .9rem 1.4rem
    }

    .twl-tabs .service-list-wrap .service-list {
        overflow-x: auto;
        overflow-y: hidden;
        margin-bottom: -1px;
        position: relative
    }

    .twl-tabs .service-list-wrap .service-list::-webkit-scrollbar-track {
        background: 0 0
    }

    .twl-tabs .service-list-wrap .service-list {
        white-space: nowrap
    }

    .twl-tabs .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap .btn-wrapper .btn-primarysmall {
        width: 100%;
        margin-bottom: 1.5rem
    }

    .twl-tabs .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap .btn-wrapper .btn-outlinesmall {
        width: 100%
    }
}

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

    #btlegend-container li p,
    #btlegend-container li span,
    #legend-container li p,
    #legend-container li span,
    #nrlegend-container li p,
    #nrlegend-container li span,
    #tulegend-container li p,
    #tulegend-container li span {
        font-size: 11px
    }

    #btlegend-container li p,
    #btlegend-container li span,
    #legend-container li p,
    #legend-container li span,
    #nrlegend-container li p,
    #nrlegend-container li span,
    #tulegend-container li p,
    #tulegend-container li span {
        font-size: 11px
    }
}

@media only screen and (max-width:991px) {
    .hf-calculater-wrap {
        -ms-flex-direction: column;
        flex-direction: column
    }

    .hf-calculater-wrap .hf-calculater-img-wrap {
        width: 100%;
        text-align: center
    }

    .hf-calculater-wrap .hf-calculater-emi-wrap {
        width: 100%
    }

    .calculeter-wrap {
        -ms-flex-direction: column;
        flex-direction: column
    }

    .calculeter-wrap .cp-calculator {
        width: 100%
    }

    .calculeter-wrap .cp-chart {
        width: 100%;
        margin-top: 3rem;
        padding: 2.3rem 1rem
    }

    .calculeter-wrap .cp-chart .btn-primary-Xsmall {
        padding: .9rem 2.4rem
    }

    .twl-tabs .calculeter-wrap .cp-chart .btn-primary-Xsmall {
        margin-top: 0
    }

    .hf-calculater-wrap {
        -ms-flex-direction: column;
        flex-direction: column
    }

    .hf-calculater-wrap .hf-calculater-img-wrap {
        width: 100%;
        text-align: center
    }

    .hf-calculater-wrap .hf-calculater-emi-wrap {
        width: 100%
    }

    .calculeter-wrap {
        -ms-flex-direction: column;
        flex-direction: column
    }

    .calculeter-wrap .cp-calculator {
        width: 100%
    }

    .calculeter-wrap .cp-chart {
        width: 100%;
        margin-top: 3rem;
        padding: 2.3rem 1rem
    }

    .calculeter-wrap .cp-chart .btn-primary-Xsmall {
        padding: .9rem 2.4rem
    }

    .twl-tabs .calculeter-wrap .cp-chart .btn-primary-Xsmall {
        margin-top: 0
    }

    .tabPlanning .aboutloanbenefits .benefits {
        display: block;
        text-align: center
    }

    .tabPlanning .reportTabContainer {
        -ms-flex-direction: column;
        flex-direction: column
    }

    .tabPlanning .reportTabContainer .reportTabs {
        width: 100%;
        overflow-x: scroll;
        display: -ms-flexbox;
        display: flex;
        border: none;
        -ms-flex-align: center;
        align-items: center;
        white-space: pre;
        padding: 1rem 0 1.8rem
    }

    .tabPlanning .reportTabContainer .reportTabs::-webkit-scrollbar {
        display: none
    }

    .tabPlanning .reportTabContainer .reportTabs li {
        text-align: center
    }

    .tabPlanning .reportTabContainer .reportTabs li:after {
        left: 0;
        right: 0;
        bottom: -4.5px;
        margin: auto;
        -ms-transform: rotate(223deg);
        transform: rotate(223deg);
        display: block
    }

    .tabPlanning .reportTabContainer .reportTabs li {
        font-size: 1.4rem;
        line-height: 1.7rem;
        height: auto;
        padding: 1.5rem 18px;
        margin-bottom: 0;
        margin-right: 18px;
        height: 4.7rem
    }

    .tabPlanning .reportTabContainer .content-container {
        margin-top: 2rem;
        width: 100%;
        padding: 2.8rem 18px 0;
        border-radius: 1rem;
        min-height: auto;
        margin-left: 0
    }

    .tabPlanning .reportTabContainer .content-container {
        padding: 0
    }

    .tabPlanning .reportTabContainer .content-container .reportPoliciesContent .accordianPart {
        max-width: 100%;
        margin: 1rem 18px;
        padding: 0
    }

    .tabPlanning .reportTabContainer .content-container .reportPoliciesContent .accordianPart .accordItem {
        margin: 0;
        padding: 18px 0
    }

    .tabPlanning .reportTabContainer .content-container .reportPoliciesContent .accordianPart .accordItem .accordLinks.active {
        font-size: 18px
    }

    .tabPlanning .reportTabContainer .content-container .reportPoliciesContent .accordianPart .accordItem .accordLinks.active:before {
        font-size: 18px
    }

    .tabPlanning .reportTabContainer .content-container .reportPoliciesContent .accordianPart .accordItem .accordLinks {
        font-size: 18px;
        line-height: 18px;
        padding: 0
    }

    .tabPlanning .reportTabContainer .content-container .reportPoliciesContent .accordianPart .accordItem .accordDesc .contentTab {
        padding: 1rem
    }

    .tabPlanning .reportTabContainer .content-container .reportPoliciesContent .accordianPart .btn-wrapper {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
        justify-content: center
    }

    .tabPlanning .tabPart {
        margin: 1rem;
        border-radius: 1rem
    }

    .tabPlanning .tabPart table {
        font-size: 1.4rem;
        overflow: scroll;
        width: 200%
    }

    .tabPlanning .tabPart table th {
        padding: 1rem
    }

    .twl-tabs .tabPlanning .tabPart table {
        font-size: 1.4rem;
        width: 100%
    }

    .twl-tabs .service-list-wrap .service-list .service-list-item a {
        font-size: 1.4rem;
        padding: 18px 2.5rem
    }

    .twl-tabs .service-list-wrap .tab-cont {
        border-top-right-radius: 0;
        border-top-left-radius: 0
    }

    .twl-tabs .service-list-wrap .tab-cont .tabPlanning {
        border-top-right-radius: 0;
        border-top-left-radius: 0
    }

    .twl-tabs .tabPlanning .hf-calculater-wrap {
        margin: 0 1rem
    }

    .twl-tabs .tabPlanning .hf-calculater-wrap .hf-calculater-emi-wrap {
        padding: 2.6rem
    }

    .twl-tabs .special-wrapper .special-inner-wrap .special-cards {
        width: 100%
    }

    .sme-tabs .service-list-wrap .tab-cont .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap {
        width: 100%
    }

    .sme-tabs .service-list-wrap .tab-cont .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap ul {
        text-align: left
    }

    .sme-tabs .service-list-wrap .tab-cont .tabPlanning .hf-calculater-wrap .hf-calculater-emi-wrap {
        width: 100%;
        margin-top: 3rem
    }
}

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

    #btlegend-container li p,
    #btlegend-container li span,
    #legend-container li p,
    #legend-container li span,
    #nrlegend-container li p,
    #nrlegend-container li span,
    #tulegend-container li p,
    #tulegend-container li span {
        font-size: 12px
    }

    .calculeter-wrap .cp-chart .btn-primary-Xsmall {
        padding: 1.2rem 4rem
    }

    .calculeter-wrap .cp-chart .btn-default {
        padding: 1.2rem 4rem
    }

    #btlegend-container li p,
    #btlegend-container li span,
    #legend-container li p,
    #legend-container li span,
    #nrlegend-container li p,
    #nrlegend-container li span,
    #tulegend-container li p,
    #tulegend-container li span {
        font-size: 12px
    }

    .calculeter-wrap .cp-chart .btn-primary-Xsmall {
        padding: 1.2rem 4rem
    }

    .calculeter-wrap .cp-chart .btn-default {
        padding: 1.2rem 4rem
    }

    .tabPlanning .reportTabContainer {
        padding: 1.2rem
    }

    .tabPlanning .reportTabContainer .content-container .reportPoliciesContent .accordianPart .accordItem .accordLinks:before {
        font-size: 1.4rem
    }

    .tabPlanning .reportTabContainer .content-container .reportPoliciesContent .accordianPart .accordItem .accordDesc p {
        font-size: 1.2rem;
        line-height: 2rem;
        width: 100%
    }

    .twl-tabs .tabPlanning .aboutloanbenefits {
        -ms-flex-direction: column;
        flex-direction: column
    }

    .twl-tabs .tabPlanning .aboutloanbenefits .benefits {
        display: -ms-flexbox;
        display: flex;
        padding: 0;
        margin-bottom: 18px
    }

    .twl-tabs .tabPlanning .aboutloanbenefits .benefits .partTab {
        text-align: left;
        margin-left: 2.6rem
    }

    .twl-tabs .tabPlanning .aboutloanbenefits .benefits .partTab h3 {
        margin-top: .5rem
    }

    .twl-tabs .tabPlanning .aboutloanbenefits .benefits .partTab p {
        max-width: 100%;
        margin-top: 1.4rem
    }

    .twl-tabs .tabPlanning .aboutloanbenefits .benefits .partTab p br {
        display: none
    }

    .twl-tabs .tabPlanning .tabPart {
        margin: 0 1.2rem
    }

    .twl-tabs .tabPlanning .tabPart table tbody tr td:first-child,
    .twl-tabs .tabPlanning .tabPart table tbody tr th:first-child {
        width: 50%
    }

    .twl-tabs .tabPlanning .tabPart table tbody tr th {
        padding: 2rem
    }

    .twl-tabs .tabPlanning .rate-charges tbody tr th {
        padding: 2rem 4rem 2rem 2rem
    }

    .twl-tabs .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap .newloanheading {
        text-align: left;
        font-size: 1.8rem;
        line-height: 2.2rem
    }

    .twl-tabs .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap p {
        text-align: left;
        margin: .5rem 0 3rem
    }

    .sme-tabs .tabPlanning .tabPart {
        margin: 0 .8rem
    }

    .twl-tabs .service-list-wrap .service-list .service-list-item {
        border-bottom: 1px solid #ccc
    }

    .twl-tabs .service-list-wrap .service-list .service-list-item {
        margin: 0;
        padding: 1rem 18px;
        border-bottom: 1px solid #ccc;
        -ms-transform: translateY(0);
        transform: translateY(0)
    }

    .twl-tabs .service-list-wrap .service-list .service-list-item {
        margin-left: 0;
        margin-right: 0
    }

    .twl-tabs .service-list-wrap .service-list {
        gap: 0;
        grid-gap: 0;
        -ms-flex-pack: start;
        justify-content: start
    }

    .twl-tabs .service-list-wrap .tab-cont .tab-panel {
        padding: 2.4rem 0
    }

    .twl-tabs .service-list-wrap .tab-cont .tabPlanning {
        border-top-right-radius: 0;
        border-top-left-radius: 0
    }

    .twl-tabs .service-list-wrap .tab-cont .tabPlanning .centerContentMain h3 {
        font-size: 2.4rem
    }

    .twl-tabs .service-list-wrap .tab-cont .tabPlanning .centerContentMain .contentTab P {
        line-height: 2.4rem
    }

    .twl-tabs .service-list-wrap .tab-cont .tabPlanning .centerContentMain .btn-wrapper {
        text-align: center
    }

    .twl-tabs .service-list-wrap .tab-cont .tabPlanning .centerContentMain .btn-wrapper .btn-default {
        width: 100%;
        padding: 1rem
    }

    .twl-tabs .service-list-wrap .tab-cont {
        padding: 0
    }

    .twl-tabs .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap {
        padding: 0;
        margin-bottom: 3rem
    }

    .twl-tabs .special-wrapper {
        padding: 0 18px
    }

    .twl-tabs .special-wrapper .special-title .title-inner {
        font-size: 2.4rem;
        line-height: 3.2rem
    }

    .twl-tabs .special-wrapper .special-inner-wrap .special-cards {
        padding: 2.4rem 2.4rem;
        margin-top: 2rem
    }

    .twl-tabs .special-wrapper .special-inner-wrap .special-cards .hl-box {
        padding: .8rem 18px
    }

    .twl-tabs .apply-btn p {
        font-size: 1.8rem;
        line-height: 2.2rem
    }

    .sme-tabs .service-list-wrap .tab-cont .tabPlanning .charge-warp {
        padding: 0 2.4rem;
        column-gap: 2rem;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .sme-tabs .service-list-wrap .tab-cont .tabPlanning .charge-warp .charge-content {
        width: 100%
    }
}

@media only screen and (max-width:576px) {
    .tabPlanning .aboutloanbenefits .benefits .partTab {
        margin-left: 0
    }

    .tabPlanning .aboutloanbenefits .benefits .partTab h3 {
        margin-top: 1rem
    }

    .twl-tabs .service-list-wrap .tab-cont .tabPlanning .centerContentMain {
        text-align: center;
        padding: 1.2rem 1.2rem 2.4rem 1.2rem
    }

    .twl-tabs .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap .btn-wrapper .btn-primarysmall {
        width: 100%;
        margin-right: 0;
        margin-bottom: 1.5rem
    }

    .twl-tabs .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap .btn-wrapper .btn-outlinesmall {
        width: 100%
    }

    .twl-tabs .tabPlanning .hf-calculater-wrap .hf-calculater-emi-wrap {
        padding: 1.5rem
    }

    .sme-tabs .service-list-wrap .tab-cont .tabPlanning .hf-calculater-wrap .hf-calculater-img-wrap {
        padding: 1rem
    }

    .sme-tabs .service-list-wrap .tab-cont .tabPlanning .rate-charges table tbody tr th {
        padding: 1rem 0 1rem 1rem
    }

    .sme-tabs .service-list-wrap .tab-cont .tabPlanning .rate-charges table tbody tr td {
        padding: 1rem 0 1rem 1rem
    }

    .sme-tabs .service-list-wrap .tab-cont .tabPlanning .rate-charges {
        margin: .9rem
    }

    .sme-tabs .service-list-wrap .tab-cont .tabPlanning .charge-warp {
        padding: 18px
    }
}

@media only screen and (max-width:414px) {
    .calculeter-wrap .cp-chart .btn-default {
        padding: 1.2rem 3rem
    }

    .calculeter-wrap .cp-chart .btn-default {
        padding: 1.2rem 3rem
    }

    .twl-tabs .service-list-wrap .service-list .service-list-item {
        padding: 1rem .8rem
    }
}

@keyframes fadein {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadein {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadein {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadein {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadein {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}


.calculeter-wrap .cp-chart .btn-default {
  
    font-size: 14px;
}
.calculeter-wrap .cp-chart .btnwhite-small {
    color: #fff;
}

.btn-default {
    display: inline-block;
    text-align: center;
    padding: 8px 35px !important;
    margin: 0;
    border: 0;
    outline: 0;
    cursor: pointer;
    vertical-align: top;
    text-decoration: none;
    border-radius: 1.6rem;
    line-height: 1.8rem;
    color: #fff;
    background-color: #2180c2;
    transition: all .3s ease-in-out;
}
@media only screen and (max-width: 1199px){
.calculeter-wrap .cp-calculator .range-wrap .goal-wrap .goal-title {
    font-size: 14px;
    line-height: 19px;
    
}
}
@media only screen and (min-width:320px) and (max-width: 768px){
    .hf-calculater-emi-wrap h3{
        text-align: center;
        margin-bottom: 20px;
    }
    .calculeter-wrap .cp-calculator .range-wrap .goal-wrap .goal-title{
        margin-bottom: 8px;
    }
    .hf-calculater-wrap .hf-calculater-emi-wrap{
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .calculeter-wrap .cp-calculator .range-wrap .goal-wrap{
        display: block !important;
        text-align: center;
    }
    .twl-tabs .calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap,.twl-tabs .calculeter-wrap .cp-calculator .range-wrap .goal-wrap .input-wrap.years,.calculeter-wrap .cp-calculator input{
        width: 100%;
    }
}