/* Curves part */
div#curvesViews		 																				{ height: 100%; display: flex; position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding-top: 10px; box-sizing: border-box; }
div#curvesViews > div.displayContainer																{ flex: 1 1 auto; position: relative; }
div#Chart																							{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; }

div#ChartConfig																						{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; min-width: 800px; min-height: 600px; display: flex; }
div#ChartConfig	> div.form																			{ height: 700px; }
div#ChartConfig	> div.form > div.axes																{ display: inline-block; text-align: right; width: 700px; padding: 4px; box-sizing: border-box; font-size: 12px; overflow: hidden; }
div#ChartConfig	> div.form > div.axes > div.table													{ border: 1px solid #7f8c8d; height: 106px; display: flex; flex-direction: column; margin-bottom: 2px; }
div#ChartConfig	> div.form > div.axes > div.table > div.header										{ display: flex; background-color: #7f8c8d; color: #FFF; flex: 0 0 22px; align-items: center; }
div#ChartConfig	> div.form > div.axes > div.table > div.header > span								{ padding: 2px 4px; text-align: center; }
div#ChartConfig	> div.form > div.axes > div.table > div.header > span.icon							{ flex: 0 0 30px; }
div#ChartConfig	> div.form > div.axes > div.table > div.header > span.name							{ flex: 1 1 auto; }
div#ChartConfig	> div.form > div.axes > div.table > div.header > span.unit							{ flex: 0 0 80px; }
div#ChartConfig	> div.form > div.axes > div.table > div.header > span.position						{ flex: 0 0 100px; }
div#ChartConfig	> div.form > div.axes > div.table > div.header > span.min							{ flex: 0 0 60px; }
div#ChartConfig	> div.form > div.axes > div.table > div.header > span.max							{ flex: 0 0 60px; }
div#ChartConfig	> div.form > div.axes > div.table > div.header > span.color							{ flex: 0 0 80px; }
div#ChartConfig	> div.form > div.axes > div.table > div.header > span.del							{ flex: 0 0 48px; }
div#ChartConfig	> div.form > div.axes > div.table > div.list										{ overflow-x: hidden; overflow-y: auto; }
div#ChartConfig	> div.form > div.axes > div.table > div.list > div.line								{ display: flex; background-color: #FFF; color: #000; height: 28px; align-items: center; }
div#ChartConfig	> div.form > div.axes > div.table > div.list > div.line:nth-child(odd)				{ background-color: #EEE; }
div#ChartConfig	> div.form > div.axes > div.table > div.list > div.line > span						{ padding: 2px 4px; }
div#ChartConfig	> div.form > div.axes > div.table > div.list > div.line > span.icon					{ flex: 0 0 30px; background: url("../icons/axes_grey_16px.svg") no-repeat 50% 50%; height: 16px; }
div#ChartConfig	> div.form > div.axes > div.table > div.list > div.line > span.name					{ flex: 1 1 auto; }
div#ChartConfig	> div.form > div.axes > div.table > div.list > div.line > span.name > input			{ width: 100%; text-align: left; }
div#ChartConfig	> div.form > div.axes > div.table > div.list > div.line > span.unit					{ flex: 0 0 80px; }
div#ChartConfig	> div.form > div.axes > div.table > div.list > div.line > span.unit > input			{ width: 100%; text-align: center; }
div#ChartConfig	> div.form > div.axes > div.table > div.list > div.line > span.position				{ flex: 0 0 100px; }
div#ChartConfig	> div.form > div.axes > div.table > div.list > div.line > span.position > select	{ width: 100%; }
div#ChartConfig	> div.form > div.axes > div.table > div.list > div.line > span.min					{ flex: 0 0 60px; }
div#ChartConfig	> div.form > div.axes > div.table > div.list > div.line > span.min > input			{ width: 100%; text-align: right; }
div#ChartConfig	> div.form > div.axes > div.table > div.list > div.line > span.max					{ flex: 0 0 60px; }
div#ChartConfig	> div.form > div.axes > div.table > div.list > div.line > span.max > input			{ width: 100%; text-align: right; }
div#ChartConfig	> div.form > div.axes > div.table > div.list > div.line > span.color				{ flex: 0 0 80px; }
div#ChartConfig	> div.form > div.axes > div.table > div.list > div.line > span.color > input		{ width: 100%; text-align: center; }
div#ChartConfig	> div.form > div.axes > div.table > div.list > div.line > span.del					{ flex: 0 0 48px; background: url("../icons/close_gradient_16px.svg") no-repeat 50% 50%; opacity: .5; height: 16px; transition: opacity .2s; }
div#ChartConfig	> div.form > div.axes > div.table > div.list > div.line > span.del:hover			{ opacity: 1; transition: opacity .05s; cursor: pointer; }
div#ChartConfig	> div.form > div.axes > button														{ height: auto; }

