.switch {
    position: relative;
    display: inline-block;
    width: 90px;
    height: 34px;
    margin-top: 5px;
  }
  
  .switch input {
    display: none;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e10019;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
  }
  
  input:checked+.slider {
    background-color: #008000;
  }
  
  input:focus+.slider {
    box-shadow: 0 0 1px #e10019;
  }
  
  input:checked+.slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(55px);
  }
  
  /*------ ADDED CSS ---------*/
  .slider:after {
    content: 'OFF';
    color: white;
    display: block;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    font-size: 10px;
    font-family: Verdana, sans-serif;
  }
  
  input:checked+.slider:after {
    content: 'ON';
  }
  
  /*--------- END --------*/
  /*sliderStartLeft*/
  .sliderStartLeft {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e10019;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
  }
  
  .sliderStartLeft:before {
    position: absolute;
    content: "";
    height: 23px;
    width: 24px;
    left: 1px;
    bottom: 6px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
  }
  
  input:checked+.sliderStartLeft {
    background-color: #008000;
  }
  
  input:focus+.sliderStartLeft {
    box-shadow: 0 0 1px #e10019;
  }
  
  input:checked+.sliderStartLeft:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(55px);
  }
  
  /*------ ADDED CSS ---------*/
  .sliderStartLeft:after {
    content: 'Stop';
    color: white;
    display: block;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    font-size: 10px;
    font-family: Verdana, sans-serif;
  }
  
  input:checked+.sliderStartLeft:after {
    content: 'Start';
  }
  
  /*sliderStartRight*/
  .sliderStartRight {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e10019;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
  }
  
  .sliderStartRight:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
  }
  
  input:checked+.sliderStartRight {
    background-color: #008000;
  }
  
  input:focus+.sliderStartRight {
    box-shadow: 0 0 1px #e10019;
  }
  
  input:checked+.sliderStartRight:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(55px);
  }
  
  /*------ ADDED CSS ---------*/
  .sliderStartRight:after {
    content: 'Stop';
    color: white;
    display: block;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    font-size: 10px;
    font-family: Verdana, sans-serif;
  }
  
  input:checked+.sliderStartRight:after {
    content: 'Start';
  }




  /*sliderBottom*/





  .switchBottom {
    position: relative;
    display: inline-block;
    width: 90px;
    height: 28px;
    margin-top: 2px;
  }





  .sliderBottom {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e10019;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
  }
  
  .sliderBottom:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
  }
  
  input:checked+.sliderBottom {
    background-color: #008000;
  }
  
  input:focus+.sliderBottom {
    box-shadow: 0 0 1px #e10019;
  }
  
  input:checked+.sliderBottom:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(55px);
  }
  
  /*------ ADDED CSS ---------*/
  .sliderBottom:after {
    content: 'Play';
    color: white;
    display: block;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    font-size: 10px;
    font-family: Verdana, sans-serif;
  }
  
  input:checked+.sliderButton:after {
    content: 'Play';
  }


  input[type="range"] {
    width:130px;
  }


  .unselectable{
    cursor: not-allowed;
    pointer-events: none;
  
}