/*-- Dark Theme --*/
@charset "UTF-8";

$font-family: Helvetica, Arial, sans-serif, "nanumgothic", "Dotum";

/*-- Default color pattern --*/
.bb-color-pattern {
    background-image: url("#4a7fff;#b02c2c;#1ca46c;#b47300;#49baf3;#ed7e13;#cfaa00;#a6cd19;#dccb52;#f5d194;");
}

/*-- Chart --*/
.bb {
    svg {
        font-size: 12px;
        font-family: $font-family;
        line-height: 1;
    }

    path, line {
        fill: none;
        stroke: #8d9cab;
    }

    text, .bb-button {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        fill: #8d9cab;
        font-size: 11px;
    }
}

.bb-legend-item-title,
.bb-xgrid-focus,
.bb-ygrid-focus,
.bb-ygrid,
.bb-line {
    shape-rendering: crispEdges;
}

.bb-chart-arcs {
	.bb-needle {
		fill: #8d9cab;
	}
}

/*-- Funnel --*/
.bb-chart-funnels {
	path {
		stroke-width: 0;
	}

	+ .bb-chart-texts text {
		fill: #fff;
	}
}

/*-- Axis --*/
.bb-axis {
    shape-rendering: crispEdges;

    .bb-axis-x-tooltip, .bb-axis-y-tooltip, .bb-axis-y2-tooltip {
        font-size: 0.9em;
        fill: #fff;
		white-space: nowrap;
	}
}

.bb-axis-y text, .bb-axis-y2 text {
    fill: #8d9cab;
}

.bb-event-rects {
    fill-opacity: 1 !important;

    .bb-event-rect {
        fill: transparent;
    }

    .bb-event-rect._active_ {
        fill: rgba(39, 201, 3, 0.05);
    }
}

.tick._active_ text {
    fill: #00c83c !important;
}

/*-- Grid --*/
.bb-grid {
    pointer-events: none;

    line {
        stroke: #5c666e;
    }
}

.bb-xgrid-focus line, .bb-ygrid-focus line {
    stroke: #ccd9e6;
}

/*-- Text on Chart --*/
.bb-text {
    &.bb-empty {
        fill: #8d9cab;
    }
}

/*-- Line --*/
.bb-line {
    stroke-width: 1px;
}

/*-- Point --*/
.bb-circle {
    &._expanded_ {
        stroke-width: 2px;
        stroke: 8d9cab;
    }
}

rect.bb-circle, use.bb-circle {
  &._expanded_ {
    stroke-width: 1px;
  }
}

/*-- Subchart --*/
.selection {
    stroke: none;
    fill: #ccd9e6;
}

.bb-selected-circle {
    fill: #ccd9e6;
    stroke-width: 2px;
}

/*-- Bar --*/

.bb-bar {
	stroke-width: 0.5px;

	&._expanded_ {
		fill-opacity: 0.75;
	}
}

/*-- Candlestick --*/
.bb-candlestick {
	stroke-width: 1px;

	&._expanded_ {
		fill-opacity: 0.75;
	}
}

/*-- Focus --*/
.bb-target, .bb-circles {
    &.bb-focused {
        opacity: 1;

        path {
            &.bb-line, &.bb-step {
                stroke-width: 2px;
            }
        }
    }

    &.bb-defocused {
        opacity: 0.5 !important;

        .text-overlapping {
            opacity: .05 !important;
        }
    }
}

/*-- Region --*/
.bb-region {
    fill: steelblue;

    rect {
        fill-opacity: 0.5;
    }    

    &.selected rect {
        fill: rgb(39, 201, 3);
    }
}

/*-- Zoom region --*/
.bb-zoom-brush {
    fill-opacity: .25;
    fill: #ccd9e6;
}

/*-- Brush --*/
.bb-brush {
    .extent {
        fill-opacity: 0.5;
    }
}

/*-- Select - Drag --*/
/*-- Legend --*/
.bb-legend-item {
    user-select: none;

    line {
        stroke-width: 10px;
        stroke-dasharray: 3px;
    }

    text {
        transform: translateY(-1px);
    }
}

.bb-legend-item-hidden {
    opacity: 0.5;
}

