.chart-canvas

-moz-user-select: none
-webkit-user-select: none
-ms-user-select: none

.optical-trap-wrapper

margin: 10vh auto
max-width: 256px
width: 60%

.optical-trap

border: solid 1px $black
border-radius: 20px
height: 30vh
overflow: hidden
//fixes overflow issue with safari
-webkit-mask-image: -webkit-radial-gradient(white, black)

.slide-wrapper

width: 100%

.slider

appearance: none
background: #d3d3d3
height: 20px
opacity: .6
outline: none
transition: opacity .2s
width: 100%

&:hover
  opacity:  1

&::-webkit-slider-thumb
  appearance: none
  background: #00a3ff
  cursor: ew-resize
  height: 35px
  width: 10px

&::-moz-range-thumb
  background: #4CAF50
  cursor: pointer
  height: 25px
  width: 25px

.chart-wrapper

margin: auto
width: 100%

@media screen and ( min-width: 768px )

.chart-wrapper
  width: 75%

@media screen and ( min-width: 1024px )

.chart-wrapper
  width: 60%