.switch {
   position: relative;
   display: inline-block;
   width: 90px;
   height: 34px;
}

.switch input {
   display: none;
}

.slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 10px;
   right: 0;
   bottom: 0;
   background-color: #808080;
   -webkit-transition: .4s;
   transition: .4s;

/*   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #ccc;
   transition: .4s;*/
}

   .slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      transition: .4s;
   }

/* include generated hidden field here */
input[type="checkbox"]:checked + input[type="hidden"] + .slider,
input[type="checkbox"]:checked + .slider {
   background-color: #2196F3;
}

/* include generated hidden field here */
input[type="checkbox"]:focus + input[type="hidden"] + .slider,
input[type="checkbox"]:focus + .slider {
   box-shadow: 0 0 1px #2196F3;
}

/* include generated hidden field here */
input[type="checkbox"]:checked + input[type="hidden"] + .slider:before,
input[type="checkbox"]:checked + .slider:before {
   transform: translateX(46px);
}

/* Rounded sliders */
.slider.round {
   border-radius: 34px;
}

   .slider.round:before {
      border-radius: 50%;
   }


/*------ ADDED CSS ---------*/
.on {
    display: none;
    color: black;
}


.on, .off {
   color: white;
   position: absolute;
   transform: translate(-50%,-50%);
   top: 50%;
   left: 75%;
   font-size: 10px;
   font-family: Verdana, sans-serif;
}

input:checked + .slider .on {
   display: block;
}

input:checked + .slider .off {
   display: none;
}

/*--------- END --------*/

/* Rounded sliders */
.slider.round {
   border-radius: 34px;
}

   .slider.round:before {
      border-radius: 50%;
   }