.calcFrameMainContainer
{

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


.calcHeading{

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


.inputFields{

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

}



.calcFrameMainContainer span{

padding-left:45px;

display:inline;
}

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

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

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



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

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


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


width:95%;

}


}