html {background-color: #fff;}
/* body, p {font-family: 'News Cycle', sans-serif; font-size: 18px;} */
body, p {font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";}
body {
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4, h5, h6, p.headline, form label {font-family: 'Muli', sans-serif !important;}
h2, h3, h4, h5, h6 {color: #444;}
/*color of h1 will need to have a dark/light option. Light is default.*/
h1 {color: #fff !important; font-size: 50px !important; padding: 10px 0; text-transform: uppercase;}
h2 {font-size: 30px;}
h3 {font-size: 24px;}
h4 {font-size: 20px;}
h5 {font-size: 18px;}
h6 {font-size: 17px;}
/*color of headline will change with color schemes*/
p.headline {font-size: 40px; font-weight: bold; color: #32384D;}

/* --
BACKGROUND IMAGE

To change out the background image (seen at the top of the home and internal pages), add your image into assets > img folder and replace "boats-at-dusk.jpg" with your image name.

REQUIREMENTS
- Image size should be 3000px by 900px
- Do not add any type of semi-transparent overlay to your photo. That will be added in the CSS.
- I recommend running your image through tinypng.com before uploading it to decrease the file size and make the site load faster.

-- */

body {
    background: url(../img/generated.png) center 55px no-repeat transparent;
}

/* nav link colors will change with each color scheme */
nav li a {
    font-family:'Muli', sans-serif;
    color: #32384D;
}
nav#primary li a{
    font-weight: 700;
    font-size: 16px;
}
nav#primary li a:hover {
    background-color: transparent; color: #027EC6
}

/*Change button colors with each color scheme */
nav .btn-default, .main-form .btn-default {background-color: #EC7A56; border-color: #EC7A56; color: #fff; font-family: 'Muli', sans-serif; font-size: 16px;}
nav .btn-default:hover {background-color: #FD8B67; border-color: #FD8B67; color: #fff;}

/*Change form bg and button color with new color schemes */
.main-form form{max-width: 250px; float: right; margin-left: 40px; background-color: #32384D; padding: 15px 20px; border-radius: 6px; margin-top: 15px;}
.main-form label {color: #fff;}
.main-form p {color: #fff; font-family: 'Muli', sans-serif; font-size: 20px;}
.main-form .btn-default {background-color: #027EC6; border-color: #027EC6; color: #fff;}
.main-form .btn-default:hover {background-color: #138FD7; border-color: #138FD7; color: #fff;}


#overlay {
    background: rgba(241,241,241,.7);
    padding: 10px 0 20px;
}
#solid {
    background: #fff;
    height: 100%;
    flex-grow: 1;
}

/*The background color of the feature box will need to change with each color scheme */
.feature-box {
    background-color: #E5F3FF;
    border-radius: 12px;
    padding: 25px 20px;
    max-width: 470px;
    float: left; 
    margin-right: 20px;
}

.feature-box p {
    font-family: 'Muli', sans-serif;
    font-size: 20px;
    font-style: italic;
}

/*Change the footer bg color with new color schemes */
#footer {background-color: #32384D;}
#footer .nav a {color: #fff !important;}
#footer .nav a:hover {background-color: #32384D;}

@media screen and (max-width: 767px){
    .main-form {float: none; margin-left: 0px; margin-bottom: 30px;}
    #overlay {background: rgba(241,241,241, 1);}
    .nav > li {display: inline; float: left;}
    nav .btn-default, .main-form .btn-default {margin-top: 0px;}
} 

label.field-with-error { color: #dd7e5e }
span.field-with-error { color: #dd7e5e }
input.field-with-error { background-color: #fd9e7e }
ul.pager li { display: inline; }
ul.pager li a.active { font-weight: bold; background-color: orange; }
div.matrix h1 { font-size: 24pt !important; color: orange !important; }
.slider.slider-horizontal {
    width: 600px;
}
.container { width: 100%; }
.feature-box-left {
    background-color: #E5F3FF;
    border-radius: 12px;
    padding: 25px 20px;
    max-width: 400px;
    float: left; 
    margin-right: 20px;
    clear: left;
}
.feature-box-right {
    padding: 25px 20px;
    float: left;
    max-width: 670px;
    margin-right: 20px;
}
div.revision h2 {
    color: blue;
}
div.revision table.id td:nth-child(1) {
  width: 50%;
  font-weight: bold;
}
div.revision table.client_info td:nth-child(1) {
    width: 50%;
    font-weight: bold;
}
div.revision table.assumptions td:nth-child(1) {
    width: 73%;
    font-weight: bold;
}
div.revision table.setup td:nth-child(1) {
    width: 75%;
    font-weight: bold;
}
div.revision table.annual td:nth-child(1) {
    width: 75%;
    font-weight: bold;
}
div.revision table.client_info td:nth-child(1) {
  width: 50%;
  font-weight: bold;
}
div.revision table.appendix2 td:nth-child(1) {
  width: 73%;
  font-weight: bold;
}
div.revision table.appendix3 td:nth-child(1) {
  width: 75%;
  font-weight: bold;
}
div.revision table.appendix4 td:nth-child(1) {
  width: 75%;
  font-weight: bold;
}
.matrix th {
  width: 75px;
}

.busy
{
animation: spin 1s infinite linear;
display:inline-block;
font-weight: bold;
font-family: sans-serif;
/* font-size: 35px; */
font-style:normal;
color:#ffffff;
}

.busy::before
{
content:"\25E0";
}

@keyframes spin
{
0% {transform: rotate(0deg);}
100% {transform: rotate(359deg);}
}