@charset "utf-8";
:root {
	--defaultColor : #3BC96F;
	--defaultColorHover : #55E389;

}
/* CSS Document */
body{
	font-family: 'Montserrat', sans-serif;
	margin:0;
	padding:0;
	font-size:15px;
	color:#767676;
	background:transparent;
}
#home-value{
	min-width:320px;
	position:relative;
	overflow:hidden;
	font-size:1.0em;
	padding:0px 0px 0px 0px;
	background:transparent;
}
#lang-switch,#lang-controls,.colored .dd-title,.colored .dd-title-only,input[type="checkbox"]:checked + label span.styled-cbox:before,input[type="checkbox"]:checked + label span.styled-cbox:after,
.slider,.noUi-handle,.noUi-horizontal .noUi-tooltip{ background-color: var(--defaultColor); }
#lang-controls.en .lang.english,#lang-controls.sp .lang.spanish,#header h2,#header p,.dd-section,#get-location,.label.colored,.colored.non-edit,.editable,
.toggle-night,.slider-btn{ color: var(--defaultColor); }
.colored .dd-title:hover,.colored .dd-title.open:hover{ background-color:var(--defaultColorHover) }
::placeholder{ opacity:0.4; }
/* Header Banner +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#wholeHeader {
	display:block;
}
#header{
	max-width:768px;
	text-align:left;
	margin:0 auto;
	padding:20px 5px 15px;
  	font-size:1.0em;
	position:relative;
}
#header h2 {
	font-size:2.0em;
	margin:0;
	font-weight:700;
	text-align:left;
}
#header p {
	max-width:768px;
	font-size:1em;
	line-height:1.2em;
	margin: 10px 0;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
	border-radius: 12px;
	background-color:rgba(255,255,255,0.9);
}

#interactive{
	max-width:900px;
	margin:0 auto;
	position:relative;
    box-sizing:border-box;
	padding:0 5px 20px;
}

.dd-section{
	max-width:768px;
	min-height:50px;
	margin:0 auto 20px;
	box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
    border-radius: 12px;
	background-color:rgba(255,255,255,0.9);
	position:relative;
}
.dd-section.colored{
	color:white;
}
.dd-title,.dd-title-only{
	display:block;
	font-size:1.5em;
	padding-left:3%;
	padding-top:12px;
	padding-bottom:12px;
	border-radius:12px;
	text-transform:uppercase;
	position:relative;
	z-index:1;
	transition:0.3s;
}
.dd-title:hover{ background-color:#F2F2F2; cursor:pointer; }
.dd-title:after{
	font-family:"Font Awesome 5 Free";
	content: "\f107";
	font-weight: 600;
	font-size: 1.5em;
    position: absolute;
    right: 3%;
    top:50%;
	transition:0.3s;
	transform:scale(1) translateY(-50%);
}
.dd-title.open,.dd-title-only{
	border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin: 0 0 -20px;
}
.dd-title.open:hover{ background-color:#F2F2F2; }
.dd-title.open:after{ transform:scale(-1) translateY(50%); }
.dd-title:hover::after{ transform:scale(1.3) translateY(-40%); }
.dd-title.open:hover::after{ transform:scale(-1.3) translateY(40%); }
input[disabled], input[readonly],input[readonly]:focus-visible, fieldset[disabled] input {
	background-color: transparent;
	cursor: not-allowed;
	outline: none;
}

.input-value{
	display:none;
	color: #767676;
	background-color:transparent;
	box-sizing: border-box;
	border-bottom-left-radius:12px;
	border-bottom-right-radius:12px;
	margin:20px 0 0;
	padding:1px 0;
}

.iv-row{
	width:100%;
	box-sizing:border-box;
	display: inline-block;
	text-align:center;
	font-size:1.0em;
	margin:20px 0;
	position:relative;
}

.label{
	display:inline-block;
	font-size:1.1em;
	text-align:left;
	position:absolute;
	left:4%;
}
/* #section_same_total_payment .label{ font-size:1.4em; font-weight:bold; } */
/* #section_same_total_payment .label .infotip{ font-size:0.6em; top:-2px; } */

.label.colored{ text-transform:uppercase; font-size:1.3em; }
.non-edit,.cbox,.styled-cbox{
	padding: 5px;
	display:inline-block;
	font-size:1.6em;
	text-align:center;
	width: 100%;
	border: none;
	color: #767676;
	font-family: 'Montserrat', sans-serif;
}

