[flex] {
    display: flex;
}
[flex-fill] {
    flex: 1;
}
[flex-full-center] {
    align-items: center;
    justify-content: center;
}
[flex-direction=column] {
    flex-direction: column;
}
[flex-direction=row] {
    flex-direction: row;
}
[flex-size="40"] {
    flex: 40;
}
[flex-size="60"] {
    flex: 60;
}

.timeline-chart {
    /* ant blue color-1 */
    background: #e6f7ff;
    opacity: 0.9;
    border-radius: 5px;
    /* ant blue color-5 */
    border: 1px solid #40a9ff;
}

.timeline-chart .axis path {
    fill: none;
    stroke: none;
}

.timeline-chart line {
    /* ant blue color-5 */
    stroke: #40a9ff;
}

.timeline-chart .vertical-marker {
    stroke-width: 1;
}

.timeline-chart rect, .timeline-chart rect.chart-bounds {
    fill: transparent;
}

.timeline-chart rect.chart-bounds:hover, .timeline-chart rect.interval:hover {
    cursor: -webkit-grab;
    cursor: grab;
}

.timeline-chart rect.chart-bounds:active, .timeline-chart rect.interval:active {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.timeline-chart .dot:hover {
    cursor: pointer;
}

.timeline-chart .interval-text {
    pointer-events: none;
}

.timeline-chart rect.interval {
    ry: 5;
    rx: 5;
    /* ant sunset orange color-6 */
    fill: #fa8c16;
    stroke: #fa8c16;
}

.timeline-chart text {
    fill: rgba(0,0,0,.65);
}

.timeline-chart text.interval-text {
    fill: white;
}

.timeline-chart circle.dot {
    /* ant sunset orange color-5 */
    fill: #fa8c16;
}

.d3-tip {
    background: white;
    border-radius: 5px;
    border: 1px solid #40a9ff;
    color: rgba(0,0,0,.65);
    padding: 8px;
    z-index: 1000;
}