.notification-panel {
    position: absolute;
    top: 75px;
    right: 40px;
    border: 0px;
    background: #FFFFFF;
    width: 300px;
    border-radius: 10px;
    padding: 5px;
    border: 2px solid #FFFFFF;
    box-shadow: rgba(100, 100, 111, 0.9) 0px 7px 29px 0px;
    max-height: calc(100% - 100px);
    overflow-y: auto;
}

.AppNotification {
    font-size: 12px;
    padding: 10px;
    margin: 4px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
}

.AppNotification:hover {
    outline: 1px solid #CCCCCC;
}

.AppNotification .title {
    font-weight: bold;
    margin-bottom: 2px;
}

.AppNotification .age {
    font-style: italic;
    margin-top: 2px;
    font-size: 10px;
}

.AppNotification .left {
    margin-right: 10px;
}

.AppNotification .center {
    flex: 1;
}

.AppNotification .left img {
    width: 40px;
    border-radius: 100%;
    vertical-align: top;
    position: relative;
}

.AppNotification .left .icon {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    vertical-align: top;
    position: absolute;
    background-color: #DDDDDD;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 70%;
    margin-top: -15px;
    margin-left: 20px;
}

.AppNotification .left .icon.chat {
    background-image: url("../a_img/chat2.svg");
}

.AppNotification .left .icon.calendar {
    background-image: url("../a_img/calendar.svg");
}

.AppNotification .left .icon.runner {
    background-image: url("../a_img/invite2.svg");
}

.AppNotification .left .icon.activity {
    background-image: url("../a_img/favorite.svg");
}

.AppNotification .left .icon.logo {
    background-image: url("../a_img/logo-all.svg");
}

.notification-panel-buttons {
    text-align: center;
    margin-top: 50px;
}
.notification-panel-buttons .button {
    width: 100%;
    margin: 0px;
}