@font-face {
    font-family: 'MyBB Notifications Icon';
    src: url('data:font/woff;base64,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') format('woff')
}

link[rel="stylesheet"][href*="/notifications."]::before {
    content: "1.1.19";
    display: none
}

.jGrowl {
    z-index: 100001
}

.jGrowl-notification,
.jGrowl-closer,
.notification-spoiler {
    width: 250px;
    margin: 10px;
    padding: .5em 13px;
    background: rgba(0, 0, 0, .75);
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    font-family: Tahoma, Verdana, Arial, Sans-serif;
    border-radius: 5px;
    opacity: 1
}

.jGrowl-notification {
    padding: .7em 13px .9em;
    line-height: 120%
}

.notification {
    min-height: 50px;
    cursor: pointer
}

.notification-spoiler {
    font-size: .9em;
    font-weight: 700;
    text-align: center;
    cursor: pointer
}

.jGrowl-notification .jGrowl-close {
    font-size: 16px;
    margin: -5px -12px;
    font-family: Tahoma, Verdana, Arial, Sans-serif;
    font-weight: 400
}

.jGrowl-notification .jGrowl-header {
    font-size: 12px;
    padding-bottom: 5px
}

.jGrowl-notification a,
.jGrowl-notification em.guest-link {
    color: #fff;
    text-decoration: none;
    font: bold 1em Tahoma, Verdana
}

.jGrowl-notification a:hover {
    text-decoration: underline
}

.notification .font-icon {
    margin: 0 .4em;
    font: normal 400 1.1em 'MyBB Notifications Icon';
    opacity: .7
}

.notification .font-icon:hover {
    opacity: .8
}

.notification .no-sound::before {
    content: '\e900'
}

.pun-modal {
    position: fixed !important
}

.unread-notifications .modal-inner {
    margin-top: 12%;
    margin-top: 22vh
}

.unread-notifications .container {
    padding: 0;
    overflow: hidden
}

.unread-notifications #notifications-info {
    padding: .6em 1em
}

.unread-notifications #notifications-settings,
.unread-notifications .notifications-block-title {
    padding: 0 1em;
    height: 2.2em;
    line-height: 2.2em;
    clear: both
}

.unread-notifications #notifications-settings .font-icon {
    vertical-align: middle;
    font-size: 1.3em;
    font-family: 'MyBB Notifications Icon';
    text-decoration: none
}

.unread-notifications #notifications-settings .font-icon:hover,
.unread-notifications #notifications-wrap .font-icon:hover {
    opacity: .85
}

.unread-notifications #notifications-settings #settings-sound {
    float: left
}

.unread-notifications #notifications-settings #settings-advanced,
.unread-notifications #notifications-settings #settings-back {
    display: inline-block;
    float: right;
    margin-left: .6em
}

.unread-notifications #notifications-settings #settings-sound a::before {
    content: '\e901'
}

.unread-notifications #notifications-settings #settings-sound.disabled a::before {
    content: '\e900'
}

.unread-notifications #notifications-settings #settings-advanced a::before {
    content: '\f013'
}

.unread-notifications #notifications-settings #settings-back a::before {
    content: '\f014'
}

.unread-notifications #notifications-advanced #settings-enabled {
    float: right
}

.unread-notifications #notifications-advanced #advanced-setting-list {
    padding: .3em 1em .8em;
    position: relative
}

.unread-notifications #advanced-title {
    margin: 0 0 .2em
}

.unread-notifications #advanced-setting-list {
    display: block
}

.unread-notifications #advanced-setting-list li {
    display: block;
    padding: 2px 0;
    clear: both
}

.unread-notifications .setting-input {
    vertical-align: middle
}

.unread-notifications .setting-input input {
    float: left;
    margin: 2px 0 0 1px
}

.unread-notifications .setting-title {
    display: block;
    margin-left: 24px
}

.unread-notifications .setting-title .setting-description {
    display: block;
    margin-top: .2em;
    font-size: .95em;
    opacity: .6
}

.unread-notifications .setting-title .marker-new {
    position: absolute;
    margin: -.3em 0 0 .2em;
    color: red;
    font-weight: 700
}

.unread-notifications .notifications-block-title {
    border: solid 1px rgba(0, 0, 0, .06);
    border-style: solid none;
    background: rgba(0, 0, 0, .03)
}

.unread-notifications .notifications-block-title span {
    font-weight: 700
}

.unread-notifications #notifications-wrap,
.unread-notifications #notifications-advanced {
    overflow-y: auto;
    clear: both;
    max-height: 30em;
    max-height: 46vh
}

.unread-notifications #notifications-wrap table {
    box-sizing: border-box;
    text-align: left
}

.unread-notifications #notifications-wrap #clear-stored {
    float: right
}

.unread-notifications #notifications {
    margin: 0 0 0 -1px
}

.unread-notifications #notifications tbody tr:first-child td,
.unread-notifications #notifications-stored tbody tr:first-child td {
    border-top: none 0 transparent
}

.unread-notifications #notifications tbody tr:last-child td {
    border-bottom: none 0 transparent
}

.unread-notifications td {
    border-left: none 0 transparent;
    cursor: pointer
}

.unread-notifications .notification-left+.notification-right {
    min-height: 1px
}

.unread-notifications #notifications-wrap .font-icon {
    font: normal 400 1.2em 'MyBB Notifications Icon';
    text-decoration: none
}

.unread-notifications #notifications-wrap .delete-notification {
    margin: -.4em;
    padding: .4em;
    float: right;
    visibility: hidden;
    opacity: 0;
    transition: opacity .5s ease
}

.unread-notifications #notifications-wrap tr:hover .delete-notification {
    visibility: visible;
    opacity: 1.0
}

.unread-notifications #notifications-wrap .delete-notification a::before {
    content: '\e906'
}

.unread-notifications .time-ago {
    margin: 5px 0 0;
    opacity: .6
}

.unread-notifications .notification-left~.time-ago {
    margin-left: 50px
}

.notification-left {
    float: left;
    height: 40px
}

.notification-left .notification-image {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-size: cover;
    background-position: center
}

.notification-left+.notification-right {
    margin-left: 50px;
    min-height: 40px
}

.notification-right img {
    vertical-align: middle
}

.notify-link {
    position: relative
}

#notify-link[data-number-unread="0"] .unreads {
    display: none
}

#notify-link .unreads,
#navpm .unreads {
    display: block;
    position: absolute;
    top: -.8em;
    right: -1em;
    height: 15px;
    min-width: 15px;
    padding: 0 2px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 8px;
    font: bold 11px Tahoma, Verdana;
    line-height: 14px;
    cursor: pointer;
    color: #fff;
    background: red;
    box-shadow: 0 0 2px rgba(0, 0, 0, .3);
    text-shadow: none;
    z-index: 1
}

@media screen and (max-width:540px) {
    .notify-link {
        top: -10px;
        left: 10px
    }

    #navprofile .notify-link .unreads,
    #navpm .notify-link .unreads {
        font-size: 1.3em;
        line-height: 18px;
        height: 20px;
        min-width: 20px;
        border-radius: 10px
    }

    .unread-notifications .modal-inner {
        margin-top: 5%;
        margin-top: 10vh;
        width: auto;
        max-width: 94vw
    }

    .unread-notifications #notifications-wrap,
    .unread-notifications #notifications-advanced {
        max-height: 40em;
        max-height: 65vh
    }

    .unread-notifications #notifications-wrap tr .delete-notification {
        visibility: visible;
        opacity: 1.0
    }

    #pun .punbb #pun-main .unread-notifications .modal-inner .closer {
        position: absolute !important
    }
}