:root {
    --primary: rgb(21, 120, 120); 
  }

#banner { position: relative; background: url("/assets/img/banner.jpg"); min-height: 150px; }
#banner .primary-overlay { background: rgba(21, 120, 120, 0.8); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/** Remove default margin. */
body { margin: 0; }


/* Adjust container sizing for better viewing on mobile devices */
 /* Modified from bootstrap.css file */
 .container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px) {
  .container-sm, .container {
    /* max-width: 570px; */
    width: 90%;
    max-width: calc(768px * .90);
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    /* max-width: 750px; */
    /* max-width: 500px; */
    width: 90%;
    max-width: calc(992px * .90);
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}

/* @media screen and (min-width: 64em) { .main-content { max-width: 80rem; padding: 2rem 4rem; margin: 0 auto; font-size: 1rem; } }
@media screen and (min-width: 42em) and (max-width: 64em) { .main-content { padding: 2rem 2rem; font-size: 1rem; } }
@media screen and (max-width: 42em) { .main-content { padding: 2rem 1rem; font-size: 1rem; } } */

.main-content h1, .main-content h2, .main-content h3, .main-content h4, .main-content h5, .main-content h6 { margin-top: 2rem; margin-bottom: 1rem; font-weight: normal; color: #159957; }

.main-content p { margin-bottom: 1em; }

.fa-lightbulb, .fa-envelope, .fa-question-circle { color: #157878; }

.plotDiv { width: 210px; /* max-width: 300px; */ }

@media (max-width: 400px) { .plotDiv { width: 300px; width: 95%; } }

/************************************/
/* Style settings for the KPI Cards */
/************************************/
.cardShareCounter { width: 100%; text-align: center; }

.share-link { width: 100px; cursor: pointer; text-align: center; vertical-align: center; }

.share-icon { color: var(--primary); cursor: pointer; }

.share-icon:hover { cursor: pointer; }

.card-counter { width: 100px; text-align: center; }

.right { width: 100px; }

/************************************/
/* General utility settings         */
/************************************/
.pointer { cursor: pointer; }