.notification-list-li {
  list-style-type: none;
}
.notification-box {
  background-color: #fff;
  cursor: pointer;
  padding: 0.5em 1em;

  // Flexbox
  display: flex;
  flex-direction: row;
  align-items: center;

  // Flexbox for Safari
  display: -webkit-flex;
  -webkit-flex-direction: row;
  -webkit-align-items: center;

  .notification-box-image {
    width: 36px;
  }

  .notification-box-message {

    .notification-box-text {

    }

    .notification-box-time {
      padding-top: 0.3em;
      font-size: small;
    }
  }
}

.notification-box:hover {
  background-color: #eee;
}

.notification-read {

}
.notification-unread {
  background-color: #f0f4f3;
}

// Header
#notif-opener-li {
  .dropdown-menu {
    width: 400px;
    font-size: small;

    .notification-see-all {
      text-align: center;
    }
  }
}

.notification-list {
  .notification-list-ul {
    margin: 0;
    .notification-list-li {
      list-style-type: none;
    }
  }
}

.notification-box {
  border-bottom: 0.5px solid #ccc;
  background-color: #fff;
  cursor: pointer;
  padding: 0.5em 1em;

  // Flexbox
  display: flex;
  flex-direction: row;
  align-items: center;

  // Flexbox for Safari
  display: -webkit-flex;
  -webkit-flex-direction: row;
  -webkit-align-items: center;

  .notification-box-image {
    width: 36px;
  }

  .notification-box-message {

    .notification-box-text {
      min-height: 36px;
    }

    .notification-box-time {
      padding-top: 0.3em;
      font-size: small;
    }
  }
}

.notification-box:hover {
  background-color: #eee;
}

.notification-read {

}
.notification-unread {
  background-color: #f0f4f3;
}

// Header
#notif-opener-li {
  .dropdown-menu {
    width: 400px;
    font-size: small;

    .notification-see-all {
      text-align: center;
    }
  }
}

// Pager
.notification-pager {
  // Flexbox
  display: flex !important;
  flex-direction: row;
  align-items: center;

  // Flexbox for Safari
  display: -webkit-flex !important;
  -webkit-flex-direction: row;
  -webkit-align-items: center;

  margin: 10px 0;

  .pager {
    width: 50%;
    margin: 0;
    text-align: center;
    font-size: small;
  }
  .pager-prev {
  }
  .padding-next {
  }
}

Add CSS for Pager and modify notification boxes
Add CSS for Pager and modify notification boxes
