Transparent Caldera Forms with Font Awesome Radio and Checkbox Buttons

transparent-caldera.css

.caldera-grid .form-control:focus {
    border-color: #fff;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .075), 0 0 8px rgba(255, 255, 255, .6); 
    /*** CHANGES THE BLUE COLOR WHEN A FIELD IS CLICKED ***/
}
.caldera-grid label,
.caldera-grid .help-block {
    color: #fff; 
    /*** LABEL AND DESCRIPTION TEXT COLOR ***/
}
input::-webkit-input-placeholder {
    color: #fff !important; 
    /*** PLACEHOLDER TEXT COLOR - KEEP ALL FOR BROWSER SUPPORT ***/
}
input:-moz-placeholder {
    color: #fff !important;
}
input::-moz-placeholder {
    color: #fff !important;
}
input:-ms-input-placeholder {
    color: #fff !important;
}
textarea::-webkit-input-placeholder {
    color: #fff !important;
}
textarea:-moz-placeholder {
    color: #fff !important;
}
textarea::-moz-placeholder {
    color: #fff !important;
}
textarea:-ms-input-placeholder {
    color: #fff !important;
}
/*** FIREFOX ***/
@-moz-document url-prefix() {
    .caldera-grid .checkbox input[type=checkbox], .caldera-grid .checkbox-inline input[type=checkbox], .caldera-grid .radio input[type=radio], .caldera-grid .radio-inline input[type=radio] {
        width: 20px !important;
    }
}
@media only screen and (min-width: 981px) {
    .caldera-grid .checkbox input[type=checkbox],
    .caldera-grid .checkbox-inline input[type=checkbox],
    .caldera-grid .radio input[type=radio],
    .caldera-grid .radio-inline input[type=radio] {
        margin-right: 26px;
        width: 0;
    }
    .caldera-grid input[type=checkbox]:hover,
    .caldera-grid input[type=radio]:hover {
        cursor: pointer;
    }
    input[type=radio]:before,
    input[type=checkbox]:before {
        font-family: FontAwesome !important;
        font-size: 16px;
    }
    input[type=radio]:before {
        content: '\f111';
        color: #000;
        /*** COLOR OF RADIO WHEN UNSELECTED ***/
        background: #fff;
        border-radius: 50%;
        padding: 2px;
    }
    input[type=checkbox]:before {
        content: '\f14a';
        color: #000;
        /*** COLOR OF CHECKBOX WHEN UNSELECTED ***/
        background: #fff;
        border-radius: 3px;
        padding: 2px;
    }
    input[type=radio]:checked:before {
        color: #15bf86;
        /*** COLOR OF RADIO WHEN SELECTED ***/
    }
    input[type=checkbox]:checked:before {
        color: #15bf86;
        /*** COLOR OF CHECKBOX WHEN SELECTED ***/
        background: #fff;
        border-radius: 3px;
        padding: 2px;
    }
}