.svg {
  overflow: visible;
}

/**
* LAYOUT
*/
.ld3-chart {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns:
    [start] auto [left-axis] 1fr [canvas] auto
    [right-axis] auto [right-legend end];
  grid-template-rows:
    [start] auto [title] auto [top-axis] 1fr [canvas] auto
    [bottom-axis] auto [zoom-chart] auto [bottom-legend end];
}

.ld3-chart > * {
  min-height: 0px;
  min-width: 0px;
}

.ld3-title {
  grid-column: left-axis / canvas;
  grid-row: start / title;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 10px;
  gap: 5px;
}

.ld3-axis-container {
  width: 100%;
  height: 100%;
}

.ld3-top-axis {
  grid-column: left-axis / canvas;
  grid-row: title / top-axis;
  height: 100%;
  min-height: 3rem;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ld3-left-axis {
  font-size: 16px;
  grid-column: start / left-axis;
  grid-row: top-axis / canvas;
  width: 4.5em;

  position: relative;
  display: grid;
  grid-template-columns: [start] 20px [title] 1fr [end];
  grid-template-rows: [start] 1fr [end];
}

.ld3-left-axis:has(.ld3-axis-container-x) {
  width: 7.5em;
}

.ld3-right-axis {
  font-size: 16px;
  grid-column: canvas / right-axis;
  grid-row: top-axis / canvas;
  width: 4.5em;

  position: relative;
  display: grid;
  grid-template-columns: [start] 1fr [axis] 20px [end];
  grid-template-rows: [start] 1fr [end];
}

.ld3-right-axis:has(.ld3-axis-container-x) {
  width: 7.5em;
}

[class^='ld3-right-axis-'] {
  font-size: 16px;
  grid-column: span 1;
  grid-row: top-axis / canvas;
  width: 4.5em;

  position: relative;
  display: grid;
  grid-template-columns: [start] 1fr [axis] 20px [end];
  grid-template-rows: [start] 1fr [end];
}

.ld3-bottom-axis {
  grid-column: left-axis / canvas;
  grid-row: canvas / bottom-axis;
  height: 100%;
  min-height: 3rem;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ld3-canvas {
  grid-column: left-axis / canvas;
  grid-row: top-axis / canvas;

  position: relative;
}

.ld3-right-legend {
  grid-column: right-axis / right-legend;
  grid-row: title / canvas;
  width: 160px;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  align-items: center;
}

.ld3-bottom-legend {
  grid-column: left-axis / canvas;
  grid-row: zoom-chart / bottom-legend;
  max-height: 80px;
  overflow: auto;
}

.ld3-zoom-chart {
  grid-column: left-axis / canvas;
  grid-row: bottom-axis / zoom-chart;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: [start] 1fr [end];
  grid-template-rows: [start] auto [canvas] 20px [end];
}

.ld3-zoom-chart > * {
  min-height: 0px;
  min-width: 0px;
}

.ld3-zoom-chart-canvas {
  grid-column: start / end;
  grid-row: start / canvas;
  overflow: hidden;
  position: relative;
}

.ld3-zoom-chart-bottom-axis {
  grid-column: start / end;
  grid-row: canvas / end;
  height: 2em;
  position: relative;
}

.ld3-bottom-axis-title {
  padding: 8px 0;
  width: 200px;
  text-align: center;
}

.ld3-top-axis-title {
  padding: 8px 0;
  width: 200px;
  text-align: center;
  order: -1;
}

.ld3-left-axis .ld3-axis-container {
  grid-column: title / end;
  grid-row: start / end;
  min-height: 0px;
  min-width: 0px;
  width: 100%;
  height: 100%;
}

.ld3-left-axis-title {
  grid-column: start / title;
  grid-row: start / end;
  min-height: 0px;
  min-width: 0px;
  position: relative;
}

.ld3-left-axis-title p {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  width: 200px;
  text-align: center;
}

.ld3-right-axis .ld3-axis-container,
[class^='ld3-right-axis-'] .ld3-axis-container {
  grid-column: start / axis;
  grid-row: start / end;
  min-height: 0px;
  min-width: 0px;
  width: 100%;
  height: 100%;
}

.ld3-right-axis-title {
  grid-column: axis / end;
  grid-row: start / end;
  min-height: 0px;
  min-width: 0px;
  position: relative;
}

.ld3-right-axis-title p {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  width: 200px;
  text-align: center;
}

/**
* TITLE
*/
.ld3-title__title {
  line-height: 1.3em;
}

.ld3-title__subtitle {
  line-height: 1.2em;
}

/**
* LINE
*/
.ld3-serie__line,
.ld3-serie__line--no-data {
  fill: none;
  stroke: black;
}

/**
* COLUMN
*/
.ld3-serie__column--rect {
  shape-rendering: crispEdges;
}

/** 
* MARKER
*/
.ld3-serie__marker {
  shape-rendering: crispEdges;
}

/**
* AXIS
*/

.ld3-title__header {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}

.ld3-title__sort-axis-options {
  position: relative;
  display: inline-block;
}

.filter-btn {
  background: #fcfcfc;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: none;
  padding: 8px;
}

.filter-btn:hover {
  box-shadow: 2px 2px 6px #00000026;
  outline: none;
  background-color: #e5e7eb;
}

.dropdown {
  position: absolute;
  background-color: #f5f5f5;
  top: 100%;
  left: 0;
  z-index: 999;
  display: none;
  flex-direction: column;
  border-radius: 0.375rem;
  margin-top: 0.25rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  min-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  width: max-content;
  font-family: 'Montserrat', sans-serif;
  gap: 10px;
}

.dropdown-option {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
  gap: 5px;
  padding: 8px 12px;
}

.dropdown-option:hover {
  color: #e3b037;
}

.dropdown-option.selected {
  color: #e3b037;
}

.ld3-title__container {
  display: flex;
  flex: 1;
  justify-content: center;
  margin-left: -20px;
}

.ld3-axis .domain {
  shape-rendering: crispEdges;
}

.ld3-axis__text--drilldown {
  text-decoration: underline;
  font-weight: bold;
  cursor: pointer;
}

.ld3-axis .tick {
  font-family: 'Montserrat', sans-serif;
}

.ld3-sort-axis-buttons {
  border: none;
  border-bottom: 1px solid grey;
  border-radius: 0px;
  height: 30px;
  line-height: 1em;
  border-color: grey;
}
.ld3-sort-axis-buttons:focus {
  border-color: #e3b037;
  outline: none;
}

[class^='ld3-grid-'] .tick path {
  shape-rendering: crispEdges;
}

/**
* ASYMPTOTE
*/
.ld3-asymptote {
  shape-rendering: crispEdges;
}

.ld3-asymptote__title {
  font-size: 12px;
}

/**
* RANGE
*/
.ld3-range__title {
  font-size: 12px;
}

/**
* ZOOM
*/
.ld3-title__zoom-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.ld3-title__zoom-buttons {
  display: flex;
  gap: 5px;
}

.ld3-title__zoom-info {
  line-height: 1.3em;
  font-size: 0.9em;
}

.ld3-title__zoom-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  border: none;
  padding: 4px 8px;
  width: 35px;
  cursor: pointer;
  border-radius: 2px;
  line-height: 1.3em;
}

/**
* TOOLTIP
*/
.ld3-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;

  padding: 10px;
  transition: all 0.3s linear;
}

