.notification-panel {
}

.notification-item {
    border-bottom: 1px solid #CCC;
    padding: 10px 20px;
}

.icon-email::after,
.icon-sms::after,
.icon-inapp::after {
    font-family: FontAwesome;
    font: normal normal normal 14px/1 FontAwesome;
    margin-right: 10px;
    margin-bottom: 20px;
}

.icon-sms::after {
    content: "\f27a";
}

.icon-email::after {
    content: "\f0e0";
}

.icon-inapp::after {
    content: "\f108";
}

.icon-password,
.icon-account,
.icon-training {
    width: 48px;
    height: 48px;
    margin-right: 20px;
    border-radius: 24px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    border: 1px solid #CCC;
}

.icon-password {
    background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQvqD-efoLwoO7CTyFPsi4YwqEJ1qhdpR_Y8Q&usqp=CAU);
}

.icon-account {
    background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSb7OX8-030FDWTdZsUsosI1W7mpolxXzogmw&usqp=CAU);
}

.icon-training {
    background-image: url(https://www.pinclipart.com/picdir/big/331-3316188_education-and-training-education-black-circle-icon-clipart.png);
}