/* checkboxMobile */
input[type="checkbox"].checkbox-hide {
    display: none;
}
div.checkbox-mobile {
    position: relative;
}
div.checkbox-mobile div.forTouch {
    opacity: 0;
    background-color: #e3e3e3;
    z-index: 50;
    width: 3.5rem;
    height: 3.5rem;
    display: block;
    position: absolute;
}
div.checkbox-mobile label.checkbox-label {
    display: inline-block;
    height: 2rem;
    position: relative;
    z-index: 51;
}
div.checkbox-mobile label.checkbox-label span.icon {
    width:1.9432rem;
    height:1.9432rem;
    background-position:-24.8905rem -0.0437rem;
    vertical-align: middle;
}
div.checkbox-mobile.checked label.checkbox-label span.icon {
    background-position:-20.9168rem -0.0437rem;
}
div.checkbox-mobile.disabled label.checkbox-label span.icon {
    /*background-position: -406px -165px;*/
}
div.checkbox-mobile.checked.disabled label.checkbox-label span.icon {
    /*background-position: -406px -135px;*/
}
div.checkbox-mobile label.checkbox-label > span.text {
    vertical-align: middle;
    margin-left: 0.4rem;
}

/* advanced - collapsible */
div.checkbox-mobile.collapsible label.checkbox-label span.icon {
    width:1.8777rem;
    height:1.8777rem;
    background-position:-1.8777rem -2.5327rem;
}
div.checkbox-mobile.collapsible.checked label.checkbox-label span.icon {
    background-position:-3.7991rem -2.5327rem;
}

/* advanced - wps */
div.checkbox-mobile.wps.disabled {
    background-color: #f1f4f6;
}
div.checkbox-mobile.wps {
    text-align: center;
    padding-top: 1.5rem;
    /*background-color: #f1f4f6;*/
}
div.checkbox-mobile.wps label.checkbox-label {
    height: 6rem;
    width: 6rem;
    vertical-align: middle;
    text-align: center;
    display: inline-block;
    position: relative;
    padding: 1rem 0 0 1rem;
    box-sizing: border-box;
}
div.checkbox-mobile.wps label.checkbox-label span.icon {
    background-color: #bfe8ec;
    background-image: none;
    width: 4rem;
    height: 4rem;
    border-radius: 2rem;
    box-sizing: border-box;
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 60;
}
div.checkbox-mobile.wps label.checkbox-label span.text {
    height: 4rem;
    width: 4rem;
    margin-left: 0;
    border-radius: 2rem;
    background-color: #ffcb00;
    text-align: center;
    box-sizing: border-box;
    display: table-cell;
    position: relative;
    z-index: 61;
    vertical-align: middle;
}
div.checkbox-mobile.wps label.checkbox-label span.text span{
    color: #ffffff;
    display: block;
}
div.checkbox-mobile.wps label.checkbox-label span.text span.large{
    font-size: 1rem;
}
div.checkbox-mobile.wps label.checkbox-label span.text span.small{
    font-size: 0.6rem;
}
@-moz-keyframes wpsOn {
    0% {
        width: 4rem;
        height: 4rem;
        border-radius: 2rem;
        left: 1rem;
        top: 1rem;
    }
    100% {
        width: 6rem;
        height: 6rem;
        border-radius: 3rem;
        left: 0;
        top: 0;
    }
}
@-o-keyframes wpsOn {
    0% {
        width: 4rem;
        height: 4rem;
        border-radius: 2rem;
        left: 1rem;
        top: 1rem;
    }
    100% {
        width: 6rem;
        height: 6rem;
        border-radius: 3rem;
        left: 0;
        top: 0;
    }
}
@keyframes wpsOn {
    0% {
        width: 4rem;
        height: 4rem;
        border-radius: 2rem;
        left: 1rem;
        top: 1rem;
    }
    100% {
        width: 6rem;
        height: 6rem;
        border-radius: 3rem;
        left: 0;
        top: 0;
    }
}
@-webkit-keyframes wpsOn {
    0% {
        width: 4rem;
        height: 4rem;
        border-radius: 2rem;
        left: 1rem;
        top: 1rem;
    }
    100% {
        width: 6rem;
        height: 6rem;
        border-radius: 3rem;
        left: 0;
        top: 0;
    }
}
/*by hewenlin 20151013.*/
div.checkbox-mobile.wps.disabled label.checkbox-label span.text{
    background-color: #b2b2b2;
}
div.checkbox-mobile.wps.checked label.checkbox-label span.icon{
    -webkit-animation:wpsOn 1.5s infinite alternate ease;
    -moz-animation:wpsOn 1.5s infinite alternate ease;
    -o-animation:wpsOn 1.5s infinite alternate ease;
    animation:wpsOn 1.5s infinite alternate ease;
}
div.checkbox-mobile.wps.checked label.checkbox-label span.text{
    background-color: #4acbd6;
}


/* checkboxDiv */
div.checkbox-div {
    width: 100%;
    background-color: #FFFFFF;
    padding: 0;
    box-sizing: border-box;
    display: table;
}
div.checkbox-div div.checkbox-title {
    padding: 1rem 0 1rem 0;
    display: table-cell;
    width: 90%;
}
div.checkbox-div div.checkbox-mobile {
    text-align: right;
    display: table-cell;
    padding-right: 1rem;
    width: 10px;
    vertical-align: middle;
}
div.checkbox-div div.checkbox-mobile label {
    width: 1.89rem;
    height: 1.89rem;
}