.switch-xss {
    position: relative;
    display: inline-block;
    width: 38px;
    height: 19px;
}

    .switch-xss input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .switch-xss .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }

        .switch-xss .slider:before {
            position: absolute;
            content: "";
            height: 12px;
            width: 12px;
            left: 5px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

    .switch-xss input:checked + .slider {
        background-color: #02da35;
    }

    .switch-xss input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }

    .switch-xss input[readonly]:checked + .slider {
        background-color: #3a7951;
    }

    .switch-xss input[disabled]:checked + .slider {
        background-color: #3a7951;
    }

    .switch-xss input:checked + .slider:before {
        -webkit-transform: translateX(16px);
        -ms-transform: translateX(16px);
        transform: translateX(16px);
    }

/* Rounded sliders */
    .switch-xss .slider.round {
        border-radius: 19px;
    }

        .switch-xss .slider.round:before {
            border-radius: 50%;
        }




.switch-release {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 19px;
    padding:0;
    margin:0;
}

    .switch-release input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .switch-release .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 3px;
        font-size:10px;
        line-height:19px;
    }

        .switch-release .slider:before {
            position: absolute;
            content: "";
            height: 12px;
            width: 5px;
            left: 2px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
            color: #000;
        }

    .switch-release input:disabled + .slider {
        background-color: #f9f6f6;
        color: #ccc;
    }

    .switch-release input:checked + .slider {
        background-color: #02da35;
        color: #000;
    }

    .switch-release input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }

    .switch-release input:checked + .slider:before {
        -webkit-transform: translateX(33px);
        -ms-transform: translateX(33px);
        transform: translateX(33px);
    }

/*    .switch-release input + .slider::after {
        content:"Lock";
        text-align:right;
    }

    .switch-release input:checked + .slider::after {
        content: "Open";
        text-align:left;
    }

*/




.switch-main {
    position: relative;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0 4px 0 4px;
    vertical-align: middle;
}

    .switch-main input {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .switch-main .chkbx-text {
        display: inline-block;
        cursor: pointer;
        padding: 0;
        margin: 0;
        margin-left: 40px;
        color: #000000;
    }

    .switch-main .chkbx-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        height: 20px;
        width: 35px;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 3px;
        font-size: 10px;
        line-height: 19px;
    }


        .switch-main .chkbx-slider:before {
            position: absolute;
            content: "";
            left: 3px;
            top: 3px;
            height: 14px;
            width: 14px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
            color: #000;
        }



    .switch-main input:disabled + label .chkbx-slider {
        cursor: default;
        background-color: #f9f6f6;
        color: #ccc;
    }



    .switch-main input:disabled + label .chkbx-text {
        cursor: default;
        color: #ccc;
    }

    .switch-main input:checked + label .chkbx-slider {
        background-color: #7dcd7d;
        color: #000;
    }

    .switch-main input:checked + label .chkbx-text {
        color: #000;
    }


    .switch-main input:checked:disabled + label .chkbx-slider {
        background-color: #c6edcb;
        color: #ccc;
    }

    .switch-main input:checked + label .chkbx-slider:before {
        -webkit-transform: translateX(15px);
        -ms-transform: translateX(15px);
        transform: translateX(15px);
    }


    .switch-main .chkbx-slider.round {
        border-radius: 10px;
    }

    .switch-main label .chkbx-slider.round:before {
        border-radius: 50%;
    }























/*.switch-approve {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 22px;
    padding: 0;
    margin: 0;
    
}

    .switch-approve input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .switch-approve .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 3px;
        font-size: 10px;
        line-height: 22px;
    }

        .switch-approve .slider:before {
            position: absolute;
            content: "";
            height: 14px;
            width: 14px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
            color: #000;
        }

    .switch-approve input:disabled + .slider {
        background-color: #f9f6f6;
        color: #ccc;
    }

    .switch-approve input:checked + .slider {
        background-color: #02da35;
        color: #000;
    }

    .switch-approve input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }

    .switch-approve input:checked + .slider:before {
        -webkit-transform: translateX(14px);
        -ms-transform: translateX(14px);
        transform: translateX(14px);
    }*/

/* Rounded sliders */
    /*.switch-approve .slider.round {
        border-radius: 10px;
    }

        .switch-approve .slider.round:before {
            border-radius: 50%;
        }*/