.wlMainParent {
    position: relative;
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
    align-items: stretch;
    justify-content: center;
    text-align: center;
}

canvas.waveCanvas {
    width: 100%;
    margin-left: 0 !important;
    height: 25vh;
}

.custom-slider .ant-slider-handle {
    background: no-repeat center center url('./img/sliderStar.svg');
    background-size: contain;
    transform: translate(-50%, -80%) !important; 
    position: relative;
    top: 0px;
    width: 200px;
    height: 300px;
    background-color: transparent;
    box-shadow: none;
}

.triangle-slider .ant-slider-handle {
  background: no-repeat center center url('../Tutorial/triangle.svg');
  background-size: 30%;
  transform: translate(-50%, -80%) !important; 
  position: relative;
  top: 0px;
  width: 200px;
  height: 300px;
  background-color: transparent;
  box-shadow: none;
}

.ant-slider .ant-slider-handle,
.ant-slider .ant-slider-handle:hover::before,
.ant-slider .ant-slider-handle:hover::after,
.ant-slider .ant-slider-handle:focus::before,
.ant-slider .ant-slider-handle:focus::after,
.ant-slider .ant-slider-handle-dragging {
    background-color: transparent;
    box-shadow: none;
}

.ant-slider .ant-slider-handle::before,
.ant-slider .ant-slider-handle::after {
    background-color: transparent;
    box-shadow: 0 0 0 2px transparent;
}

.canvasandslider {
    margin: 20px auto;
    padding: 15px;
    width: 40%;
    border: 2px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

canvas.canvas-container {
  position: relative;
  width: 100%;
  height: 100%;
}

canvas.fullWidth {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

canvas.snapCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}