body, html {
  font-family: Soleil, sans-serif;
  font-weight: 400;
  font-size: 16px;
}

h1 {
  text-align: center;
  font-size: 1.65rem;
  color: #0b7279;
  margin-bottom: 20px;
  font-weight: 600;
}

header {
  margin-bottom: 25px;
}

header span {
  font-size: 2rem;
  text-align: center;
  line-height: 126px;
  margin-top: 47px;
  margin-right: 40px;
}

.logo {
  padding-top: 18px;
  text-align: right;
}

.filters {
  margin: 20px auto;
  font-size: 1rem;
  text-align: center;
}

.definitions {
  margin: 20px auto;
  font-size: 0.75rem;
}

.definitions h2, .definitions .h2 {
  font-size: 1.5rem;
}

.definitions h3, .definitions .h3 {
  font-size: 1.25rem;
}

.view-content {
  padding-top: 10px;
}

.laep-select {
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  padding: 5px;
  padding-right: 20px;
  margin-right: 5px;
  font-size: 1rem;
  border-radius: 0;
  outline: none;
  border: 1px solid #ffffff;
  border-bottom: 1px solid #c9c9c9;
  color: #47A0DA;
  color: #66696E;
  color: #242527;
  background-repeat: no-repeat;
  text-align: center;
  text-align-last: center;
  background-position: 97% 14px;
  background-image: url(menu-chevron-down.svg);
  background-size: 10px 10px;
  background-color: #f6f6f6;
  border-radius: 4px;
}

.laep-select:after {
  content: url(menu-chevron-down.svg);
}

/* shiny >= 1.9 renders a non-empty uiOutput() as display: contents, so the
   value boxes would lose their full-width .row column */
.view-content > .shiny-html-output {
  display: block;
}

/* MAP */

/* Long indicator names wrap instead of being cut off */
.mapboxgl-legend h2.mapgl-legend-title {
  white-space: normal !important;
  overflow: visible !important;
}

/* The "No data" legend has no title */
.mapboxgl-legend h2.mapgl-legend-title:empty {
  display: none;
}

/* Map popup — remove default Mapbox/Maplibre container chrome */
.mapboxgl-popup-content,
.maplibregl-popup-content {
  padding: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  border-radius: 8px;
}

.mapboxgl-popup,
.maplibregl-popup {
  z-index: 10 !important;
}

.mapboxgl-popup-close-button,
.maplibregl-popup-close-button {
  right: 6px !important;
  top: 6px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.28) !important;
  color: #fff !important;
  font-size: 15px !important;
  line-height: 22px !important;
  text-align: center !important;
  padding: 0 !important;
  z-index: 10;
  border: none !important;
}

.mapboxgl-popup-close-button:hover,
.maplibregl-popup-close-button:hover {
  background: rgba(0, 0, 0, 0.50) !important;
  color: #fff !important;
}

