/*Checkbox as switch control(on/off states)*/
.container {
    margin: 50px auto;
    width: 280px;
    text-align: center;
}

    .container > .switch {
        display: block;
        margin: 12px auto;
    }

.switch {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 70px;
    height: 30px;
    padding: 3px;
    background-color: #fff;
    border-radius: 18px;
    cursor: pointer;
}

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

.switch-label {
    position: relative;
    display: block;
    height: inherit;
    font-size: 10px;
    text-transform: uppercase;
    background: #fff;
    border-radius: inherit;
    border: solid 1px rgb(225,225,225);
    -webkit-transition: 0.15s ease-out;
    -moz-transition: 0.15s ease-out;
    -o-transition: 0.15s ease-out;
    transition: 0.15s ease-out;
    -webkit-transition-property: opacity background;
    -moz-transition-property: opacity background;
    -o-transition-property: opacity background;
    transition-property: opacity background;
}

    .switch-label:before, .switch-label:after {
        position: absolute;
        top: 50%;
        margin-top: -.5em;
        line-height: 1;
        -webkit-transition: inherit;
        -moz-transition: inherit;
        -o-transition: inherit;
        transition: inherit;
    }

    .switch-label:before {
        content: attr(data-off);
        right: 11px;
        color: #aaa;
        text-shadow: 0 1px rgba(255, 255, 255, 0.5);
    }

    .switch-label:after {
        content: attr(data-on);
        left: 11px;
        color: #fff;
        text-shadow: 0 1px rgba(0, 0, 0, 0.2);
        opacity: 0;
    }

.switch-input:checked ~ .switch-label {
    background: #2998f0;
}

    .switch-input:checked ~ .switch-label:before {
        opacity: 0;
    }

    .switch-input:checked ~ .switch-label:after {
        opacity: 1;
    }

.switch-handle {
    position: absolute;
    top: 3px;
    left: 4px;
    width: 30px;
    height: 30px;
    background: #fff;
    border-radius: 50%;
    -webkit-box-shadow: 1px 2px 2px #DEE0E2;
    -moz-box-shadow: 1px 2px 2px #DEE0E2;
    box-shadow: 1px 2px 2px #DEE0E2;
    border: 1px solid rgb(225,225,225);
    -webkit-transition: left 0.15s ease-out;
    -moz-transition: left 0.15s ease-out;
    -o-transition: left 0.15s ease-out;
    transition: left 0.15s ease-out;
}

    .switch-handle:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -6px 0 0 -6px;
        width: 12px;
        height: 12px;
        background-color: transparent;
    }

