.switch {
   position: relative;
   display: inline-block;
   width: 34px;
 /*height: 16px;*/
   height: 12px;
}

.switch input {display:none;}

.slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(100, 100, 100, 0.60);
   -webkit-transition: .4s;
   transition: .4s;
   border-radius: 40px;
}

.slider:before {
   position: absolute;
   content: "";
 /*height: 12px;*/
   height:  9px;
   width:  9px;
   left: 2px;
   bottom: 2px;
   background-color: white;
   -webkit-transition: .4s;
   transition: .4s;
   border-radius: 50%;
}

input:checked + .slider {
   background-color: rgba(100, 100, 100, 0.60);
}

input:focus + .slider {
   box-shadow: 0 0 2px rgba(100, 100, 100, 0.60);
}

input:checked + .slider:before {
   -webkit-transform: translateX(18px);
   -ms-transform: translateX(18px);
   transform: translateX(18px);
}