.notification-box {
}

.notification-box a:hover {
    color: #003c37;
    background-color: #d1d1d1;
}

.list-tab {
    padding: 7px 0 7px 0 !important;
}

.modal-tab {
    padding: 7px 0 7px 0 !important;
}

.active .modal-tab {
    background-color: #00a99d !important;
    color: #ffffff !important;
}

.active .list-tab {
    background-color: #00a99d !important;
    color: #ffffff !important;
}

.notification-box .notification-item {
    width: 100%;
    margin: 0 0 -1px 0;
    padding: 10px;
    border-top: 1px solid #d1d1d1;
    border-bottom: 1px solid #d1d1d1;
}

.notification-box .notification-item:hover {
    background-color: #f4f4f4;
}

.notification-box .new {
    background-color: #f4f4ff;
}

.notification-box .reached {
    background-color: #f4f4ff;
}

.notification-box .opened {
    background-color: #ffffff;
}

.notification-box .new:hover {
    background-color: darkgrey;
}

.notification-box .reached:hover {
    background-color: darkgrey;
}

.notification-dot {
    background-color: #fa3e3e;
    height: 23px;
    width: 23px;
    color: #fff;

    position: absolute; /* Position the dot within the relatively positioned button */
    left: 23px;

    text-align: center;
    font-weight: bold;
    top: 17% !important;
    border-radius: 24px;
    padding: 5px 0 13px 0 !important;
    font-size: 13px !important;
}


.modal-notification-dot {
    background-color: #fa3e3e;
    color: #fff;
    position: relative;
    text-align: center;
    font-weight: bold;
    border-radius: 100%;
    padding: 2px 5px 2px 6px !important;
}

.notification-time {
    color: #c1c1c1;
}