div#ChartConfig	> div.form > div.curves																							{ display: inline-block; text-align: center; width: 700px; padding: 4px; box-sizing: border-box; font-size: 14px; }
div#ChartConfig	> div.form > div.curves > div.table																				{ display: flex; height: 300px; }
div#ChartConfig	> div.form > div.curves > div.table > div.leftPanel																{ flex: 0 0 240px; max-width: 240px; display: flex; flex-direction: column; }
div#ChartConfig	> div.form > div.curves > div.table > div.leftPanel > div.list													{ flex: 1 1 auto; border: 1px solid #7f8c8d; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; margin-right: 2px; font-size: 10px; }
div#ChartConfig	> div.form > div.curves > div.table > div.leftPanel > button.add												{ flex: 0 0 24px; margin-top: 1px; margin-right: 2px; font-size: 20px; }
div#ChartConfig	> div.form > div.curves > div.table > div.leftPanel > div.list > div.line										{ flex: 0 0 24px; user-select: none; border: 1px solid #DEE2E2; background-color: #FFF; margin: 1px; display: flex; align-items: center; justify-content: center; transition: color .2s, background .2s, opacity .2s; word-break: break-all; display: flex; padding: 0 4px; }
div#ChartConfig	> div.form > div.curves > div.table > div.leftPanel > div.list > div.line:not(:first-child)						{ margin-top: 0; }
div#ChartConfig	> div.form > div.curves > div.table > div.leftPanel > div.list > div.line:nth-child(odd)						{ background-color: #EEE; }
div#ChartConfig	> div.form > div.curves > div.table > div.leftPanel > div.list > div.line:hover									{ border-color: #bdc3c7; background-color: #bdc3c7; cursor: pointer; color: #FFF; transition: color .05s, background .05s, opacity .05s; }
div#ChartConfig	> div.form > div.curves > div.table > div.leftPanel > div.list > div.line.active								{ background-color: #69C1C4; border-color: #529C9F; color: #FFF; }
div#ChartConfig	> div.form > div.curves > div.table > div.leftPanel > div.list > div.line > span:first-child					{ flex: 0 0 16px; height: 16px; border: thin solid #bdc3c7; margin: 0 3px; border-radius: 2px; transition: color .2s, background .2s, opacity .2s, border .2s; }
div#ChartConfig	> div.form > div.curves > div.table > div.leftPanel > div.list > div.line:hover > span:first-child				{ border-color: #7f8c8d; transition: color .05s, background .05s, opacity .05s, border .05s; }
div#ChartConfig	> div.form > div.curves > div.table > div.leftPanel > div.list > div.line > span:nth-child(2)					{ flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis;  white-space: nowrap; }
div#ChartConfig	> div.form > div.curves > div.table > div.leftPanel > div.list > div.line > span:nth-child(3)					{ flex: 0 0 0; overflow: hidden; transition: flex .2s; }
div#ChartConfig	> div.form > div.curves > div.table > div.leftPanel > div.list > div.line > span:nth-child(3) > button			{ border: 0; background: url("../icons/close_gradient_16px.svg") no-repeat 50% 50%; opacity: .5; transition: opacity .2s; }
div#ChartConfig	> div.form > div.curves > div.table > div.leftPanel > div.list > div.line > span:nth-child(3) > button:hover	{ opacity: 1; transition: opacity .05s; }
div#ChartConfig	> div.form > div.curves > div.table > div.leftPanel > div.list > div.line.active > span:nth-child(3)			{ flex: 0 0 24px; max-width: unset; }

div#ChartConfig	> div.form > div.curves > div.table > div.panel														{ flex: 1 1 auto; border: 1px solid #7f8c8d; }
div#ChartConfig	> div.form > div.curves > div.table > div.panel:empty                                               { opacity: .5; display: flex; flex-direction: column; justify-content: center; }
div#ChartConfig	> div.form > div.curves > div.table > div.panel:empty:after                                         { content: "Aucune donnée à afficher\0AVeuiller sélectionner un point"; flex: 0 0 auto; white-space: pre; }
div#ChartConfig	> div.form > div.curves > div.table > div.panel > table												{ width: 100%; font: 14px "Arial"; }
div#ChartConfig	> div.form > div.curves > div.table > div.panel > table td:nth-child(1)								{ text-align: left; }
div#ChartConfig	> div.form > div.curves > div.table > div.panel > table td:nth-child(2)								{ text-align: right; }
div#ChartConfig	> div.form > div.curves > div.table > div.panel > table td.datapointContainer select				{ font: 10px "Arial"; }
div#ChartConfig	> div.form > div.curves > div.table > div.panel > table td.colorContainer input						{ text-align: right; }

