Adding Styles to Legend Area ~ Spotfire Quick Tips

Recently I have posted a few ways to style different Spotfire elements. Now I have one more, for Legends this time.
This is what I have been able to achieve so far -

Here is the code you need to Add to one of the HTML Text Area -
<style id="AlienBox">
.StyledScrollbar.LegendScroll {
background-color: darkcyan;
border: 2px solid darkmagenta;
border-radius: 12px;
}
.sfc-style-root .sf-element-legend-item {
padding-top: 1px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 10px;
background-color: blueviolet;
border: 2px solid blue;
border-radius: 12px;
}
.sf-element.sf-element-title.sf-legend-item-elem {
background-color: darkblue;
border-radius: 12px;
}
.sf-element-document .sf-element-axis-tray .sf-element-text-box {
vertical-align: top;
color: deepskyblue;
font-weight: bold;
font-size: x-small;
}
.sf-element.sf-element-sub-item-section.sf-legend-item-elem {
font-variant: petite-caps;
font-style: italic;
font-weight: lighter;
font-size: x-small;
}
</style>
For HTML Sanitization issue, we have a solution as always as a JavaScript code -
if(!$('#AlienBox').length){
$('body').append($(`<style id="AlienBox">
.StyledScrollbar.LegendScroll {
background-color: darkcyan;
border: 2px solid darkmagenta;
border-radius: 12px;
}
.sfc-style-root .sf-element-legend-item {
padding-top: 1px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 10px;
background-color: blueviolet;
border: 2px solid blue;
border-radius: 12px;
}
.sf-element.sf-element-title.sf-legend-item-elem {
background-color: darkblue;
border-radius: 12px;
}
.sf-element-document .sf-element-axis-tray .sf-element-text-box {
vertical-align: top;
color: deepskyblue;
font-weight: bold;
font-size: x-small;
}
.sf-element.sf-element-sub-item-section.sf-legend-item-elem {
font-variant: petite-caps;
font-style: italic;
font-weight: lighter;
font-size: x-small;
}
</style>`, {
id: 'AlienBox'
}));
}