#mr_notification_banners {
  background-color: #FFFFF0;

  display: flex;
  flex-direction: column;

  div.mr-notification {
    padding: 5px;

    border-bottom: 1px solid #e8e8e8;

    &:last-child {
      border-bottom-width: 0;
    }

    display: flex;
    justify-content: space-between;
    align-items: center;

    .mr-notification-content {
      flex: 1;
      text-align: center;
      padding: 0 5px;

      &::before {
        content: '';
        display: inline-block;
        background-image: url("/assets/plugin_assets/my_redmine_notification/my-redmine-icon-f02206b0.png");
        background-repeat: no-repeat;
        background-size: 28px auto;
        width: 28px;
        height: 24px;
        vertical-align: middle;
        margin-right: 8px;
      }
    }

    button.hide-mr-notification {
      margin: 0 5px;

      border: none;
      background: none;

      color: #6D6D6D;
      text-decoration: none;
      cursor: pointer;
      font-size: 1.6em;

      &:hover,
      &:focus,
      &:active {
        color: #111;
      }
    }
  }
}

a.mr-notification-with-link,
a.mr-notification-with-modal,
span.mr-notification-text-only {
  font-weight: bold;
  word-break: normal;

  /* https://github.com/farend/redmine_theme_farend_bleuclair/blob/master/src/styles/components/_scaffolding.scss */
  font-family: Meiriyo, "Hiragino Kaku Gothic Pro", "Hiragino Sans", "MS PGothic", Verdana, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5
}

a.mr-notification-with-link {
  background-position: 0% 60%;
  background-repeat: no-repeat;
  padding-left: 12px;
  background-image: url("/assets/external-093f681f.png");
}

a.mr-notification-with-link,
a.mr-notification-with-modal {
  color: #169;
  text-decoration: none;
  cursor: pointer;

  &:hover,
  &:focus,
  &:active {
    color: #c61a1a;
    text-decoration: underline;
  }
}

span.mr-notification-text-only {
  color: #333;
}