/* general checkbox styling */
input[type="checkbox"] {
    vertical-align:text-bottom;
    margin:1px;
    appearance: none;
    outline: none;
    position: relative;
    height: 28px;
    width: 52px;
    border: 1px solid #ccc;
    border-radius: 40px;
    cursor: pointer;
}

/* general checkbox when checked */
input[type="checkbox"]:checked {
    background: #20aac8;
    border: 1px solid #20aac8;
    outline: none;
}

/* specific to the circle */
input[type="checkbox"]::before {
    content: "";
    height: 64%;
    width: 32%;
    background-color: #bbb;
    position: absolute;
    margin: auto;
    top: 0;
    left: 10%;
    bottom: 0;
    border-radius: 50%;
    transition: 0.15s;
}

/*specific to circle when checked */
    input[type="checkbox"]:checked::before {
        left: 60%;
        background-color: #fff;
    }


/* specific to the text - default to 'Off' */
input[type="checkbox"]::after {
    content: "Off";
    position: absolute;
    font-size: .9em;
    top: 20%;
    right: 15%;
    color: #86868b;
    font-family: "SF Pro Text", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-weight: 400;
    letter-spacing: 0.004em;
}

/* specific to the text when checked - becomes 'On' */
input[type="checkbox"]:checked::after {
    content: "On";
    left: 15%;
    color: #fff;
}

/* ignore black outline some browsers add*/

    input[type="checkbox"]:focus {
        outline: none;
    }