html {background: #f9f9f9; overflow-x:hidden;}
body {color: #000000; font-family: "Montserrat", Arial, Helvetica, sans-serif; margin: 0px; padding: 0px; font-size:12px;}
input, button, select {font-family: "Montserrat", Arial, Helvetica, sans-serif; font-size:12px;}
a {color:#008080; font-weight:bold; text-decoration:none !important;}
.breadcrumb a, .baseline a, .top-menu a {font-weight:normal;}

.calculator {width:1240px; padding:20px; margin:0; background:#fff; min-height:400px;}

.right {float:right;}
.left {float:left;}
.clear {clear:both;}
td.right {float:none;}
td.left {float:none;}

.calculator-left {width:900px; float:left;}
.calculator-right {width:320px; float:right;}
.calculator .box {margin-top:20px; margin-bottom:0;}
.calculator h1 {font-size:24px; text-transform:uppercase; margin:0; color:#777;}
.calculator button.quick_guide_button {float:right; border:0; text-transform:uppercase; font-size:12px; font-weight:bold; background:#008080; height:32px; padding:8px 15px; color:#fff; margin:0;}
.calculator-left > a.button {float:right; border:0; text-transform:uppercase; font-size:12px; font-weight:bold; background:#000; padding:10px 15px; color:#fff; margin:0 10px 0 0;}
.calculator .box h2 {font-size:18px; text-transform:uppercase; margin:0 0 10px; color:#777;}
.calculator .box h2 span.right {font-size:14px; font-style:italic; text-transform:none;}

.calculator-left .box {padding:19px; border:1px solid #ddd;}
.calculator-left .box td {border-bottom:1px solid #ddd;}
.calculator-left .box > select {margin:5px; padding:3px;}
.calculator-left .box button {border:0; text-transform:uppercase; font-weight:bold; background:#000; padding:5px 10px; color:#fff; margin:5px 0;}
.calculator-left button.calculate {float:right; border:0; text-transform:uppercase; font-size:16px; font-weight:bold; background:#008080; padding:15px 30px; color:#fff; margin:20px 0 0;}
.calculator-left .box .advanced select {width:90px;}
.calculator-left .box .advanced span.info-note {color:#777;}
.calculator-left .box table select, .calculator-left .box table input {padding:4px; font-size:12px; border:1px solid #ddd;}
.calculator-left .box table thead td {font-size:11px; font-weight:bold; text-transform:uppercase;}

.calculator-left .assumptions.box.closed h2 {margin:0;}
.calculator-left .assumptions.box.closed p, .calculator-left .assumptions.box.closed table {display:none;}
.calculator-left .assumptions.box.open p, .calculator-left .assumptions.box.open table {display:block;}
.calculator-left .assumptions.box.open h2 span.open, .calculator-left .assumptions.box.closed h2 span.closed {display:inline-block;}
.calculator-left .assumptions.box.closed h2 span.open, .calculator-left .assumptions.box.open h2 span.closed {display:none;}

.calculator-right .box {padding:20px; background:#f9f9f9;}
.calculator-right .box span.unit {color:#777;}
.calculator-right .box span.explain {color:#777; font-style:italic;}
.calculator button.save_button {float:right; border:0; text-transform:uppercase; font-size:14px; font-weight:bold; background:#008080; padding:8px 15px; color:#fff; margin:20px 0 0;}

.tooltip {position:relative; text-decoration: underline dashed;}
.tooltip .tooltiptext {display:none}
.tooltip:hover .tooltiptext {display:block; text-decoration:none; position:absolute; background:#000; color:#fff; text-align:center; z-index:1; width:250px; padding:10px; top:25px; font-weight:normal; text-transform:none; font-size:12px;}
.tooltip .tooltiptext::after {content: ""; position: absolute; border-style: solid; border-color: transparent transparent #000 transparent; bottom: 100%; left: 10%; margin-left: -7px; border-width: 7px;}
i.tooltip {text-decoration:none; padding-left:10px;}
i.tooltip:hover .tooltiptext {font-family: "Montserrat", Arial, Helvetica, sans-serif; font-size:12px; line-height:1.25em;}
i.tooltip .tooltiptext::after {display:none;}

.lightbox {position:fixed; background:rgba(0,0,0,0.5); top:0; left:0; width:100%; height:100%;}
.lightbox .inner {width:900px; padding:30px; margin:40px auto; background:#fff; position:relative;}
.lightbox .inner .close {position:absolute; right:0; top:0; width:12px; height:12px; border:9px solid #fff;}
.lightbox .inner .button.blank {margin-right:10px;}
.lightbox.open {display:block;}
.lightbox.closed {display:none;}

@media only screen and (min-width: 1020px) and (max-width: 1340px) {
.calculator {width:940px;}
.calculator-left {width:620px;}
.calculator-right {width:300px;}
table.twelve input[type=text] {width:110px !important;}
table.mains input[type=text] {width:110px !important;}
}
@media only screen and (min-width: 640px) and (max-width: 1019px) {
.calculator {width:620px; padding:20px 10px; margin:0; background:#fff; min-height:400px;}
.calculator-left {width:620px; float:left;}
.calculator-right {width:620px; float:right;}
.calculator-right {margin-top:20px; }
.lightbox {position:absolute; background:none;}
.lightbox::after {content:''; z-index:1; position:fixed; background:rgba(0,0,0,0.5); top:0; left:0; width:100%; height:100%;}
.lightbox .inner {width:600px; padding:20px; z-index:99;}
table.twelve input[type=text] {width:110px !important;}
table.mains input[type=text] {width:110px !important;}
}
@media only screen and (max-width: 639px) {
.calculator {width:400px; padding:20px 10px;}
.calculator-left {width:400px;}
.calculator-left > h1 {clear:both;}
.calculator-right {width:400px;}
.lightbox {position:absolute; background:none;}
.lightbox::after {content:''; z-index:1; position:fixed; background:rgba(0,0,0,0.5); top:0; left:0; width:100%; height:100%;}
.lightbox .inner {width:400px; padding:10px; z-index:99;}

table.table-responsive thead {
        display: none;
    }

    table.table-responsive tr {
        padding: 5px;
        display: block;
        margin: .5rem 0 1rem;
        background-color: #fff;
        border-radius: 2px;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
    }

    table.table-responsive td {
        display: block;
        text-align: right;
        border-bottom: 1px dotted #ccc;
    }

    table.table-responsive td:last-child {
        border-bottom: 0;
    }

    table.table-responsive td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
    }
.nomob {display:none !important;}

}