.notifications {
    position:relative;
    height:100%;
    width:auto;
    display:flex;
    justify-content: center;
    align-items: center;
    padding:0px 20px 0px 50px;
    cursor:pointer;
}

.notifications a {
    text-decoration:none;
    color:#333;
    color:#fff;
}

.notifications .notification-list {
    position:absolute;
    top:96%;
    right:0;
    width:400px;
    background-color: white;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display:none;
    flex-direction:column;
    height:auto;
    max-height:400px;
    overflow-y:auto;
}


.notifications i {
    margin-right:5px;
    color:#333;
    color:#fff;
}

.notifications:hover .notification-list{
    display:flex;
}

.notifications .notification-list a {
    position:relative;
    flex:1;
    width:100%;
    text-align:left;
    text-decoration:none;
    color:#333;
    transition: background-color 0.3s ease;
    height:auto;
    font-size:.8em;
    background-color:#fefefe;
    border-left:5px solid #ccc;
}

.notifications .notification-list a div {
    padding:10px;
}

.notifications .notification-list a:not(:first-child) {
    border-top:1px solid #000;
}

.notifications .notification-list a.notification-item-new {
    border-left:10px solid #98dcf3;
    background-color:#fff;
}

.notifications .notification-list a:hover {
    background-color: #f1f1f1;
}