chill-bundles/src/Bundle/ChillMainBundle/Resources/public/chill/scss/notification.scss

div.notification {
    h2.notification-title,
    h6.notification-title {
        a {
            text-decoration: none;
        }
        &::before {
            font-family: "ForkAwesome";
            font-size: 80%;
            margin-right: 0.3em;
        }
    }
    h4.notification-subtitle {
        margin: 0.5rem 0;
    }
    ul.notification-related-entities {
        margin: 0.5rem 0;
        list-style: none;
        padding: 0;

        & > li {
            display: inline-block;
        }

    }
    div.read {
        h2.notification-title,
        h6.notification-title {
            font-weight: 500;
            &::before {
                content: "\f2b7";  //envelope-open-o
            }
        }
    }
    div.unread {
        h2.notification-title,
        h6.notification-title {
            &::before {
                content: "\f003";  //envelope-o
            }
        }
    }
}

/*
 * Notifications List
*/

div.notification-list,
div.notification-show {
    div.item-bloc {
        div.item-row {
            &.notification-header {
                div.item-col {
                    &:first-child {
                        flex-grow: 1;

                    }
                    &:last-child {
                        flex-grow: 0;
                    }
                }
                ul.small_in_title {
                    list-style-type: circle;
                    li {
                        span.item-key {
                            display: inline-block;
                            padding: 0.1em 0.3rem;
                        }
                    }
                }
            }
            div.notification-content {
                margin: 1.5rem;
                p {
                    margin-bottom: 0.75rem;
                }
            }
        }
    }
}

// Override bootstrap accordion
div#workflow-fold,
div#notification-fold {
    .accordion-button {
        padding: 0;
        background-color: unset;
        &:not(.collapsed) {
            background-color: unset;
            box-shadow: unset;
        }
    }
}

// Counter
div.notification-counter {
    span.counter {
        &:not(:first-child) {
            &::before {
                content: '/ ';
            }
        }
    }
}
span.counter {
    & > span {
        font-weight: bold;
        background-color: $chill-ll-gray;
        padding: 0 0.4rem;
        border-radius: 50%;
    }
}