.switch-input {
    display: none;
}

.switch-label {
    position: relative;
    display: inline-block;
    /*min-width: 112px;*/
    cursor: pointer;
    font-weight: 500;
    text-align: left;
    margin-right:40px;
    padding: 1px 0 1px 0px;
}

    .switch-label:before, .switch-label:after {
        content: "";
        position: absolute;
        margin: 0;
        outline: 0;
        top: 50%;
        -ms-transform: translate(0, -50%);
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
        -webkit-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }

    .switch-label:before {
        left: 1px;
        width: 34px;
        height: 14px;
        background-color: #9E9E9E;
        border-radius: 8px;
    }

    .switch-label:after {
        left: 0;
        width: 20px;
        height: 20px;
        background-color: #FAFAFA;
        border-radius: 50%;
        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.14), 0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
    }

    .switch-label .toggle--on {
        display: none;
        margin-left: -52px !important;
        color: green;
        font-weight:600;
    }

    .switch-label .toggle--off {
        display: inline-block;
        margin-left: -80px !important;
        color: red;
        font-weight:600;
    }

.switch-input:checked + .switch-label:before {
    background-color: #78a9d3;
}

.switch-input:checked + .switch-label:after {
    background-color: #1576cb;
    -ms-transform: translate(80%, -50%);
    -webkit-transform: translate(80%, -50%);
    transform: translate(80%, -50%);
}

.switch-input:checked + .switch-label .toggle--on {
    display: inline-block;
}

.switch-input:checked + .switch-label .toggle--off {
    display: none;
}