@charset "utf-8";
/* CSS Document */
#calculator { background: #e7e7e7; font-size: 15px; line-height: 20px; color: #000;margin: 0;padding: 3em 0; }
#calculator p { margin: 0;padding: .2em .7em .7em 10px; }
/* #calculator .calculatorBox { font-family: verdana,arial,helvetica,sans-serif; } */
.calculatorBox { border:1px #ddd solid;background: #fff !important; padding: 15px 12px; margin: 15px 0 20px 0; }
.calculatorBox a, .calculatorBox a:visited { color:#0066a3;text-decoration: none; }
.calculatorBox a:hover { color: #69c; }
.calculator-section { position: relative; }
h1.main { font: normal 2.9em/1em sofia-pro-condensed,sans-serif; color: #999; text-transform: uppercase; font-style:italic; margin: 5px 0 10px; }
h2.main { font: normal 2em/1em sofia-pro-condensed,sans-serif; color: #666; text-transform: uppercase; font-style:italic; }
p.main, ol.main { color:#000;margin: 0;padding:.2em .7em .7em 0 !important; }
ol.main li { margin: 0 2em .5em; text-align: left; }
.calculator-section { text-align:left;color:#000;margin: 0;padding:.2em .7em .7em !important; }
table { padding:0; }
table td { padding:0;margin:0; }
ol { padding-left:50px;margin-bottom:0; }
input { min-height:24px; outline-color:none; } 
table td.paybackLabel { padding-right:90px; padding-left:27px; font-size:x-small; font-weight:bold; color:#f26859; text-align:center; }
.entry { width:70px; height:16px;border:1px #c0c0c0 solid; background-color:white; margin:0 4px; text-align:right;padding-right:2px; }
input.result { width:70px; height:16px;border:1px #c0c0c0 solid; background-color:#f5f5f5;margin:0 4px; text-align:right;cursor:default;padding-right:2px; }
input.resultRed { color: #f26859;width:70px; height:16px;border:1px #c0c0c0 solid; background-color:#f5f5f5;margin:0 4px; text-align:right;cursor:default; font-weight:bold;padding-right:2px; }
.leftMarg { width:30px; text-align:right; float:left; }
.sectionInput, .sectionResult { padding:0 0 0 8px; }
.input-table,.result-table { width:580px; }
td.input-col1 { text-align:left;color:#000;margin: 0;/*padding:.2em .7em .7em !important*/ }
.input-col1,.result-col1 { width:380px;height:30px; }
.sectionButton { background-color:transparent;background-image: url('arrow-down2.png'); background-repeat: no-repeat; background-position: 414px 16px;padding:16px 0 35px; }
.sectionButton a { margin-left:20px; }
.paybackButton { padding: .5em; transition: background-color .5s ease; background-color: #f26859; border-radius: 50px; border-style: none; font-size: .9em; font-weight: 700; text-transform: uppercase; text-align: center; color: #fff; width: 110px; cursor: pointer; }
.paybackButton:hover { background-color: #ef7f72; } 
.reference-link { font-size: .9em; float: right; text-transform: uppercase; position: relative; bottom: 4px; right: 0; }
.footer-content { max-width:580px;font:12px/15px open-sans,arial,helvetica,sans-serif; }
.gray { color:#999; }
.gray a { color: #69c; }
.gray a:visited { color: #69c; }
.gray a:hover { color: #06bde4; }
.black { color:#000; }
.nobr { white-space:nowrap; }
.nobr strong { /*color:#000;*/ }
.hanging-indent { padding-left:20px; text-indent:-13px; margin:10px 10px 10px 0; position:relative; top:10px;color:#666; }
.hanging-dropcap { position:relative; top:7px; left:-3px; font-size:20px; line-height:20px; font-weight:normal; }
.note { color:#f26859; }
img.question { position:relative;top:-1px; opacity:.6; }
img.question:hover { opacity:1; }
  @media(max-width:599px) {
  ol { font-size:.9em; }
  .input-table,.result-table,.sectionInput,.sectionResult,.footer-content  { width:96% !important; }
 /* .result-col1,.input-col1 { width:65% !important; } */
  input { min-height:30px; }
  tr td+td { white-space:nowrap; }
  .sectionButton { background: none; }
  .sectionButton a { margin-left:10px; }
  }  @media(max-width:559px) {
  body { font-size:.6em !important; line-height:1.1em !important }
  h1, h2 { line-height:1.25em !important; }
  ol { padding-left:22px; }
  input { min-height:30px; }
  td.input-col1, td.result-col1 { width: 100%; }
  tr td+td { white-space:nowrap; }
  }  
  /* styling for folding-table at viewport size less than 767 */
  @media(max-width:767px) {
    h1.main { font-size: 2.8em;}
    td.input-col1, td.result-col1 { width: 100%; }
    table td.paybackLabel { padding-right: 10px; text-align: right;}
    .margWrapper { width:140px; margin-left: auto; }
    .sectionButton { background-image: none; }
  }  

  @media(max-width:991px) {
    h1.main {margin-top: 0;}
  }