.mucheck {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 22px;
    height: 22px;
    
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    
    cursor: default;
    
    outline: none !important;
}

.mucheck input[type=checkbox],
.mucheck input[type=radio] {
    opacity: 0;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    outline: none !important;
    cursor: pointer;
}
.mucheck input:disabled {
    cursor: not-allowed;
}
.mucheck input[type=checkbox] + .mucheck-view,
.mucheck input[type=radio] + .mucheck-view {
    content: '';
    width: 100%;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    background: url('mucheck.png') 24px 0px no-repeat;
    -webkit-background-origin: border-box;
    -moz-background-origin:    border-box;
    -ms-background-origin:     border-box;
    -o-background-origin:      border-box;
    background-origin:         border-box;
    -webkit-border-radius:  1px;
    -moz-border-radius:     1px;
    -ms-border-radius:      1px;
    -o-border-radius:       1px;
    border-radius:          1px;
}

.mucheck input[type=checkbox] + .mucheck-view {
    background-position: 0px 0px;
}
.mucheck input[type=checkbox]:hover + .mucheck-view {
    background-position: -24px 0px;
}
.mucheck input[type=checkbox]:checked + .mucheck-view {
    background-position: -48px 0px;
}
.mucheck input[type=checkbox][indeterminate="true"] + .mucheck-view {
    background-position: -240px 0px;
}
.mucheck input[type=checkbox]:disabled + .mucheck-view {
    background-position: -72px 0px;
}
.mucheck input[type=checkbox]:disabled:checked + .mucheck-view {
    background-position: -96px 0px;
}
.mucheck input[type=checkbox][indeterminate="true"]:disabled + .mucheck-view {
    background-position: -264px 0px;
}

.mucheck input[type=radio] + .mucheck-view {
    background-position: -120px 0px;
}
.mucheck input[type=radio]:hover + .mucheck-view {
    background-position: -144px 0px;
}
.mucheck input[type=radio]:checked + .mucheck-view {
    background-position: -168px 0px;
}
.mucheck input[type=radio]:disabled + .mucheck-view {
    background-position: -192px 0px;
}
.mucheck input[type=radio]:disabled:checked + .mucheck-view {
    background-position: -216px 0px;
}

/* HiDPI support */
@media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
    .mucheck input[type=checkbox] + .mucheck-view,
    .mucheck input[type=radio] + .mucheck-view {
        background-image: url('mucheck@2x.png');
        -webkit-background-size: 288px 24px;
        -moz-background-size:    288px 24px;
        -ms-background-size:     288px 24px;
        -o-background-size:      288px 24px;
        background-size:         288px 24px;
    }
}


/* new: .mucheck-switcher mod */

.mucheck.mucheck-switcher {
    width: 60px;
    height: 24px;
    
    background: #f5f6f8 !important;
    
    -webkit-border-radius:  3px;
    -moz-border-radius:     3px;
    -ms-border-radius:      3px;
    -o-border-radius:       3px;
    border-radius:          3px;
    
    overflow: hidden;
}

.mucheck.mucheck-switcher input[type=checkbox] + .mucheck-view {
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0 0 0 1px,
                        #e95d00 0 0 0 60px;
    -moz-box-shadow:    rgba(0,0,0, 0.1) 0 0 0 1px,
                        #e95d00 0 0 0 60px;
    -ms-box-shadow:     rgba(0,0,0, 0.1) 0 0 0 1px,
                        #e95d00 0 0 0 60px;
    -o-box-shadow:      rgba(0,0,0, 0.1) 0 0 0 1px,
                        #e95d00 0 0 0 60px;
    box-shadow:         rgba(0,0,0, 0.1) 0 0 0 1px,
                        #e95d00 0 0 0 60px;
    
    -webkit-border-radius:  2px;
    -moz-border-radius:     2px;
    -ms-border-radius:      2px;
    -o-border-radius:       2px;
    border-radius:          2px;
    
    background: #fff;
    
    display: block;
    width: 18px;
    height: 22px;
    line-height: 22px;
    margin: 1px;
    position: relative;
    text-shadow: rgba(0,0,0, 0.2) 0px 1px;
    
    color: #fff;
    left: 0;
    -webkit-transition: all 0.25s ease;
    -moz-transition:    all 0.25s ease;
    -ms-transition:     all 0.25s ease;
    -o-transition:      all 0.25s ease;
    transition:         all 0.25s ease;
    
    text-decoration: none !important;
}
.mucheck.mucheck-switcher input[type=checkbox]:checked + .mucheck-view {
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0 0 0 1px,
                        #3a4 0 0 0 60px;
    -moz-box-shadow:    rgba(0,0,0, 0.1) 0 0 0 1px,
                        #3a4 0 0 0 60px;
    -ms-box-shadow:     rgba(0,0,0, 0.1) 0 0 0 1px,
                        #3a4 0 0 0 60px;
    -o-box-shadow:      rgba(0,0,0, 0.1) 0 0 0 1px,
                        #3a4 0 0 0 60px;
    box-shadow:         rgba(0,0,0, 0.1) 0 0 0 1px,
                        #3a4 0 0 0 60px;
    left: 40px;
}
.mucheck.mucheck-switcher input[type=checkbox]:disabled + .mucheck-view {
    -webkit-box-shadow: #dcdbd7 0 0 0 60px;
    -moz-box-shadow:    #dcdbd7 0 0 0 60px;
    -ms-box-shadow:     #dcdbd7 0 0 0 60px;
    -o-box-shadow:      #dcdbd7 0 0 0 60px;
    box-shadow:         #dcdbd7 0 0 0 60px;
}


.mucheck.mucheck-switcher input[type=checkbox] + .mucheck-view:before,
.mucheck.mucheck-switcher input[type=checkbox] + .mucheck-view:after {
    position: absolute;
    width: 40px;
    height: inherit;
    line-height: inherit;
    text-align: center;
    text-decoration: none !important;
}
.mucheck.mucheck-switcher input[type=checkbox] + .mucheck-view:before {
    content: 'ON';
    content: attr(data-label-on);
    right: 100%;
}
.mucheck.mucheck-switcher input[type=checkbox] + .mucheck-view:after {
    content: 'OFF';
    content: attr(data-label-off);
    left: 100%;
}