/* Hover tooltip; shares the popup chrome above */
.map-tooltip {
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Shared popup card */
.cv-popup {
  border-radius: 8px;
  overflow: hidden;
  min-width: 200px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  background: #ffffff;
}

.cv-popup-header {
  padding: 10px 32px 10px 12px;
  display: flex;
  align-items: center;
}

.cv-popup-icon {
  font-size: 18px;
  margin-right: 10px;
  flex-shrink: 0;
}

.cv-popup-title {
  font-size: 15px;
}

.cv-popup-body {
  padding: 10px 12px;
  background: #ffffff;
  color: #333333;
  font-size: 13px;
}

.cv-popup-field {
  margin-bottom: 4px;
}

.cv-popup-footer {
  margin-top: 8px;
  font-size: 11px;
  color: #7B8794;
  font-style: italic;
}

/* DATA TABLES */
table.dataTable {
}

.datatables div.dataTables_wrapper, .datatables .dataTables_wrapper div.dataTables_info {
  font-size: 0.750rem;
}

.datatables .dataTables_length, .datatables .dataTables_filter {
  margin-bottom: 0px !important;
  display: inline-block;
  float: right;
  margin-left: 40px;
}

.content-embed .btn-secondary {
  --bs-btn-color: #000;
  --bs-btn-bg: #e6e6e6;
  --bs-btn-border-color: #e6e6e6;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #c9c9c9;
  --bs-btn-hover-border-color: #c9c9c9;
  --bs-btn-focus-shadow-rgb: 113,161,84;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #c9c9c9;
  --bs-btn-active-border-color: #c9c9c9;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #e6e6e6;
  --bs-btn-disabled-border-color: #e6e6e6;

  font-size: 0.75rem;
}

div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label,
.form-select {
  color: #8B8E95;
}

.datatables .dataTables_wrapper .dataTables_length select,
.datatables .dataTables_wrapper .dataTables_filter input {
  border-bottom: 1px solid #8B8E95;
}

.table>:not(caption)>*>* {
  padding: 6px;
  border-bottom: 1px solid #A9CAEA;
}

.table>:not(caption)>*>* {
  padding: 6px;
  border-bottom: 1px solid #A9CAEA;
}

.datatables .dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_paginate {
  margin-top: 0px !important;
}

.table>thead>tr {
  border-bottom: 2px solid #737579;
}

dl {
  font-size: 0.875rem;
}

/* EMBEDDED WIDGETS */
.content-embed {
  /*
  max-width: 1200px;
  background-color: #efeded;
  */
  padding: 10px;

  --bs-nav-link-padding-x: 1rem;
  --bs-nav-link-padding-y: .5rem;
  --bs-nav-link-font-weight: 400;
  --bs-nav-link-font-size: 13px;
  --bs-nav-link-icon-size: 24px;
  --bs-nav-link-color: var(--bs-link-color);
  --bs-nav-link-hover-color: var(--bs-link-hover-color);
  --bs-nav-link-disabled-color: #6c757d;
  --bs-card-spacer-x: 0;
  --bs-card-spacer-y: 0;

  --cv-card-nav-tabs-border-radius: 10px;

  --bslib-spacer: 1rem 2rem;

  --bs-link-color: #85BD63;
  --bs-link-color: #47A0DA;
  --bs-link-color: #206d9f;
  --bs-link-hover-color: #000;

  --bs-nav-link-padding-x: 1rem;
  --bs-nav-link-padding-y: .5rem;
  --bs-nav-link-font-weight: 400;
  --bs-nav-link-font-size: 13px;
  --bs-nav-link-icon-size: 24px;
  --bs-nav-link-color: var(--bs-link-color);
  --bs-nav-link-hover-color: var(--bs-link-hover-color);
  --bs-nav-link-disabled-color: #6c757d;
  --bs-nav-pills-link-active-color: #6c757d;
  --bs-nav-pills-link-active-bg: #ffffff

  --bs-card-spacer-x: 0;
  --bs-card-spacer-y: 0;

  --bs-btn-font-size: 0.75rem;

  --cv-brand-color-primary: #8B8E95;
  --cv-brand-color-secondary: #85BD63;
  --cv-brand-color-inverse: #ffffff;

  --cv-sidebar-bg-color: var(--cv-brand-color-primary);
  --cv-sidebar-color: var(--cv-brand-color-inverse);
  --cv-sidebar-active-bg-color: var(--cv-brand-color-inverse);
  --cv-sidebar-active-color: var(--cv-brand-color-primary);


}

/* NAVSET PILLS LIST */
.content-embed #cityviz-widget-charts {
  display: block;
}

.content-embed #cityviz-widget-links {
  display: none;
}

.content-embed .nav {
  border: none;
}

.content-embed .well {
  padding: 0;
  border: none;
  border-radius: 0.67rem;
  background-color: var(--cv-sidebar-bg-color);
}

.content-embed .well.col-sm-1 {
  width: 88px;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
}

.content-embed .well ~ .col-sm-11 {
  margin-left: 100px;
  width: calc(100% - 110px)
}

.content-embed .nav-pills>li>a {
  color: var(--cv-sidebar-color);
  padding: 12px 4px;
  font-weight: var(--bs-nav-link-font-weight);
  text-align: center;
  border-radius: 0;
  font-size: 11px;
}

.content-embed .nav-pills>li.active>a {
  background-color: var(--cv-sidebar-active-bg-color);
  color: var(--cv-sidebar-active-color);
}

.content-embed .nav-pills>li:first-of-type>a {
  border-top-right-radius: 0.67rem;
  border-top-left-radius: 0.67rem;
}

