.inactive-active {
    cursor: pointer;
    box-sizing: border-box;
}

    .inactive-active input {
        display: none;
    }

        .inactive-active input + .switch {
            width: 30px;
            height: 10px;
            border-radius: 8px;
            box-shadow: 0px 0px 3px rgba(0,0,0,1);
            background-color: #9e9e9e;
            display: inline-block;
            position: relative;
        }

            .inactive-active input + .switch::before {
                content: "";
                display: inline-block;
                position: absolute;
                width: 18px;
                height: 18px;
                top: -4.5px;
                left: -3px;
                box-shadow: 0 0 7px rgba(0,0,0,0.5);
                background-color: #e0e0e0;
                border-radius: 100%;
                transition: all 0.1s ease-out;
            }

        .inactive-active input:checked + .switch {
            background-color: #42a5f5;
        }


            .inactive-active input:checked + .switch::before {
                background-color: #1976d2;
                left: 14px;
            }