@charset "utf-8";
.chart,
.sliderText {
    text-align: center
}

.noselect {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.chart {
    width: 100%;
    min-width: 100%
}

@media (min-width:970px) {
    header .menu li.selected {
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAGCAIAAAB4jOjWAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEM2N0EwRDIwRjhDMTFFM0JBQTNBNUVFRTFGMjc2RDMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEM2N0EwRDMwRjhDMTFFM0JBQTNBNUVFRTFGMjc2RDMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowQzY3QTBEMDBGOEMxMUUzQkFBM0E1RUVFMUYyNzZEMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowQzY3QTBEMTBGOEMxMUUzQkFBM0E1RUVFMUYyNzZEMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Phh/aWQAAABASURBVHjaYvzaJM+ABFitM4Hk76PTkQVZ0FSwOpVD2MjqmLCqADIgRqIoQlaBqY4Jqwp0db/2dvzHC4AKAAIMAKHaMyp1j335AAAAAElFTkSuQmCC) center bottom no-repeat rgba(0, 0, 0, 0)
    }
    .chart.areaGraph {
        width: 90%;
        min-width: 90%;
        text-align: center
    }
}

@media (min-width:120px) and (max-width:360px) {
    #main .middleContainer .intro h1 {
        font-size: 20px
    }
    .chart.areaGraph {
        width: 98%;
        min-width: 98%;
        text-align: center
    }
    .chart.areaGraph svg {
        width: 100%;
        min-width: 100%
    }
    .icici .applyContainer {
        float: none;
        margin: 0 20%;
        width: 160px;
        margin-left: 27%;
    }
    .icici .homeOutputMargin {
        margin-left: 0;
        clear: both;
        margin-left: 9%;
        width: 100%;
    }
    .icici .inputPanel,
    .icici .outputPanel {
        width: 100%
    }
    .result-values .gu5 {
        width: 140px
    }
    .icici h3 {
        font-size: 13px
    }
    .graph-sub-title {
        font-size: 1em
    }
    .result-values .outAlignCenter {
        padding-right: 0;
        padding-top: 0
    }
    .icici .textBoxLoanAmount {
        font-size: 13px;
        margin-left: 14px;
        width: 96px
    }
    .wrapper .tooltip-left {
        width: 180px;
        left: -180px;
        bottom: -45%
    }
    .wrapper .tooltip {
        width: 180px;
        left: -70px
    }
    .icici .slider {
        width: 55%
    }
    .graphTitle .col h3 {
        margin-left: 13%;
        width: 100%;
    }
}

@media (min-width:361px) and (max-width:480px) {
    #main .middleContainer .intro h1 {
        font-size: 20px
    }
    .chart.areaGraph {
        width: 98%;
        min-width: 98%;
        text-align: center
    }
    .chart.areaGraph svg {
        width: 100%;
        min-width: 100%
    }
    .icici .applyContainer {
        float: none;
        margin: 0 82px;
        width: 160px
    }
    #homeLoanEMIEMIForm {
        float: left
    }
    #homeLoanEMIEMIForm .inputRow {
        width: 100%
    }
    #homeLoanEMIEMIForm .slider {
        padding: 5px;
        width: 56%
    }
    .icici .outAlignCenter {
        padding-right: 0;
        padding-top: 0
    }
    .icici .inputPanel,
    .icici .outputPanel,
    .icici .outputPanelContent {
        width: 100%
    }
    .icici .textBoxLoanAmount {
        margin-left: 17px
    }
    .icici .toolSize {
        width: 97%
    }
    .icici .slider {
        width: 60%
    }
    .wrapper .tooltip {
        left: -98px
    }
    .abc {
        margin-left: -10px;
    }

}


@media only screen and (max-width:480px) {
    .chart.areaGraph {
        width: 98%;
        min-width: 98%;
        text-align: center
    }
    .chart.areaGraph svg {
        width: 100%;
        min-width: 100%
    }
    .icici .slider {
        width: 48%
    }
    .icici .loanbox {
        width: 116px
    }
    .icici .homeLoanEMI {
        padding-left: 6px
    }
    .graphTitle .col h3 {
        font-weight: 700;
        font-size: 15px
    }
}

.graphTitle .col h3 {
    font-weight: 700
}

.graph-sub-title {
    margin: 10px;
    clear: both;
    display: block;
    padding-top: 6px;
    padding-left: 10px
}

.col .dslider {
    margin-top: 0
}

.interestbox,
.yearbox {
    width: 50px!important;
    text-align: center
}

.icici .loanbox {
    width: 116px
}

.legend0.legend-box,
.legend1.legend-box {
    padding: 0 5%!important;
    margin-right: 7px!important;
    margin-left: 1px!important;
    vertical-align: text-bottom;
    height: auto!important
}


@media only screen and (min-width:992) and (max-width:1200){
    
    .calculate {
        padding-bottom: 122px;
    }
}

@media only screen and (min-width: 1600px) {
    #disclaimer {
        margin-top: 100px;

    }
}

@media only screen and (max-width: 480px) .disclaimerLabel {
        {
        margin-top: -100px;
    }

}

@media only screen and (min-width: 480px) .disclaimerLabel {
        {
        margin-top: -50px;
    }

}

@media only screen and (min-width: 991px){
    .btn-style {
        padding-bottom: 122px;
    }
}
/*
@media only screen and (max-width: 991px){
    .now {
        margin-bottom: 35px;}
}
@media only screen and (min-width: 480px){
    .now {
        margin-bottom: 35px;}
}*/