.rural-pop-evolution-chart,
.urban-pop-evolution-chart,
.urban-agglo-1m-chart,
.urban-agglo-1m-share-chart,
.urban-slums-chart,
.urban-slums-share-chart,
.port-au-prince-pop-chart,
.rural-area-bar-chart,
.urban-area-bar-chart,
.urban-rural-share-chart,
.cities-towns-rural-chart,
.urban-rural-projection-chart,
.urban-share-projection-chart,
.cities-towns-share-projection-chart,
.largest-city-share-projection-chart,
.hyde-urban-share-chart {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  height: 240px;
  min-height: 200px;
  max-height: 240px;
  margin-top: 14px;
  overflow: visible;
  position: relative;
  box-sizing: border-box;
}

.rural-pop-evolution-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
.urban-pop-evolution-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
.urban-agglo-1m-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
.urban-agglo-1m-share-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
.urban-slums-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
.urban-slums-share-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
.port-au-prince-pop-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
.urban-rural-projection-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
.urban-share-projection-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
.cities-towns-share-projection-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
.largest-city-share-projection-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
.hyde-urban-share-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip {
  position: absolute;
  z-index: 6;
  display: none;
  pointer-events: none;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  border-radius: 4px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  background: rgba(22, 27, 34, 0.97);
  color: #e6edf3;
  border: 1px solid #30363d;
}

.light-theme .rural-pop-evolution-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
html.light-theme .rural-pop-evolution-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
.light-theme .urban-pop-evolution-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
html.light-theme .urban-pop-evolution-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
.light-theme .urban-agglo-1m-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
html.light-theme .urban-agglo-1m-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
.light-theme .urban-agglo-1m-share-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
html.light-theme .urban-agglo-1m-share-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
.light-theme .urban-slums-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
html.light-theme .urban-slums-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
.light-theme .urban-slums-share-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
html.light-theme .urban-slums-share-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
.light-theme .port-au-prince-pop-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
html.light-theme .port-au-prince-pop-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
.light-theme .urban-rural-projection-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
html.light-theme .urban-rural-projection-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
.light-theme .urban-share-projection-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
html.light-theme .urban-share-projection-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
.light-theme .cities-towns-share-projection-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
html.light-theme .cities-towns-share-projection-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
.light-theme .largest-city-share-projection-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
html.light-theme .largest-city-share-projection-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
.light-theme .hyde-urban-share-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip,
html.light-theme .hyde-urban-share-chart.d3plus-line-chart--interactive .d3plus-line-chart-floating-tooltip {
  background: #fff;
  color: #2b2929;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08);
}

.rural-pop-evolution-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
.urban-pop-evolution-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
.urban-agglo-1m-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
.urban-agglo-1m-share-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
.urban-slums-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
.urban-slums-share-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
.port-au-prince-pop-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
.urban-rural-projection-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
.urban-share-projection-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
.cities-towns-share-projection-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
.largest-city-share-projection-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
.hyde-urban-share-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair {
  stroke: #ffffff;
  stroke-opacity: 0.65;
}

.light-theme .rural-pop-evolution-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
html.light-theme .rural-pop-evolution-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
.light-theme .urban-pop-evolution-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
html.light-theme .urban-pop-evolution-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
.light-theme .urban-agglo-1m-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
html.light-theme .urban-agglo-1m-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
.light-theme .urban-agglo-1m-share-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
html.light-theme .urban-agglo-1m-share-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
.light-theme .urban-slums-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
html.light-theme .urban-slums-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
.light-theme .urban-slums-share-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
html.light-theme .urban-slums-share-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
.light-theme .port-au-prince-pop-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
html.light-theme .port-au-prince-pop-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
.light-theme .urban-rural-projection-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
html.light-theme .urban-rural-projection-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
.light-theme .urban-share-projection-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
html.light-theme .urban-share-projection-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
.light-theme .cities-towns-share-projection-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
html.light-theme .cities-towns-share-projection-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
.light-theme .largest-city-share-projection-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
html.light-theme .largest-city-share-projection-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
.light-theme .hyde-urban-share-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair,
html.light-theme .hyde-urban-share-chart.d3plus-line-chart--interactive .d3plus-line-chart-crosshair {
  stroke: #3b3b3b;
  stroke-opacity: 0.5;
}

