body {
    margin: 0;
    padding: 0;
    font-family: "Courier New", Courier, monospace;
    font-size: 1.2em;
    overflow-x: hidden;
    line-height: 1.5em;
}


thead {
    background-color: lightgray;
    font-size: 1.2em;
    text-align: left;
}

th {
    padding: 4px;
}

td {
    padding: 2px 0 2px 5px;
}

a {
    /*text-decoration: none;*/
}

h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
    margin-bottom: .1em;
    margin-top: 2em;
    line-height: 1em;
}

h1 {
    font-size: 3em;
}

.big-h2 {
    font-size: 2.5em;
}

.small-h2 {
    margin: .1em 0 .25em 0;
    font-weight: 100;
}

.heavy-text {
    font-weight: 800;
}

.main-container h1 {
    margin-top: 0;
}

.main-container.readable-text p {
    font-size: 1.7em;
    line-height: 1.4;
}

.main-container.readable-text li {
    /*list-style: none;*/
    font-size: 1.5em;
    margin-bottom: .6em;
}

.main-container.readable-text.homepage img {
    width: 100%;
    max-width: 600px;
    float: left;
}


.type {
    font-size: 1.25em;
    /*padding: .7em;*/
}

.navbar-dark {
    background-color: black;
    color: white;
    padding: 15px;
}

.navbar-brand {
    color: white !important;
    font-size: 1.75em;
    text-decoration: none;
    font-weight:800;
    line-height: 1.25em;
}

.navbar-brand:hover {
    color: blue !important;
}

.navbar a, .navbar a:active, .navbar a:visited {
    color: white;
}
.navbar a:hover {
    color: blue;
}

.navbar {

}

.nav-mobile {
    float: right;
    width: 80%;
    max-width: 750px;
}

#navSearch {
    /*display: inline-block;*/
    margin-bottom: 0;
}

#searchValue {
    width: 80%;
    max-width: 650px;
    font-size: 1.5rem;
    font-family: "Courier New", Courier, monospace;
}

#navSearch input[type=submit] {
    background-color: white;
    color: black;
    font-size: 1.5rem;
    font-family: "Courier New", Courier, monospace;
    font-weight: 800;
    -webkit-box-shadow: 0.2rem 0.2rem 0.1rem red;
    box-shadow: 0.2rem 0.2rem 0.1rem red;
}

.nav-links {
    display: none;
    font-size: 1em;
    padding-top: 4px;
}


.nav-links a {
    margin-right: 20px;
    padding: .5rem;
    font-weight: 600;
    font-size: 1.2rem;
    text-decoration: underline;
}

.hamburger {
    display: none;
}


.main-container {
    /*width: 95%;*/
    max-width: 1750px;
    margin: 1em auto 0 auto;
    /*padding: 10px 0px 10px 15px;*/
    /*overflow-x: scroll;*/
    padding: 0px 0px 0px 3px;
}



#year-picker {
    margin-top: 1rem;
}

.listing-table {
    width: 100%;
    /*max-width: 750px;*/
    display: inline-block;
    vertical-align: top;
    /*overflow-x: scroll;*/
}

.listing-table thead td, .listing-table tfoot td {
    padding: .3em;
}

.listing-table td {
    padding: .2em;
}

.main-container::-webkit-scrollbar, .listing-table::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.main-container, .listing-table::-webkit-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.charts p, .charts-2w p, .chart-full p, div .infobox {
    background-color: black;
    color: white;
    width: 90%;
    max-width: 600px;
    padding: 15px 10px 20px 10px;
    margin: 1rem 30px 10px 0;
    -webkit-box-shadow: 0.2rem 0.2rem 0.1rem red;
    box-shadow: 0.2rem 0.2rem 0.1rem red;
}

div .infobox a:hover {
    color: white;
}

.charts {
    margin-left: 50px;
    width: 95%;
    max-width: 500px;
    display: inline-block;
}

.charts-2w {
    width: 90%;
    max-width:800px;
    margin: 2rem 2rem 1rem 0;
    /*margin-top: 60px;*/
    display: inline-block;
    vertical-align: top;
}

@media(max-width:1600px) {
    .charts-2w {
        max-width: 600px;
    }
}

.small-card {
    width: 100%;
    max-width: 350px;
    min-height: 90px;
    float: left;
    padding: 10px;
    margin: 0 10px 10px 0;
    border: 1px solid black;
    -webkit-box-shadow: 0.2rem 0.2rem 0.1rem red;
    box-shadow: 0.2rem 0.2rem 0.1rem red;
}

.small-card a {
    white-space: normal !important;
}

.small-card:hover {
    background-color: black;
    color: white;
}

.small-card:hover a:hover {
    color: white;
}

#mortgageCalculator {
    margin-top: 3rem;
    padding: 2rem;
    border: 3px dashed black;
}

#mortgageCalculator h2 {
    margin-top: 0;
}

