/* Chart JS */
@keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}
/* Chart JS */
.loan-tool-block *{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;text-rendering: geometricPrecision}
	html * {
    -webkit-font-smoothing: antialiased!important;
    -moz-osx-font-smoothing: grayscale;
}
.loan-tool-block canvas#chart-area{position:relative;
z-index:1;
}
.loan-tool-block input[type=radio] {
    margin: 0;
    font-size: 1.1em;
    font-weight: 500;
    cursor: pointer;
}
.irs--round .irs-from, .irs--round .irs-to, .irs--round .irs-single, .irs--round .irs-bar {
    background-color: #444C59;
}
.irs--round .irs-handle{
	
	border-color: #444C59;
}
.irs--round .irs-from:before, .irs--round .irs-to:before, .irs--round .irs-single:before{
	
	border-top-color: #444C59;
}
.loan-tool-block input, .loan-tool-block textarea, .loan-tool-block keygen, .loan-tool-block select, .loan-tool-block button {
    text-rendering: auto;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    margin: 0;
   
}
.loan-tool-block a {
    text-decoration: none;
    color: #444c59;
}
.loan-tool-block btn-medium {
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}
.loan-tool-block .input-group {
  position: relative;
}
.loan-tool-block .input-group .calc-input {
  padding-right: 22px !important;
}
.loan-tool-block .input-group .calc-input.mlg {
  padding-right: 32px !important;
}
.loan-tool-block .input-group .unit {
  position: absolute;
  right: 6px;
  top: 0;
  font-size: 14px;
  height: 34px;
  line-height: 34px;
  color: #838790;
  width: auto;
}
.loan-tool-block .input-group .unit::before,
.loan-tool-block .input-group .unit::after {
  display: none;
}
.loan-tool-block .btn-primary{text-align:center;width:100%}

