#zbapi {
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  flex-flow: column;
  align-items: flex-end;
  padding: 10px 10px 0 0;
}

.zbapi-growl {
  display: block;
  margin-bottom: 10px;
  position: relative;
  top: 0;
  right: 0;
  max-width: 300px;
  padding: 10px;
  background: #FFF;
  border-radius: 3px;
  border-left: 3px solid #3A5197;
}

  .zbapi-growl-success { border-left-color: #50b83c; background-color: #e3f1df; }
  .zbapi-growl-error { border-left-color: #de3618; background-color: #fbeae5; }
  .zbapi-growl-info { border-left-color: ; background-color: ; }
  .zbapi-growl-warning { border-left-color: #eec200; background-color: #fcf1cd; }

.zbapi-bbcode-mention {
  display: inline;
  padding: 1px 3px;
  background: rgba(0,0,0,0.05);
  border-radius: 3px;
  font-weight: bold;
  vertical-align: text-bottom;
}

  .zbapi-bbcode-mention::before { content: "@"; display: inline; font-size: 80%; vertical-align: top; margin-right: 2px; }

  .zb-notification {
    position: fixed;
    bottom: 10px;
    right: 10px;
  }

    .zb-notification-bit { padding-top: 5px; }
      .zb-notification-bit:hover + .zb-notification-block { display: block; }
      .zb-notification-bit:hover + .zb-notification-block::after { display: block; }

      .zb-notification-bit a {
        display: inline-block;
        padding: 5px;
        background: #445A9E;
        border: 1px solid #3A5197;
        border-radius: 3px;
        color: #FFF;
      }

      .zb-notification-bit strong {}

      .zb-notification-bit small {
        position: relative;
        top: 0;
        right: 0;
        margin-left: 5px;
      }

    .zb-notification-block {
      display: none;
      position: fixed;
      z-index: 99;
      bottom: 41px;
      right: 10px;
      max-width: 350px;
      background: #FFF;
      border-radius: 3px;
      border-top: 3px solid #3A5197;
      box-shadow: 0 1px 1px rgba(0,0,0,0.2);
    }

      .zb-notification-block::after {
        content: "";
    		position: absolute;
    		z-index: 100;
    		display: none;
    		bottom: -4px;
    		right: 5px;
    		width: 0;
    		height: 0;
    		border-style: solid;
    		border-width: 4px 4px 0 4px;
    		border-color: transparent;
        border-top-color: #F2F2F2;
      }

      .zb-notification-block:hover::after { display:block }
      .zb-notification-block:hover { display: block; }

      .zb-notification-header {
        padding: 10px;
        background: rgba(0,0,0,0.05);
        font-size: 14px;
        font-weight: bold;
        border-bottom: 1px solid rgba(0,0,0,0.05);
      }

      .zb-notification-list {
        max-height: 200px;
        overflow: auto;
        margin: 0;
        padding: 0;
      }

        .zb-notification-link {
          list-style: none;
          padding: 5px 10px;
          border-bottom: 1px solid rgba(0,0,0,0.1);
        }

          .zb-notification-link:last-child { border-bottom: 0; }

          .zb-notification-link-delete {
            float: right;
            margin: 0 -5px 0 10px;
            padding: 0px 4px 2px 3px;
            font-size: 80%;
            background: rgba(0,0,0,0.15);
            border-radius: 100%;
            color: rgba(0,0,0,0.8);
            cursor: pointer;
          }

        .zb-notification-list-empty {
          list-style: none;
          padding: 5px 10px;
          text-align: center;
          font-style: italic;
        }

      .zb-notification-inbox {
        padding: 10px;
        text-align: center;
        background: rgba(0,0,0,0.05);
        border-top: 1px solid rgba(0,0,0,0.05);
        border-radius: 0 0 3px 3px;
      }

  .zbapi-bbcode-mention {
    display: inline;
    padding: 1px 3px;
    background: rgba(0,0,0,0.05);
    border-radius: 3px;
    font-weight: bold;
    vertical-align: text-bottom;
  }

    .zbapi-bbcode-mention::before { content: "@"; display: inline; font-size: 80%; vertical-align: top; margin-right: 2px; }
