metamaps--metamaps/app/assets/stylesheets/notifications.scss.erb

$unread_notifications_dot_size: 8px;
.unread-notifications-dot {
  width: $unread_notifications_dot_size;
  height: $unread_notifications_dot_size;
  background-color: #e22;
  border-radius: $unread_notifications_dot_size / 2;
  position: absolute;
  top: 0;
  right: 0;
}

.upperRightUI {
  .notificationsIcon {
    position: relative;
  }
}

.controller-notifications {
  ul.notifications {
    list-style: none;
  }

  .notificationPage,
  .notificationsPage {
    font-family: 'din-regular', Sans-Serif;

    & a:hover {
      text-decoration: none;
    }

    & > .notification-title {
      border-bottom: 1px solid #eee;
      padding-bottom: 0.25em;
      margin-bottom: 0.5em;
    }

    .back {
      margin-top: 1em;
    }
  }

  .notificationsPage {
    header {
      margin-bottom: 0;
    }

    .notification:first-child {
      border-top: none;
    }
    .notification:last-child {
      border-bottom: 1px solid #DCDCDC;
    }

    .notification {
      padding: 10px;
      border:1px solid #DCDCDC;
      border-bottom: none;

      &:hover {
        background: #F6F6F6;
      }

      & > a {
        float: left;
        width: 85%;  
        box-sizing: border-box;
        padding-right: 10px;
      }

      .notification-read-unread {
        float: left;
        width: 15%;
      }

      .notification-body,
      .notification-subject {
        display: inline-block;
        vertical-align: top;
      }

      .notification-body {
        margin-left: 15px;
      }

      &.unread {
        .notification-body,
        .notification-subject,
        .notification-read-unread {
          font-family: 'din-medium', Sans-Serif;
        }
      }
    }

  }

    

  .notificationPage .notification-body {
    p, div {
      margin: 1em auto;
    }
  }
}