﻿.checkbox-wrapper-9 .tgl {
    display: none;
}

    .checkbox-wrapper-9 .tgl,
    .checkbox-wrapper-9 .tgl:after,
    .checkbox-wrapper-9 .tgl:before,
    .checkbox-wrapper-9 .tgl *,
    .checkbox-wrapper-9 .tgl *:after,
    .checkbox-wrapper-9 .tgl *:before,
    .checkbox-wrapper-9 .tgl + .tgl-btn {
        box-sizing: border-box;
    }

        .checkbox-wrapper-9 .tgl::-moz-selection,
        .checkbox-wrapper-9 .tgl:after::-moz-selection,
        .checkbox-wrapper-9 .tgl:before::-moz-selection,
        .checkbox-wrapper-9 .tgl *::-moz-selection,
        .checkbox-wrapper-9 .tgl *:after::-moz-selection,
        .checkbox-wrapper-9 .tgl *:before::-moz-selection,
        .checkbox-wrapper-9 .tgl + .tgl-btn::-moz-selection,
        .checkbox-wrapper-9 .tgl::selection,
        .checkbox-wrapper-9 .tgl:after::selection,
        .checkbox-wrapper-9 .tgl:before::selection,
        .checkbox-wrapper-9 .tgl *::selection,
        .checkbox-wrapper-9 .tgl *:after::selection,
        .checkbox-wrapper-9 .tgl *:before::selection,
        .checkbox-wrapper-9 .tgl + .tgl-btn::selection {
            background: none;
        }

        .checkbox-wrapper-9 .tgl + .tgl-btn {
            outline: 0;
            display: block;
            width: 4em;
            height: 2em;
            position: relative;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

            .checkbox-wrapper-9 .tgl + .tgl-btn:after,
            .checkbox-wrapper-9 .tgl + .tgl-btn:before {
                position: relative;
                display: block;
                content: "";
                width: 50%;
                height: 100%;
            }

            .checkbox-wrapper-9 .tgl + .tgl-btn:after {
                left: 0;
            }

            .checkbox-wrapper-9 .tgl + .tgl-btn:before {
                display: none;
            }

        .checkbox-wrapper-9 .tgl:checked + .tgl-btn:after {
            left: 50%;
        }

.checkbox-wrapper-9 .tgl-flat + .tgl-btn {
    padding: 2px;
    transition: all 0.2s ease;
    background: #fff;
    border: 4px solid #6C757D;
    border-radius: 2em;
}

    .checkbox-wrapper-9 .tgl-flat + .tgl-btn:after {
        transition: all 0.2s ease;
        background: #6C757D;
        content: "";
        border-radius: 1em;
    }

.checkbox-wrapper-9 .tgl-flat:checked + .tgl-btn {
    border: 4px solid #009500;
}

    .checkbox-wrapper-9 .tgl-flat:checked + .tgl-btn:after {
        left: 50%;
        background: #009500;
    }
