.divCalcMain{
    width:90%;
    height :auto;
    background-color: white;
    display:inline-block;
    text-align:center;
    margin:0;
    border-top: 1px solid lightgray; 
  
}
.divTheCalculator {
    font-size: large;
    vertical-align: top;
    background-color: rgba(255, 255, 255,0.8);
    border: 1px solid steelblue;
    width: 90%;
    height: auto;
    display: inline-block;
    margin: 20px 10px 10px 10px;
    padding: 8px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-align: left;
}
.divResults{
    text-align:left ; 
    font-size:medium; 
    width:100%;
    height:auto;
}
.divPaymentBreakdown{
    vertical-align:top;
    background-color: rgba(255, 255, 255,0.8);
    border:1px solid steelblue;
    width:90%;
    height :auto;   
    display:inline-block; 
     margin:10px 10px 20px 10px;
    padding:0; 
    text-align:center;
    overflow-y:auto;
    font-size:small;
}
.divPaymentChart{
    width:98%;
    height:auto;
    margin-top:10px;
    display:inline-block;  
}
.tableBreakdown{
    font-size: small;
    border:none;
    margin:0;
    width:100%;
    padding: 0;
    height:auto;
    text-align:left;
 
}
.divCapital{
    color:white;
    text-align:center ;
    line-height:30px;
    height :30px;
    background-color:seagreen;
    display:inline-block;
    font-size: small;
   
}
.divInterest{
    color:white;
    text-align:center ;
    line-height:30px;
    height :30px;
    background-color:firebrick;
    display:inline-block;
    font-size: small;
}
.tableCalc{
    background-color: red;
    font-size:x-large;
    border:none;
    margin-left: 0;
    width:80%;
    padding: 0;
    height:300px;
    text-align:left;
    display:table;
}

.txtbx{
  border: 1px solid dimgray;  
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -webkit-appearance: none;
    border-radius: 2px;
    padding-left: 3px;
    font-family: inherit;
    font-size :large;
    width:98%; 
    height:40px;
    margin:0 auto; 
    display:inline-block;
    margin-bottom:10px; 
}

.btnCalc{
    background-image: url('../images/calculator.png');
    background-position-x: 6px;  
    background-position-y:center;  
    background-repeat:no-repeat;
    text-align:right;  
    padding-right:10px;  
    border: 1px solid dimgray;
    background-color : #303030 ;
    color:white;
    font-size : large;   
    display:inline-block;
    width:140px;
    height:50px;    
    margin-left:10px;
     border-radius: 2px;
    -webkit-border-radius:2px; 
     
 }
.btnCalc:hover{
    background-color : lightsteelblue; 

}
.divPaymentAmount{
    font-weight :bold;
    height:50px;
    line-height :50px;
    width :100%;
    font-size:large;
}

/*@media screen and (max-width: 1000px)  {
    .divPaymentBreakdown {
      width:500px; 
    } 
   
  
}*/

@media screen and (max-width: 800px) {
    .divPaymentChart {
        font-size :small;
       /*display :none;*/ 
       
    }
    .divCalcMain{
        width :100%;
    }
    .divCapital{
        font-size :x-small;
    } 
    .divInterest{
        font-size:x-small;
    }
}
 /*   .divPaymentBreakdown {
    width:320px;
    margin-top:0;
   }
    .divTheCalculator {
        width: 300px;
    }
     .divCapital {
        font-size: x-small;
    }

    .divInterest {
        font-size: x-small;
    }
}*/