.bb-legend-background {
    opacity: 0.75;
    stroke: lightgray;
    stroke-width: 1;
}

/*-- Title --*/
.bb-title {
    font-size: 14px;
}

/*-- Treemap --*/
.bb-chart-treemaps rect {
    stroke: #8d9cab;
    stroke-width: 1px;
}

/*-- Tooltip --*/
.bb-tooltip-container {
    z-index: 10;
    font-family: $font-family;
	user-select: none;
    transform: translateZ(0);
}

.bb-tooltip {
    border-collapse: separate;
    border-spacing:0;
    empty-cells:show;
    border: 1px solid #828181;
    border-radius: 5px;
    background-color: #000;
    text-align: left;
    font-size: 11px;
    color: #fff;
    white-space: nowrap;

    th {
        font-size:12px;
        padding:4px 8px;
        text-align:left;
        border-bottom: solid 1px #828181;
    }

    td {
        padding: 4px 6px;

        &:first-child {
            padding-left: 8px;
        }

        &:last-child {
            padding-right:8px;
        }

        > span, > svg {
            display: inline-block;
            width: 7px;
            height: 7px;
            margin: -1px 6px 0 0;
            vertical-align: middle;
        }

        &.value {
            border-left: 1px solid transparent;
            text-align: right;
        }
    }

    .bb-tooltip-title {
        display: inline-block;
        color: #aaa;
        line-height: 20px;
    }

    .bb-tooltip-detail {
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        .bb-tooltip-name, .bb-tooltip-value {
            font-size: 11px;
            line-height: 13px;
            padding: 4px 0 3px;
            color: #444;
            text-align: left;
            font-weight: normal;
        }

        .bb-tooltip-value {
            padding-left: 5px;
            font-weight: 800;
            font-size: 12px;
        }
    }
}

/*-- Area --*/
.bb-area {
    stroke-width: 0;
    opacity: 0.5;
}

/*-- Arc --*/
.bb-chart-arcs-title {
    dominant-baseline: middle;
    font-size: 1.3em;
}

text.bb-chart-arcs-gauge-title {
    dominant-baseline: middle;
    font-size: 2.7em;
}

.bb-chart-arcs {
    .bb-chart-arcs-background {
        fill: #3f3f3f;
        stroke: none;
    }

    .bb-chart-arcs-gauge-unit {
        fill: #828181;
        font-size: 16px;
    }

    .bb-chart-arcs-gauge-min, .bb-chart-arcs-gauge-max {
        fill: #777;
    }

    .bb-chart-arcs-title {
        font-size: 16px !important;
        fill: #b6c2ce;
        font-weight: 600;
    }

    path.empty {
        fill: #eaeaea;
        stroke-width: 0;
    }

	/*-- Polar --*/
	.bb-levels {
		circle {
			fill: none;
			stroke: #848282;
			stroke-width: .5px;
		}

		text {
			fill: #848282;
		}
	}
}

.bb-chart-arc {
    .bb-gauge-value {
        fill: #b6c2ce;
    }

	rect {
		stroke: #8d9cab;
		stroke-width: 1;
	}

    text {
        fill: #fff;
        font-size: 13px;
    }

	/* Connector line base styles */
	.bb-arc-label-line {
		fill: none;
		stroke-width: 1px;
		pointer-events: none;
	}

    .bb-arc-label-line {
        stroke: #a0a0a0;
    }

    > text.bb-arc-label-line-text {
        fill: #ccc;
    }
}

/*-- Radar --*/
.bb-chart-radars {
    .bb-levels {
        polygon {
            fill: none;
            stroke: #848282;
            stroke-width: .5px;
        }

        text {
            fill: #848282;
        }
    }

    .bb-axis {
        line {
            stroke: #848282;
            stroke-width: .5px;
        }

        text {
            font-size: 1.15em;
            cursor: default;
        }
    }

    .bb-shapes {
        polygon {
            fill-opacity: .2;
            stroke-width: 1px;
        }
    }
}

/*-- Button --*/
.bb-button {
    position: absolute;
    top: 10px;
    right: 10px;

    .bb-zoom-reset {
        border: solid 1px #ccc;
        background-color: #000;
        color: #fff;
        padding: 5px;
        border-radius: 5px;
        cursor: pointer;
    }
}