/* Charts for "Malam Ketika Baterai Mobilku Habis". Light only, follows the site's type. */
.cd-fig { margin: 2.4rem 0; }
.cd-title { font-size: 1.4rem; color: #222; }
.cd-sub { font-size: 1.25rem; color: #828282; }
.cd-chart { display: block; width: 100%; height: auto; margin-top: 1rem; overflow: visible; }
.cd-pair { display: flex; flex-wrap: wrap; gap: 0 2.4rem; }
.cd-pair .cd-fig { flex: 1 1 26rem; min-width: 0; }
.cd-note { font-size: 1.3rem; color: #828282; font-style: italic; margin-top: 3rem; }

.cd-chart text { font-family: inherit; }
.cd-chart .grid { stroke: #eee; stroke-width: 1; }
.cd-chart .axis { stroke: #ccc; stroke-width: 1; }
.cd-chart .tick { fill: #828282; font-size: 11px; }
.cd-chart .val { fill: #555; font-size: 11px; }
.cd-chart .note { fill: #222; font-size: 12px; }
.cd-chart .note.mut { fill: #828282; }
.cd-chart .note.red { fill: #d03b3b; }
.cd-chart .note.blue { fill: #1f63b5; }
.cd-chart .bar { fill: #d9d9d9; }
.cd-chart .bar.hi { fill: #2a78d6; }
.cd-chart .bar.red { fill: #d03b3b; }
.cd-chart .line { fill: none; stroke: #2a78d6; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cd-chart .area { fill: rgba(42, 120, 214, .10); }
.cd-chart .line.red { stroke: #d03b3b; }
.cd-chart .area.red { fill: rgba(208, 59, 59, .09); }
.cd-chart .dot { fill: #2a78d6; stroke: #fff; stroke-width: 2; }
.cd-chart .dot.red { fill: #d03b3b; }
.cd-chart .mark { stroke: #d03b3b; stroke-width: 1.2; stroke-dasharray: 4 3; }
.cd-chart .leader { stroke: #bbb; stroke-width: 1; }
.cd-chart .shade { fill: #f4f4f4; }
.cd-chart .shade.warm { fill: rgba(235, 104, 52, .09); }
.cd-chart .shade.red { fill: rgba(208, 59, 59, .07); }
.cd-chart .cross { stroke: #bbb; stroke-width: 1; stroke-dasharray: 3 3; }

#cd-tip {
  position: fixed; pointer-events: none; z-index: 200;
  background: #222; color: #fff; font-size: 12px; line-height: 1.4;
  padding: 4px 8px; border-radius: 4px; white-space: nowrap;
  transform: translate(-50%, -135%); opacity: 0; transition: opacity .1s;
}