#wp-admin-bar-notifications {
  background-color: #ee0000;
  animation: blinkBackgroundColor 2s infinite alternate;
}

@keyframes blinkBackgroundColor {
  0% {
    color: #ee0000;
    background-color: #840000;
  }
  100% {
    color: #ffffff;
    background-color: #ee0000;
  }
}

ul.auc-notification-list {
  margin: 1em 0 0 0;

  li {
    display: flex;
    margin-bottom: 1em;

    .date {
      min-width: 155px;
    }

    .content {
      width: calc(100% - 155px);

      .title {
        display: inline-block;
        color: #0073aa;
        cursor: pointer;
      }

      .body, .is_read {
        display: none;
      }

      .is_read {
        text-align: right;
      }

      .read_btn {
        border: 1px solid #999;
        border-radius: 2px;
        padding: 1px 3px;
        display: inline-block;
        cursor: pointer;
      }

      .read_btn:hover {
        background: #0073aa;
        color: #ffffff;
      }
    }
  }

  li.open .content .body,
  li.open .content .is_read {
    display: block;
  }

  li.read .content .is_read {
    display: none;
  }

  li.unread .title:after {
    vertical-align: middle;
    font-family: "dashicons";
    font-size: 1.4em;
    line-height: 1;
    display: inline-block;
    margin-left: 0.2em;
    content: "\f534";
    color: #ee0000;
  }

  li:last-child {
    margin-bottom: 0.5em;
  }
}