@charset "utf-8"; /* ------------------------------------------------------------------------------------------------------------------------------------
 * [PRETTY CHECKBOXED] - Nextloop March 2017
 * 
 * [SOURCE] - http://blog.karenmenezes.com/2014/nov/1/another-pure-css-checkbox-article/
 *
 * [REQUIRES]
 *   -fontawesome for the check icon code
 *
 * [USAGE - CHECKBOX]
 *       <div>
 *          <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox">
 *          <label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
 *       </div>
 *
 * [USAGE - RADIO]
 *        <div>
 *           <input id="radio-1" class="radio-custom" name="radio-group" type="radio" checked>
 *           <label for="radio-1" class="radio-custom-label">First Choice</label>
 *        </div>
 *
 * [NOTES]
 *   - label element is required. If not needed, you can add it with blank text
 *   - for 'disabled' buttons, dynamicall add the string 'disabled' as a class to the label and disabled directly to input
       this can be done with a runtime_function
 *     <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" [foo.bar_status;onformat=runtime_check_status]>  
 *     <label for="checkbox-1" class="checkbox-custom-label [foo.bar_status;onformat=runtime_check_status]">First Choice</label>       
 *
 *------------------------------------------------------------------------------------------------------------------------------------ */
.checkbox-custom {
    opacity: 0;
    position: absolute;
}

.checkbox-custom, .checkbox-custom-label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
}

.checkbox-custom-label {
    position: relative;
}

.checkbox-custom + .checkbox-custom-label:before {
    content: '';
    background: #fff;
    border: 1px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    padding: 4px;
    margin-right: 10px;
    text-align: center;
    border-radius: 50%;
}

.checkbox-custom.checkbox-sm + .checkbox-custom-label:before {
    content: '';
    background: #fff;
    border: 1px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 17px;
    height: 17px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
}

.checkbox-custom.checkbox-sm:checked + .checkbox-custom-label:before {
    content: "\f00c";
    font-family: 'FontAwesome';
    background: #94c66e;
    color: #fff;
    font-size: 10px;
}

.checkbox-custom:checked + .checkbox-custom-label:before {
    content: "\f00c";
    font-family: 'FontAwesome';
    background: #94c66e;
    color: #fff;
    font-size: 11px;
}

.checkbox-custom:focus + .checkbox-custom-label {
}

.checkbox-custom-label.disabled:before {
    background-color: #eef0f5;
}

.radio-custom {
    opacity: 0;
    position: absolute;
}

.radio-custom, .radio-custom-label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
}

.radio-custom-label {
    position: relative;
}

.radio-custom + .radio-custom-label:before {
    content: '';
    background: #fff;
    border: 2px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 18px;
    height: 18px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
    margin-top: -2px;
}

.radio-custom + .radio-custom-label:before {
    border-radius: 50%;
}

.radio-custom:checked + .radio-custom-label:before {
    background: #8BC34A;
    box-shadow: inset 0px 0px 0px 1px #ddd;
}

.radio-custom.checked + .radio-custom-label:before {
    background: #8BC34A;
    box-shadow: inset 0px 0px 0px 1px #ddd;
}

.radio-custom:focus + .radio-custom-label {
    /* focus style */
}

/* --------------------------------------------------------------FORM CONTROLS------------------------------------------------- */
.form-control {
    border-radius: 4px;
}