.switch-input:checked ~ .switch-handle {
    left: 37px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.switch-green > .switch-input:checked ~ .switch-label {
    background: #4fb845;
}


/*--------------------------
CHECKBOXES and RADIO BUTTON
------------------------*/
.switch-wrapper {
    width: auto;
    height: auto;
    position: relative;
    word-break: initial;
    margin-left: 1px;
}

    .switch-wrapper > input[type="checkbox"], .switch-wrapper > input[type="radio"] {
        position: absolute;
        width: 23px;
        height: 23px;
        border: 1px solid transparent;
        opacity: 0;
    }

        .switch-wrapper > input[type='checkbox'] ~ .switch-caption {
            vertical-align: middle;
            cursor: pointer;
            font-weight: normal;
        }

        /*For disabled checkbox change cursor type to default*/
        .switch-wrapper > input[type='checkbox']:disabled ~ .switch-caption {
            cursor: default;
        }

        /********** for right caption checkbox****************/
        .switch-wrapper > input[type='checkbox']:not(:checked):not(:disabled) ~ .switch-caption:not(.leftcaption)::before {
            /* Checkbox */
            content: ' ';
            line-height: 15px;
            display: inline-block;
            vertical-align: middle;
            width: 19px;
            height: 19px;
            border: 6px solid #fff;
            margin-right: 10px;
            outline: 1px solid #d3dae1;
            background-color: #FFF;
        }

        .switch-wrapper > input[type='checkbox']:checked:not(:disabled) ~ .switch-caption:not(.leftcaption)::before {
            margin-right: 10px;
            font-family: 'FontAwesome';
            content: "\f00c";
            width: 19px;
            line-height: 13px;
            font-size: 1rem;
            display: inline-block;
            vertical-align: middle;
            border: 3px solid #fff;
            background-color: #fff;
            color: #2998f0;
            outline: 1px solid #d3dae1;
            /*===== tick mark as checked ==== end ==*/
        }
        .switch-wrapper > input[type='checkbox'][indeterminate=true].intermediate-checkbox:not(:disabled) ~ .switch-caption:not(.leftcaption)::before {
            margin-right: 10px;
           background-color:#2c99f0;
           content: "";
            width: 14px;
            height: 14px;
            font-size: 1.2rem;
            display: inline-block;
            vertical-align: middle;
            border: 3px solid #fff;
               color: #2998f0;
            outline: 1px solid #d3dae1;
            /*===== tick mark as checked ==== end ==*/
        }


        .switch-wrapper > input[type='checkbox']:checked:disabled:not(.borderfree) ~ .switch-caption:not(.leftcaption)::before {
            /* Checkbox Label */
            margin-right: 10px;
            font-family: 'FontAwesome';
            content: "\f00c";
            width: 19px;
            line-height: 13px;
            font-size: 1rem;
            display: inline-block;
            vertical-align: middle;
            border: 3px solid #fff;
            background-color: #fff;
            color: #2998f0;
            outline: 1px solid #d3dae1;
        }

        .switch-wrapper > input[type='checkbox']:checked:disabled.borderfree ~ .switch-caption:not(.leftcaption)::before {
            /* Checkbox Label */
            margin-left: 1px;
            font-family: 'FontAwesome';
            content: "\f00c";
            display: inline-block;
            vertical-align: middle;
            background-color: transparent;
            outline: none;
            margin-right: 10px;
            color: #2998f0;
        }

        .switch-wrapper > input[type='checkbox']:disabled:not(:checked).borderfree ~ .switch-caption:not(.leftcaption)::before {
            /* Checkbox Label */
            margin-left: 1px;
            content: "";
            display: inline-block;
            vertical-align: middle;
            width: 8px;
            height: 8px;
            border-top: 2px solid #fff;
            border-bottom: 8px solid #fff;
            border-right: 8px solid #fff;
            border-left: 2px solid #fff;
            margin-right: 10px;
            background-color: #fff;
            outline: none;
            color: transparent;
        }

        .switch-wrapper > input[type='checkbox']:checked.borderfree ~ .switch-caption:not(.leftcaption)::before {
            /* Checkbox Label */
            margin-left: 1px;
            font-family: 'FontAwesome';
            content: "\f00c";
            display: inline-block;
            vertical-align: middle;
            background-color: transparent;
            outline: none;
            margin-right: 10px;
            color: #2998f0;
        }

        .switch-wrapper > input[type='checkbox']:disabled:not(:checked) ~ .switch-caption:not(.leftcaption)::before {
            /* Checkbox Label */
            margin-left: 1px;
            content: "";
            display: inline-block;
            vertical-align: middle;
            width: 8px;
            height: 8px;
            border-top: 2px solid #fff;
            border-bottom: 8px solid #fff;
            border-right: 8px solid #fff;
            border-left: 2px solid #fff;
            margin-right: 10px;
            background-color: #fff;
            outline: 1px solid #d3dae1;
            color: transparent;
        }


        .switch-wrapper > input[type='checkbox']:focus:not(:disabled) ~ .switch-caption:not(.leftcaption)::before {
            outline: 1px solid #2297f3;
        }


        /********** for left caption checkbox****************/

        .switch-wrapper > input[type='checkbox'] ~ .switch-caption.leftcaption::before {
            display: none;
        }

        .switch-wrapper > input[type='checkbox']:not(:checked):not(:disabled) ~ .switch-caption.leftcaption::after {
            /* Checkbox */
            margin-left: 10px;
            content: '';
            display: inline-block;
            vertical-align: middle;
            width: 8px;
            height: 8px;
            border: 6px solid #fff;
            margin-right: 10px;
            outline: 1px solid #d3dae1;
        }

        .switch-wrapper > input[type='checkbox']:checked:not(:disabled) ~ .switch-caption.leftcaption::after {
            /* Checkbox Label */
            margin-left: 10px;
            content: '';
            display: inline-block;
            vertical-align: middle;
            width: 8px;
            height: 8px;
            border: 6px solid #fff;
            margin-right: 10px;
            background-color: #2b98f0;
            outline: 1px solid #d3dae1;
        }

        .switch-wrapper > input[type='checkbox']:checked:disabled:not(.borderfree) ~ .switch-caption.leftcaption::after {
            /* Checkbox Label */
            margin-left: 10px;
            font-family: 'FontAwesome';
            content: "\f00c";
            display: inline-block;
            vertical-align: middle;
            width: 8px;
            height: 8px;
            border-top: 2px solid #fff;
            border-bottom: 8px solid #fff;
            border-right: 8px solid #fff;
            border-left: 2px solid #fff;
            margin-right: 10px;
            background-color: transparent;
            outline: 1px solid #d3dae1;
            color: rgb(150,150,150);
        }

        .switch-wrapper > input[type='checkbox']:checked:disabled.borderfree ~ .switch-caption.leftcaption::after {
            /* Checkbox Label */
            margin-left: 10px;
            font-family: 'FontAwesome';
            content: "\f00c";
            display: inline-block;
            vertical-align: middle;
            width: 8px;
            height: 8px;
            border-top: 2px solid #fff;
            border-bottom: 8px solid #fff;
            border-right: 8px solid #fff;
            border-left: 2px solid #fff;
            margin-right: 10px;
            background-color: transparent;
            outline: none;
            color: rgb(150,150,150);
        }

.bqe-table .switch-wrapper > input[type='checkbox']:not(:checked):not(:disabled):not(.add-margin) ~ .switch-caption:not(.leftcaption)::before,
.bqe-table .switch-wrapper > input[type='checkbox']:checked:not(:disabled):not(.add-margin) ~ .switch-caption:not(.leftcaption)::before {
    margin-right: 0;
}

.bqe-table .jsDialogOptionPanel .switch-wrapper > input[type='checkbox']:checked:not(:disabled) ~ .switch-caption:not(.leftcaption)::before,
.dialog-content .bqe-table .switch-wrapper > input[type='checkbox']:not(:checked):not(:disabled) ~ .switch-caption:not(.leftcaption)::before,
.dialog-content .bqe-table .switch-wrapper > input[type='checkbox']:checked:not(:disabled) ~ .switch-caption:not(.leftcaption)::before,
.bqe-table .jsDialogOptionPanel .switch-wrapper > input[type='checkbox']:not(:checked):not(:disabled) ~ .switch-caption:not(.leftcaption)::before {
    margin-right: 10px;
}

/****************************************/

.switch-wrapper > input[type='radio'] ~ .switch-caption {
    vertical-align: middle;
    cursor: pointer;
}

.switch-wrapper > input[type='radio']:not(:checked) ~ .switch-caption::before {
    /* Checkbox */
    margin-right: 10px;
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    border: 1px solid #d3dae1;
    margin-right: 10px;
    border-radius: 50%;
}

.switch-wrapper > input[type='radio']:checked ~ .switch-caption::before {
    /* Checkbox Label */
    margin-right: 10px;
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    width: 20px;
    height: 20px;
    border: 1px solid #d3dae1;
    border-radius: 50%;
    background: -webkit-radial-gradient(#1088e9 25%, #fff 30%, #fff); /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(#1088e9 25%, #fff 30%, #fff); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(#1088e9 25%, #fff 30%, #fff); /* For Firefox 3.6 to 15 */
    background: radial-gradient(#1088e9 25%, #fff 30%, #fff); /* Standard syntax (must be last) */
}

.switch-wrapper > input[type='radio'] ~ .switch-caption.leftcaption::before {
    display: none;
}

.switch-wrapper > input[type='radio']:not(:checked) ~ .switch-caption.leftcaption::after {
    /* Checkbox */
    margin-left: 10px;
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 19px;
    height: 19px;
    border: 1px solid #d3dae1;
    border-radius: 50%;
}

.switch-wrapper > input[type='radio']:checked ~ .switch-caption.leftcaption::after {
    /* Checkbox Label */
    margin-left: 10px;
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    border: 1px solid #d3dae1;
    border-radius: 50%;
    background: -webkit-radial-gradient(#1088e9 25%, #fff 30%, #fff); /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(#1088e9 25%, #fff 30%, #fff); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(#1088e9 25%, #fff 30%, #fff); /* For Firefox 3.6 to 15 */
    background: radial-gradient(#1088e9 25%, #fff 30%, #fff); /* Standard syntax (must be last) */
}

/*In case the label is in multiple line - to fix the wrap*/
.multiline-label .switch-caption {
    padding-left: 30px;
    display: inline-block;
}

    .multiline-label .switch-caption::before {
        position: absolute;
        left: 0;
    }

@supports (-ms-accelerator:true) {
    .switch-wrapper > input[type='checkbox']:not(:checked):not(:disabled) ~ .switch-caption:not(.leftcaption)::before {
        /* Checkbox */
        width: 7px;
        height: 7px;
    }

    .switch-wrapper > input[type='checkbox']:checked:not(:disabled) ~ .switch-caption:not(.leftcaption)::before {
        width: 13px;
        height: 12px;
    }
}

@supports (-ms-ime-align: auto) {
    .switch-wrapper > input[type='checkbox']:not(:checked):not(:disabled) ~ .switch-caption:not(.leftcaption)::before {
        /* Checkbox */
        width: 7px;
        height: 6px;
    }

    .switch-wrapper > input[type='checkbox']:checked:not(:disabled) ~ .switch-caption:not(.leftcaption)::before {
        width: 15px;
        height: 15px;
    }
}