input[type=checkbox].toggle {
    height: 0;
    width: 0;
    visibility: hidden;
}

input.toggle + label {
    cursor: pointer;
    text-indent: -9999px;
    width: 40px;
    height: 20px;
    background: grey;
    display: inline-block;
    border-radius: 1000px;
    position: relative;
}

    input.toggle + label:after {
        content: '';
        cursor: pointer;
        position: absolute;
        top: 3px;
        left: 3px;
        width: 14px;
        height: 14px;
        background: #fff;
        border-radius: 1000px;
        transition: 0.1s;
    }

    input.toggle + label + label {
        cursor: pointer;
        top: -10px;
        position: relative;
    }

input.toggle:checked + label {
    cursor: pointer;
    background: #0099df;
}

    input.toggle:checked + label:after {
        content: "ON";
        cursor: pointer;
        left: calc(100%);
        transform: translateX(-17px);
    }
input.toggle:disabled + label {
    cursor: default !important;
    opacity: 0.2 !important;
    /* Added a gray background to help users with undestanding this is disabled */
    background: grey !important;
}

label:active:after {
    width: 40px;
}

input[type=checkbox].toggle.admin {
    height: 0;
    width: 0;
    visibility: hidden;
}

input.toggle.admin + label {
    cursor: pointer;
    text-indent: -9999px;
    width: 40px;
    height: 20px;
    background: grey;
    display: inline-block;
    border-radius: 1000px;
    position: relative;
}

    input.toggle.admin + label:after {
        content: '';
        cursor: pointer;
        position: absolute;
        top: 3px;
        left: 3px;
        width: 14px;
        height: 14px;
        background: #fff;
        border-radius: 1000px;
        transition: 0.1s;
    }

    input.toggle.admin + label + label {
        cursor: pointer;
        top: -10px;
        position: relative;
    }

input.toggle.admin:checked + label {
    cursor: pointer;
    background: #fedd18;
}

    input.toggle.admin:checked + label:after {
        content: "ON";
        cursor: pointer;
        left: calc(100%);
        transform: translateX(-17px);
    }

input.toggle.admin:disabled + label {
    cursor: default !important;
    opacity: 0.2 !important;
    /* Added a gray background to help users with undestanding this is disabled */
    background: grey !important;
}