.content-embed .nav-pills>li>a>div {
  font-size: var(--bs-nav-link-icon-size);
}

/* Media Queries */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .content-embed #cityviz-widget-charts {
    display: none;
  }

  .content-embed #cityviz-widget-links {
    display: block;
  }

  #cityviz-widget-links ul {
    list-style: none;
  }

  .content-embed .well.col-sm-1 {
    width: 50px;
  }
  .content-embed .well ~ .col-sm-11 {
    margin-left: 60px;
    width: calc(100% - 70px);
  }
  .content-embed .card-header li>a {
    font-size: 10px;
  }

  .content-embed .nav-pills>li>a {
    padding: 12px 0px;
    font-size: 10px;
  }

  .content-embed .nav-pills>li>a>div {
    font-size: 1.1rem;
  }
  .transportation-routes-legend {
    display: none;
  }
}

/* Small devices (portrait tablets and large phones, 600px to 768px) */
@media only screen and (min-width: 601px) and (max-width: 768px) {
  .content-embed .well.col-sm-1 {
    width: 60px;
  }
  .content-embed .well ~ .col-sm-11 {
    margin-left: 70px;
    width: calc(100% - 80px);
  }
  .content-embed .card-header li>a {
    font-size: 11px;
  }
  .content-embed .nav-pills>li>a {
    padding: 12px 2px;
    font-size: 10px;
  }
  .content-embed .nav-pills>li>a>div {
    font-size: 1.2rem;
  }
  .transportation-routes-legend {
    display: none;
  }
}

