How to change the background color of Required Fields

[cwillard]

I am trying to change the background color of the required fields on an HR Case on employee center pro. I have looked at both the page and widget css and do not see a place to do this. 

Thanks!

[Mi Mi]

Hi @Ashir

Thank you for your reply.

I cloned the widget and updated the script in line 269 in Body HTML template. When I added the cloned widget to the page, I could see the outcome of change, but the page layout was changed showing the Required information on the right side of catalogue item. We used to have that Required Information at the bottom of catalogue item.

I found out that the new instance had nothing defined when I replaced the widget on the page. When I copied the CSS and JSON scripts from the previous instance, the Required Information box moved back to where it was, but its background colour was also back to its default colour.

I played around with those CSS and JSON scripts by deleting them. It looks like there might be something in JSON script.

CSS

.panel.panel-default {
border-radius: 3px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15) !important;
}

.sc-field-error-label {
background-color: #9D1C47;
}

.sc-sticky-item-header {
background-color: transparent;
position: unset;
}

h2 {
color: $brand-primary !important;
}

.row.b-b.no-margin.ng-scope.wrapper-md > .col-sm-4.col-xs-12.no-padder.ng-scope {
//display: none;
}

JSON

{
"show_add_cart_button": {
"value": "true",
"displayValue": "true"
},
"show_field_validation_messages": {
"value": "true",
"displayValue": "true"
},
"show_add_to_wishlist_button": {
"value": "true",
"displayValue": "true"
},
"display_cart_on_right": {
"value": "false",
"displayValue": "false"
},
"show_less_description": {
"value": "true",
"displayValue": "true"
},
"hide_delivery_time": {
"value": "false",
"displayValue": "false"
},
"is_preview": {
"value": "false",
"displayValue": "false"
}
}

Would you be able to assist me again?

Thank you in advance.