/*
    ____                      _ _
   | __ ) _ __ __ _ _ __   __| (_)_ __   __ _
   |  _ \| '__/ _` | '_ \ / _` | | '_ \ / _` |
   | |_) | | | (_| | | | | (_| | | | | | (_| |
   |____/|_|  \__,_|_| |_|\__,_|_|_| |_|\__, |
                                        |___/
*/
/*

   __     ___    ____  ____
   \ \   / / \  |  _ \/ ___|
    \ \ / / _ \ | |_) \___ \
     \ V / ___ \|  _ < ___) |
      \_/_/   \_\_| \_\____/

*/
:root {
  --text-blue:  #225C88;
  --text-light: #7D8296;
  --text-white: #FFFFFF;
  --text-black: #000000; }

:root {
  --menu-background-color: var(--brand-1);
  --menu-background-color-highlight: var(--header-highlight);
  --menu-link-color: var(--dark-bg-light);
  --menu-text-color: var(--header-font-color); }

.notifications-list {
  position: fixed;
  right: 7px;
  top: 45px;
  background-color: var(--menu-background-color);
  border: 3px var(--menu-background-color) solid;
  border-top: none;
  border-radius: 0 0 5px 5px;
  width: 400px;
  /*  'View More' button in the dropdown  */ }
  .notifications-list li > a {
    background: var(--menu-link-color);
    color: var(--menu-text-color);
    padding: 10px 12px;
    text-decoration: none !important; }
  .notifications-list .notification-item {
    border-bottom: 1px solid var(--line);
    padding: 0; }
  .notifications-list a.notification-item-link {
    font-size: 13px;
    display: flex;
    flex-direction: row; }
  .notifications-list a.notification-item-link:hover {
    background-color: var(--menu-background-color-highlight); }
  .notifications-list .notification-item-left {
    width: 24px;
    margin-right: 10px;
    display: flex;
    flex: none;
    align-items: center; }
  .notifications-list .notification-item-left > i,
  .notifications-list .notification-item-left > img {
    margin: auto; }
  .notifications-list .notification-item-left > i {
    color: var(--confirm); }
  .notifications-list .notification-item-right {
    flex: 1; }
  .notifications-list .notification-item-right .notify-actor-name,
  .notifications-list .notification-item-right .notify-resource {
    font-weight: bold; }
  .notifications-list .notification-below {
    color: var(--text-light);
    display: flex;
    flex-direction: row; }
  .notifications-list .notification-below > .notification-icon {
    width: 14px;
    margin-right: 4px;
    display: flex;
    flex: none;
    align-items: center; }
  .notifications-list .notification-below > .notification-icon > i {
    margin: auto; }
  .notifications-list .notification-below > .notification-timestamp {
    flex: 1;
    line-height: 16px; }
  .notifications-list .notification-view-more > a.notification-view-more-link {
    display: block;
    text-align: center;
    color: white;
    background-color: var(--menu-link-color); }
    .notifications-list .notification-view-more > a.notification-view-more-link:hover {
      color: white;
      background-color: var(--menu-background-color-highlight); }

/* Big list of notifications when you click 'View More' */
.notifications-container h1 {
  margin-left: 10px; }

.notifications-container .more-notifications {
  position: relative !important;
  padding: 0;
  border: none !important; }

.notifications-container .page.more-notifications.notifications-list {
  top: 20px; }
  .notifications-container .page.more-notifications.notifications-list a.notification-item-link {
    background-color: white;
    color: #242A32;
    font-size: 14px; }