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;
        }
    }
    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 {
                        list-style: none;
                        margin-bottom: 1rem;
                        span.item-key {
                            display: inline-block;
                            background-color: white;
                            width: 3em;
                            font-size: 1.2rem;
                        }
                    }
                }
            }
            div.notification-content {
                width: 93%;
                margin: 1.5rem auto 1.5rem auto;
                .message {
                    background-color: #f3f3f3;
                    line-height: 1.75;
                    box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em, rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
                    padding: 1.5rem;
                    border-radius: 5px;
                    border-left: $chill-yellow 10px solid;
                    p:first-child {
                        margin-bottom: 1rem;
                        &::before {
                            content: "“";
                            font-family: Georgia;
                            font-size: 40px;
                            line-height: 0;
                            display: inline-block;
                            display: -webkit-inline-box;
                        }
                    }
                }
            }
        }
    }
}

// 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%;
    }
}