#main_graph {width: 100%; height: 450px; display: flex; flex-direction: column}

.graph_top  {width: 100%; height: 50px; display: flex}
.graph_y_label {height: 100%; width: 80px}
.graph_legend {height: 100%; flex-grow: 1; display: flex; flex-wrap: wrap;}
.graph_body {width: 100%; flex-grow: 1;  display: flex}

.graph_left  {height: 100%; width: 80px;  display: flex; flex-direction: column} /* .graph_left and .graph_right must have same height */
.graph_right {height: 100%; flex-grow: 1; display: flex; flex-direction: column}

.graph_nav, .graph_x_axis {width: 100%; height: 40px}  /* .graph_nav and .graph_x_axis MUST have same height */
.graph_y_axis, .graph_plot {width:100%; flex-grow: 1}  /* then plot and y_axis will grow to equals heights too */

.graph_var {padding: 0.5rem; font-size: 0.8rem; margin-right: 0.4rem}
.graph_var1 {color: blue}
.graph_var2 {color: orange}
.graph_var3 {color: green}
.graph_var4 {color: red}
.graph_var5 {color: purple}
.graph_var6 {color: black}

.remove_serie {font-size: 0.7rem; margin-right: 0.4rem; cursor: pointer}

/* magnifier */
/* #div_graph {overflow:hidden} */
/* #div_graph:hover svg {transform: scale(2);} */

.svg_ruler {stroke-dasharray: 4}
#vertical_ruler {stroke: black}
#svg_horizontal_ruler_1 {stroke: blue}
#svg_horizontal_ruler_2 {stroke: orange}
#svg_horizontal_ruler_3 {stroke: green}
#svg_horizontal_ruler_4 {stroke: red}
#svg_horizontal_ruler_5 {stroke: purple}
#svg_horizontal_ruler_6 {stroke: black}

#drag_arrow {stroke: red; stroke-width: 3; stroke-dasharray: 6}

/* .svg_fill_1 {fill: blue} */

.font_moving_ts {font: italic 13px sans-serif;}
.font_y_tick {font: 13px sans-serif; text-anchor: end}
.font_x_tick {font: 13px sans-serif; text-anchor: middle}

.svg_line {stroke-width: 1; fill: none}
#svg_line_1 {stroke: blue}
#svg_line_2 {stroke: orange}
#svg_line_3 {stroke: green}
#svg_line_4 {stroke: red}
#svg_line_5 {stroke: purple}
#svg_line_6 {stroke: black}

.svg_dot {r: 2}
#svg_dot_1 {fill: blue}
#svg_dot_2 {fill: orange}
#svg_dot_3 {fill: green}
#svg_dot_4 {fill: red}
#svg_dot_5 {fill: purple}
#svg_dot_6 {fill: black}

.svg_focus {r: 4}
#svg_focus_1 {fill: blue}
#svg_focus_2 {fill: orange}
#svg_focus_3 {fill: green}
#svg_focus_4 {fill: red}
#svg_focus_5 {fill: purple}
#svg_focus_6 {fill: black}

.font_moving_value {font: bold italic 15px sans-serif;}
.svg_moving_value {}
#svg_moving_value_1 {fill: blue}
#svg_moving_value_2 {fill: orange}
#svg_moving_value_3 {fill: green}
#svg_moving_value_4 {fill: red}
#svg_moving_value_5 {fill: purple}
#svg_moving_value_6 {fill: black}

.moving_background {stroke: none; fill: #f5f5f5}

.svg_axis {stroke: black; stroke-width: 1}
#svg_x_axis {}
#svg_y_axis {}
.svg_tick {stroke: black; stroke-width: 1}
.svg_x_tick {}
.svg_y_tick {}