/* AXIS labels */

.highcharts-root .highcharts-axis-labels text {
    fill: #9e9e9e !important; 
    font-size: 12px !important;
    font-weight: 400;
    font-family: "Roboto", "Noto", sans-serif;
}

[data-id="chart-1-placeholder"] div.highcharts-axis-labels.highcharts-xaxis-labels > span {
  color: #aaa !important;
  font-size: 12px !important;
}

[data-id="chart-1-placeholder"] div.highcharts-axis-labels.highcharts-xaxis-labels > span:first-child,
[data-id="chart-1-placeholder"] div.highcharts-axis-labels.highcharts-xaxis-labels > span:last-child {
  display: inline-block !important;
  max-width: 50px !important;
  text-overflow: ellipsis !important;
}

/* [data-id="chart-1-placeholder"] svg.highcharts-root g.highcharts-axis-labels.highcharts-xaxis-labels text:last-child { */
[data-id="chart-1-placeholder"] div.highcharts-axis-labels.highcharts-xaxis-labels > span:last-child {
  transform: translateX(-26px) !important;
}

/* Tooltip */
.highcharts-tooltip-container {
    transition-property: all;
    transition-delay: 0;
    transition-duration: 70ms;
    transition-timing-function: linear;
}

.highcharts-tooltip {
    padding: 10px 20px;
}

.highcharts-tooltip .tooltip-date {
    font-size: 12px;
    font-weight: 500;
    font-family: "Roboto", "Noto", sans-serif;
    fill: white;
    stroke: none;
}

.highcharts-tooltip .tooltip-value {
    font-size: 22px;
    font-family: "Roboto", "Noto", sans-serif;
    font-weight: 100;
    fill: rgba(65, 180, 217, 1) !important;
}

/** Ring animation MaterialUI */
.ripple-anim {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/** Video marker */
[data-id="chart-1-placeholder"] div.highcharts-axis-labels.highcharts-xaxis-labels > span:has(.video_marker) {
  width: 16px !important;
  min-width: 16px !important;
}

[data-id="chart-1-placeholder"] div.highcharts-axis-labels.highcharts-xaxis-labels > span:has(.video_marker.empty) {
  display: none !important;
}

.video_marker {
  background-color: #9e9e9e;
  color: white;
  border-radius: 2px;
  min-width: 16px;
  min-height: 16px;
  max-width: 16px;
  max-height: 16px;
  width: 16px;
  height: 16px;
  display: inline-block;
  font-size: 12px;
  line-height: 16px;
}
.video_marker:not(.short):hover > .figure > svg {
  background-color: white !important;
  fill: white !important;
  color: white !important;
  border-radius: 2px;
}
.video_marker:not(.single):not(.empty) > .figure {
  font-size: 11px;
}

.video_marker.empty {
  background-color: transparent !important;
  color: transparent !important;
}

.video_marker.short {
  color: #9e9e9e !important;
  background-color: transparent !important;
}

.video_marker.short:hover {
  color: white !important;
}

.video_marker.single {
  color: black;
  position: relative;
}
.video_marker.single > .figure {
  font-size: 14px;
  line-height: 14px;
}