.rural-pop-evolution-chart .d3plus-viz,
.rural-pop-evolution-chart svg,
.urban-pop-evolution-chart .d3plus-viz,
.urban-pop-evolution-chart svg,
.urban-agglo-1m-chart .d3plus-viz,
.urban-agglo-1m-chart svg,
.urban-agglo-1m-share-chart .d3plus-viz,
.urban-agglo-1m-share-chart svg,
.urban-slums-chart .d3plus-viz,
.urban-slums-chart svg,
.urban-slums-share-chart .d3plus-viz,
.urban-slums-share-chart svg,
.port-au-prince-pop-chart .d3plus-viz,
.port-au-prince-pop-chart svg,
.rural-area-bar-chart .d3plus-viz,
.rural-area-bar-chart svg,
.urban-area-bar-chart .d3plus-viz,
.urban-area-bar-chart svg,
.urban-rural-share-chart .d3plus-viz,
.urban-rural-share-chart svg,
.cities-towns-rural-chart .d3plus-viz,
.cities-towns-rural-chart svg,
.urban-rural-projection-chart .d3plus-viz,
.urban-rural-projection-chart svg,
.urban-share-projection-chart .d3plus-viz,
.urban-share-projection-chart svg,
.cities-towns-share-projection-chart .d3plus-viz,
.cities-towns-share-projection-chart svg,
.largest-city-share-projection-chart .d3plus-viz,
.largest-city-share-projection-chart svg,
.hyde-urban-share-chart .d3plus-viz,
.hyde-urban-share-chart svg {
  max-width: 100% !important;
}

.chart-subsection-title + .hyde-urban-share-block {
  margin-top: 0;
}

