.ctv-time-chart {
  line-height: normal;
  font-size: 12px;
  position: relative;
  font-family: sans-serif;
  min-height: 100px;
  width: 100%;
  max-width: 420px;
  /* background-color: #eee; */

  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding: 6px 6px 0;
  margin-bottom: 24px;
}

.ctv-time-chart h3 {
  font-family: "ÐÇ¿Õ´«Ã½Sans-Bold", "ÐÇ¿Õ´«Ã½ Sans Bold", sans-serif;
  font-weight: normal;
  font-size: 1.6em;
  margin: 0;
}

.ctv-time-chart p {
  font-family: sans-serif;
  font-size: 12px;
  margin-bottom: 0;
}

.ctv-time-chart .year-container {
  --rad: 6px;
  position: relative;
  display: flex;
  font-size: 12px;
  justify-content: space-around;
  gap: 1px;
  /* padding-top: calc(var(--rad) / 2); */
  margin-top: var(--rad);
  border-top: 1px solid #ddd;
}

.ctv-time-chart .year-container .marker {
  position: absolute;

  top: calc(-1 * var(--rad) + 1px);
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 var(--rad) calc(var(--rad) * 1.5) var(--rad);
  border-color: transparent transparent #222 transparent;
  transform: rotate(180deg);
  margin-left: calc(-1 * var(--rad));
}

.ctv-time-chart .year {
  font-size: 0.85em;
  flex: 1 1 0px;
  opacity: 0.3;
  transition-duration: 0.5s;

  display: flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  text-align: center;
  user-select: none;
}

.ctv-time-chart .year:hover {
  transition-delay: 0ms;
  opacity: 1;
}

.ctv-time-chart .year.highlight {
  font-size: 1.2em;
  font-weight: 700;
  opacity: 1;
  /* background-color: #eee; */
}

.ctv-time-chart .row-container {
  min-height: 240px;
  position: relative;
  overflow: hidden;
}

.ctv-time-chart .row {
  display: flex;
  gap: 0.5em;
  position: absolute;
  width: 100%;

  /* background-color: #fff; */
}

.ctv-time-chart .bar-container {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: #eee;
}

.ctv-time-chart .bar {
  position: relative;
  background-color: #366850;
}

.ctv-time-chart .row .name {
  width: 80px;
  flex-grow: 0;
  text-wrap: nowrap;
  text-align: right;

  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ctv-time-chart .row .number {
  font-variant-numeric: tabular-nums;
  opacity: 1;
  display: flex;
  align-items: center;
  font-size: 0.9em;
  position: absolute;
  left: calc(100% + 4px);
  right: auto;
  height: 100%;

  transition-duration: 0.25s;
}

.ctv-time-chart .row .number.inside {
  opacity: 0;
  left: unset;
  text-align: right;
  right: 4px;
  color: #fff;
}

.ctv-time-chart .row .bar.inside .number.inside {
  opacity: 1;
}
.ctv-time-chart .row .bar.inside .number.outside {
  opacity: 0;
}
.ctv-time-chart .controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
}

.ctv-time-chart button {
  background-color: #e1e1e1;
  border: none;
  font-size: 18px;
  width: 1.5em;
  height: 1.5em;
  border-radius: 1px;
  background-repeat: no-repeat;
  background-size: 1em;
  background-position: 50%;
}

.ctv-time-chart button.play {
  font-size: 24px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="%235f6368"><path d="M8 6.82v10.36c0 .79.87 1.27 1.54.84l8.14-5.18c.62-.39.62-1.29 0-1.69L9.54 5.98C8.87 5.55 8 6.03 8 6.82z"/></svg>');
}
.ctv-time-chart button.play.playing {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="%235f6368"><path d="M8 19c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2s-2 .9-2 2v10c0 1.1.9 2 2 2zm6-12v10c0 1.1.9 2 2 2s2-.9 2-2V7c0-1.1-.9-2-2-2s-2 .9-2 2z"/></svg>');
}

.ctv-time-chart button.prev {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="%235f6368"><path d="M7 6c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1s-1-.45-1-1V7c0-.55.45-1 1-1zm3.66 6.82l5.77 4.07c.66.47 1.58-.01 1.58-.82V7.93c0-.81-.91-1.28-1.58-.82l-5.77 4.07c-.57.4-.57 1.24 0 1.64z"/></svg>');
}
.ctv-time-chart button.next {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="%235f6368"><path d="M7.58 16.89l5.77-4.07c.56-.4.56-1.24 0-1.63L7.58 7.11C6.91 6.65 6 7.12 6 7.93v8.14c0 .81.91 1.28 1.58.82zM16 7v10c0 .55.45 1 1 1s1-.45 1-1V7c0-.55-.45-1-1-1s-1 .45-1 1z"/></svg>');
}
.ctv-time-chart button.pause {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="%235f6368"><path d="M8 19c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2s-2 .9-2 2v10c0 1.1.9 2 2 2zm6-12v10c0 1.1.9 2 2 2s2-.9 2-2V7c0-1.1-.9-2-2-2s-2 .9-2 2z"/></svg>');
}
.ctv-time-chart button.replay {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="%235f6368"><path d="M12 5V2.21c0-.45-.54-.67-.85-.35l-3.8 3.79c-.2.2-.2.51 0 .71l3.79 3.79c.32.31.86.09.86-.36V7c3.73 0 6.68 3.42 5.86 7.29-.47 2.27-2.31 4.1-4.57 4.57-3.57.75-6.75-1.7-7.23-5.01-.07-.48-.49-.85-.98-.85-.6 0-1.08.53-1 1.13.62 4.39 4.8 7.64 9.53 6.72 3.12-.61 5.63-3.12 6.24-6.24C20.84 9.48 16.94 5 12 5z"/></svg>');
}