/* Header black bar: single notifications bell (APLUS-322) and Newsletter next to the username (APLUS-323) */

.master-header .top .action-pannel .notification-bell {
    margin: 5px 3px 0 3px;
}

    .master-header .top .action-pannel .notification-bell a {
        display: block;
        width: 20px;
        height: 20px;
    }

    .master-header .top .action-pannel .notification-bell img {
        display: block;
        width: 18px;
        height: 20px;
    }

    /* plain bell by default, bell with the red dot when there is something new */
    .master-header .top .action-pannel .notification-bell .bell-icon-new,
    .master-header .top .action-pannel .notification-bell a.has-new .bell-icon {
        display: none;
    }

    .master-header .top .action-pannel .notification-bell a.has-new .bell-icon-new {
        display: block;
    }

/* gap between the bell and the Newsletter logo (ml-22 alone only gives 5px) */
.master-header .top .action-pannel .header-newsletter {
    margin-left: 3px;
}

.master-header .top .action-pannel .header-newsletter a {
    display: block;
    height: 21px;
    width: 95px;
    margin-top: 7px;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
}

    .master-header .top .action-pannel .header-newsletter a:hover {
        opacity: .7;
    }

.master-header .top .action-pannel .header-newsletter.ar a {
    background-image: url(/content/ar/images/newsletters_logo.svg);
}

.master-header .top .action-pannel .header-newsletter.en a {
    background-image: url(/content/en/images/newsletters_logo.svg);
}

/* notifications page: count of new notifications on each tab */
.nav-tabs .nav-link .tab-count {
    display: inline-block;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    margin: 0 6px;
    padding: 0 4px;
    border-radius: 9px;
    background: #e53935;
    color: #fff;
    font: bold 11px/18px Arial, sans-serif;
    text-align: center;
    vertical-align: middle;
}
