.left {
  float: left;
}

.right {
  float: right;
}

.clear {
  clear: both;
}

#chart {
  .pane {
    display: block;
    position: relative;

    img,
    canvas {
      border: none;
      display: block;
      box-sizing: content-box; // prevent change of canvas width/height by adding border leading to blurred lines
      &.hover {
        cursor: pointer;
      }
    }
    .resizer,
    .zoomer {
      display: block;
      position: absolute;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      z-index: 10;
    }
    .resizer {
      width: 100%;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      cursor: row-resize;
    }
    .zoomer {
      bottom: 8px;
      height: 20px;
      left: 34px;
      right: 42px;
      cursor: ew-resize;
    }
    .zoom-controls {
      .zoom-buttons {
        opacity: 0;
        visibility: hidden;
        transform: translateY(0.75rem);
      }

      &.is-active > .zoom-buttons {
        transform: translateY(0);
        opacity: 0.75;
        visibility: visible;
      }

      .zoom-buttons:hover {
        opacity: 1;
      }
    }
    .canvas {
      .second {
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
}


/*# sourceMappingURL=charts_layout.4e5209fb.css.map*/