@import "https://fonts.googleapis.com/css?family=Roboto";

.switch [type="checkbox"]:not(:checked),
.switch [type="checkbox"]:checked {
  position: absolute;
  left: -99999999px;
}

.switch [type="checkbox"]:not(:checked) + label,
.switch [type="checkbox"]:checked + label {
  position: relative;
  cursor: pointer;
  width: 100px;
  height: 50px;
}

.switch [type="checkbox"]:not(:checked) + label:before,
.switch [type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: #B0AFAF;
  width: 35px;
  height: 16px;
  border-radius: 20px;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.switch [type="checkbox"]:not(:checked) + label:after,
.switch [type="checkbox"]:checked + label:after {
  content: '';
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 20px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.24);
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
}

.switch [type="checkbox"]:not(:checked) + label:after {
  left: 40%;
  background-color: #FAFAFA;
}

.switch [type="checkbox"]:checked + label:after {
  left: 59%;
  background-color: #50c0e3;
}

.switch [type="checkbox"]:checked + label:before {
  background-color: #9CEBD9;
}

.switch [type="checkbox"]:disabled + label:after {
  backgruond-color: #BDBDBD;
}

.switch [type="checkbox"]:disabled + label:before {
  background-color: #D5D5D5;
}