.bottom-form {background-color:#f5f5f5; font-size:14px; }
.bottom-form .green {color:#6f9e22}
.bottom-form .col-2 input[type="text"] {
    padding:12px 10px; font-size:18px; 
}
.bottom-form .title {font-size:18px; margin-bottom:10px;}
.bottom-form .sum {font-size:36px; white-space:nowrap; margin-bottom:20px; font-weight:bold;}
.bottom-form .sum span.rub {font-size:18px;}
.calc-btn {
    border-radius: 5px;
    font-size: 18px;
    font-family: "Cuprum";
    color: white;
    font-weight: bold;
    line-height: 1.125;
    text-shadow: 0px 2px 0px rgba(0, 1, 1, 0.15);
    text-transform: uppercase;
}
.calc-btn.btn-blue {
    background-image: -moz-linear-gradient( 90deg, rgb(2,98,139) 0%, rgb(77,156,189) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(2,98,139) 0%, rgb(77,156,189) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(2,98,139) 0%, rgb(77,156,189) 100%);
}
.calc-btn.btn-green {
    background-image: -moz-linear-gradient( 90deg, rgb(103,152,32) 0%, rgb(138,178,43) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(103,152,32) 0%, rgb(138,178,43) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(103,152,32) 0%, rgb(138,178,43) 100%);
}
.bottom-form .col-3 input {
    margin-bottom:30px;
    width: 248px;
    height: 46px;
    max-width:100%;
}
.bottom-form .payinfo {color:#373737; opacity: 0.5; line-height:18px}
.bottom-form .agree {color:#7c7c7c; opacity: 0.5; line-height:18px; margin-bottom:0px; position:relative; cursor: pointer; margin-top:20px; font-size:12px; font-weight:normal;}
/*.bottom-form .agree:before {
display:block; position: absolute;
width: 16px; height: 16px; content: ''; left:0; top:0;
background: url('https://zalogkvartir.com/templates/mksmedia/img/slider-chbx.png') no-repeat 0 0;
}
.bottom-form .agree input {display:none;}
.bottom-form .agree.active:before {
    background-position-x: -18px;
}*/

.home_loan_calculate .object {border:1px solid #d1d1d1; border-radius: 5px; display:flex;   background-color:#f5f5f5;}
.home_loan_calculate .object > div {}
.home_loan_calculate .object .name {font-weight:bold; white-space:nowrap; background-color:white; border-radius: 5px 0 0 5px; padding:12px 24px;}
.home_loan_calculate .object .labels {padding:12px 36px;}
.home_loan_calculate .object label {margin-bottom:0px; margin-right:45px; font-weight:normal; position:relative; padding-left:35px; cursor: pointer;}
.home_loan_calculate .object label:before {
display:block; position: absolute; 
width: 20px; height: 20px; content: ''; left:0; top:2px;
background: url('../img/slider-radio.png') no-repeat -22px 0;
}
.home_loan_calculate .object label.active:before {
    background-position-x: 0;
}
.home_loan_calculate .object .labels input[type="radio"] {display:none;}

.home_loan_calculate .one-block .t { margin-bottom:20px; font-size:18px; font-weight:bold;}
.home_loan_calculate .one-block .t1 > span {font-size:14px; color:#7b7b7b; margin-top:5px; padding-top:15px; display:inline-block; background: url('../img/slider-line.png') no-repeat 0 0;}
.home_loan_calculate .one-block .t1 span.to {float:right; background-position-x: 100%; text-align:right;}

.home_loan_calculate .one-block input[type="text"] {
    width: auto;
    font-size: 24px;
    color: #7e9d33;
    text-align: center;
}
.home_loan_calculate .one-block input[type="text"].smalls {width:70px;}
.home_loan_calculate .one-block .and {margin:0 15px;}
.home_loan_calculate .one-block .t2 span {font-size:18px; font-weight:bold; }


.ui-widget-content {border: 0; background: #7b9932; }
.ui-slider-horizontal {height: 6px;}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    width: 28px;
    height: 28px;
    background: url("../img/slider-dot.png") no-repeat center/contain;
    border: 0;
}
.ui-slider-horizontal .ui-slider-handle {top: -11px; margin-left: -14px; cursor: pointer;}
.ui-widget-header {
    border: 0;
    background: #d1d1d1;
    color: #fff;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.5);
}

@media (min-width: 1024px) {
    .bottom-form {display:flex; justify-content: space-around; padding:30px 40px; border-radius: 5px; }
    .bottom-form .col-1, .bottom-form .col-3 {width:24%;}
    .bottom-form .col-2 {width:50%;}
    .bottom-form .col-2 .flex {display:flex; justify-content: space-between;}
    .bottom-form .col-2 .flex > div {width:48%;}
    .bottom-form .col-3 {text-align:right; padding-top:13px;}
    .home_loan_calculate .object {margin-top:40px; margin-bottom:50px;}
    .home_loan_calculate .one-block {display:flex; justify-content: space-between; margin-bottom:40px;}
    .home_loan_calculate .one-block .t1 {width:calc(100% - 330px);}
    .home_loan_calculate .one-block .t2 {padding-top:18px; width:300px;}
    .mobile-only {display:none;}
}
@media (min-width: 845px) AND (max-width: 1407px) {
    .home_loan_calculate .object {font-size:16px;}
    .home_loan_calculate .object label {margin-right:20px;}
    .bottom-form {padding:20px;}
    .bottom-form .col-2 {width:45%;}
}
@media (max-width: 1023px) {
    .bottom-form {padding:15px; margin:0 -15px;}
    .bottom-form input[type="button"] {display:none;}
    .bottom-form .flex-mob {display:flex; justify-content: space-between}
    .bottom-form .flex-mob div:first-child {text-align:left;}
    .bottom-form .title {font-size:16px;}
    .bottom-form .sum {font-size:24px; margin-bottom:10px;}
    .bottom-form .payinfo {margin-bottom:10px;}
    .bottom-form .agree {margin:10px 0;}
    .bottom-form .col-3 {text-align:center; width:100%;}
    .home_loan_calculate .one-block {margin-bottom:20px;}
    .home_loan_calculate .object {display:block; background-color:#f5f5f5; font-size:16px; cursor: pointer; margin:10px 0 20px;}
    .home_loan_calculate .object .name {text-align:center; background: url('../img/slider-arrow-bottom.png') no-repeat calc(100% - 20px) center; padding:10px 0;;}
    .home_loan_calculate .object:not(.active) .labels {display:none;}
    .ui-slider-horizontal .ui-slider-handle {top: -7px; margin-left: -9px; }
    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
        width: 20px;
        height: 20px;
        background-size: 100%;
    }
    .desktop-only {display:none;}
}







.graphic {padding:30px}
.graphic, #graphics {display:none}
.graphic .title {position:relative; white-space:nowrap; font-weight:bold;}
.graphic .title-graph {font-size:28px; display:inline-block; text-transform: uppercase;}
.graphic .sravnit {
    font-size: 12px;
    padding: 7px 14px;
    font-weight: normal;
}
.graphic .nums {
    margin: 10px 0 20px;
    border: 1px solid #ccc;
    padding: 6px 12px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.graphic .nums > span {font-size:14px; color:#6c6f76; margin-right:20px; font-weight:bold; white-space:nowrap;}
.graphic .nums > span span {font-size:14px; color:#03638f}
#graphic-sravnit td:first-child {width: 100px}

.graphic table {empty-cells:show; border-collapse:collapse; width:100%; border-radius: 0px;}
.graphic table, .graphic table tr, .graphic table td, .graphic table th, .graphic table tbody {border:0}
.graphic table td, .graphic table th {padding: 10px 10px 10px 18px; vertical-align: top; font-size:12px; color:#444}
.graphic table th {font-weight:bold; font-weight:normal;}
.graphic table tr:nth-child(odd) {background-color:#fcfeff; }
.graphic table tr.head {border-radius: 5px; background-color:rgb(56,132,179); }
.graphic table tr.head th {color:white}
#graphic-sravnit tr td:first-child {position:relative;}
#graphic-sravnit tr td:first-child span {cursor: pointer; font-weight:bold;; font-size:12px; color: #3e93bb; text-decoration:underline; position:absolute; left: 60px}
.graphic table td span[style] {display:inline-block; background-color: rgb(251,224,150); height: 22px; width: 14px; float: right; margin: -4px 0;}
.graphic table td:nth-child(3) span {background-color:rgb(175,196,140);}
.graphic table td:nth-child(5) span {background-color:rgb(155,193,217);}
.graphic .table-outer {overflow-x:hidden; overflow-y:auto; max-height:500px;}


@media (max-width: 1024px) {
    .graphic {padding:30px 15px}
}

@media (min-width: 640px) AND (max-width: 1024px) {
    .graphic .title-graph {font-size:24px; padding-left:30px;}
    .graphic .title-graph:before {width: 25px; height: 19px;  top: 5px;}
    .graphic .sravnit {top: 6px}
}
@media (max-width: 800px) {
    .graphic .title-graph {font-size:20px; padding-left:30px;}
    .graphic .title-graph:before {width: 23px; height: 17px;  top: 3px; background-size:100%;}*/
    .graphic .nums {margin-top:15px; text-align:center;}
    .graphic .sravnit {float:none; margin-top:10px;}
    .graphic .table-outer {overflow-x: auto;}
    .graphic .nums {display:block}
}
@media (max-width: 700px) {
    .graphic .title {white-space:normal}
}