.ptr-chart-legend {
  margin: 0.6666666667 0 0 1.3333333333;
  display: flex;
  flex-wrap: wrap;
}

.ptr-chart-legend-item {
  display: flex;
  align-items: center;
  padding: 0 0.3rem;
  margin-right: 0.3rem;
  cursor: default;
}

.ptr-chart-legend-item.withNumbers {
  padding: 0.2rem 0.3rem;
}

.ptr-chart-legend-item:hover {
  background: var(--base20);
}

.ptr-chart-legend-item-icon {
  min-width: 0.7rem;
  height: 0.7rem;
  font-size: 0.809rem;
  line-height: 1.25rem;
  text-align: center;
  color: #000;
}

.ptr-chart-legend-item.withNumbers .ptr-chart-legend-item-icon {
  min-width: 1.25rem;
  height: 1.25rem;
}

.ptr-chart-legend-item-icon.dark {
  color: #fff;
}

.ptr-chart-legend-item-name {
  font-size: 0.809rem;
  color: var(--base75);
  padding: 0 0 0 0.3rem;
  max-width: 12rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ptr-chart-wrapper {
  min-height: 10rem;
  position: relative;
  margin-bottom: 0.6666666667;
  border-radius: 0.2rem;
  width: 100%;
  background: var(--base0);
}

.ptr-chart-wrapper-loader {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.ptr-chart-wrapper-header {
  display: flex;
  color: var(--base90);
}

.ptr-chart-wrapper-titles {
  flex-grow: 1;
  padding: 0.3333333333 0.75rem;
}

.ptr-chart-wrapper-title {
  flex-grow: 1;
}

.ptr-chart-wrapper-subtitle {
  color: var(--base50);
  font-size: 0.809rem;
  margin-top: 0.1rem;
}

.ptr-chart-wrapper-tools {
  display: flex;
  justify-content: flex-end;
  padding: 0.25rem;
  width: 2rem;
}

.ptr-chart-wrapper-tool .ptr-icon .line {
  fill: var(--base70);
}

/* status bar */
.ptr-chart-wrapper-status-bar {
  display: flex;
  flex-wrap: wrap;
  padding: 0.3333333333 0.75rem;
}

.ptr-colored-label {
  background: var(--accent20);
  border-radius: 0.25rem;
  color: var(--accent50);
  display: flex;
  align-items: center;
  font-size: 0.809rem;
  padding: 0 0.2rem 0 0.35rem;
  height: 1.5rem;
  margin-right: 0.5rem;
}

.ptr-colored-label-content {
  display: flex;
  align-items: center;
}

.ptr-colored-label-content > div {
  white-space: nowrap;
}

.ptr-colored-label-content > .ptr-icon {
  height: 1rem;
  width: 1rem;
  margin-right: 0.15rem;
}

.ptr-colored-label-content > .ptr-icon .line {
  fill: currentColor;
}

.ptr-colored-label-clear {
  cursor: pointer;
  padding-left: 0.5rem;
  display: flex;
  align-items: center;
}

.ptr-colored-label-clear > .ptr-icon {
  height: 1rem;
  width: 1rem;
}

.ptr-colored-label-clear > .ptr-icon .line {
  fill: var(--base50);
}

.ptr-colored-label-clear:hover > .ptr-icon .line {
  fill: var(--base100);
}

/* content */
.ptr-chart-wrapper-content {
  padding: 0.5rem 1.5rem 0.5rem 0.75rem;
}

.ptr-chart-wrapper-content > div {
  position: relative;
  width: 100%;
}

.ptr-chart-wrapper-info {
  font-style: italic;
  font-size: 0.809rem;
  color: var(--base80);
  padding: 0.3rem 0;
}

@media screen and (max-width: 70rem) {
  .ptr-chart-wrapper {
    margin-bottom: 0.6666666667;
  }
}
/* General */
.ptr-charts-container {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0.6666666667 1.3333333333;
  align-items: center;
  background: var(--base15);
  min-height: 100%;
}

.ptr-chart-container {
  width: 100%;
  overflow: hidden;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

.ptr-chart-container.centered {
  align-items: center;
}

.ptr-chart-container > div:not(.ptr-chart-legend) {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.ptr-chart-container.legend-top > div {
  flex-direction: column-reverse;
}

.ptr-chart-container.legend-right > div {
  flex-direction: row;
}

.ptr-chart-container.legend-left {
  flex-direction: row-reverse;
}

.ptr-chart {
  box-sizing: content-box;
  width: 100%;
}

.ptr-cartesian-chart {
  width: 100%;
}

/* Axis */
.ptr-axis-baseline {
  stroke-width: 2px;
  stroke-linecap: square;
  stroke: var(--base30);
}

.ptr-axis-border {
  stroke-width: 2px;
  stroke-linecap: square;
  stroke: var(--base30);
}

.ptr-axis-gridline {
  stroke-width: 1px;
  stroke-linecap: square;
  stroke: var(--base20);
}

.ptr-axis-label {
  fill: var(--base50);
  font-size: 0.809rem;
  font-style: italic;
}

.ptr-tick-caption {
  fill: var(--base50);
  font-size: 0.809rem;
}

.ptr-tick-caption.highlighted {
  font-weight: bold;
}

.ptr-tick-caption.small {
  font-size: 0.618rem;
}

.ptr-axis-highlighted-area-edge {
  stroke-width: 1px;
  stroke: var(--accent30);
}

.ptr-axis-highlighted-area {
  stroke-width: 0;
  fill: var(--accent15);
}

/* Line chart */
.ptr-line-chart-line {
  fill: none;
  stroke-width: 2;
  stroke: var(--base50);
  animation: pathDraw 2s ease-in-out 1;
  animation-fill-mode: forwards;
  animation-delay: 1s;
}

.ptr-chart-point {
  animation: pointDraw 0.3s ease-in-out 1;
  animation-fill-mode: forwards;
  animation-delay: 3s;
  fill-opacity: 0;
  stroke-opacity: 0;
  stroke-width: 1px;
  stroke: var(--base10);
}

.ptr-chart-point.standalone {
  animation: none;
  fill: var(--accent50);
  fill-opacity: 1;
  stroke: var(--base0);
  stroke-width: 1px;
  stroke-opacity: 1;
}

.ptr-chart-point.standalone.path {
  stroke: var(--accent50);
}

.ptr-line-chart-area {
  fill: rgba(var(--base50rgb), 0.2);
  fill-opacity: 0;
  animation: pathFill 0.3s ease-in-out 1;
  animation-delay: 2.5s;
  animation-fill-mode: forwards;
}

.ptr-chart-no-animation .ptr-line-chart-area,
.ptr-chart-no-animation .ptr-column-chart-bar {
  animation: none;
  transition: none;
}

.ptr-line-chart-line-wrapper:hover .ptr-line-chart-line,
.ptr-line-chart-line-wrapper.gray:hover .ptr-line-chart-line,
.ptr-line-chart-line-wrapper.highlighted.gray .ptr-line-chart-line,
.ptr-line-chart-line-wrapper.highlighted .ptr-line-chart-line {
  stroke-width: 3;
}

.ptr-line-chart-line-wrapper.gray .ptr-line-chart-line {
  stroke-width: 1;
}

.ptr-line-chart-line-wrapper.gray .ptr-chart-point {
  opacity: 0;
}

.ptr-line-chart-line-wrapper.gray .ptr-chart-point.no-opacity,
.ptr-line-chart-line-wrapper.gray:hover .ptr-chart-point {
  opacity: 1;
}

@media screen and (max-width: 70rem) {
  .ptr-charts-container {
    padding: 0.3333333333 0.3333333333 1.5rem;
  }
}
@keyframes pathDraw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes pathFill {
  to {
    fill-opacity: 1;
  }
}
@keyframes pointDraw {
  to {
    fill-opacity: 1;
    stroke-opacity: 1;
  }
}
/* General */
.ptr-charts-container {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0.6666666667 1.3333333333;
  align-items: center;
  background: var(--base15);
  min-height: 100%;
}

.ptr-chart-container {
  width: 100%;
  overflow: hidden;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

.ptr-chart-container.centered {
  align-items: center;
}

.ptr-chart-container > div:not(.ptr-chart-legend) {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.ptr-chart-container.legend-top > div {
  flex-direction: column-reverse;
}

.ptr-chart-container.legend-right > div {
  flex-direction: row;
}

.ptr-chart-container.legend-left {
  flex-direction: row-reverse;
}

.ptr-chart {
  box-sizing: content-box;
  width: 100%;
}

.ptr-cartesian-chart {
  width: 100%;
}

/* Axis */
.ptr-axis-baseline {
  stroke-width: 2px;
  stroke-linecap: square;
  stroke: var(--base30);
}

.ptr-axis-border {
  stroke-width: 2px;
  stroke-linecap: square;
  stroke: var(--base30);
}

.ptr-axis-gridline {
  stroke-width: 1px;
  stroke-linecap: square;
  stroke: var(--base20);
}

.ptr-axis-label {
  fill: var(--base50);
  font-size: 0.809rem;
  font-style: italic;
}

.ptr-tick-caption {
  fill: var(--base50);
  font-size: 0.809rem;
}

.ptr-tick-caption.highlighted {
  font-weight: bold;
}

.ptr-tick-caption.small {
  font-size: 0.618rem;
}

.ptr-axis-highlighted-area-edge {
  stroke-width: 1px;
  stroke: var(--accent30);
}

.ptr-axis-highlighted-area {
  stroke-width: 0;
  fill: var(--accent15);
}

/* Line chart */
.ptr-line-chart-line {
  fill: none;
  stroke-width: 2;
  stroke: var(--base50);
  animation: pathDraw 2s ease-in-out 1;
  animation-fill-mode: forwards;
  animation-delay: 1s;
}

.ptr-chart-point {
  animation: pointDraw 0.3s ease-in-out 1;
  animation-fill-mode: forwards;
  animation-delay: 3s;
  fill-opacity: 0;
  stroke-opacity: 0;
  stroke-width: 1px;
  stroke: var(--base10);
}

.ptr-chart-point.standalone {
  animation: none;
  fill: var(--accent50);
  fill-opacity: 1;
  stroke: var(--base0);
  stroke-width: 1px;
  stroke-opacity: 1;
}

.ptr-chart-point.standalone.path {
  stroke: var(--accent50);
}

.ptr-line-chart-area {
  fill: rgba(var(--base50rgb), 0.2);
  fill-opacity: 0;
  animation: pathFill 0.3s ease-in-out 1;
  animation-delay: 2.5s;
  animation-fill-mode: forwards;
}

.ptr-chart-no-animation .ptr-line-chart-area,
.ptr-chart-no-animation .ptr-column-chart-bar {
  animation: none;
  transition: none;
}

.ptr-line-chart-line-wrapper:hover .ptr-line-chart-line,
.ptr-line-chart-line-wrapper.gray:hover .ptr-line-chart-line,
.ptr-line-chart-line-wrapper.highlighted.gray .ptr-line-chart-line,
.ptr-line-chart-line-wrapper.highlighted .ptr-line-chart-line {
  stroke-width: 3;
}

.ptr-line-chart-line-wrapper.gray .ptr-line-chart-line {
  stroke-width: 1;
}

.ptr-line-chart-line-wrapper.gray .ptr-chart-point {
  opacity: 0;
}

.ptr-line-chart-line-wrapper.gray .ptr-chart-point.no-opacity,
.ptr-line-chart-line-wrapper.gray:hover .ptr-chart-point {
  opacity: 1;
}

@media screen and (max-width: 70rem) {
  .ptr-charts-container {
    padding: 0.3333333333 0.3333333333 1.5rem;
  }
}
@keyframes pathDraw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes pathFill {
  to {
    fill-opacity: 1;
  }
}
@keyframes pointDraw {
  to {
    fill-opacity: 1;
    stroke-opacity: 1;
  }
}
.ptr-aster-chart-segment {
  fill: var(--accent50);
  stroke: var(--base0);
}

.ptr-aster-chart-segment-placeholder {
  fill: var(--base20);
  stroke: none;
  opacity: 0;
}

.ptr-aster-chart-segment-placeholder.highlighted {
  opacity: 1;
}

.ptr-aster-chart-grid-line {
  fill: none;
  stroke: var(--base40);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 3, 6;
}

.ptr-aster-chart-grid-line.strong {
  stroke-dasharray: 1;
}

.ptr-aster-chart-grid-radial-caption {
  fill: var(--base50);
  font-size: 0.809rem;
}

.ptr-aster-chart-grid-radial-line {
  fill: none;
  stroke: var(--base30);
  stroke-width: 1;
}

.ptr-aster-chart-grid-text {
  fill: var(--base75);
  font-size: 0.809rem;
}

.ptr-aster-chart-grid-text-halo {
  fill: var(--base0);
  font-size: 0.809rem;
}
.ptr-column-chart-bar-placeholder {
  fill: var(--base20);
  opacity: 0;
}

.ptr-column-chart-bar-placeholder:hover,
.ptr-column-chart-bar-placeholder.visible {
  opacity: 1;
}

.ptr-column-chart-bar {
  transition-property: height;
  transition-delay: 1000ms;
  transition-duration: 1500ms;
  transition-timing-function: linear;
}

.ptr-column-chart-bar:not(.stacked-relative):last-child {
  transition-timing-function: ease-out;
}

.ptr-column-chart-bar.hidden {
  fill: transparent;
}

.ptr-column-chart-bar-baseline {
  stroke: var(--base80);
  stroke-width: 2;
}

.ptr-column-chart-path {
  fill: var(--accent45);
}
/* General */
.ptr-charts-container {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0.6666666667 1.3333333333;
  align-items: center;
  background: var(--base15);
  min-height: 100%;
}

.ptr-chart-container {
  width: 100%;
  overflow: hidden;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

.ptr-chart-container.centered {
  align-items: center;
}

.ptr-chart-container > div:not(.ptr-chart-legend) {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.ptr-chart-container.legend-top > div {
  flex-direction: column-reverse;
}

.ptr-chart-container.legend-right > div {
  flex-direction: row;
}

.ptr-chart-container.legend-left {
  flex-direction: row-reverse;
}

.ptr-chart {
  box-sizing: content-box;
  width: 100%;
}

.ptr-cartesian-chart {
  width: 100%;
}

/* Axis */
.ptr-axis-baseline {
  stroke-width: 2px;
  stroke-linecap: square;
  stroke: var(--base30);
}

.ptr-axis-border {
  stroke-width: 2px;
  stroke-linecap: square;
  stroke: var(--base30);
}

.ptr-axis-gridline {
  stroke-width: 1px;
  stroke-linecap: square;
  stroke: var(--base20);
}

.ptr-axis-label {
  fill: var(--base50);
  font-size: 0.809rem;
  font-style: italic;
}

.ptr-tick-caption {
  fill: var(--base50);
  font-size: 0.809rem;
}

.ptr-tick-caption.highlighted {
  font-weight: bold;
}

.ptr-tick-caption.small {
  font-size: 0.618rem;
}

.ptr-axis-highlighted-area-edge {
  stroke-width: 1px;
  stroke: var(--accent30);
}

.ptr-axis-highlighted-area {
  stroke-width: 0;
  fill: var(--accent15);
}

/* Line chart */
.ptr-line-chart-line {
  fill: none;
  stroke-width: 2;
  stroke: var(--base50);
  animation: pathDraw 2s ease-in-out 1;
  animation-fill-mode: forwards;
  animation-delay: 1s;
}

.ptr-chart-point {
  animation: pointDraw 0.3s ease-in-out 1;
  animation-fill-mode: forwards;
  animation-delay: 3s;
  fill-opacity: 0;
  stroke-opacity: 0;
  stroke-width: 1px;
  stroke: var(--base10);
}

.ptr-chart-point.standalone {
  animation: none;
  fill: var(--accent50);
  fill-opacity: 1;
  stroke: var(--base0);
  stroke-width: 1px;
  stroke-opacity: 1;
}

.ptr-chart-point.standalone.path {
  stroke: var(--accent50);
}

.ptr-line-chart-area {
  fill: rgba(var(--base50rgb), 0.2);
  fill-opacity: 0;
  animation: pathFill 0.3s ease-in-out 1;
  animation-delay: 2.5s;
  animation-fill-mode: forwards;
}

.ptr-chart-no-animation .ptr-line-chart-area,
.ptr-chart-no-animation .ptr-column-chart-bar {
  animation: none;
  transition: none;
}

.ptr-line-chart-line-wrapper:hover .ptr-line-chart-line,
.ptr-line-chart-line-wrapper.gray:hover .ptr-line-chart-line,
.ptr-line-chart-line-wrapper.highlighted.gray .ptr-line-chart-line,
.ptr-line-chart-line-wrapper.highlighted .ptr-line-chart-line {
  stroke-width: 3;
}

.ptr-line-chart-line-wrapper.gray .ptr-line-chart-line {
  stroke-width: 1;
}

.ptr-line-chart-line-wrapper.gray .ptr-chart-point {
  opacity: 0;
}

.ptr-line-chart-line-wrapper.gray .ptr-chart-point.no-opacity,
.ptr-line-chart-line-wrapper.gray:hover .ptr-chart-point {
  opacity: 1;
}

@media screen and (max-width: 70rem) {
  .ptr-charts-container {
    padding: 0.3333333333 0.3333333333 1.5rem;
  }
}
@keyframes pathDraw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes pathFill {
  to {
    fill-opacity: 1;
  }
}
@keyframes pointDraw {
  to {
    fill-opacity: 1;
    stroke-opacity: 1;
  }
}
.ptr-sankey-chart-node {
  fill: var(--accent50);
  stroke: var(--accent50);
}

.ptr-sankey-chart-node-highlighted {
  fill: var(--accent80);
  stroke: var(--accent80);
}

.ptr-sankey-chart-text {
  fill: var(--base75);
  font-size: 0.809rem;
}

.ptr-sankey-chart-link {
  fill: none;
  stroke: rgba(164, 163, 162, 0.7);
}

.ptr-sankey-chart-link-highlighted {
  fill: none;
  stroke: rgba(91, 90, 90, 0.6);
}
/* General */
.ptr-charts-container {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0.6666666667 1.3333333333;
  align-items: center;
  background: var(--base15);
  min-height: 100%;
}

.ptr-chart-container {
  width: 100%;
  overflow: hidden;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

.ptr-chart-container.centered {
  align-items: center;
}

.ptr-chart-container > div:not(.ptr-chart-legend) {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.ptr-chart-container.legend-top > div {
  flex-direction: column-reverse;
}

.ptr-chart-container.legend-right > div {
  flex-direction: row;
}

.ptr-chart-container.legend-left {
  flex-direction: row-reverse;
}

.ptr-chart {
  box-sizing: content-box;
  width: 100%;
}

.ptr-cartesian-chart {
  width: 100%;
}

/* Axis */
.ptr-axis-baseline {
  stroke-width: 2px;
  stroke-linecap: square;
  stroke: var(--base30);
}

.ptr-axis-border {
  stroke-width: 2px;
  stroke-linecap: square;
  stroke: var(--base30);
}

.ptr-axis-gridline {
  stroke-width: 1px;
  stroke-linecap: square;
  stroke: var(--base20);
}

.ptr-axis-label {
  fill: var(--base50);
  font-size: 0.809rem;
  font-style: italic;
}

.ptr-tick-caption {
  fill: var(--base50);
  font-size: 0.809rem;
}

.ptr-tick-caption.highlighted {
  font-weight: bold;
}

.ptr-tick-caption.small {
  font-size: 0.618rem;
}

.ptr-axis-highlighted-area-edge {
  stroke-width: 1px;
  stroke: var(--accent30);
}

.ptr-axis-highlighted-area {
  stroke-width: 0;
  fill: var(--accent15);
}

/* Line chart */
.ptr-line-chart-line {
  fill: none;
  stroke-width: 2;
  stroke: var(--base50);
  animation: pathDraw 2s ease-in-out 1;
  animation-fill-mode: forwards;
  animation-delay: 1s;
}

.ptr-chart-point {
  animation: pointDraw 0.3s ease-in-out 1;
  animation-fill-mode: forwards;
  animation-delay: 3s;
  fill-opacity: 0;
  stroke-opacity: 0;
  stroke-width: 1px;
  stroke: var(--base10);
}

.ptr-chart-point.standalone {
  animation: none;
  fill: var(--accent50);
  fill-opacity: 1;
  stroke: var(--base0);
  stroke-width: 1px;
  stroke-opacity: 1;
}

.ptr-chart-point.standalone.path {
  stroke: var(--accent50);
}

.ptr-line-chart-area {
  fill: rgba(var(--base50rgb), 0.2);
  fill-opacity: 0;
  animation: pathFill 0.3s ease-in-out 1;
  animation-delay: 2.5s;
  animation-fill-mode: forwards;
}

.ptr-chart-no-animation .ptr-line-chart-area,
.ptr-chart-no-animation .ptr-column-chart-bar {
  animation: none;
  transition: none;
}

.ptr-line-chart-line-wrapper:hover .ptr-line-chart-line,
.ptr-line-chart-line-wrapper.gray:hover .ptr-line-chart-line,
.ptr-line-chart-line-wrapper.highlighted.gray .ptr-line-chart-line,
.ptr-line-chart-line-wrapper.highlighted .ptr-line-chart-line {
  stroke-width: 3;
}

.ptr-line-chart-line-wrapper.gray .ptr-line-chart-line {
  stroke-width: 1;
}

.ptr-line-chart-line-wrapper.gray .ptr-chart-point {
  opacity: 0;
}

.ptr-line-chart-line-wrapper.gray .ptr-chart-point.no-opacity,
.ptr-line-chart-line-wrapper.gray:hover .ptr-chart-point {
  opacity: 1;
}

@media screen and (max-width: 70rem) {
  .ptr-charts-container {
    padding: 0.3333333333 0.3333333333 1.5rem;
  }
}
@keyframes pathDraw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes pathFill {
  to {
    fill-opacity: 1;
  }
}
@keyframes pointDraw {
  to {
    fill-opacity: 1;
    stroke-opacity: 1;
  }
}