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

/* Version check */
link[rel="stylesheet"][href*="/notifications."]::before {
  content: "1.3-dev.71";
  display: none;
}

/* jGrowl notifications */
.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';
}

/* Notifications in mybbModal */
.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 .notifications-advanced-settings {
  padding: .3em 1em .8em;
  position: relative;
}
.unread-notifications #advanced-title,
.unread-notifications #common-title, {
  margin: 0 0 .2em;
}
.unread-notifications .notifications-advanced-settings {
  display: block;
}
.unread-notifications .notifications-advanced-settings 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;
  overflow-x: hidden;
  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-type-toggle {
  float: right;
  margin-top: -1.2em;
  font-size: .9em;
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: all .1s ease;
}
#notifications-wrap:not([data-show-type]) .notification-type-toggle[data-show-all], 
#notifications-wrap[data-show-type] .notification-type-toggle:not([data-show-all]) {
  display: none;
}
#notifications-wrap tr:hover .notification-type-toggle {
  opacity: 1.0;
}

/* All notifications */
.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;
}

/* Promo */
.notifications-promo {
  text-align: center;
  font-size: .8em;
  padding: .5em 0;
}

/* Number of Unreads */
.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: #f00;
  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,
  #notifications-wrap .notification-type-toggle {
    visibility: visible;
    opacity: 1.0;
  }
  #pun .punbb #pun-main .unread-notifications .modal-inner .closer {
    position: absolute !important;
  }
  .notifications-promo {
    padding: 0;
    margin-top: -.2em;
  }
}