.toggle-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    position: relative;
    cursor: pointer;
    justify-content: center;
}

    .toggle-switch-input {
        position: absolute;
    }

.toggle-switch-control {
    display: inline-flex !important;
    box-sizing: content-box;
    position: relative;
    width: 45px;
    height: 20px;
    align-items: center;
    justify-content: space-around;
    border: 1px solid #949494;
    border-radius: 30px;
    background-color: #949494;
    transition: 250ms;
}

    .toggle-switch-control::before {
        content: "";
        z-index: 5;
        position: absolute;
        top: 50%;
        left: -3px;
        box-sizing: border-box;
        width: 30px;
        height: 30px;
        border: 1px solid rgba(233,233,233,0.2);
        border-radius: 50%;
        background-color: #ffffff;
        transform: translate(0, -50%);
        will-change: transform;
        transition: inherit;
    }

.toggle-switch:focus .toggle-switch-control,
.toggle-switch-input:focus + .toggle-switch-control {
    outline: 1px solid #2A2A2A;
    outline: 1px auto -webkit-focus-ring-color;
    outline-offset: 1px;
}

    .toggle-switch:focus, 
    .toggle-switch:focus:not(:focus-visible) .toggle-switch-control, 
    .toggle-switch-input:focus:not(:focus-visible) + .toggle-switch-control {
        outline: 0;
    }

    .toggle-switch[aria-pressed="true"] .toggle-switch-control,
    .toggle-switch-input:checked + .toggle-switch-control {
        background-color: #1D781D;
        border: 1px solid #1D781D;
    }

    .toggle-switch[aria-pressed="true"] .toggle-switch-control::before,
    .toggle-switch-input:checked + .toggle-switch-control::before {
        transform: translate(21px, -50%);
    }

    .toggle-switch[disabled] .toggle-switch-control,
    .toggle-switch-input:disabled + .toggle-switch-control {
        opacity: 0.6;
        filter: grayscale(40%);
        cursor: not-allowed;
    }