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

  $menu_bar_height: 6em;
  .notificationPage,
  .notificationsPage {
    width: auto;
    max-width: 960px;
    box-sizing: border-box;
    margin: 1em auto;
    margin-top: 1em + $menu_bar_height;
    font-family: 'din-regular', Sans-Serif;

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

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


  .notificationsPage .notification {
    .notification-subject {
      width: 25%;
    }
    .notification-body {
      width: 50%;
    }
    .notification-read-unread {
      width: 10%;
    }

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

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

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