/* ============================== *
 * ## Noise Level Canvas Chart ##
 * ============================== */

.canvas-timeline-chart {
   display: flex;
   flex-direction: column;
   height: 100%;
   padding-top: 5px;
   width: 100%;
}

.canvas-timeline-chart .canvas-container,
.canvas-timeline-chart .canvas-container .role-canvas,
.canvas-timeline-chart .chart-container,
.canvas-timeline-chart .role-axis-lines .axis .axis-line,
.canvas-timeline-chart .role-grid
{
   float: left;
   height: 100%;
   position: relative;
   width: 100%;
}

.canvas-timeline-chart .chart-container {
   flex: 1;
}

.canvas-timeline-chart .chart-container > .flex-row { height: 100%; }

/* ## grid ## */
.canvas-timeline-chart .grid {
}


/* ========================== *
 * ## Axis label container ##
 * ========================== */

.canvas-timeline-chart .axis-label-container .axis-label-container .axis-label {
   font-size: 10px;
   font-weight: bold;
   line-height: 20px;
   padding-left: 5px;
   white-space: nowrap;
}

.canvas-timeline-chart .role-axis-lines .axis-line,
.canvas-timeline-chart .role-x-axis-labels .axis-label-container:after {
   border-color: #E6E6E6;
   border-style: solid;
}

.canvas-timeline-chart .role-axis-lines {
   height: 100%;
   width: 100%;
   z-index: 0;
}

.canvas-timeline-chart .role-axis-lines,
.canvas-timeline-chart .role-axis-lines .axis {
   left: 0;
   position: absolute;
   top: 0;
}

.canvas-timeline-chart .role-axis-lines .x-axis {
   height: 100%;
   width: 1px;
}

.canvas-timeline-chart .role-axis-lines .y-axis {
   height: 1px;
   width: 100%;
}

.canvas-timeline-chart .role-x-axis-labels,
.canvas-timeline-chart .role-y-axis-labels {
   display: flex;
}

.canvas-timeline-chart .role-x-axis-labels { flex-direction: row; }
.canvas-timeline-chart .role-y-axis-labels { flex-direction: column; }

.canvas-timeline-chart .role-axis-lines .x-axis .axis-line,
.canvas-timeline-chart .role-x-axis-labels .axis-label-container:after { border-width: 0 0 0 1px; }
.canvas-timeline-chart .role-x-axis-labels .axis-label-container:last-child:after { border-width: 0 1px; }

.canvas-timeline-chart .role-x-axis-labels .axis-label-container { position: relative; }
.canvas-timeline-chart .role-x-axis-labels .axis-label-container:after {
   content: "";
   height: 50%;
   left: 0;
   pointer-events: none;
   position: absolute;
   top: 0;
   width: 100%;
}

.canvas-timeline-chart .role-y-axis-labels .axis-label-container .axis-label { transform: translate(0, -50%); }
.canvas-timeline-chart .role-axis-lines .y-axis .axis-line { border-width: 1px 0 0 0; }

.canvas-timeline-chart .canvas-container {
   overflow: hidden;
   z-index: 1;
}
.canvas-timeline-chart .canvas-container .role-canvas {
   width: 200%;

   transform: translate(0,0);
   -webkit-transform: translate(0,0);
}
.canvas-timeline-chart .canvas-container .role-canvas:not(.processed) { display: none; }


/* ## legend ## */
.canvas-timeline-chart .grid .axis-container {
   bottom: 0;
   left: 0;
   position: absolute;
   width: 100%;
}

.canvas-timeline-chart .legend-container {
   display: flex;
   flex-direction: row;
   flex: 0;
   height: 20px;
   justify-content: space-between;
}

.canvas-timeline-chart .legend-container .legend-item {
   font-size: 10px;
   font-weight: bold;
   line-height: 20px;
}