html { }
body { font-family: var(--primary-font); color: #303030; line-height: 1.45; }
a { color: var(--primary); transition: 0.4s; }
a:hover { color: var(--secondary); transition: 0.4s; text-decoration: none; }

/* Text Colors */
.text-primary, .text--primary { color: var(--primary)!important; }
.text-secondary, .text--secondary { color: var(--secondary)!important; }
.text-dark, .text--dark { color: var(--dark)!important; }
.text-white, .text--white { color: #fff!important; }

/* Adjustments for BS3 */
.mb-3 { margin-bottom: 3rem!important; }
.input-group { display: flex; }
.input-group-text { min-width: 40px; height: 40px; line-height: 40px; text-align: center; padding: 0 10px; }
.form-control { height: 40px; line-height: 40px; }
.d-none { display: none!important; }

.pb-5 { padding-bottom: 5rem!important; }
.pt-4 { padding-top: 4rem!important; }
@media (min-width: 1200px) {
  .pl-xl-5 { padding-left: 5rem!important; }
}
@media (min-width: 992px) {
  .d-lg-none { display: none!important; }
  .d-lg-block { display: block!important; }
}



/* Rent vs Sell Calculator
============================================================================= */
#rent-sell-calc { padding: 100px 0; margin-top: 140px;}
#rent-sell-calc h1 { margin-bottom: 60px; }
#rent-sell-calc .container-fluid { width: 1400px; max-width: 100%; margin: 0 auto; }

.calc-form-container { padding: 35px; background: var(--dark); border: 1px solid var(--border-color);  }
.calc-form-container h2 { font-size: 30px; margin: 0 0 30px; font-weight: 500; color: #fff; }
.calc-form-container label { font-weight: 500; color: #fff; }
.calc-form-container .info-btn { transition: 0.4s; }
.calc-form-container .info-btn:hover { cursor: pointer; color: var(--primary); transition: 0.4s; }
.calc-form-container input, .calc-form-container .input-group-text { border-radius: 0; border: 0; }
.calc-form-container .input-group-text, .calc-form-container .form-control:disabled, .calc-form-container .form-control[readonly] { background: var(--gray);  }
.calc-form-container p, .calc-form-container li, .calc-form-container small { color: #fff; }
.calc-form-container .text-muted, .calc-form-container .text-muted a { color: var(--gray)!important; }
.calc-form-container .text-muted a:hover { color: var(--primary)!important; }
#rent-sell-calc .ui-slider { background: var(--gray); border-radius: 0; border-color: currentColor; }
#rent-sell-calc .ui-slider-handle { background: var(--primary); border-color: var(--primary); }
@media (min-width: 992px) and (max-width: 1200px){
	.calc-form-container { padding: 35px 15px; }
}

.calc-form__accordion h3,
.calc-form__accordion .h3,
.calc-form__accordion .display-3 {
  font-size: 26px;
  color: #fff !important;
  text-transform: none;
  font-weight: 400;
  line-height: 1.35em;

}

.calc-form__accordion { border-top: 1px solid var(--border-color); color: #fff!important; }
.calc-form__accordion h4 { position: relative; padding: 20px 40px 20px 0; font-size: 18px; margin: 0; transition: 0.4s; font-weight: 500; color: #fff; }
.calc-form__accordion h4 i { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.calc-form__accordion h4:hover { cursor: pointer; color: var(--primary); transition: 0.4s; }

#intructions_area ol { padding-left: 20px; margin: 0 0 30px; }
#intructions_area li { margin: 10px 0; }

#graph { }
#graph h4 { font-size: 20px; font-weight: 600; }

.jqplot-target { color: var(--body-text); }

#legend { display: flex; flex-wrap: wrap; padding: 0 0 30px; }
.legend { position: relative; font-weight: 500; font-size: 18px; padding-left: 50px; line-height: 30px; margin: 10px 10px 10px 0; }
.legend::before { content: ''; position: absolute; left: 10px; top: 0; height: 30px; width: 30px; background-color: #B5CA85; border: 1px solid #000; }
.legend--rent::before { background-color: #ADC2DA; border-radius: 50%; }
.legend--sell::before { }

.results-table { margin-top: 50px; }
.results-table thead th { background: var(--primary); color: #fff; border-bottom: #fff; vertical-align: middle; }
.results-table tbody tr:nth-of-type(odd) { background: var(--gray); }
.results-table td, .results-table th { border-color: var(--border-color); }



/* Mobile Table */
@media (max-width: 1100px){
	.results-table, .results-table thead, .results-table tbody, .results-table th, .results-table td, .results-table tr { display: block; border: 0!important; }
	.results-table thead { display: none; }
	.results-table td { display: flex; justify-content: space-between; background: #fff; text-align: right; border: 1px solid var(--border-color)!important;  }
	.results-table td:first-child { background: var(--primary); color: #fff; font-size: 18px; font-weight: bold; border: 0!important; }
	.results-table td:nth-of-type(even) { background: var(--gray); border-top: 0!important; border-bottom: 0!important; }
	.results-table td::before { content: 'Year'; display: block; flex: 0 0 50%; text-align: left; padding-right: 15px; white-space: normal; font-weight: 500; }
	.results-table td:nth-child(2)::before { content: 'Rental Income'; }
	.results-table td:nth-child(3)::before { content: 'Mortgage Expense'; }
	.results-table td:nth-child(4)::before { content: 'Other Costs'; }
	.results-table td:nth-child(5)::before { content: 'Net Cash Flow'; }
	.results-table td:nth-child(6)::before { content: 'House Value'; }
	.results-table td:nth-child(7)::before { content: 'House Equity'; }
	.results-table td:nth-child(8)::before { content: 'Wealth (Rent Out)'; }
	.results-table td:nth-child(9)::before { content: 'Wealth (Sell Now)'; }
	.results-table td:nth-child(10)::before { content: 'Difference in Wealth (Rent Out to Sell Now)'; }
}