.switch {
             background-color: transparent;
             border-radius: 15px;
             cursor: pointer;
             display: inline-block;
             height: 20px;
             padding: 3px;
             position: relative;
             vertical-align: top;
             margin-top: -2px;
             width: 136px;
         }

         .switch-input {
             left: 0;
             opacity: 0;
             position: absolute;
             top: 0;
         }

         .switch-label {
             -moz-transition: 0.15s ease-out;
             -moz-transition-property: opacity background;
             -o-transition: 0.15s ease-out;
             -o-transition-property: opacity background;
             -webkit-transition: 0.15s ease-out;
             -webkit-transition-property: opacity background;
             background: #eceeef;
             border-radius: inherit;
             box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
             display: block;
             font-size: 10px;
             font-weight: bold;
             height: inherit;
             position: relative;
             text-transform: uppercase;
             transition: 0.15s ease-out;
             transition-property: opacity background;
         }

         .switch-label:before,
         .switch-label:after {
             -moz-transition: inherit;
             -o-transition: inherit;
             -webkit-transition: inherit;
             line-height: 1;
             margin-top: -.5em;
             position: absolute;
             top: 50%;
             transition: inherit;
         }

         .switch-label:before {
             color: #aaa;
             content: attr(data-off);
             right: 11px;
             text-shadow: 0 1px rgba(255, 255, 255, 0.5);
         }

         .switch-label:after {
             color: white;
             content: attr(data-on);
             left: 11px;
             opacity: 0;
             text-shadow: 0 1px rgba(0, 0, 0, 0.2);
         }

         .switch-input:checked~.switch-label {
             background: #4fb845;
             box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
         }

         .switch-input:checked~.switch-label:before {
             opacity: 0;
         }

         .switch-input:checked~.switch-label:after {
             opacity: 1;
         }

         .switch-handle {
             -moz-transition: left 0.15s ease-out;
             -o-transition: left 0.15s ease-out;
             -webkit-transition: left 0.15s ease-out;
             background: white;
             background-image: -webkit-linear-gradient(top, white 40%, #f0f0f0);
             background-image: -moz-linear-gradient(top, white 40%, #f0f0f0);
             background-image: -o-linear-gradient(top, white 40%, #f0f0f0);
             background-image: linear-gradient(to bottom, white 40%, #f0f0f0);
             border-radius: 10px;
             box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
             height: 17px;
             left: 7px;
             position: absolute;
             top: 6px;
             transition: left 0.15s ease-out;
             width: 15px;
         }

         .switch-handle:before {
             background: #f9f9f9;
             background-image: -webkit-linear-gradient(top, #eeeeee, white);
             background-image: -moz-linear-gradient(top, #eeeeee, white);
             background-image: -o-linear-gradient(top, #eeeeee, white);
             background-image: linear-gradient(to bottom, #eeeeee, white);
             border-radius: 6px;
             box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
             content: '';
             height: 12px;
             left: 50%;
             margin: -6px 0 0 -6px;
             position: absolute;
             top: 50%;
             width: 12px;
         }

         .switch-input:checked~.switch-handle {
             box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
             left: 110px;
         }

         .switch-input:checked~.switch-handle.size38 {
             left: 24px;
         }

         .switch-input~.switch-handle.size38 {
             left: 4px;
         }

         .switch.size38 {
             width: 38px;
         }

         .switch-green>.switch-input:checked~.switch-label {
             background: #4fb845;
         }

         .switch-label.size38 {
             margin-right: 0px;
         }

         .switch-label.red {
             background: #eb9b9b;
         }

         @media only screen and (max-width: 830px) {
             .switch {
                 width: 60px;
             }
             .switch-input:checked~.switch-handle {
                 left: 37px;
             }
         }