/*
Add styles unrelated to Bootstrap here. Customizing Bootstrap?
Make your changes to the Sass file.
*/
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

.grayscale-high-contrast {
  filter: grayscale(1) invert(1);
}

#detail-page-dropdown.dropdown-menu {
  width: 100vw;
  left: 50%;
  transform: translate(-50%, -1px);
}

.h4 {
  font-weight: 800 !important;
}

.anchor {
  scroll-margin-top: 75px;
}

.item-body {
  padding: 1rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
}

.section {
  padding: 1em;
}

/* CHARTS */
.chart-section-heading {
  font-family: "Playfair Display";
  font-size: 1em;
  font-weight: 500;
  padding-left: 1em;
  padding-bottom: 1em;
}

.chart-subtitle {
  font-size: 0.95rem;
  margin-bottom: 1em;
}

.x-axis-label-container {
  display: inline-block;
  width: 150px;
  overflow-x: auto;
  overflow-wrap: break-word;
  white-space: normal;
}

@media screen and (max-width: 1230px) {
  .x-axis-label-container {
    display: inline-block;
    width: 125px;
    overflow-x: auto;
    overflow-wrap: break-word;
    white-space: normal;
  }
}

@media screen and (max-width: 600px) {
  .x-axis-label-container {
    display: inline-block;
    width: 90px;
    overflow-x: auto;
    overflow-wrap: break-word;
    white-space: normal;
  }

  .item-body {
    padding: 0.5rem;
  }
}
.highcharts-credits {
  font-size: 1em;
}

.color-increase {
  color: #edb407;
}

.color-decrease {
  color: #e6764a;
}

.color-no-change {
  color: gray;
}

.dummy-series.increase-series.highcharts-legend-item-hidden > rect {
  fill: #edb407 !important;
  stroke: #edb407 !important;
}

.dummy-series.decrease-series.highcharts-legend-item-hidden > rect {
  fill: #e6764a !important;
  stroke: #e6764a !important;
}

.dummy-series.city-series.highcharts-legend-item-hidden > rect {
  fill: #000 !important;
  stroke: #000 !important;
}

.dummy-series.highcharts-legend-item-hidden > span {
  text-decoration: none !important;
  color: inherit !important;
}

.highcharts-color-0 {
  background-color: #002554;
}

.highcharts-color-1 {
  background-color: #008bb0;
}

.highcharts-color-2 {
  background-color: #f78154;
}

.highcharts-color-3 {
  background-color: #edb407;
}

.highcharts-color-4 {
  background-color: #879051;
}

.highcharts-color-5 {
  background-color: #46866f;
}

.highcharts-color-6 {
  background-color: #82b8ac;
}

.highcharts-color-7 {
  background-color: #bee9e8;
}

h5.method-source-header {
  font-weight: 100;
  margin-top: 1rem;
}

.method-body {
  padding: 0rem 2rem;
}

.home-page-label-text {
  font-size: large;
  text-decoration: none;
  color: black;
  /* font-family: "Playfair Display"; */
}

.home-page-label:hover {
  background-color: rgba(255, 251, 184, 0.872);
  font-weight: bold;
}

.header {
  font-weight: 600;
}

.get-started {
  font-weight: normal;
}

.main-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

.full-height {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.main-bg {
  background-image: url("../images/chicago-map-image-4.8a6704e18548.svg");
  background-size: cover;
  background-position: center;
}

#indicator-index th,
#indicator-index td {
  padding: 1rem !important;
}

.highcharts-tooltip p {
  margin: 0px;
}