.hyde-urban-share-block {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

.hyde-urban-share-block .chart-container--line {
  width: 100%;
  max-width: 100%;
  min-height: 0;
  height: auto;
  margin-top: 0;
  box-sizing: border-box;
}

.hyde-urban-share-block .chart-container--line .chart-export-root {
  background: var(--dark-component);
}

.dark-theme .hyde-urban-share-block .chart-container--line .chart-export-root,
html.dark-theme .hyde-urban-share-block .chart-container--line .chart-export-root {
  background: transparent;
}

.chart-subsection-title + .urban-agglo-1m-share-block {
  margin-top: 0;
}

.urban-agglo-1m-share-block {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

.urban-agglo-1m-share-block .chart-container--line {
  width: 100%;
  max-width: 100%;
  min-height: 0;
  height: auto;
  margin-top: 0;
  box-sizing: border-box;
}

.urban-agglo-1m-share-block .chart-container--line .chart-export-root {
  background: var(--dark-component);
}

.dark-theme .urban-agglo-1m-share-block .chart-container--line .chart-export-root,
html.dark-theme .urban-agglo-1m-share-block .chart-container--line .chart-export-root {
  background: transparent;
}

.chart-subsection-title + .urban-slums-share-block {
  margin-top: 0;
}

.urban-slums-share-block {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

.urban-slums-share-block .chart-container--line {
  width: 100%;
  max-width: 100%;
  min-height: 0;
  height: auto;
  margin-top: 0;
  box-sizing: border-box;
}

.urban-slums-share-block .chart-container--line .chart-export-root {
  background: var(--dark-component);
}

.dark-theme .urban-slums-share-block .chart-container--line .chart-export-root,
html.dark-theme .urban-slums-share-block .chart-container--line .chart-export-root {
  background: transparent;
}

.pop-grid-block {
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
}

.chart-container--pop-grid {
  width: 100%;
  max-width: 100%;
  min-height: 380px;
  background: transparent;
  border: 1px solid var(--chart-border, var(--border, #eceef2));
  border-radius: var(--chart-radius, 8px);
  overflow: hidden;
}

html.dark-theme .chart-container--pop-grid {
  background: transparent;
  border-color: var(--chart-border, rgba(240, 246, 252, 0.1));
}

.dark-theme .chart-container--pop-grid .chart-export-root,
html.dark-theme .chart-container--pop-grid .chart-export-root {
  background: transparent;
}

.chart-container--pop-grid .chart-content {
  padding: 14px 14px 14px;
}

.pop-grid-maplibre {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 320px;
  height: 320px;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
  border-radius: calc(var(--chart-radius, 8px) - 2px);
  visibility: hidden;
}

.pop-grid-maplibre.is-map-ready {
  visibility: visible;
}

.pop-grid-maplibre .maplibregl-map {
  font-family: inherit;
  background: transparent;
}

.pop-grid-maplibre .maplibregl-canvas {
  outline: none;
  background: transparent;
}

.pop-grid-block .maplibregl-ctrl-top-right,
.pop-grid-block .maplibregl-ctrl-bottom-right {
  z-index: 2;
}

.pop-grid-block .maplibregl-ctrl-top-right {
  top: 8px;
  right: 8px;
}

.pop-grid-block .maplibregl-ctrl-bottom-right {
  right: 8px;
  bottom: 8px;
}

.pop-grid-block .maplibregl-ctrl-group {
  background: var(--dark-component, #fff);
  border: 1px solid var(--chart-border, var(--border, #eceef2));
  border-radius: calc(var(--chart-radius, 8px) - 2px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.pop-grid-block .maplibregl-ctrl-group button {
  width: 30px;
  height: 30px;
}

.pop-grid-block .maplibregl-ctrl-bottom-right .maplibregl-ctrl-scale {
  margin: 0 0 6px;
  border-color: var(--chart-border, var(--border, #eceef2));
  background: rgba(255, 255, 255, 0.92);
  color: var(--text, #24292f);
  font-size: 10px;
}

.pop-grid-block .maplibregl-ctrl-attrib {
  font-size: 10px;
  opacity: 0.85;
}

.pop-grid-map-legend {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  min-width: 120px;
  padding: 8px 10px;
  border-radius: calc(var(--chart-radius, 8px) - 2px);
  border: 1px solid var(--chart-border, var(--border, #eceef2));
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

.pop-grid-map-legend__title {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
}

.pop-grid-map-legend__bar {
  height: 10px;
  border-radius: 3px;
}

.pop-grid-map-legend__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 10px;
  color: var(--text-muted, #57606a);
}

.pop-grid-map-popup-wrap .maplibregl-popup-content {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  background: var(--dark-component, #fff);
  color: var(--text, #24292f);
  border: 1px solid var(--chart-border, var(--border, #eceef2));
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.pop-grid-map-popup-wrap .maplibregl-popup-close-button {
  font-size: 16px;
  color: var(--text-muted, #57606a);
}

.pop-grid-map-popup-wrap.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.pop-grid-map-popup-wrap.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.pop-grid-map-popup-wrap.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
  border-bottom-color: var(--dark-component, #fff);
}

.pop-grid-map-popup-wrap.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.pop-grid-map-popup-wrap.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.pop-grid-map-popup-wrap.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
  border-top-color: var(--dark-component, #fff);
}

.pop-grid-map-popup-wrap.maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: var(--dark-component, #fff);
}

.pop-grid-map-popup-wrap.maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: var(--dark-component, #fff);
}

.pop-grid-map-popup__row + .pop-grid-map-popup__row {
  margin-top: 4px;
}

.pop-grid-map-popup__label {
  color: var(--text-muted, #57606a);
}

.dark-theme .pop-grid-block .maplibregl-ctrl-group,
html.dark-theme .pop-grid-block .maplibregl-ctrl-group {
  background: var(--dark-component, #161b22);
  border-color: var(--chart-border, rgba(240, 246, 252, 0.1));
}

.dark-theme .pop-grid-block .maplibregl-ctrl-bottom-right .maplibregl-ctrl-scale,
html.dark-theme .pop-grid-block .maplibregl-ctrl-bottom-right .maplibregl-ctrl-scale {
  background: rgba(22, 27, 34, 0.92);
  color: var(--text, #e6edf3);
  border-color: var(--chart-border, rgba(240, 246, 252, 0.1));
}

.dark-theme .pop-grid-block .maplibregl-ctrl-attrib,
html.dark-theme .pop-grid-block .maplibregl-ctrl-attrib {
  background: rgba(22, 27, 34, 0.75);
  color: var(--text-muted, #8b949e);
}

.dark-theme .pop-grid-map-legend,
html.dark-theme .pop-grid-map-legend {
  background: rgba(22, 27, 34, 0.94);
  border-color: var(--chart-border, rgba(240, 246, 252, 0.1));
  color: var(--text, #e6edf3);
}

.dark-theme .pop-grid-map-legend__ticks,
html.dark-theme .pop-grid-map-legend__ticks {
  color: var(--text-muted, #8b949e);
}

.most-populated-cities-bar-wrap {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.most-populated-cities-bar-chart {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  height: auto;
  margin-top: 0;
  overflow: visible;
  box-sizing: border-box;
}

.most-populated-cities-bar-chart .d3plus-viz,
.most-populated-cities-bar-chart svg {
  max-width: 100% !important;
}

.most-populated-cities-block .chart-split-col--table .chart-container--ranking {
  overflow: hidden;
}

.most-populated-cities-block .chart-split-col--table .ranking-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.most-populated-cities-block .chart-split-col--table .chart-export-root {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#mostPopulatedCitiesBlock .chart-split-row .chart-container--line,
#mostPopulatedCitiesBlock .chart-split-row .chart-container--ranking {
  height: 380px;
  min-height: 380px;
  max-height: 380px;
}

.most-populated-cities-block .chart-split-col--map .chart-container--line {
  width: calc(100% - 44px);
  max-width: calc(100% - 44px);
  min-height: 0;
  height: 380px;
  margin-top: 0;
  box-sizing: border-box;
}

.most-populated-cities-block .chart-split-col--map .chart-container--line .chart-export-root {
  background: var(--dark-component);
}

.dark-theme .most-populated-cities-block .chart-split-col--map .chart-container--line .chart-export-root,
html.dark-theme .most-populated-cities-block .chart-split-col--map .chart-container--line .chart-export-root {
  background: transparent;
}

.most-populated-cities-block .chart-split-col--table #mostPopulatedCitiesTable.chart-ranking-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 0 18px 0 8px;
  box-sizing: border-box;
}

.most-populated-cities-block #mostPopulatedCitiesTable .chart-ranking-table,
.most-populated-cities-block #mostPopulatedCitiesTable .chart-ranking-table tbody td,
.most-populated-cities-block #mostPopulatedCitiesTable .chart-ranking-rank,
.most-populated-cities-block #mostPopulatedCitiesTable .chart-ranking-name,
.most-populated-cities-block #mostPopulatedCitiesTable .chart-ranking-stat,
.most-populated-cities-block #mostPopulatedCitiesTable .chart-ranking-stat-value,
.most-populated-cities-block #mostPopulatedCitiesTable .chart-ranking-change {
  font-family: var(--base-font-stack, "Palanquin", sans-serif);
}

.most-populated-cities-block #mostPopulatedCitiesTable .chart-ranking-table tbody td {
  padding: 5px 0;
}

.most-populated-cities-block #mostPopulatedCitiesTable .chart-ranking-rank {
  padding-right: 12px;
}

.most-populated-cities-block #mostPopulatedCitiesRankingBody tr .chart-ranking-name {
  color: var(--cartes-blue, #334f74);
  font-weight: 500;
  padding-right: 16px;
}

.most-populated-cities-block #mostPopulatedCitiesRankingBody tr .chart-ranking-stat-value {
  color: var(--textblue, #2a425c);
}

.most-populated-cities-block #mostPopulatedCitiesTable .chart-ranking-stat {
  padding-left: 12px;
  padding-right: 14px;
}

.most-populated-cities-block #mostPopulatedCitiesTable .chart-ranking-change {
  width: 4.75rem;
  padding-left: 10px;
  text-align: right;
  white-space: nowrap;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.most-populated-cities-block #mostPopulatedCitiesTable .chart-ranking-change--zero {
  color: #cf222e;
  font-weight: 500;
}

.most-populated-cities-block #mostPopulatedCitiesTable .chart-ranking-change--growth {
  color: #1a7f37;
  font-weight: 500;
}

.most-populated-cities-block #mostPopulatedCitiesRankingBody tr[data-city-index] {
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.most-populated-cities-block #mostPopulatedCitiesRankingBody tr[data-city-index]:hover {
  background: rgba(51, 79, 116, 0.08);
}

.most-populated-cities-block #mostPopulatedCitiesRankingBody tr[data-city-index]:hover .chart-ranking-name {
  color: #2a4260;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.most-populated-cities-block #mostPopulatedCitiesRankingBody tr.chart-ranking-row--active {
  background: rgba(51, 79, 116, 0.16);
}

.most-populated-cities-block #mostPopulatedCitiesRankingBody tr.chart-ranking-row--active .chart-ranking-name {
  color: #2a4260;
  font-weight: 600;
}

.most-populated-cities-block #mostPopulatedCitiesRankingBody tr.chart-ranking-row--active .chart-ranking-stat-value {
  color: var(--cartes-blue, #334f74);
  font-weight: 600;
}

.dark-theme .most-populated-cities-block #mostPopulatedCitiesRankingBody tr .chart-ranking-name,
html.dark-theme .most-populated-cities-block #mostPopulatedCitiesRankingBody tr .chart-ranking-name {
  color: #79a8e8;
}

.dark-theme .most-populated-cities-block #mostPopulatedCitiesRankingBody tr .chart-ranking-stat-value,
html.dark-theme .most-populated-cities-block #mostPopulatedCitiesRankingBody tr .chart-ranking-stat-value {
  color: #c9d1d9;
}

.dark-theme .most-populated-cities-block #mostPopulatedCitiesRankingBody tr[data-city-index]:hover,
html.dark-theme .most-populated-cities-block #mostPopulatedCitiesRankingBody tr[data-city-index]:hover {
  background: rgba(121, 168, 232, 0.12);
}

.dark-theme .most-populated-cities-block #mostPopulatedCitiesRankingBody tr[data-city-index]:hover .chart-ranking-name,
html.dark-theme .most-populated-cities-block #mostPopulatedCitiesRankingBody tr[data-city-index]:hover .chart-ranking-name {
  color: #a8c7f0;
}

.dark-theme .most-populated-cities-block #mostPopulatedCitiesRankingBody tr.chart-ranking-row--active,
html.dark-theme .most-populated-cities-block #mostPopulatedCitiesRankingBody tr.chart-ranking-row--active {
  background: rgba(121, 168, 232, 0.18);
}

.dark-theme .most-populated-cities-block #mostPopulatedCitiesRankingBody tr.chart-ranking-row--active .chart-ranking-name,
html.dark-theme .most-populated-cities-block #mostPopulatedCitiesRankingBody tr.chart-ranking-row--active .chart-ranking-name {
  color: #dbeafe;
}

.dark-theme .most-populated-cities-block #mostPopulatedCitiesRankingBody tr.chart-ranking-row--active .chart-ranking-stat-value,
html.dark-theme .most-populated-cities-block #mostPopulatedCitiesRankingBody tr.chart-ranking-row--active .chart-ranking-stat-value {
  color: #93c5fd;
  font-weight: 600;
}

.dark-theme .most-populated-cities-block #mostPopulatedCitiesTable .chart-ranking-change--zero,
html.dark-theme .most-populated-cities-block #mostPopulatedCitiesTable .chart-ranking-change--zero {
  color: #ff7b72;
}

.dark-theme .most-populated-cities-block #mostPopulatedCitiesTable .chart-ranking-change--growth,
html.dark-theme .most-populated-cities-block #mostPopulatedCitiesTable .chart-ranking-change--growth {
  color: #3fb950;
}

@media (max-width: 900px) {
  .most-populated-cities-block .chart-split-col--map .chart-container--line {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  #mostPopulatedCitiesBlock .chart-split-row .chart-container--line {
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .most-populated-cities-block .chart-split-col--map .chart-container--line {
    height: auto;
    min-height: 0;
    max-height: none;
  }

  .most-populated-cities-block .chart-export-root:has(.chart-headers--evolution) .most-populated-cities-bar-wrap {
    order: 3;
    width: 100%;
    flex: 0 0 auto;
    min-height: 240px;
    margin-top: 14px;
  }

  .most-populated-cities-block .chart-export-root:has(.chart-headers--evolution) .most-populated-cities-bar-chart {
    min-height: 240px;
    height: 240px;
  }
}