Updating SSC background and CTA colors for better brand matching

Customization Code
1

The following changes are made in the Firmhouse portal under the Self Service Center settings menu, Custom Code.

Header
Note that there are 2 types of buttons in the SSC: buttons built on links (<a/> elements) and buttons built on inputs of type submit (<input type="submit"> elements) . The input buttons have to be overridden directly in the head to work well on all browsers and operating systems.

<style>
 .custom-button-style {
    --tw-border-opacity: 1;
    border-color: #4DA956;
    --tw-bg-opacity: 1;
    background-color: #4DA956;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
  }
.custom-button-style:hover {
   --tw-border-opacity: 1;
    border-color: #4DA956;
    --tw-bg-opacity: 1;
    background-color: #f7fafc;
    --tw-text-opacity: 1;
    color: rgb(82 163 91/var(--tw-text-opacity));
  }

input[type="submit"]{
    --tw-border-opacity: 1;
    border-color: #4DA956;
    --tw-bg-opacity: 1;
    background-color: #4DA956;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity));
  }

input[type="submit"]:hover{
    --tw-border-opacity: 1;
    border-color: #4DA956;
    --tw-bg-opacity: 1;
    background-color: #f7fafc;
    --tw-text-opacity: 1;
    color: rgb(82 163 91/var(--tw-text-opacity));
  }

.custom-background {
    --tw-bg-opacity: 1;
    background-color: #FE5000;
  }

</style>

Body

<script>
$(document).ready(function(e){
   $('.bg-gray-900').addClass("custom-background");
   $('.button:not(.button--danger)').addClass("custom-button-style");
}); 
</script>