.ld3-tooltip__list {
  list-style: none;
  padding: 0;
}

.ld3-tooltip__title {
  margin-bottom: 8px;
}

.ld3-tooltip__item-dot {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}

.ld3-tooltip__item-value {
  font-weight: bold;
}

/**
* LEGEND
*/
.ld3-legend {
  display: flex;
  gap: 12px;
  padding: 10px 0;
}

.ld3-legend--horizontal {
  padding: 8px 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.ld3-legend--vertical {
  flex-direction: column;
  align-items: flex-start;
  padding-left: 8px;
}

.ld3-legend__item {
  cursor: pointer;
  line-height: 1.2em;
  max-width: 170px;
  user-select: none;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.ld3-legend--vertical .ld3-legend__item {
  max-width: 140px;
}

.ld3-legend__item--hidden {
  opacity: 0.5;
}

.ld3-legend__item-dot {
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
  line-height: 1.2em;
}

/**
* BREADCRUMB
*/
.ld3-breadcrumb__item:not(.ld3-breadcrumb__item--current) .ld3-breadcrumb__item-text {
  cursor: pointer;
  font-weight: 500;
  text-decoration: underline;
}

/**
* ANNOTATIONS
*/
.ld3-annotation {
  position: absolute;
  border: 1px solid grey;
  border-radius: 4px;
  padding: 4px;
  z-index: 99;
}

.ld3-annotation--max:after,
.ld3-annotation--min:after {
  content: '';
  position: absolute;
  top: 2px;
  left: -8px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 7px solid;
}

/**
* NO DATA MESSAGE
*/
.ld3-no-data {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}