Color-Picker-product-builder.css

/*///////////////////
CSS
Build a simple product visualiser with Gravity Forms Color Picker
Full article at https://jetsloth.com/labs/build-a-simple-product-visualiser-with-gravity-forms-color-picker/
////////////////////*/

/* Outter form wrapper */
.gform_body {
    background:#f6f6f6;
    border-radius:10px;
    margin-bottom:40px;
    overflow:hidden;
    padding:50px 0px;
}

/* Preview Area */
.preview-area {
    height: auto;
    position: relative;
    width: 100%;
    display: block;
    padding: 70px;
}
/* Preview Layer */
.preview-area img {
    transform: translate(-50%);
    position: relative;
    left: 50%;
}
/*Color picker selects*/
li.color-picker-field {
    margin: 0 auto;
    padding: 0px 70px;
    text-align: center;
}
li.color-options .ginput_container_radio ul {
    width: 70%;
    margin: 0 auto;
    text-align: center;
}
.color-picker-style-circle .color-picker-swatch-color-wrap {
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.003), 0 6.7px 5.3px rgba(0, 0, 0, 0.004), 0 12.5px 10px rgba(0, 0, 0, 0.005), 0 22.3px 17.9px rgba(0, 0, 0, 0.006), 0 41.8px 33.4px rgba(0, 0, 0, 0.007), 0 100px 80px rgba(0, 0, 0, 0.01);
}

/* Gfield label */
label.gfield_label {
    font-weight:bold;
    font-size: 12px;
    color: #717F87;
    letter-spacing: 8px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 20px;
}