/* Button used to open the contact form - fixed at the bottom of the page */
.info-toggle-button {
  background-color: rgb(255, 72, 0);
  color: white;
  cursor: pointer;
  position: fixed;
  top: 68px;
  right: 10px;
  width: 200px;
  height: 30px;
  z-index: 10;
  border-radius: 10%;
}

/* The popup form - hidden by default */
.info-popup {
  display: none;
  position: fixed;
  top: 68px;
  right: 10px;
  z-index: 9;
  border-radius: 30px;
  background-color: rgb(255, 228, 152);
  box-shadow: -5px 5px rgba(0, 0, 0, 0.5);
}

/* Add styles to the form container */
.info-popup-container {
  max-width: 600px;
  margin: 10px;
  background-color: rgb(255, 228, 152);
  border-top-right-radius: 10px;
}


body {
  background: #fafafa;
  color: #333333;
  zoom: 100%;
}

.modal-backdrop {
  /* Need to modify this bootstrap class for the
     modal to be correct on the zoomed in body */
  width: 100% !important;
  height: 100% !important;
}

/* @media (max-width: 575px) {
  .container { 
      padding-left: 5px;
      padding-right: 5px;
  }
} */

html,
body {
  height: 100%;
}

.align-right {
  text-align: right;
}

.page-container{
  display: flex; 
  flex-direction: column; 
  height: 100vh;
}

.content {
  flex: 1 0 auto;
}

.footer {
  flex-shrink: 0; 
}

div .container.content-section {
  background-color:  #f8f9fa;
}

input.center {
  text-align:center
}

h1, h2, h3, h4, h5, h6 {
  color: #444444;
}

.bg-steel {
  background-color: #5f788a;
}

.site-header .navbar-nav .nav-link {
  color: #cbd5db;
}

.site-header .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}

.main-content {
  padding-top: 5rem;
}

.content-section {
  background: #ffffff;
  padding: 10px 20px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-bottom: 20px;
}

.chart-container {
    position: relative;
    height: 60vh;
    width: 100%;
}

div.form-inline label {
  justify-content: flex-end;
}

.number-field {
  width: 4rem !important;
  height: 2rem !important;
  text-align: center;
}

.account-img {
  height: 90px;
  width: 90px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
}

.attribute-label {
  /* Other styling... */
  text-align: right;
  clear: both;
  float:left;
  width: 8em;
  margin-right:15px;
}