.toggle-bg {
    background: #FE2E2E; /* white;*/
    border-radius: 1.43em; /*2em;*/
    border: 0.12em solid #FF0000; /*#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: 1.43em; /*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;    
}

    .toggle-bg:hover {
        border-color: #DF0101; /*#d9d9d9;*/
    }

    .toggle-bg.true {
        background: #00dc61;
        border-color: #00c356;
    }

    .toggle-bg.o-6 {
        background: #FFF;
        border-color: #e6e6e6;
    }

        .toggle-bg.o-6 label.false, .toggle-bg.o-6 label.true {
            color: #585858; /**/
            text-shadow: none;
        }

    .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*/
        -ms-zoom: 1;
        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;
    border-radius: 1.43em; /*2em;*/
    border: 0.08em solid #d9d9d9;
    display: block;
    float: left;
    height: 1.43em; /*1.9em;*/
    width: 1.43em; /*1.9em;*/
    left: -.1em;
    top: -.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.true {
        
        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);
        border: 0.08em solid #DF0101;
    }

    .switch.false {
        left: 2.18em;
        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);
        /* left: 2.2em; */ /*3em;*/ /*2.5em;*/
        border: 0.08em solid #00c356;
    }

.toggle-alternate {
    clear: both;
    /*margin: 1em 0 0;*/
    width: 3.68em; /*4.48em;*/
}

    .toggle-alternate input {
        width: 3.68em; /*6.24em;*/
    }
    /*.toggle-alternate input ~ :checked ~ .switch {
  left: 2.46em;
}*/

    .toggle-alternate label {
        font-weight: 300;
        font-size: .9em;
        text-transform: uppercase;
        position: absolute;
        /*top: 0.1em;*/ /*0.55em;*/
    }

.toggle-bg label.true {
    right: 2.15em;
    color: white;
    text-shadow: 0 0.1em 0 #00dc61;
}

.toggle-bg label.false {
    left: 2em;    
    color: #FFF; /*#aaa;*/
    text-shadow: 0 0.1em 0 #DF0101;
}