.knobs,
    .layer {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    .button {
      position: relative;
      top: 50%;
      width: 74px;
      height: 36px;
      margin: -20px auto 0 auto;
      overflow: hidden;
    }
    .button.r,
    .button.r .layer {
      border-radius: 100px;
    }
    .button.b2 {
      border-radius: 2px;
    }
    .checkbox {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      opacity: 0;
      cursor: pointer;
      z-index: 3;
    }
    .knobs {
      z-index: 2;
    }
    .layer {
      width: 100%;
      background-color: #292929;
      transition: 0.3s ease all;
      z-index: 1;
    }    
    #toggle .knobs:before,
    #toggle .knobs:after,
    #toggle .knobs span {
      position: absolute;
      top: 5px;
      width: 24px;
      height: 8px;
      font-size: 15px;
      font-weight: bold;
      text-align: center;
      line-height: 0.6;
      padding: 9px 4px;
      border-radius: 2px;
      transition: 0.3s ease all;
    }
    
    #toggle .knobs:before {
      content: "";
      left: 5px;
      background-color: #777;
    }
    
    #toggle .knobs:after {
      content: "24H";
      right: 5px;
      color: #777;
    }
    
    #toggle .knobs span {
      display: inline-block;
      left: 4px;
      color: white;
      z-index: 1;
    }
    
    #toggle .checkbox:checked + .knobs span {
      color: #777;
    }
    
    #toggle .checkbox:checked + .knobs:before {
      left: 38px;
      background-color: #777;
    }
    
    #toggle .checkbox:checked + .knobs:after {
      color: white;
    }
    
    #toggle .checkbox:checked ~ .layer {
      background-color: #292929;
    }