.gutter {
  background-color: #eee;
  background-repeat: no-repeat;
  background-position: 50%;
}

.gutter.gutter-horizontal {
  background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
  cursor: ew-resize;
  float: left;
  height: 100%;
}

.gutter.gutter-vertical {
  background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
  cursor: ns-resize;
}

.split {
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  background: white;

  .split-content-top{
    padding-bottom: 0.5rem;
  }

  .split-content-bottom{
    padding-top: 0.5rem;
  }

  &.split-vertical{
    width: 100%;
  }

  &.split-horizontal{
    float: left;
    height: 100%;
  }

}