.slidecontainer {
  width: 40%;
  position: absolute;
  left: 30%;
  top: 85%;
  z-index: 99;
}

.slider {
  appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  transition: opacity .2s;
  border-radius: 25px;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #0094ff;
  cursor: pointer;
  border-radius: 25px;
}

::ng-deep {
  /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
  .mat-mdc-slider.mat-slider-horizontal .mat-slider-wrapper {
    top: 12px;
  }
  /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
  .mat-mdc-slider.mat-slider-horizontal .mat-slider-track-wrapper {
    height: 0;
    border-radius: 0;
  }
  /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
  .mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
    background: #0094ff;
  }
}
