body {
	margin:0;
	font-family:verdana;
}
html {
	overflow-y:scroll;
}
select {
	color:white;
    margin-top: 10%;
    background: transparent;
    width: 100%;
    padding: 5px;
    font-size: 16px;
    border: 0px solid #ccc;
    height: 10%;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
select:focus {
    outline: 0;
}
#selection_bar {
	display:flex;
	overflow:hidden;
	background-color:#3B3738;
	flex-wrap:wrap;
}
.box_wrapper {
	height:350px;
	overflow:hidden;
	margin-right:-18px;
	position:relative;
	flex:0 0 20%;
}

.selection_box {
	height:100%;
	width:100%;
	overflow-y:scroll;
	overflow-x:hidden;
	padding-right: 20px;
}

.task {
	display:block;
	text-decoration: none;
	text-align:center;
	line-height:1.5em;
	cursor:pointer;
	font-family:verdana;
}
.sel_task {
	font-weight:bold;
	color:white;
	background-color:#5A4A3A;
}


.param {
	padding-left:10px;
	display:block;
	line-height:1.5em;
	cursor:pointer;
}
.sel_param {
	font-weight:bold;
	background-color:#3B3738;
}


.filter {
	background-color:#3B3738;
}
.filter_val {
	padding-right:8px;
}
.filter_val input[type="text"] {
  padding: 10px;
  background-color:transparent;
  border-width:0px;
  color:white;
}


.in {
	height:179px;
}
.close {
	font-weight:bold;
	color:white;
	top:10px;
	right:30px;
	position:absolute;
	cursor:pointer;
}

.box_header {
	text-align:center;
}

#task_select {
	background-color:white;
}
#x_box {
	background-color:#5A4A3A;
	color:white;
}
#y_box {
	background-color:#5A4A3A;
	color:white;
}
#add_filter {
	text-align:center;
	visibility:hidden;
	flex:1 0.5 10%;
}
.page_divider {
	cursor: pointer;
	text-align:center;
	background-color:#EA7B30;
	color:#5A4A3A;
}

/* plotter canvas */
#display_canvas {
	position:relative;
	left:0px;
}
.options_container {
	display:flex;
}
.divider_options {
	flex:1;
	line-height:2em;	
}

#plotter_container {
	display:flex;
	flex-wrap:wrap;
}
.plotter_options {
	flex:1 0.5 33%;
	line-height:2em;
	visibility: hidden;	
}

#custom_panel {
    display: flex;
    visibility:hidden;
    flex:1;
	padding:0 50px;
}
.task_title {
    margin-left: 50;
}
.h_grey {
    color: #999;
}
.h_dark {
    color: #000;
}
.custom_plot_selection_box {
	overflow:hidden;
	flex:1 0;
}
#get_custom_plot {
	flex:0.5;
	cursor:pointer;
	margin:9px 0 16px 2px;
	border:2px solid grey;
	background: transparent;
	font-size:large;
}
#gmean_select {
}
#overlay_select {
}
.custom_plot_form {
}

#get_custome_plot {
	flex:0.5;
}

.canvas_container {
    /*
    width: 1060;
    height: 700;
    */
    float: left;
}
.chart_container {
    /*width: 670;*/
    width: 100%;
    /*height: 700;*/
    float:left;
}
.legend_container {
    /*width: 130;*/
    /*height: 700;*/
    float: left;
    overflow-x: auto;
    overflow-y: auto;
}
svg {
    overflow-x: auto;
    overflow-y: auto;
}
/*
svg {
  font: 10px sans-serif;
}

.axis path {
  fill: none;
  stroke: #fff;
}
.axis line {
  fill: none;
  stroke: #fff;
}

.line {
    fill: none;
    stroke-width: 1.5px;
}
*/
.customizePlotContainer {}


@media screen and (-webkit-min-device-pixel-ratio:0) { 
	.filter_param option, .filter_sel option {
		background-color: #3B3738;
	}
}