html {
  --re-black: #003142;
  --re-white: #ffffff;
  --re-green: #79b829;
  --re-light-green: #7ab800;
  --re-dark-green: #5b8f22;
  --re-light-blue: #00afd8;
  --re-dark-blue: #076c8f;
  --re-light-yellow: #fed100;
  --re-dark-yellow: #f0b300;
  --re-light-red: #ca005d;
  --re-dark-red: #91004b;
  --re-light-gray: #37424a;
  --re-dark-gray: #2a2623;
  --re-theme-primary: var(--re-dark-blue);
  --re-theme-on-primary: var(--re-white, #ffffff);
  --re-theme-focus: var(--re-theme-primary);
  --re-theme-focus-60pct: var(--re-theme-primary);
  --re-theme-focus-40pct: var(--re-theme-primary);
  --re-theme-focus-20pct: var(--re-theme-primary);
  --re-theme-on-focus: #ffffff;
  --re-theme-surface: #ffffff;
  --re-theme-surface-60pct: #ffffff99;
  --re-theme-surface-40pct: #ffffff66;
  --re-theme-surface-20pct: #ffffff33;
  --re-theme-surface-accent: #f6f7f9;
  --re-theme-on-surface: #134149;
  --re-theme-on-surface-60pct: #00000099;
  --re-theme-on-surface-40pct: #00000066;
  --re-theme-on-surface-20pct: #00000033;
  --re-theme-on-surface-accent: #3f474b;
  --re-theme-on-surface-accent-20pct: #eee;
  --re-theme-disabled-surface: #f8f8f8;
  --re-theme-on-disabled-surface: #bfbfbf;
  --re-theme-on-disabled-surface-accent: rgba(191, 191, 191, .32);
  --re-page-background: #e7e7e7;
  --re-content-background: #ffffff;
  --re-navitem-active-background: var(--re-theme-primary);
  --re-navitem-active-foreground: var(--re-white);
  --re-button-background: var(--re-theme-primary);
  --re-button-foreground: var(--re-white);
  --re-button-highlight-background: var(--re-theme-primary);
  --re-primary-text-color: #3a0f27;
  --re-secondary-text-color: #9c8793;
  --re-panel-background: #f1f1f1;
  --re-panel-foreground: var(--re-theme-primary);
  --re-selection-background: var(--re-theme-primary);
  --re-selection-foreground: #ffffff;
  --re-hover-background: var(--re-theme-primary);
  --re-hover-foreground: #ffffff;
  --re-alert-color: #fed005;
  --re-primary-alert-panel-background: var(--re-alert-color);
  --re-primary-alert-panel-foreground: var(--re-panel-foreground);
  --re-secondary-alert-panel-background: #e7e6e6;
  --re-secondary-alert-panel-border: #a2a2a2;
  --re-border-color: #e3dde0;
  --re-border-bold-color: var(--re-theme-primary);
  --re-input-placeholder-color: rgba(57, 112, 193, 0.6);
  --re-link-color: var(--re-theme-primary);
  --re-table-stripe-background: #f2f2f2;
  --re-table-border-color: #e7e7e7;
  --re-site-list-item-background: var(--re-table-stripe-background);
  --re-warning-color: var(--re-theme-primary);
  --re-meter-status-grey: #777777;
  --re-meter-status-dark-blue: #0c5460;
  --re-alert-dialog-background: var(--re-content-background);
  --re-curr-period: #3a0f27;
  --re-prev-period: #e7e7e7;
  --re-chart-axis-stroke: #3a0f27;
  --re-chart-axis-text: #020203;
  --re-chart-grid-stroke: #ebe7e9;
  --re-hot-water: #ff7777;
  --re-cold-water: #9067b1;
  --re-total-water: #dd48cb;
  --re-alert-off-button-color: var(--re-meter-status-grey);
  --re-datepicker-focus-background: #ffecf9;
}

html, body {
  font-family: "Open Sans", Helvetica, sans-serif;
  height: 100vh;
}

body {
  background-image: url("/static/img/realeco-metering/realeco_header_1152x653.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#page-container {
  height: calc(100vh - 2rem);
}

#page-content {
  height: 100%;
  display: flex;
  align-items: center;
}

#page-footer {
  background: rgba(0, 0, 0, 0.5);
  height: 2rem;
  color: #ddd;
}
#page-footer .re-bottombar.single-line {
  padding: 5px 10px 0 5px;
}

.login-container .login-well {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 0;
  max-width: 500px;
  margin: auto auto 2rem;
}
.login-container h1, .login-container h2, .login-container h3, .login-container h4 {
  color: var(--re-light-gray);
}
.login-container h4 {
  display: none;
}
.login-container .alert {
  margin-bottom: 0;
  margin-top: 20px;
}
.login-container form {
  padding: 1.5rem 0 0 0;
  margin: 0 0 15px;
}
.login-container p {
  color: var(--re-light-gray);
  font-size: 0.9em;
}
.login-container p a {
  color: var(--re-light-gray);
  text-decoration: underline;
}
.login-container p a:hover, .login-container p a:focus {
  color: var(--re-dark-gray);
}
.login-container input[type=text]:focus,
.login-container input[type=password]:focus {
  border-color: rgba(var(--re-dark-gray), 0.8);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(var(--re-light-gray), 0.6);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(var(--re-light-gray), 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(var(--re-light-gray), 0.6);
}
.login-container button.btn, .login-container input[type=submit].btn {
  background: var(--re-theme-primary);
  color: #ffffff;
  border-radius: 0;
  padding: 0.5rem 1rem;
  margin-top: 0.5rem;
}
.login-container button.btn:hover, .login-container input[type=submit].btn:hover {
  background: var(--re-theme-primary);
  color: #ffffff;
}
.login-container .brand {
  font-size: 35px;
  font-weight: bold;
  color: var(--re-light-gray);
  text-shadow: none;
}
.login-container .brand img {
  height: 50px;
}

@media (max-width: 640px) {
  .login-container .login-well {
    max-width: none;
    margin: 2rem 1rem;
  }
}