Environmental badge to easily spot the difference between ACC, DEV and PRD

 For a new customer I was setting up the environments and after everything was set up I found something missing. Since the application looks exactly the same on all environments (dev, acc and prod) I was missing a feature to easily spot the difference between them. Therefore I've implemented a simple css in the custom.css file. Between environments I've modified two parameters.

• content (‘DEVELOPMENT’ for dev and 'ACCEPTATION’ for acc)
• background (red for dev and blue for acc)

For the production environment we did not implement this code. So if you see a badge in the left bottom corner it is not production. 

body > div:first-of-type::after {
    content: 'ACCEPTATION';
    display: block;
    position: absolute;
    bottom: 1px;
    left: 1px;
    background: blue;
    z-index: 999999999999999999999999999999;
    color: white;
    padding: 10px 20px;
}

Since it is implemented in Universal it works for any application, including IAM.

This is what it looks like: