/*For Checkboxes Buttons*/
.checkbox { margin: 0 0 0 1%; width: 100%; text-align: left; float: left; color: #888888; outline: none; }
    .checkbox label { display: inline-block; cursor: pointer; position: relative; padding-left: 0px; margin-right: 15px; float: left; font-size: 1em; outline: none; }
    .checkbox input[type=checkbox] { display: none; }

    /*.checkbox label:before { content: ""; position: absolute; display: inline-block; height: 11pt; width: 11pt; margin-right: 10px; top: 0; left: 0; bottom: 1px; border: 2px solid #b5c1c7; background-color: transparent; -moz-transition: background-color 250ms linear; -o-transition: background-color 250ms linear; -webkit-transition: background-color 250ms linear; transition: background-color 250ms linear; }
    .checkbox input[type=checkbox]:checked + label:before { content: "\2713"; background-color: rgb(38, 114, 236); font-size: 18px; text-align: center; line-height: 15px; border: 2px solid rgb(38, 114, 236); color: #fff; font-weight: 600; -moz-transition: background-color 250ms linear; -o-transition: background-color 250ms linear; -webkit-transition: background-color 250ms linear; transition: background-color 250ms linear; }
    .checkbox input[type=checkbox]:checked + label { color: rgb(38, 114, 236); }*/

    .checkbox label:before { content: ''; background: #fff; border-radius: 5px; border: 2px solid #c9c9c9; display: inline-block; vertical-align: middle; width: 7px; height: 10px; padding: 2px 4px 2px 4px; margin-right: 9px; float: left; position: relative; margin-top: 2px; }
    .checkbox input[type=checkbox]:checked + label:before { border: 2px solid #30a3e6; -webkit-box-shadow: 0px 0px 7px 0px rgb(65, 128, 255); -moz-box-shadow: 0px 0px 7px 0px rgb(65, 128, 255); box-shadow: 0px 0px 7px 0px rgb(65, 128, 255); }
    .checkbox label:after { opacity: 0; content: ""; padding: 2px; position: absolute; width: 1px; height: 10px; border: solid #30a3e6; border-width: 0px 3px 4px 0px; transform: rotate(45deg); left: 10px; top: -2px; z-index: 1; -webkit-transition: all 0.50s; -moz-transition: all 0.50s; -o-transition: all 0.50s; transition: all 0.50s;}
    .checkbox input[type=checkbox]:checked + label:after { opacity: 1; -webkit-animation: check 0.8s; -moz-animation: check 0.8s; -o-animation: check 0.8s; animation: check 0.8s; }
    .checkbox input[type=radio]:checked + label { color: #30a3e6; }
    .checkbox label:hover::before { border: 2px solid #30a3e6; }
    /*.checkbox label:focus::before { border: 2px solid #30a3e6; -webkit-box-shadow: 0px 0px 7px 0px rgb(65, 128, 255); -moz-box-shadow: 0px 0px 7px 0px rgb(65, 128, 255); box-shadow: 0px 0px 7px 0px rgb(65, 128, 255); }*/
    /*.checkbox:focus > label:before { border: 2px solid rgba(38, 114, 236,0.7); }*/
    /*.checkbox:focus {color:rgba(38, 114, 236,0.7);}*/
.chkbox-Fit { margin: 2.1em 0 0 10px; }
/*For Checkboxes Buttons*/

/*For Radio Buttons*/
.radio { float: left; width: 100%; color: #888888; text-align: left; font-size: 12pt; outline: none; }
    /*This Adds Style to the labels*/
    .radio label { position: relative; display: inline-block; margin-right: 15px; padding-left: 25px; font-size: 10pt; cursor: pointer; outline: none; }
    /*Now we Hide the RADIO button*/
    .radio input[type=radio] { display: none; }
    /*Now we set the radio(hidden) with pseudo element :before on label*/
    .radio label:before { position: absolute; bottom: 1px; left: 0; display: inline-block; margin-right: 10px; width: 12px; height: 12px; border: 2px solid #b5c1c7; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; background-color: transparent; content: ""; } /*half of the size of height of checkbox so it becomes round for Radio Button*/ 
    /*Now we add style for the check inside the radio button with the CSS3 Checked with pseudo:before element*/
    .radio input[type=radio]:checked + label:before { border: 2px solid #30a3e6; color: #fff; content: "\2022"; text-align: center; font-size: 25px; line-height: 8px; background: #30a3e6; -webkit-box-shadow: 0px 0px 7px 0px rgb(65, 128, 255); -moz-box-shadow: 0px 0px 7px 0px rgb(65, 128, 255); box-shadow: 0px 0px 7px 0px rgb(65, 128, 255); }
    .radio input[type=radio]:checked + label { color: #30a3e6; }

    /*.radio label:before { content: ''; background: #fff; border-radius: 50%; border: 2px solid #c9c9c9; display: inline-block; vertical-align: middle; width: 7px; height: 10px; padding: 2px 4px 2px 4px; margin-right: 9px; float: left; position: relative; margin-top: 2px; }
    .radio input[type=radio]:checked + label:before { border: 2px solid #30a3e6; }
    .radio label:after { opacity: 0; content: ""; padding: 2px; position: absolute; width: 1px; height: 10px; border: solid #30a3e6; border-width: 0px 3px 4px 0px; transform: rotate(45deg); left: 10px; top: -2px; z-index: 999999; -webkit-transition: all 0.50s; -moz-transition: all 0.50s; -o-transition: all 0.50s; transition: all 0.50s;}
    .radio input[type=radio]:checked + label:after { opacity: 1; -webkit-animation: check 0.8s; -moz-animation: check 0.8s; -o-animation: check 0.8s; animation: check 0.8s; }*/


    .radio label:hover:before { border: 2px solid #30a3e6; }
    .radio label:focus:before { -webkit-box-shadow: 0px 0px 7px 2px rgb(103, 154, 255); -moz-box-shadow: 0px 0px 7px 2px rgb(65, 128, 255); box-shadow: 0px 0px 7px 2px rgb(65, 128, 255); }
.chkrdb-SmallHeight { margin: 0 0 0 10px; }
/*For Radio Buttons*/