div#zoomChartsDatePopup								{ position: absolute; background: #FFF; top: 32px; right: 2px; width: 320px; height: 160px; border: 1px solid #888; padding: 10px; filter: drop-shadow(0px 0px 8px rgba(0,0,0,.4)); outline: none; }
div#zoomChartsDatePopup	fieldset					{ border: 1px solid #DDD; font: 12px Roboto; color: #888; }
div#zoomChartsDatePopup	div.container				{ display: flex; }
div#zoomChartsDatePopup	div.container > icon		{ background: url("../icons/uxInterface/agenda_24px.svg") no-repeat 50% 50%; height: 24px; flex: 0 0 24px; margin-right: 6px; }
div#zoomChartsDatePopup	div.container > input		{ flex: .5 .5 auto; width: 100%; text-align: center; min-width: 0; }

div#zoomChartsStatsPopup														{ position: absolute; background: #FFF; top: 32px; right: 2px; width: 640px; height: 320px; border: 1px solid #888; padding: 10px; filter: drop-shadow(0px 0px 8px rgba(0,0,0,.4)); outline: none; overflow-y: auto; overflow-x: none; transition: opacity .2s; }
div#zoomChartsStatsPopup table													{ width: 100%; font: 14px "Arial"; }
div#zoomChartsStatsPopup table > thead > tr > th								{ padding: 8px 4px; }
div#zoomChartsStatsPopup table tr.statline:nth-child(odd)						{ background-color: #EEE; }
div#zoomChartsStatsPopup table td												{ padding: 4px 8px; }
div#zoomChartsStatsPopup table td.name > span.color								{ display: inline-block; width: 10px; height: 10px; border: thin solid rgba(0,0,0,.25); border-radius: 2px; margin-right: 8px; }
div#zoomChartsStatsPopup table td.min											{ text-align: right; }
div#zoomChartsStatsPopup table td.max											{ text-align: right; }
div#zoomChartsStatsPopup table td.avg											{ text-align: right; }
div#zoomChartsStatsPopup.ui-draggable-dragging									{ opacity: .5; }

div#uiDatapointSelector 														{ border: 1px solid #7f8c8d; display: flex; flex-direction: column; height: 190px; }
div#uiDatapointSelector div.header 												{ flex: 0 0 24px; background: #7f8c8d url("../icons/uxInterface/headerAbstract.svg") no-repeat 100% 50%; color: #FFF; display: flex; align-items: center; justify-content: flex-end; }
div#uiDatapointSelector div.header > icon										{ flex: 0 0 16px; height: 16px; background: url("../icons/datapointFamilyIcons/datapoint_white_32px.svg") no-repeat; background-size: contain; margin: 1px 2px 1px 4px; }
div#uiDatapointSelector div.header > title										{ flex: 1 1 auto; display: inline-block; margin-left: 2px; font: 12px Roboto; }
div#uiDatapointSelector div.header > input#filterDatapointsSelector				{ flex: 0 0 20px; width: 100%; padding: 1px 2px; background: rgba(255, 255, 255, .75) url("../icons/uxInterface/magnifyglass_16px.svg") no-repeat 100% 50%; border: 1px solid transparent; margin: 1px 2px; transition: flex .2s, color .2s, background .2s; color: transparent; }
div#uiDatapointSelector div.header > input#filterDatapointsSelector:focus		{ border-color: #000; flex: 0 0 200px; background-color: #fff; color: #000; }
div#uiDatapointSelector div.listContainer 										{ flex: 1 1 auto; overflow-y: auto; overflow-x: none; margin: 0; width: unset; }
div#uiDatapointSelector div.footer 												{ flex: 0 0 24px; background-color: #eee; color: #000; display: flex; align-items: center; }

div#uiDatapointSelector div.list 												{ width: 100%; font: 11px "Roboto"; padding: 4px; box-sizing: border-box; }
div#uiDatapointSelector div.list > .line										{ text-align: left; padding: 1px 6px; transition: color .05s, background .05s, opacity .05s, border .05s; }
div#uiDatapointSelector div.list > .line:not(.title):hover						{ color: #FFF; background-color: #bdc3c7; cursor: pointer; }
div#uiDatapointSelector div.list > .line.selected,
div#uiDatapointSelector div.list > .line.selected:hover							{ color: #FFF; background-color: #69C1C4; }
div#uiDatapointSelector div.list > .line.title									{ text-align: left; font-weight: bold; border-bottom: 1px solid #EEE; padding: 1px 4px; color: #888;  }
div#uiDatapointSelector div.list > .line.title:not(:first-child)				{ margin-top: 8px; }