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

.noise-level-canvas-chart {
   height: 100%;
   width: 100%;
}

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

.noise-level-canvas-chart .chart-container {
   flex: 1;
   padding: 10px 30px 20px 0;
}

/* ## grid ## */
.noise-level-canvas-chart .grid {
}

/* ## axis ## */
.noise-level-canvas-chart .axis-container { height: 100%; }
.noise-level-canvas-chart .axis-container .axis {
   left: 0;
   position: absolute;
   top: 0;
}

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

.noise-level-canvas-chart .axis-container .axis .axis-label,
.noise-level-canvas-chart .axis-container .axis .axis-line {
   border-color: #E6E6E6;
   border-style: solid;
}

.noise-level-canvas-chart .axis-container .x-axis {
   height: 100%;
   width: 1px;
}

.noise-level-canvas-chart .axis-container .x-axis .axis-label,
.noise-level-canvas-chart .axis-container .x-axis .axis-line {
   border-width: 0 0 0 1px;
}

.noise-level-canvas-chart .axis-container .x-axis .axis-label {
   height: 10px;
   left: 0;
   top: 100%;
}

.noise-level-canvas-chart .axis-container .y-axis {
   height: 1px;
   width: 100%;
}

.noise-level-canvas-chart .axis-container .y-axis .axis-label {border-width: 0; }
.noise-level-canvas-chart .axis-container .y-axis .axis-line { border-width: 1px 0 0 0; }

.noise-level-canvas-chart .axis-container .y-axis .axis-label {
   height: 20px;
   left: 100%;
   top: 0;

   transform: translate(0,-50%);
   -webkit-transform: translate(0,-50%);
}

.noise-level-canvas-chart .canvas-container { overflow: hidden; }
.noise-level-canvas-chart .canvas-container .role-canvas {
   width: 200%;

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


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

.noise-level-canvas-chart .legend-container {
   display: flex;
   flex-direction: row;
   flex: 0;
   height: 20px;
   justify-content: space-between;
   padding-right: 30px;
}

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