Fluent Forms Image Radio Field CSS

FF-image-radio-field.css

/**
* Styles the Radio field as clickable image for Fluent Forms
* 
* Use: Paste into Custom CSS Section of your Form
* Add class "fancy-input" to container of all inputs that need the fancy styling
*
* Forked version of Sebastian Berger from inital post Fluent Forms FB Group - https://bit.ly/37BBpet
* FB Post - https://bit.ly/2ZEn2BG
* 
* Full Links at bottom
**/

.fluent_form_FF_ID .ff-el-form-check label.ff-el-form-check-label {
text-align: center!important; 
padding:5px!important;
}
.fluent_form_FF_ID .fancy-input label.ff-el-image-input-src {
width: 60%!important;
background-size:contain!important;
/* background-color: #e2e2e2; */ 
}
.fluent_form_FF_ID .fancy-input .ff-el-image-holder{
display: flex!important;
margin: 1%!important;
border-width: 2px;
border-color: #e2e2e2;
flex-direction:column;
border-style: solid;
border-radius: 9px;
}
.fluent_form_FF_ID .fancy-input .ff-el-form-check-label .ff-el-form-check-input {
display: none;
}
.fluent_form_FF_ID .fancy-input .ff_el_checkable_photo_holders {
display: grid!important;
padding-top: 50px!important;
padding-bottom: 50px!important;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 15px 15px;
}
@media only screen and (max-width: 818px){
.fluent_form_FF_ID .fancy-input .ff_el_checkable_photo_holders{
grid-template-columns: 1fr 1fr 1fr;
}}
@media only screen and (max-width: 618px){
.fluent_form_FF_ID .fancy-input .ff_el_checkable_photo_holders{
grid-template-columns: 1fr 1fr;
}}
@media only screen and (max-width: 386px){
.fluent_form_FF_ID .fancy-input .ff_el_checkable_photo_holders{
grid-template-columns: 1fr;
}}
.fluent_form_FF_ID .fancy-input .ff-el-image-holder:hover {
color: #f4a52c;
transform: scale(1.0.4);
box-shadow:
0 0.8px 1.4px rgba(0, 0, 0, 0.02),
0 2px 3.3px rgba(0, 0, 0, 0.028),
0 3.8px 6.3px rgba(0, 0, 0, 0.035),
0 6.7px 11.2px rgba(0, 0, 0, 0.042),
0 12.5px 20.9px rgba(0, 0, 0, 0.05),
0 30px 50px rgba(0, 0, 0, 0.07);
}
.fluent_form_FF_ID .fancy-input .ff-el-image-holder {
align-items: center;
justify-content: space-around!important;
transition: all .3s ease-in-out;
padding: 0px!important;
}
.fluent_form_FF_ID .fancy-input .ff-el-form-check {
width:95% !important;
}
.fluent_form_FF_ID .fancy-input .ff_item_selected{
    border:red 2px solid !important;
}

/**
* FB Link
* https://www.facebook.com/groups/fluentforms/permalink/855789501896667/?__cft__[0]=AZVWrByesGUBZQi7XSOEu7kO_kHOTayxtXS4FkmuCXkpxBznVRXIDHDQzvqDSDlpXuu-W5Vom7LO9PajoU-AVkzoHoZl7wB1E0L_X5OJtZecBNP4VcD6wWqkIl-CcveKaN72Y0jrCrwt_NIz9EKBsRBb&__tn__=R]-R
* https://www.facebook.com/groups/fluentforms/permalink/927141638094786/?comment_id=927162954759321&reply_comment_id=927202468088703
**/