/* Medium devices (landscape tablets, 768px to 992px) */
@media only screen and (min-width: 769px) and (max-width: 992px) {
  .content-embed .well.col-sm-1 {
    width: 70px;
  }
  .content-embed .well ~ .col-sm-11 {
    margin-left: 80px;
    width: calc(100% - 90px);
  }
  .content-embed .card-header li>a {
    font-size: 12px;
  }
  .content-embed .nav-pills>li>a {
    padding: 12px 2px;
    font-size: 11px;
  }
  .content-embed .nav-pills>li>a>div {
    font-size: 1.5rem;
  }
  .transportation-routes-legend {
    display: none;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 993px) {
  /* No changes needed for larger screens as the default styles apply */
}

/* CARDS */
.content-embed .card {
  border: none;
  border-radius: 10px;
  background-color: #ffffff;
}

.content-embed .card-header {
  padding-bottom: 0;
  font-size: 13px;
  font-weight: bold;
  border: none;
  background-color: #efeded;
  padding-bottom: 0.5rem;
  text-transform: uppercase;
}

.content-embed .card-header li>a {
  font-weight: normal;
  padding-left: 10px;
  padding-right: 10px;
  text-transform: none;
}
/*
.content-embed .card-header li.active>a,
.content-embed .card-header li>a:hover,
.content-embed .card-header li>a:focus  {
  color: var(--cv-sidebar-color);
  background-color: var(--cv-sidebar-bg-color);
  font-weight: normal;
  border-top-left-radius: var(--cv-card-nav-tabs-border-radius);
  border-top-right-radius: var(--cv-card-nav-tabs-border-radius);
  border-bottom-left-radius: var(--cv-card-nav-tabs-border-radius);
  border-bottom-right-radius: var(--cv-card-nav-tabs-border-radius);
}
*/
.content-embed .card-header li>a:hover,
.content-embed .card-header li>a:focus  {
  opacity: 0.75;
}

.content-embed .bslib-card .bslib-navs-card-title {
  justify-content: flex-start;
}

.content-embed .bslib-card .card-header-tabs {
  justify-content: flex-start;
}
/*
.content-embed .bslib-card .bslib-navs-card-title .nav {
  margin-left: 0;
}
*/
.content-embed .card-body {
  --bs-card-spacer-x: 0.25rem;
  --bs-card-spacer-y: 0.25rem;
  color: #000000;
}

.bslib-card .card-body p, .bslib-card .card-body ol li, .bslib-card .card-body ul li {
  margin-bottom: 10px;
  font-size: 0.875rem;
}

.content-embed .card .tab-content {
  background-color: #ffffff;
  border-radius: 10px;
}

/* VALUE BOXES */
.card.laep-value-box {
  background-color: #d7f0ff;
}

.content-embed .bslib-value-box.bg-primary {
  background-color: #ffffff;
}

.content-embed .bslib-value-box .value-box-area {
  padding: 0.5rem 1rem;
  font-weight: 200;
}

.content-embed .bslib-value-box .value-box-area>:nth-child(2) {
  /*font-size: calc(1.325rem + .9vw);*/
  font-size: calc(1.325rem);
  margin-top: 0;
  /*margin-bottom: .5rem;*/
  font-weight: 700;
  line-height: 1.2;
  color: var(--bs-heading-color);
  color: inherit;
}

.content-embed .bslib-value-box .value-box-value>span.small {
  font-size: 0.75rem;
  font-weight: normal;
}

.content-embed .value-box-showcase {
  background-color: #ffb249;
  font-weight: 700;
  font-size: 1.2rem;
  border-radius: 0.67rem;
}

.bslib-card .card-body .value-box-area p.value-box-description {
  margin-bottom: 0;
/*  line-height: 1rem;*/
}

.content-embed footer {
  background-color: transparent;
  color: #3E4C59;
  padding: 7px 0 0;
  text-align: right;
  font-size: 0.75rem;
}

.content-embed footer a {
  color: var(--cv-link-color);
  font-weight: 700;
}

.content-embed footer a:hover {
  color: var(--cv-link-hover-color);
}

/* REFERENCES */
.references {
  padding: 1rem;
  font-size: 0.8rem;
}

.references p {
  margin-bottom: 0.4rem;
}

/* Rounded corners */
div.js-plotly-plot > div > div > svg > g.infolayer > g.legend,
div.js-plotly-plot > div > div > svg > g.cartesianlayer > g > g.plot > g.barlayer > g > g > path,
div.js-plotly-plot > div > div > svg > g.cartesianlayer > g > g.plot > g.scatterlayer > g > g.lines > path,
div.js-plotly-plot > div > div > svg > g.cartesianlayer > g > g.plot > g.barlayer > g > g > g > path,
div.js-plotly-plot > div > div > svg > g.cartesianlayer > g > g.plot > g.waterfalllayer > g > g > g > path,
div.js-plotly-plot > div > div > svg > g.treemaplayer > g > g > path,
div.js-plotly-plot > div > div > svg > g.indicatorlayer > g > g.bullet > g > rect,
div.js-plotly-plot > div > div > svg > g.sankey > g.sankey-node-set > g.sankey-node rect {
  clip-path: inset(1px 1px 1px 1px round 4px);
}

div.js-plotly-plot > div > div > svg > g.infolayer > g.legend g.scrollbox > g > g > g > g > g > path {
  clip-path: inset(1px 1px 1px 1px round 2px);
}

div.js-plotly-plot > div > div > svg > g.hoverlayer > g.hovertext > path {
  clip-path: inset(0% 0% 0% 0% round 4px);
}

/* Tabs ---- */
.tab-content {
/*  padding: 20px 10px;*/
}

/* Popovers ---- */
.popover-topic-description {
  background-color: #e6e6e6;
  max-width: 400px;
  font-size: 12px;
}

.popover-topic-description .popover-header {
  background-color: #c6c6c6;
  font-weight: 700;
}

/* BS Icons */
.bi {
  outline: none;
}


.bslib-gap-spacing {
  gap: 0
}

.laep-selector {
  font-size: 0.875rem;
}

.laep-selector .bootstrap-select>.dropdown-toggle {
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  outline: none;
}

.laep-selector .bootstrap-select .dropdown-toggle:focus,
.laep-selector .bootstrap-select>select.mobile-device:focus+.dropdown-toggle {
  outline: none;
}

.laep-selector .form-group {
  margin-bottom: 0;
}

.laep-selector .selectize-control.single .selectize-input,
.laep-selector .selectize-control.single .selectize-input input {
  border: 1px solid rgb(141, 149, 158)
}

.laep-card-footer {
  font-size: 0.75rem;
  padding-left: 1rem;
  color: #67696E;
}

.notes {
  padding: 20px 0 0;
  font-size: 0.75rem;
}