.editable{
	width: 80%;
	font-family: inherit;
	background-color:rgba(227, 227, 227, 1);
	padding:5px;
	font-size:1.6em;
	text-align:center;
	text-decoration:none;
	vertical-align: middle;
	border:none;
	border-radius:5px;
	transition:0.2s;
	cursor:text;
	outline:none;
}
.editable:hover,.editable:focus{ background-color:rgba(227, 227, 227, 0.5); }
.editable:active{ border-color:#CDCDCD; }

.add-controller,.sub-controller{ transition:0.3s; }
.add-controller:hover,.sub-controller:hover{ opacity:0.7; cursor:pointer; }

/* .text-split{ clear:both; } */
/* .explain{ width:65%; text-align:left; margin-left:4.5%; margin-bottom:-10px; } */

span[rel~="tooltip"]{ cursor:pointer; }
.infotip{ /*color:#767676;*/ font-size:0.75em; position:relative; top:-0.75px; }
.label.colored .infotip{ font-size:0.64em; top:-1.5px; }

/* ###################### TOOLTIP ################################### */
[rel~="tooltip"]{ transition:0.3s; }
[rel~="tooltip"]:hover{ opacity:0.75; }
#tooltip
{
	max-width:360px;
    text-align: center;
    color: #fff;
    background: #767676;
    position: absolute;
    z-index: 100;
    padding: 15px;
	border-radius:12px;
	font-size:13px;
}

#tooltip:after /* triangle decoration */
{
	width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #767676;
	content: '';
	position: absolute;
	left: 50%;
	bottom: -9px;
	margin-left: -10px;
}

#tooltip.top:after
{
	border-top-color: transparent;
	border-bottom: 10px solid #767676;
	top: -19px;
	bottom: auto;
}

#tooltip.left:after
{
	left: 10px;
	margin: 0;
}

#tooltip.right:after
{
	right: 10px;
	left: auto;
	margin: 0;
}

/* ###################################################### @Aziz starts ############################################################# */

/* row container padding new */
 .row-container { width: 100%; padding: 10px 0px 0px 0px; }

.c-row { width: 100%; }
[class*="c-col-"] { float: left; box-sizing: border-box;}
.c-row::after { content: ""; clear: both; display: table; }

/* new column width */
.c-row .c-col-1 {width: 27.5%; }
.c-row .c-col-2 {width: 16%; }
.c-row .c-col-3 {width: 16.5%; }
.c-row .c-col-4 {width:16%;}
.c-row .c-col-5 {width: 24%;}

/* row for the new loan terms (includes APR) */
#section_new_loan_term .c-col-1 {width: 24.5%; }
#section_new_loan_term .c-col-2 {width: 30.5%; }
#section_new_loan_term .c-col-2 .editable{ width:100px; }
#section_new_loan_term .c-col-2 .non-edit{ width:107px; position:relative; top:5px; }
#section_new_loan_term .c-col-3 {width: 10%; }
#section_new_loan_term .c-col-4 {width:16%;}
#section_new_loan_term .c-col-5 {width: 19%;}

.c-txt-lt { text-align:left; }
.c-txt-rt { text-align:right; }
.c-txt-ct { text-align:center; line-height:0.75em; }
.c-align-center {margin: 0 auto; }
.c-align-right {float: right; }

/* add remove controller font size */
.add-sub-fs {font-size: 2em;}

/* editable input ki free space ko complete krne k liye */
.editable-inp-space {width: 20%;}

/* iv-row-sections */
.iv-row-left-section {width: 65%; float: left; margin-top: 1.4%}
/* .iv-row-left-section>span{margin-left: 7%; } */
.iv-row-right-section {width: 22%; float: right; position: relative;}
#section_annual_interest_savings .iv-row-right-section,#section_same_total_payment .iv-row-right-section{ width:31%; }

.years { display: inline-block; position : absolute; left: 66.5%; bottom: 26px;}
.years {height: 0%;}
div[class^="w-inline"] { display: inline-block;}
div[class^="w-inline"] .infotip { display: none;}

/* ###################################################### @Aziz ends ############################################################# */

/* ######################################################MEDIA QUERIES############################################################# */
@media only screen and (max-width : 768px) {
	#section_new_loan_term .c-col-1 { width:27.5%; }
	#section_new_loan_term .c-col-2 { width:16%; }
	#section_new_loan_term .c-col-2 .editable{ width:80%; }
	#section_new_loan_term .c-col-2 .non-edit{ width:90%; position:relative; top:5px; }
	#section_new_loan_term .c-col-3 { width: 16.5%; }
	#section_new_loan_term .c-col-4 { width:16%;}
	#section_new_loan_term .c-col-5 { width:24%;}
}
@media only screen and (max-width : 740px) {
	.dd-title,.dd-title-only,.editable,.non-edit {font-size: 1.4em;}
	.dd-section{min-height:49px; }

}
@media only screen and (max-width : 685px) {
	#header h2 {font-size: 1.8em !important;}
	#lang-controls {transform: scale(1.1) !important; top: 23px !important;}
	.dd-title,.dd-title-only,.editable,.non-edit,#section_new_loan_term .c-col-2 .non-edit {font-size: 1.3em;}
	.add-sub-fs {font-size: 1.5em !important;}
	.dd-section{min-height:48px; }
	.years{bottom: 24px;}
}
@media only screen and (max-width : 650px) {
	#header h2 {font-size: 1.6em !important;}
	#lang-controls {transform: scale(1) !important; top: 21px !important;}
	.dd-title,.dd-title-only,.editable,.non-edit,#section_new_loan_term .c-col-2 .non-edit {font-size: 1.2em;}
	.add-sub-fs {font-size: 1.3em !important;}
	.years {bottom: 22px;}
	.label,.c-txt-ct span,#tooltip,.years,.infotip {font-size: 0.86em;}
	.dd-section{min-height:46px; }
}
@media only screen and (max-width : 575px) {
	#header h2 {font-size: 1.38em !important;}
	.years {bottom: 19px; }
	#lang-controls {transform: scale(0.98) !important; top: 19px !important;}
	.dd-title,.dd-title-only,.editable,.non-edit {font-size: 1em;}
	.label,.c-txt-ct span,#tooltip,.years,.infotip {font-size: 0.7em;}
	.dd-section{min-height:43px; }
	#section_new_loan_term .c-col-2 .non-edit{ font-size:1em; top:3px; }
}
@media only screen and (max-width : 480px) {
	#header h2 {font-size: 1.1em !important;}
	#lang-controls {transform: scale(0.88) !important;  top: 17px !important;}
	.dd-title,.dd-title-only,.editable,.non-edit {font-size: 0.85em;}
	.label,.c-txt-ct span,#tooltip,.years,.infotip {font-size: 0.69em;}
	.add-sub-fs {font-size: 1.1em !important;}
	.dd-section{min-height:39px; }
	.c-row .infotip {display: none;}
	.iv-row div[class^="w-inline"] .infotip{ display: none !important;}
	.c-row div[class^="w-inline"] .infotip{ display: inline-block !important;}
	.c-row .w-inline-sp-loan-amount { width: 85%;}
	.c-row .c-col-1 {width: 25%; }
	.c-row .c-col-3 {width: 19%; }
	.years{ left:67.5%; bottom:18px; }
	#section_new_loan_term .c-col-2 .non-edit{ font-size:0.85em; top:1px; }
}
@media only screen and (max-width : 411px) {
	#header h2 {font-size: 0.95em !important;}
	#lang-controls {transform: scale(0.78) !important;  top: 15px !important;}
	.dd-title,.dd-title-only,.editable,.non-edit {font-size: 0.74em;}
	.add-sub-fs {font-size: 0.98em !important;}
	.dd-section{min-height:37px; }
	.c-row .w-inline-en-yearly-interest { width: 80%;}
	.c-row .w-inline-en-loan-amount { width: 75%;}
	.years{ left:68%; bottom:17px; }
	#section_new_loan_term .c-col-2 .non-edit{ font-size:0.74em; top:0; }
}
@media only screen and (max-width : 360px) {
	#header h2 {font-size: 0.8em !important;}
	#lang-controls {transform: scale(0.7) !important;  top: 13px !important;}
	.dd-title,.dd-title-only,.editable,.non-edit {font-size: 0.69em;}
	.add-sub-fs {font-size: 0.9em !important;}
	.dd-section{min-height:35px; }
	.c-row .w-inline-sp-yearly-interest { width: 80%;}
	.years{ left:69%; }
	#section_new_loan_term .c-col-2 .non-edit{ width:92%; font-size:0.69em; left:-3px; }
}