{# GENERAL #}
.mortgage-calculator{
	display: flex;
	flex-direction:column;
	gap:40px;
}

{# FORM CONTAINER #}
.mortgage-calculator--box-shadow{
	box-shadow: 0px 4px 16px 0px rgba(17, 17, 26, 0.05), 0px 8px 32px 0px rgba(17, 17, 26, 0.05);
}
.mortgage-calculator__calculator-container{
	display:grid;
	grid-column-gap: 4%;
	grid-row-gap: 40px;
	grid-template-columns: 58% 38%; 
	grid-auto-rows: max-content;
	justify-content: space-between;
}

{# RESULTS CONTAINER #}
.mortgage-calculator--gradient{
	background: radial-gradient(149.32% 125.6% at 74.23% -1.32%, rgba(91, 127, 149, 0.80) 0%, rgba(148, 183, 187, 0.40) 100%);
}
.mortgage-calculator__result-container{
	padding: 12px 24px;
}
.mortgage-calculator__total-container{
	padding:24px;
}
.mortgage-calculator__results{
	display: flex;
	flex-direction:column;
}
.mortgage-calculator__result-label,
.mortgage-calculator__result{
	margin:0;
}
.mortgage-calculator--error{
	color:var(--complementary);
}
.mortgage-calculator__result-title,
.mortgage-calculator__result-description,
.mortgage-calculator__result-description *,
.mortgage-calculator__result-bottom-description,
.mortgage-calculator__form-bottom-description,
.mortgage-calculator__form-bottom-description *,
.mortgage-calculator__result-bottom-description *{
	margin:0;
}

.mortgage-calculator__divider{
	height: 2px;
	width: 100%;
	border: none;
	margin: 0;
}
.mortgage-calculator__form-title{
	margin-bottom:30px;
}
{# TABLE #}

.mortgage-calculator--box-shadow-3{
	box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.20);
}
.mortgage-calculator__table-titles  .mortgage-calculator__table-cell{
	padding: 8px 8px;
}
.mortgage-calculator__mortgage-table-container{
	border-radius:8px;
	overflow:hidden;
}
.mortgage-calculator__mortgage-table-container tfoot td{
	text-align:center;
	margin:24px 0 0;
	color:var(--tertiary);
	font-size:12px;
	font-weight:700;
}
.mortgage-calculator__mortgage-bottom-text{
	padding:0;
	margin-top:24px;
}
.mortgage-calculator__mortgage-bottom-text *{
	margin:0;
}
.mortgage-calculator__mortgage-table-container table{
	width:100%;
	margin-bottom:0;
}
.mortgage-calculator__mortgage-table-container table,
.mortgage-calculator__mortgage-table-container table *{
	border:none;
}
.mortgage-calculator__mortgage-table-container table tbody td{
	width:25%;
}
.mortgage-calculator__mortgage-table-container table tbody th.tick{
	width:49%;
}
.mortgage-calculator__mortgage-table-container table thead th:not(:last-child),
.mortgage-calculator__mortgage-table-container tbody > tr > *:not(:last-child){
	border-right: solid 2.5px #fff;
}

{# FORM FIELDS #}
.mortgage-calculator__form{
	display: flex;
	flex-direction:column;
}
.mortgage-calculator__field{
	display: flex;
	flex-direction:column;
}
{#***************** DOWN PAYMENT BAR **********************#}
.mortgage-calculator__down-payment-amount{
	margin-bottom:20px;
}
.mortgage-calculator__down-payment{
	padding: 0;
	border:none;
}
.mortgage-calculator__down-payment-count{
	margin-top:12px;
}
.mortgage-calculator__down-payment {
	-webkit-appearance: none;
	width: 100%;
	height: 15px;
	border-radius: 100px;
	outline: none;
	opacity: 0.9;
	-webkit-transition: .2s;
	transition: opacity .2s;
}
.mortgage-calculator__down-payment:hover {
  opacity: 1;
}
.mortgage-calculator__down-payment::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  filter: drop-shadow(0px 8px 24px rgba(0, 0, 0, 0.12));
  background-size: 45%;
  background-position: center;
  background-repeat: no-repeat;
}
.mortgage-calculator__down-payment::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  filter: drop-shadow(0px 8px 24px rgba(0, 0, 0, 0.12));
	border: none;
  background-size: 45%;
  background-position: center;
  background-repeat: no-repeat;
}

{#***************** STICKY **********************#}
.mortgage-calculator--sticky{
	position:absolute;
	z-index:100;
	transition:none;
}
.mortgage-calculator--sticky .mortgage-calculator__calculator-container{
	grid-template-columns: 1fr;
	position:relative;
	border-radius:10px;
}
.mortgage-calculator--sticky .mortgage-calculator__results-container{
	display:none;
}
.mortgage-calculator--sticky .mortgage-calculator__form-title{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap:5px;
	margin:0;
}
.mortgage-calculator--sticky-open{
	display: flex;
	cursor:pointer;
}
.mortgage-calculator--sticky-open > svg{
	transition:all .3s ease;
}
.mortgage-calculator__is-sticky{
	position:fixed;
	top:0px!important;
}
.mortgage-calculator--sticky-form{
	display:none;
}
.mortgage-calculator--sticky-show{
	height:100%;
}
.mortgage-calculator--sticky-show .mortgage-calculator--sticky-form{
	display:block;
}
.mortgage-calculator--sticky-show .mortgage-calculator__form-title{
	margin-bottom:20px;
}
.mortgage-calculator--sticky-show .mortgage-calculator--sticky-open > svg{
	transform: rotate(180deg);
}
.mortgage-calculator--sticky-show .mortgage-calculator__calculator-container{
	overflow:auto;
}
.mortgage-calculator--show-results .mortgage-calculator__form-container{
	display:none;
}
.mortgage-calculator--show-results .mortgage-calculator__results-container{
	z-index:100;
	display:block;
}
.mortgage-calculator--sticky .mortgage-calculator__result-title{
	display: flex;
	justify-content: space-between;
	margin-bottom:20px;
}
.mortgage-calculator--sticky-close-results{
	color:var(--tertiary);
	font-size:17px;
	font-weight:700;
	cursor:pointer;
}
{#***************** END STICKY **********************#}

{#***************** SCROLL BAR **********************#}
.mortgage-calculator__mortgage-table-container::-webkit-scrollbar,
.mortgage-calculator--sticky-show .mortgage-calculator__calculator-container::-webkit-scrollbar{
	-webkit-appearance: none;
}
.mortgage-calculator__mortgage-table-container::-webkit-scrollbar:vertical,
.mortgage-calculator--sticky-show .mortgage-calculator__calculator-container::-webkit-scrollbar:vertical{
	width:10px;
}
.mortgage-calculator__mortgage-table-container::-webkit-scrollbar-button:increment,
.mortgage-calculator__mortgage-table-container::-webkit-scrollbar-button,
.mortgage-calculator--sticky-show .mortgage-calculator__calculator-container::-webkit-scrollbar-button:increment,
.mortgage-calculator--sticky-show .mortgage-calculator__calculator-container::-webkit-scrollbar-button{
	display: none;
} 
.mortgage-calculator__mortgage-table-container::-webkit-scrollbar:horizontal,
.mortgage-calculator--sticky-show .mortgage-calculator__calculator-container::-webkit-scrollbar:horizontal{
	height: 10px;
}
.mortgage-calculator__mortgage-table-container::-webkit-scrollbar-thumb,
.mortgage-calculator--sticky-show .mortgage-calculator__calculator-container::-webkit-scrollbar-thumb{
	background-color: var(--complementary);
	border-radius: 20px;
	border: 2px solid #f1f2f3;
}
.mortgage-calculator__mortgage-table-container::-webkit-scrollbar-track,
.mortgage-calculator--sticky-show .mortgage-calculator__calculator-container::-webkit-scrollbar-track{
	border-radius: 10px;  
}
.mortgage-calculator--mortgage-hidden{
	display:none;
}
.mortgage-calculator-editor{
	padding:10px;
	background-color:var(--complementary);
	text-align:center;
	color:#fff;
	margin-bottom:20px;
}
@media(min-width:766px){
	.mortgage-calculator:not(.mortgage-calculator--sticky) .mortgage-calculator__form-bottom-description{
		max-width:70%;
		margin:0 auto;
	}
}
@media(min-width:993px){
	.mortgage-calculator--hidden-desktop{
		display:none;
	}
}
@media(max-width:992px){
	.mortgage-calculator__calculator-container{
		grid-template-columns: 100%;
	}
	.mortgage-calculator--hidden-mobile{
		display:none;
	}
}
@media(max-width:425px){
	{#***************** SCROLL BAR **********************#}
	.mortgage-calculator__mortgage-table-container table{
		width:600px;
	}
	.mortgage-calculator__mortgage-table-container{
		overflow-x:scroll;
	}
}