.onoffswitch {
        position: relative; width: 22px;
        left:-2px;
        -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
    }
    .onoffswitch-checkbox {
        display: none;
    }
    .onoffswitch-label {
        display: block; overflow: hidden; cursor: pointer;
        height: 8px; padding: 0; line-height: 8px;
        border: 2px solid #999999; border-radius: 8px;
        background-color: #EEEEEE;
        transition: background-color 0.3s ease-in;
    }
    .onoffswitch-label:before {
        content: "";
        display: block; width: 8px; margin: 0px;
        background: #FFFFFF;
        position: absolute; top: 0; bottom: 0;
        right: 10px;
        border: 2px solid #999999; border-radius: 8px;
        transition: all 0.3s ease-in 0s; 
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label {
        background-color: #00FA3F;
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
       border-color: #00FA3F;
    }
    .onoffswitch-checkbox:checked + .onoffswitch-label:before {
        right: 0px; 
    }
    
    
    .onoffswitch-checkbox-blue {
        display: none;
    }
    .onoffswitch-checkbox-blue:checked + .onoffswitch-label {
        background-color: #9ebcff;
    }
    .onoffswitch-checkbox-blue:checked + .onoffswitch-label, .onoffswitch-checkbox-blue:checked + .onoffswitch-label:before {
       border-color: #9ebcff;
    }
    .onoffswitch-checkbox-blue:checked + .onoffswitch-label:before {
        right: 0px; 
    }