#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;
      }
    }

    .hide-mr-notification {
      margin-left: 3px;
      padding: 3px 7px;
      color: var(--oc-gray-8);

      svg {
        stroke-width: 2px;
      }

      .icon-label {
        font-size: 0.75rem;
      }
    }
  }
}

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;
}

@media all and (max-width: 599px) {
  #mr_notification_banners .hide-mr-notification .icon-label {
    display: none;
  }
}