#mortgageCalculatorForm input, #mortgageCalculatorForm select {
    font-family: "Courier New", Courier, monospace;
    font-size: 1.5rem;
    padding: 1rem;
    margin: .25rem;
}

#mortgageCalculator button {
    width: 100%;
    background-color: white;
    border: 1px solid black;
    -webkit-box-shadow: 0.2rem 0.2rem 0.1rem red;
    box-shadow: 0.2rem 0.2rem 0.1rem red;
    color: black;
    font-family: "Courier New", Courier, monospace;
    font-size: 2rem;
    padding: 1.25rem;
}

#mortgageCalculator button:hover {
    border: 1px solid red;
    -webkit-box-shadow: 0.2rem 0.2rem 0.1rem blue;
    box-shadow: 0.2rem 0.2rem 0.1rem blue;
    cursor: pointer;
}

.mcFrDiv {
    float: right;
    clear: both;
}

.sleep-note {
    color: black !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-size: 1.55em !important;
    font-weight: 800 !important;
    border: 2px solid red !important;
    font-family: "Courier New", Courier, monospace !important;
}


.footer {
    border-top: 1px solid darkgray;
    background-color: lightgray;
    margin: 5vh 0 0 0;
    padding: 1em 0 4em 0;
    width: 100%;
}

.footer .col {
    width: 100%;
    float: left;
    max-width: 300px;
}

.footer a {
    margin-right: 25px;
}

.footer li {
    list-style: none;
    padding: .4rem 0 .5rem 0;
}

.center-row {
    margin-left: auto;
    margin-right: auto;
    width: 75%;
}

.active-year {
    font-weight: 800;
    border: 1px solid blue;
    font-style: italic;
    padding: .5rem;
    -webkit-box-shadow: 0.1rem 0.1rem 0.1rem blue;
    box-shadow: 0.1rem 0.1rem 0.1rem blue;
}

a, a:active, a:visited {
    color: blue;
}

a:hover {
    color: black;
}

.lendor-jumpto-box {
    width: 100%;
    max-width: 425px;
    float: right;
    background-color: #eeeeee;
    border: 1px solid lightgrey;
    padding: 1rem;
    margin: 1rem 1rem 2rem 1rem;
    -webkit-box-shadow: 0.2rem 0.2rem 0.1rem black;
    box-shadow: 0.2rem 0.2rem 0.1rem black;
}

.lendor-jumpto-box li {
    list-style: none;
    margin-top: .25rem;
}

.shortcuts {
    font-size: 1.1rem;
    padding: 1em;
    background-color: #ccc;
    border: 1px solid black;
    margin-bottom: 1.5em;
}

.shortcuts li {
    list-style: none;
    padding-right: 20px;
    float: left;
    width: auto;
}


.jtb-split, .jtp-always-split {
    display: inline-block;
    width: 100%;
    max-width: 210px;
    float: left;
}

#mobile-jtb-toggle {
    display: none;
}

.leaflet-top.leaflet-right .leaflet-control {
    padding: 10px;
    color: black;
    background: #f2f2f2;
    border: 2px solid red;
    font-size: 24px;
    font-family: "Courier New", Courier, monospace;
}

.leaflet-top.leaflet-right .leaflet-control h3, .leaflet-top.leaflet-right .leaflet-control h4 {
    margin-top: 0;
}

.legend {
    background-color: white;
    color: black;
    border: 1px solid #008000;
    line-height: 1em;
    padding: 1em;
    width: 95px;
    font-family: "Courier New", Courier, monospace;
    font-size: 1.5em;
}
.legend i {
    width: 20%;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
}

.legend li {
    list-style: none;
    width: 100%;
    float: left;
}

.legend h4 {
    margin-top: 0;
}

#marketRatesLine {
    width: 95%;
    height:500px;
    margin-top: 2em;
}


@media(max-width: 1050px) {
    .show-menu {
        display: none;
    }
    .nav-mobile {
        width: 100%;
        margin-top: 1.5rem;
        float: unset;
        max-width: unset;
    }
    #searchValue {
        width: 100%;
        max-width: unset;
    }
    #navSearch input[type=submit] {
        width: 100%;
        max-width: unset;
        margin-top: 5px;
        margin-bottom: 15px;
    }

    #navSearch input[type=submit]:hover {
        background-color: red;
        color: white;
    }

    .nav-links {
        display: block;
        float: unset;
    }

    .nav-links a {
        white-space: nowrap;
    }

    .hamburger {
        float: right;
        position: relative;
        display: inline-block;
        width: 1.25em;
        height: 0.8em;
        margin-right: 0.3em;
        border-top: 0.2em solid #fff;
        border-bottom: 0.2em solid #fff;
    }

    .hamburger:before {
        content: "";
        position: absolute;
        top: 0.3em;
        left: 0px;
        width: 100%;
        border-top: 0.2em solid #fff;
    }

    .main-container {
        /*margin: 1em auto 0 auto;*/
    }

    h1 {
        font-size: 1.75em;
    }

    .small-h2 a, .chart-full a {
        white-space: nowrap;
        display: inline-block;
        margin-bottom: 15px;
    }

    #marketRatesLine {
        width: 95%;
        height:350px;
        margin-top: 0;
    }

}



