#toggle-button{
            display: none;
        }
        .button-label{
            position: relative;
            display: inline-block;
            width: 54px;
            height: 24px;
            border: 1px solid #d2d2d2;
            background-color: #fff;
            border-radius: 27px;
            overflow: hidden;
        }
        .circle{
            position: absolute;
            top: 50%;
            left: 0;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #d2d2d2;
            transform: translateY(-50%);
        }
        .button-label .text {
            line-height: 24px;
            font-size: 12px;
        }
        .on {
            color: #fff;
            display: none;
            text-indent: 8px;
        }
        .off {
            color:#999;
            display: inline-block;
            text-indent: 32px;
        }
        .button-label .circle{
            left: 4px;
            transition: all 0.3s;
        }
       #toggle-button:checked + label.button-label .circle {
            left: 30px;
            background-color:#fff;
        }
       #toggle-button:checked + label.button-label .on{
            display: inline-block;
        }
        #toggle-button:checked + label.button-label .off{
            display: none;
        }


        #toggle-button:checked + label.button-label{
            background-color: #5FB878;
            border-color: #5FB878;
        }