/* Switch */
.toggle-bg {
    background: #eeeeee;
    border-radius: 2em;
    border: 0.12em solid #e6e6e6;
    display: block;
    /* ...So that we can set a height and width */
    float: left;
    /* ...So that it doesn't take up the full width of the page
    height: 2em;*/
    /* You can change this later if you want */
    position: relative;
    /* Required to allow the switch to move around */
    width: 3.2em;
    /* This can be changed later as well */
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    position: relative;
}
.toggle-bg:hover {
    /*border-color: #d9d9d9;*/
}
.toggle-bg.on {
    background: #87BC24;
    border: 0.12em solid transparent;
}
.toggle-bg input {
    margin: 0;
    padding: 0;
    width: 4.8em;
    height: 100%;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    z-index: 2;
    /* We want the input to be over the span.switch, which we'll give a z-index of 1 */
    /*IE*/
    zoom: 1;
    filter: alpha(opacity=0);
    /* initial toggle position */
    /* final relative toggle position */
}
.toggle-bg input:checked ~ .switch {
    left: 0;
}
.toggle-bg input ~ :checked ~ .switch {
    left: 1.18em;
}
.toggle-bg input:checked {
    z-index: 0;
}

.switch {
    background: white !important;
    border-radius: 2em;
    border: 0.1em solid #d9d9d9;
    display: block;
    float: left;
    height: 1.8em;
    width: 1.8em;
    left: -.1em;
    position: relative;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    z-index: 1;
    /* Remember, it must be below the invisible inputs */
}
.switch.on {
    box-shadow: -0.2em 0.2em 0.5em rgba(0, 0, 0, 0.06), 0.4em 0.4em 1.5em rgba(0, 0, 0, 0.08);
}
.switch.off {
    box-shadow: 0.2em 0.2em 0.5em rgba(0, 0, 0, 0.06), -0.4em 0.4em 1.5em rgba(0, 0, 0, 0.08);
}

.toggle-bg.disabled .switch {
    background: #d3d3d3 !important;
}

.toggle-alternate {
    clear: both;
    margin: 0;
    width: 9em;
    padding:3px;
}

.toggle-alternate.mini {
    width: 5em;
}

.toggle-alternate input {
    width: 9em;
}

.toggle-alternate.mini input {
    width: 3em;
}

.toggle-alternate input ~ :checked ~ .switch {
    left: 6.1em;
}

.toggle-alternate.mini input ~ :checked ~ .switch {
    left: 2.1em;
}

.toggle-alternate.mini span.switch.on {
    left: 2.5em !important;
}

.toggle-alternate label {
    font-weight: 300;
    font-size: 16px;
    text-transform: uppercase;
    position: absolute;
    top: -2px;
    padding:7px 25px;
}

.toggle-alternate.mini label {
    font-size: 10px;
    padding:10px 10px;
}

.toggle-bg label.on {
    left: 0;
    color: #FFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.toggle-bg label.off {
    right: 0;
    color: #aaa;
}