.check_switch {
    display: block; display: inline-block; position: relative;
    margin: 2px 3px; padding: 0;
    border-radius: 100px;
    width: 34px;
    height: 18px;
    border: solid 1px #ccc;
    background: #c5c5c5;
    box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.5);
    cursor: pointer;
    .switch_toggle {
        display: block; position: relative;
        margin: 0; padding: 0;
        width: 20px; height: 20px;
        position: absolute;
        left: -2px;
        top: -2px;
        background: #fff;
        border-radius: 100px;
        border: solid 1px #ccc;
        box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
        background-color: #ffffff;
        background-image: -webkit-linear-gradient(#ffffff, #e5e5e5);
        background-image: linear-gradient(#ffffff, #e5e5e5);
    }
    
    input { display: none; }
    
    &.on, &.active {
        
        background: $brand-success;
        .switch_toggle{
            left:   auto;
            right: -2px;
        }
        
    }
}

.radio_switch {
    display: block; display: inline-block; position: relative;
    margin: 4px 3px; padding: 0;
    border-radius: 100px;
    width: 16px; height: 16px;
    border: solid 1px #ccc;
    background: #c5c5c5;
    box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.5);
    cursor: pointer;
    .switch_toggle {
        display: block; position: relative;
        margin: 0; padding: 0;
        width: 4px; height: 4px;
        position: absolute;
        left: 5px;
        top: 5px;
        background: transparent;
        border-radius: 100px;
        border: none;
    }
    
    input { display: none; }
    
    &.on, &.active {
        
        background: $brand-success;
        .switch_toggle{
            background: #fff;
            opacity: .3;
        }
        
    }
}

label.switch_label {
  display: block; position: relative;
  margin: 0; padding: 0;
  line-height: 28px;
}