.calcFrameMainContainer
{

background-color:#ADD8E6;
width:55%;
position:relative;
box-shadow: 5px 10px #888888;
}


.calcHeading{

background-color:#D3D3D3 ;
text-align: center;
height:10%;
}


.inputFields{

padding-left:35px;
padding-top:10px;

}



.calcFrameMainContainer span{

padding-left:55px;

display:inline;
}

input[type=number] {
  width: 100%;
  padding: 12px 20px; /*Use the padding property to add space inside the text field.*/
  margin: 8px 0;
  box-sizing: border-box;
}

#resultAreaOne{
padding-left:15px;
text-align: center;
font-weight: bold;
}

#descpAreaOne{
padding-left:15px;
padding-right:8px;
font-weight: bold;
}







/* when browser window is shrinked (or mobile view) */
@media (max-width: 768px) {
    
 .calcFrameMainContainer
{


width:95%;

}




}