.loan-tool-block .btn-primary{display:inline-block;margin:0 auto;cursor:pointer;font-size:12px !important;padding:0 20px;vertical-align:middle;}
.loan-tool-block .btn-large{height:50px;line-height:50px}
.loan-tool-block .btn-medium{height:40px;line-height:40px}
.loan-tool-block .btn-black{color:#fff;background:#30333a}
.loan-tool-block .btn-black-outline{color:#30333a;background:0 0;border:1px solid rgba(48,51,58,.314)}
.loan-tool-block .btn-black-outline:hover{color:#fff;background:#30333a}.btn-red{color:#fff;background:#c72528}.btn-red:hover{color:#fff;background:rgba(199,37,40,.86)}
.loan-tool-block .tool-box{width:100%}

.loan-tool-block .header{
    font-size:16px;
    font-weight:400;
    color:rgba(68,76,89,.86);
    margin-bottom:25px
}
.tool-box{
    display:flex;
    border-radius:2px;
    border:4px solid #f4f4f4
}
.tool-box .col{
    padding:30px;
    width:50%;
    float:left
}
.box-left .row{
    width:100%;
    display:flex;
    flex-flow:column nowrap;
    position:relative
}
.box-left .row .label{
    display:block;
    width:100%;
    font-size:14px;
    color:rgba(68,76,89,.7)
}
.box-left .row .calc-wrapper{
    display:flex;
    flex-flow:row nowrap;
    justify-content:center;
    align-items:center;
    margin-bottom:10px
}
.box-left .row .calc-wrapper .range{
    display:block;
    width:calc(100% - 95px);
    float:left
}
.box-left .row .calc-wrapper .range input[type=range]::-webkit-slider-thumb{
    height:24px;
    width:24px;
    border-radius:50%;
    border:3px solid #444c59;
    background:#fff;
    cursor:pointer;
    -webkit-appearance:none
}
.box-left .row .calc-wrapper .range .calc-slider{
    display:block;
    visibility:visible;
    -webkit-appearance:none;
    width:100%;
    height:5px;
    border-radius:2px;
    outline:0;
    -webkit-transition:.2s;
    transition:opacity .2s;
    background-image:linear-gradient(90deg,rgba(68,76,89,1) 0,rgba(68,76,89,1) 50%,rgba(131,131,131,.15) 50%)
}
.box-left .row .calc-wrapper .input-group{
    display:block;
    width:75px;
    height:36px;
    margin-left:20px;
    float:left;
    border-radius:2px;
    border:1px solid rgba(131,131,131,.3)
}
.box-left .row .calc-wrapper .input-group .calc-input{
    height:100%;
    width:100%;
    display:block;
    visibility:visible;
    border:0;
    outline:0;
    font-size:14px;
    padding:10px
}
.box-left .row .calc-wrapper .dropdown{
    width:calc(100% - 95px);
    float:left;
    position:relative
}
.box-left .row .calc-wrapper .dropdown .link{
    width:100%;
    display:block;
    height:36px;
    line-height:36px;
    padding:0 10px;
    border:1px solid rgba(131,131,131,.3)
}
.box-left .row .calc-wrapper .dropdown .link .zmdi{
    float:right;
    font-size:18px;
    color:#444c59;
    padding:0;
    line-height:36px
}
.box-left .row .calc-wrapper .dropdown .dropdown-list{
    display:none;
    position:absolute;
    top:100%;
    right:0;
    width:100%;
    z-index:10;
    background:#fff;
    padding:10px 0;
    border:1px solid rgba(131,131,131,.3)
}
.box-left .row .calc-wrapper .dropdown .dropdown-list li{
    height:40px;
    line-height:40px;
    padding:0 10px
}
.box-left .row .calc-wrapper .dropdown .dropdown-list li:hover{
    background:#f3f4f7
}
.box-left .row .option-group{
    margin-top:20px;
    margin-bottom:30px;
    display:flex
}
.box-left .row .option{
    width:50%;
    margin-right:15px
}
.box-left .row .option:last-child{
    margin-right:0
}
.box-left .row .option input[type=radio]{
    width:14px;
    height:14px;
    float:left;
    display:block;
    visibility:visible;
    position:relative;
    -webkit-appearance:none!important;
    -moz-appearance:none !important;
    background:0 0!important;
	
	
}

.box-left .row .option input[type=radio]:focus{
    border:0!important;
    outline:0!important
}
.box-left .row .option input[type=radio]::before{
    display:inline-block;
	position:absolute;
    content:"";
    width:14px;
    height:14px;
    background:#fff;
    border:2px solid #444c59;
    border-radius:50%;
    box-sizing:border-box;
	top:-1px;
	left:-1px;
}
.box-left .row .option input[type=radio]::after{
    display:inline-block;
    content:"";
    width:6px;
    height:6px;
    position:absolute;
    top:3px;
    left:3px;
    border-radius:50%
}
.box-left .row .option input[type=radio]:checked::after{
    background:#444c59
}
.box-left .row .option label{
    padding:0 0 0 15px;
    display:block;
    width:calc(100% - 14px);
    float:left;
    line-height:1.3;
    font-size:14px;
    color:#444c59
}
.box-left .row>a{
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:10;
    display:none;
    height:100%
}
.box-left .row .option label::before{
    display:none
}
.box-left .row .btn-primary{
    margin:0;
    max-width:100%
}
.box-left .row .calc-wrapper .input-group .calc-input:focus,.box-left .row .calc-wrapper .range .calc-slider:focus{
    border:0!important;
    outline:0
}
.box-right{
    background:#f3f4f7
}
.box-right h2{
    font-size:20px;
    font-weight:500;
    color:#30333a;
    margin-bottom:20px;
    display:block
}
.box-right .chart-box{
    display:flex;
    position:relative;
    width:100%;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
    padding-top:30px;
    border-top:1px solid rgba(48,51,58,.2)
}
.box-right .chart-box .chart-description{
    position:relative;
    justify-content:space-between;
    width:50%;
    padding-left:30px
}
.box-right .chart-box .chart-description .chart-legend{
    display:flex;
    flex-flow:column nowrap;
    justify-content:flex-start;
    margin-bottom:15px
}
.box-right .chart-box .chart-description .chart-legend:last-child{
    margin-bottom:0
}
.box-right .chart-box .chart-description .chart-legend .label{
    font-size:14px;
    color:rgba(68,76,89,.7);
    height:14px;
    line-height:14px
}
.box-right .chart-box .chart-description .chart-legend .value{
    font-size:14px;
    font-weight:600
}
.box-right .chart-box .chart-description .chart-legend .value.color1{
    color:#6975c8
}
.box-right .chart-box .chart-description .chart-legend .value.color2{
    color:#4ab5c1
}
.box-right .chart-box .chart-description .chart-legend .value.color3{
    color:#ce68a5
}
.box-right .chart-box .chart1{
    width:50%;
    position:relative
}
.box-right .chart-box .chart1 .estimate{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    text-align:center
}
.box-right .chart-box .chart1 .estimate .estimate-value{
    font-size:30px;
    font-weight:600;
    color:#30333a;
    line-height:.7
}
.box-right .chart-box .chart1 .estimate .estimate-value span{
    font-size:20px;
    font-weight:500;
    display:block;
    margin-top:10px
}
.box-right .total-pay{
    padding:25px 0;
    border-top:1px solid rgba(48,51,58,.2);
    border-bottom:1px solid rgba(48,51,58,.2)
}
.box-right .total-pay .inner{
    display:flex;
    position:relative;
    width:100%;
    justify-content:space-between;
    align-items:center
}
.box-right .total-pay .inner .label{
    max-width:90px;
    font-size:14px;
    line-height:1.3;
    color:rgba(48,51,58,.7);
    margin-right:10px
}
.box-right .total-pay .inner .value{
    font-size:30px;
    color:#30333a
}
.box-right .down-payment{
    display:flex;
    flex-flow:row wrap;
    margin-top:25px
}
.box-right .down-payment .btn-primary{
    max-width:100%;
    border:0;
    outline:0;
    font-size:14px;
    font-weight:400;
    margin-bottom:25px
		padding-top:10px !important;
}
.box-right .down-payment .btn-primary:link{
	color:#ffffff;
}
/*
.box-right .down-payment a{
    color:rgba(51,117,136,.86);
    margin-bottom:15px;
    font-size:14px;
    height:20px;
    line-height:20px;
    vertical-align:unset;
    display:flex;
    align-items:baseline
}
*/
.box-right .down-payment a:last-child{
    margin-bottom:0
}
.box-right .down-payment a .zmdi{
    padding-right:8px;
    font-size:18px
}

.form-info {
    padding: 25px;
}
.form-msg{
    margin: 10px 0 16px 0 !important;
    text-align: center;
}
@media only screen and (max-width:1024px){
	
	.box-right .chart-box .chart1,  .box-right .chart-box .chart-description{
    width:100%;
	}
}
@media only screen and (min-width:320px) and (max-width:768px){
    .tool-box{
        flex-flow:column nowrap
    }
    .tool-box .col{
        width:100%
    }
    .box-left .row .btn-primary{
        margin:0 auto
    }
    .box-right h2{
        display:none
    }
    .box-right .chart-box{
        flex-flow:column-reverse nowrap;
        border:0;
        padding-top:0;
		
    }
	
    .box-right .chart-box .chart1{
        margin-bottom:30px;
        order:1
    }
    .box-right .chart-box .chart-description{
        width:100%;
        display:flex;
        flex-flow:row wrap;
        padding:0
    }
    .box-right .chart-box .chart-description .chart-legend{
        width:50%;
        flex-flow:row wrap;
        padding-right:30px;
        align-items:center
    }
    .box-right .chart-box .chart-description .chart-legend .label{
        padding-right:10px
    }
    
}
@media only screen and (min-width:320px) and (max-width:375px){
    .box-right .chart-box .chart-description .chart-legend{
        width:100%;
        padding:0;
        justify-content:space-between
    }
    .box-right .chart-box .chart1{
        width:65%
    }
}
@media only screen and (min-width:320px) and (max-width:480px){
    .tool-box .col{
        padding:30px 20px
    }
    .box-left .row>a{
        display:block
    }
    .box-left .row .option input[type=radio]::after{
        top:3px
    }
    .box-left .row .btn-primary{
        max-width:100%
    }
    .box-right{
        display:none
    }
    .box-right .down-payment a{
        width:100%;
        margin-bottom:10px
    }
}

@media only screen and (max-width: 1024px) and (min-width: 320px) {
.render-chart {
    width: 100% !important;
}
}
/* Custom CSS Mobile */
@media (max-width: 549px)
{
	.box-right{
		
		display:none;
	}

}

#tblChiTiet table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
#tblChiTiet table tr:nth-of-type(odd) { 
  background: #eee; 
}
#tblChiTiet table th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
#tblChiTiet table td, #tblChiTiet table th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: center; 
}