/* Ипотечный калькулятор */
.ipoteka .wrapper {padding:0;}
.ipoteka .iform {width:100%;padding:20px;border-radius:20px;background:#f6fafb;font-size:16px;}
.ipoteka .manager {
	display:grid;
	grid-template-areas:"name quote";
	grid-gap:50px;
	align-items:center;
	padding:20px;
	border-radius:20px;
	background:#fff;
}
.ipoteka .manager .photo {width:110px;height:110px;flex:none;border-radius:50%;overflow:hidden;background:#d6dfe6;padding-top:10px;}
.ipoteka .manager .photo img {width:100%;height:auto;}
.ipoteka .manager .name {grid-area:name;display:flex;align-items:center;gap:10px;}
.ipoteka .manager .name span{display:block;font-size:14px;}
.ipoteka .manager .name strong{display:block;font-weight:bold;font-size:16px;margin-bottom:5px;}
.ipoteka .manager .quote {grid-area:quote;}
.ipoteka .manager .quote strong{font-weight:bold;}
.ipoteka .manager .quote:before{
	content: '\201c';
	display:block;
	color:#c1dba9;
	font-size:60px;
	font-family: 'Times New Roman';
	height:1px;
	line-height: 50px;
	margin:0 0 0 -35px;
}
.ipoteka .fields {
	display:grid;
	grid-template-rows:min-content;
	grid-template-columns: 3fr 1fr 2fr;
	width:100%;
	grid-gap: 5px 15px;
	margin-top: 20px;
}
.ipoteka .fields > div, .ipoteka .fields > p {grid-column:1;}
.ipoteka .fields > p {font-size:16px;font-weight:bold;margin:5px 0;line-height:1;align-self:end;}
.ipoteka .fields > p:first-child {grid-column:span 3;}

.ipoteka .fields .select {
	grid-column:1/3;
	display:flex;
	flex-wrap:wrap;
	gap:5px;
	font-size:14px;
	margin-bottom:10px;
}
.ipoteka .fields .select span {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:10px;
	background:#fff;
	border-radius:10px;
	border:1px solid #ced4da;
	text-align:center;
	transition: background 0.5s, border-color 0.3s;
}
.ipoteka .fields .select strong {font-weight:bold;font-size:16px;color:#6bae07;}

.ipoteka .fields .select .checked {background:#6bae07;color:#fff;cursor:pointer;border-color:#6bae07;}
.ipoteka .fields .select .checked strong {color:#fff;}

@media (hover: hover) and (pointer: fine){
	.ipoteka .fields .select span:hover {background:#6bae07;color:#fff;cursor:pointer;border-color:#6bae07;}
	.ipoteka .fields .select span:hover strong{color:#fff;}
}

.ipoteka .fields .input {
	display: flex;
    align-items: center;
    padding: 0 10px;
	border-bottom-left-radius: 0!important;
    border-bottom-right-radius: 0!important;
    box-shadow: none;
    box-sizing: border-box;
    outline: none;
	background-color: #fff;
    border: 1px solid #d3d4d4;
	border-bottom: 0;
    border-radius: 15px;
    position: relative;
    vertical-align: middle;
	width: 100%;
	height: 52px;
}

.ipoteka .fields .input.i_active {border-color: #6bae07;}   
.ipoteka .fields .input.i_error {border-color: #f00;}

.ipoteka sup {font-size:10px;}

.ipoteka .fields .input input {
	background-color: transparent;
	border: 0;
	border-radius: 15px;
	box-shadow: none;
	box-sizing: border-box;
	color: #242629;
	font-size: 16px;
	outline: none;
	padding: 10px 0;
	text-overflow: ellipsis;
	width: 100%;    
}
.ipoteka .fields .house_info {font-size:14px;white-space:nowrap;hyphens:none;color:#6bae07;}
.ipoteka .fields .house_info .area{font-weight:bold;font-size:16px;}
.ipoteka .fields .house_info span:first-child{font-weight:bold;display:none;}

.ipoteka .fields .perc {font-weight:bold;font-size:16px;white-space:nowrap;hyphens:none;color:#6bae07;}

.ipoteka .slider {
	position: relative;
	width: 100%;
	height: 24px;
	border-radius: 0 0 15px 15px;
	padding:8px 0;
	margin:-8px 0 0;
}

.ipoteka .ui-widget-content {background:#efaf76;background-clip:content-box;}

.ipoteka .ui-slider-range {background:#6bae07;height:100%;padding:8px 0;background-clip:content-box;}

.ipoteka .ui-slider-handle {
	border: none; /* makes border-box ≡ padding-box */
	border-radius: 50%;
	box-shadow: 0 4px 4px rgba(0,0,0,.2);
	/*box-shadow: 0 .375em .5em -.125em #808080,inset 0 -.25em .5em -.125em #bbb;*/
	background:	linear-gradient(#fff, #fff) content-box,linear-gradient(#9bd445, #68a60a);
    padding:8px;
	width:24px;height:24px;
	position:absolute;
	top:0;left:0;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}
.ipoteka .limits {
    display:flex;
    justify-content: space-between;
    margin-top:5px;
	line-height: 20px;
	color: #5a5a5a;
    font-weight: normal;
    font-size: 14px;    
}

.ipoteka .points {display:grid;grid-template-columns:repeat(auto-fit, minmax(45px,1fr));gap:5px;margin-top:5px;}
.ipoteka .points span{background-color: #fff;border: 1px solid #d3d4d4;padding:7px 5px;border-radius:5px;text-decoration:underline;text-align:center;}
.ipoteka .points span:hover{text-decoration:none;cursor:pointer;}

.ipoteka .fields .details {
	grid-column:2;
	grid-row:4/9;
	display:flex;
	flex-wrap:wrap;
	background:	linear-gradient(#fff, #fff) content-box,linear-gradient(#d3d4d4, #d3d4d4) padding-box;
	border:8px solid #fff;
	padding:1px;
	border-radius: 15px;
	box-shadow: 0 4px 7px rgba(0,0,0,0.1);
	min-width: 200px;
}
.ipoteka .fields .details.i_error {background: linear-gradient(#fff, #fff) content-box,linear-gradient(#f00, #f00) padding-box;}
.ipoteka .fields .details div{padding:40px 0 0;flex-basis:100%;margin:10px 20px;background-position: -4px 0;background-repeat:no-repeat;background-size:42px;}
.ipoteka #i_house{background-image:url('img/01.png');}
.ipoteka #i_sum{background-image:url('img/02.png');}
.ipoteka #i_payment{background-image:url('img/03.png');}
.ipoteka .fields .details span{display:block;color:#6bae07;margin:5px 0;font-weight:bold;font-size:22px;white-space:nowrap;}
.ipoteka .fields .details sup{font-size:12px;}

.ipoteka .first .limits,
.ipoteka .years .limits {display:none;}
.ipoteka .years .points {grid-template-columns:repeat(auto-fit, minmax(60px,1fr));}

.ipoteka .fields .query {
	grid-column:3;
	grid-row:2/9;
	background:	linear-gradient(#fff, #fff) content-box,linear-gradient(#d3d4d4, #d3d4d4) padding-box;
	border:8px solid #fff;
	padding:1px;
	border-radius: 15px;	
	box-shadow: 0 4px 7px rgba(0,0,0,0.1);
	display:grid;
	grid-template-columns: 1fr;
	grid-template-rows: min-content;
}

.ipoteka .fields .query p {font-size: 26px;font-weight:bold;text-align: center;padding: 35px 15px 20px;}
.ipoteka .fields .query-form {padding:20px 15px;}
.ipoteka .fields .query-form .clear {clear: both;display:none;}
.ipoteka .fields .query-form .h6btnwrap {
    display: flex;
    flex-direction: column;
	align-items:center;
    gap: 20px 0;
    margin-top: 30px;
	text-align:center;
}
.ipoteka .fields .query-form .h6btnwrap .h6 {color:#787878;font-size:14px;padding:0 15%;}
.ipoteka .fields .query-form .h6btnwrap a {color:#599df1;}

@media only screen and (max-width:1200px) {
	.ipoteka .fields .query p {font-size: 22px;padding: 30px 15px 10px;}
}
@media only screen and (max-width:768px) {
	.ipoteka .section__form .wrapper {margin:0;width:100%;}
	
	.ipoteka .iform {padding: 15px;}
	
	.ipoteka .manager {grid-template-areas: "name" "quote";justify-items: center;grid-gap:30px;}
	.ipoteka .manager .photo {}
	.ipoteka .manager .name {}
	.ipoteka .manager .quote:before{height:30px;line-height: 50px;margin:-20px 0 0 0;}
	
	.ipoteka .fields {margin-top:20px;grid-gap:10px;}
	.ipoteka .fields > p {margin: 0;}
	
	.ipoteka .fields > div, 
	.ipoteka .fields > p,
	.ipoteka .fields .select,
	.ipoteka .fields .details,
	.ipoteka .fields .query {grid-column:span 3;grid-row:auto;}
	.ipoteka .fields .query > * {width:60%;margin: 0 auto;}
	
	.ipoteka .fields .query p {font-size:18px;padding:10px;}
	.ipoteka .fields .query-form {padding:0 0 15px;}
	
	.ipoteka .fields .details {
		display: grid;
		grid-template-columns: repeat(auto-fit,minmax(220px,1fr));        
		margin: 0;
	}
	.ipoteka .fields .details > div {padding:0 0 0 70px;background-position:0 center;background-size:auto;margin:20px;}
	.ipoteka .fields .details span {}
	
	.ipoteka .fields .query-form .h6btnwrap {margin-top: 7px;}	
}
@media only screen and (max-width:600px){
	.ipoteka .fields .query > * {width:70%;}
}
@media only screen and (max-width:500px){
	.ipoteka .fields .query > * {width:90%;}
	.ipoteka .fields .details div {margin:10px;font-size: 14px;padding: 0 0 0 50px;background-size:42px;}
	.ipoteka .fields .details span {margin:0;}
	.ipoteka .fields .house_info span:first-child{display:inline-block;}
	.ipoteka .fields .house_info span:nth-child(2){display:none;}
	.ipoteka .fields .slider-container {margin:0 10px;}
}

@media only screen and (min-width:1400px) {
	.ipoteka .wrapper {padding:0 50px;}
}

@media only screen and (min-width:1900px) {
	.ipoteka .wrapper {padding:0 120px;}
}