.switch {

            width: 45px;

            height: 15px;

            position: relative;

            border: 1px solid #dfdfdf;

            background-color: #c6cacd;

            box-shadow: #dfdfdf 0 0 0 0 inset;

            border-radius: 20px;

            background-clip: content-box;

            display: inline-block;

            -webkit-appearance: none;

            user-select: none;

            outline: none;

        }

        .switch:before {

            content: '';

            width: 16px;

            height: 15px;

            position: absolute;

            top: 0;

            left: 0;

            border-radius: 20px;

            background-color: #fff;

            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);

        }

        .switch:checked {

            border-color: #64bd63;

            box-shadow: #64bd63 0 0 0 16px inset;

            background-color: #64bd63;

        }

        .switch:checked:before {

            left: 30px;

        }

        .switch.switch-anim {

            transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s;

        }

        .switch.switch-anim:before {

            transition: left 0.3s;

        }

        .switch.switch-anim:checked {

            box-shadow: #5fa7fb 0 0 0 16px inset;

            background-color: #5fa7fb;

            transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s;

        }

        .switch.switch-anim:checked:before {

            transition: left 0.3s;

        }

        .switch:focus{

    		outline: none !important;

    		border: none !important;

		}