@media(max-width: 665px) {

    .main-container {
        /*padding: 10px 0px 10px 3px;*/
    }

    .navbar-brand {
        font-size: 1.5em;
    }

    h1 {
        font-size: 1.5em;
    }

    h2 {
        font-size: 1em;
        margin-top: .5em;
    }

    #year-picker {
        display: none;
        margin-top: 0;
        /*white-space: nowrap;*/
    }

    .jtb-split {
        display: none;
    }

    .jtp-always-split {
        max-width: unset;
    }

    #mobile-jtb-toggle {
        display: block;
        float: left;
        width: 100%;
        text-transform: uppercase;
        font-weight: 800;
        text-align: right;
    }

    .chart-full {
        width: 90%;
    }

    #reviewBlock {
        clear: both;
    }

    .lendor-jumpto-box {
        width: 90%;
        max-width: unset;
        margin: 0 1rem 2rem;
        padding: .5rem;
    }

    .lendor-jumpto-box h4 {
        margin-top: .5em;
    }

    #simulatedRates h2 {
        font-size: .8em;
    }
    #simulatedRates thead {
        font-size: .75em;
    }
    #simulatedRates tbody {
        font-size: .8em;
    }

    #mortgageCalculatorForm input, #mortgageCalculatorForm select {
        font-size: unset;
        width: 100%;
    }

    #mortgageCalculator button {
        margin-top: .75rem;
    }

    #mortgageCalculator h3 {
        margin-top: 0;
    }

    .legend {
        width: 95px;
    }

}

.help-icon {
    background-image: url('../img/question-circle.svg');
    background-repeat: no-repeat;
    background-size: auto;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin-bottom: -4px;
}

#tooltip {
    position: absolute;
    background-color: #f3f3f3;
    color: black;
    padding: 15px 10px 20px 10px;
    /*margin: .1rem 30px 10px 0;*/
    -webkit-box-shadow: 0.2rem 0.2rem 0.1rem black;
    box-shadow: 0.2rem 0.2rem 0.1rem black;
    max-width: 400px;
}

@media(max-width:746px) {
    .help-icon {
        float: right;
    }
    #tooltip {
        max-width: 300px;
    }
    .listing-table {
        /*overflow-x: scroll;*/
    }
}

table .green {
    color: green;
    font-weight: 800;
}

table .red {
    color: red;
}


.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}


.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    -webkit-box-shadow: 0.2rem 0.2rem 0.1rem black;
    box-shadow: 0.2rem 0.2rem 0.1rem black;
}


.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


.awardImage {
    margin: 10px 10px 10px 0;
    text-decoration: none;
}

.awardImage:hover {
    cursor: pointer;
}

#awardImgCopy {
    width: 80%;
}

#awards .awardImage:nth-of-type(1n+5) {
    display: none;
}


.filter-icon {
    height: 1em;
    width: 1em;
    display: inline-block;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pjxzdmcgdmlld0JveD0iMCAwIDMyIDMyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDpub25lO308L3N0eWxlPjwvZGVmcz48dGl0bGUvPjxnIGRhdGEtbmFtZT0iTGF5ZXIgMiIgaWQ9IkxheWVyXzIiPjxwYXRoIGQ9Ik0xMywyOGExLDEsMCwwLDEtLjUzLS4xNUExLDEsMCwwLDEsMTIsMjdWMTcuMzhMNC4yOCw4LjgxQTUsNSwwLDAsMSwzLDUuNDZWNUExLDEsMCwwLDEsNCw0SDI4YTEsMSwwLDAsMSwxLDF2LjQ2YTUsNSwwLDAsMS0xLjI4LDMuMzVMMjAsMTcuMzh2NS4zOGEzLDMsMCwwLDEtMS42NiwyLjY5bC00Ljg5LDIuNDRBMSwxLDAsMCwxLDEzLDI4Wk01LjA1LDZhMywzLDAsMCwwLC43MiwxLjQ3bDgsOC44NkExLDEsMCwwLDEsMTQsMTd2OC4zOGwzLjQ1LTEuNzJhMSwxLDAsMCwwLC41NS0uOVYxN2ExLDEsMCwwLDEsLjI2LS42N2w4LTguODZBMywzLDAsMCwwLDI3LDZaIi8+PC9nPjxnIGlkPSJmcmFtZSI+PHJlY3QgY2xhc3M9ImNscy0xIiBoZWlnaHQ9IjMyIiB3aWR0aD0iMzIiLz48L2c+PC9zdmc+")
}