div.clear {
clear: both;
}

div#calculatorContainer, label, select, input, output, div#calculatorContainer table {
width: 100%;
font: 300 1em/1.625 Frutiger,Arial,Helvetica,sans-serif;
color: #1c1c1c;
}

div#calculatorContainer {
position: relative;
}

p.heading {
font-weight: bold;
margin: 0 0 24px 0;
}

span.red {
color: #e60000;
}

span.linkStyle {
text-decoration: underline;
cursor: pointer;
}

select, input {
height: 32px;
padding: 4px;
}

div.dollarSignContainer, div.percentSignContainer {
position: relative;
}

input.dollarSign {
padding-left: 12px;
-webkit-appearance: searchfield;
}

div.dollarSignContainer:after {
position: absolute;
left: 4px;
top: 3px;
content: '$';
}

input.percentSign {
padding-right: 20px;
-webkit-appearance: searchfield;
}

div.percentSignContainer:after {
position: absolute;
right: 4px;
top: 3px;
content: '%';
}

label {
display:inline-block;
margin-bottom: 12px;
}

label#leverageLabel, label#maxLeverageLabel {
display: inline;
}

select, input, output {
margin-bottom: 24px;
}

div.shadedBox {
background-color: #efefef;
padding: 20px 24px;
margin-bottom: 24px;
}

p#excessiveLeverage, div#lightboxBackground {
display: none;
}

p#excessiveLeverage {
margin: 16px 0 2px 0;
}

div#lightboxBackground {
background-color: rgba(255,255,255,0.85);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}

div#lightboxFrame {
position: absolute;
background: #efefef;
width: 50%;
left: 25%;
padding: 20px 24px;
top: 50%;
transform: translateY(-50%);
box-sizing: border-box;
}

p#maxLeverageWarning {
margin: 0;
}

form#leverageInputs {
width: 33.333%;
float: left;
padding-right: 12px;
box-sizing: border-box;
margin-bottom: 24px;
}

div#tableContainer {
width: 66.666%;
float: left;
padding-left: 12px;
box-sizing: border-box;
}

div.button {
width: auto;
display: inline-block;
border: 1px solid #1c1c1c;
padding: 0.5em 1em;
margin: 0;
text-decoration: none;
background: none;
color: #1c1c1c;
font: 300 1em/1 Frutiger,Arial,Helvetica,sans-serif;
cursor: pointer;
text-align: center;
transition: background 250ms ease-in-out, transform 150ms ease;
    -webkit-appearance: none;
    -moz-appearance: none;
box-sizing: border-box;
position: relative;
}

div#lightboxButton {
margin-top: 16px;
}

div#dollarButton {
margin-left: -1px;
}

div#viewTablesButton, div#viewInputsButton {
display: none;
}

div.button:hover,
div.button:focus {
    border: 1px solid #1c1c1c;
    color: #ffffff;
    z-index: 1;
	background-color: #1c1c1c;
}

/*div#lightboxButton:hover, div#lightboxButton:focus {
	background-color: #ffffff;
}*/

div.button.current {
    border: 1px solid #1c1c1c;
    color: #ffffff;
	background-color: #1c1c1c;
    z-index: 1;
}

:focus-visible {
outline: none;
}

div#calculatorContainer table {
width: 100%;
border-collapse: collapse;
font: 300 .75em/1.25 Frutiger,Arial,Helvetica,sans-serif;
}

div#calculatorContainer th, div#calculatorContainer td {
border-bottom: 1px solid #1c1c1c;
padding: 0.5em;
}

div#calculatorContainer th {
font-weight: bold;
vertical-align: bottom;
}

.regular {
font-weight: 300;
}

div#calculatorContainer tr.hidden {
display: none;
}

div#calculatorContainer tr:hover {
background-color: #efefef;
}

div#calculatorContainer tr:nth-child(1):hover {
background-color: #ffffff;
}

div#calculatorContainer th:nth-child(1), div#calculatorContainer td:nth-child(1) {
width: 40%;
text-align: left;
}

div#calculatorContainer td:nth-child(2) {
width: 20%;
text-align: center;
}

div#calculatorContainer td:nth-child(3) {
width: 20%;
text-align: center;
}

div#calculatorContainer td:nth-child(4) {
width: 20%;
text-align: center;
}

p.footnote {
font: 300 .75em/1.25 Frutiger,Arial,Helvetica,sans-serif;
color: #646464;
margin-bottom: 24px;
}

output#percentTableContainer {
display: block;
}

output#dollarTableContainer {
display: block;
}

output#dollarTableContainer {
display: none;
}

@media screen and (max-width: 1024px) {


form#leverageInputs, div#tableContainer {
width: 100%;
float: none;
padding-right: 0px;
padding-left: 0px;
}

div#lightboxFrame {
width: 90%;
left: 5%;
top: 5%;
transform: translateY(0%);
}

div#viewTablesButton, div#viewInputsButton {
display: inline-block;
}

div#tableContainer {
display: none;
}


}