.notifications__compose button:before {
  content: '\f067';
  font-family: FontAwesome;
  padding-right: 5px; }

.notifications__filter {
  text-align: right; }

.notifications__list {
  margin-top: 25px;
  border-top: solid 1px #ddd; }

.notifications__headers {
  padding: 5px; }
  .notifications__headers:after {
    clear: both;
    display: table;
    content: ' '; }

.notifications .notification__header--from, .notifications .notification__header--to {
  display: block;
  float: left;
  width: 25%;
  padding: 0 5px 0 0;
  margin: 0 -4px 0 0; }

.notifications .notification__header--subject {
  display: block;
  float: left;
  width: calc(65% - 0.2em);
  padding: 0 5px 0 0;
  margin: 0; }

.notifications .notification__header--sent-on {
  display: block;
  float: left;
  width: 10%;
  padding: 0;
  margin: 0;
  text-align: right; }

.notifications .notification:first-child .notification__abstract {
  border-top: solid 1px #ddd; }

.notifications .notification:nth-child(odd) .notification__abstract {
  background: #eee; }

.notifications .notification__abstract {
  border: solid 1px #ddd;
  border-top: none;
  padding: 5px;
  cursor: pointer;
  overflow: hidden; }
  .notifications .notification__abstract:hover {
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2); }

.notifications .notification__from, .notifications .notification__to {
  display: block;
  float: left;
  width: 25%;
  padding: 0 5px 0 0;
  margin: 0 -4px 0 0; }
  .notifications .notification__from:before, .notifications .notification__to:before {
    content: '\f003';
    font-family: 'FontAwesome';
    padding-right: .5em; }

.notifications .notification__subject {
  display: block;
  float: left;
  width: calc(65% - 0.2em);
  padding: 0 5px 0 0;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.notifications .notification__sent-on {
  display: block;
  float: left;
  width: 10%;
  padding: 0;
  margin: 0;
  text-align: right; }

.notifications .notification__preview {
  color: #ccc; }
  .notifications .notification__preview:before {
    content: '-'; }

.notifications .notification__body {
  display: none;
  padding: 25px; }
  .notifications .notification__body button {
    margin-top: 10px;
    margin-right: 15px; }

.notifications .notification__mark-read {
  display: none; }

.notifications .notification.active {
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.2);
  margin: 10px 0; }
  .notifications .notification.active .notification__abstract {
    background: #ae2129;
    color: #fff; }
    .notifications .notification.active .notification__abstract:hover {
      box-shadow: none; }
  .notifications .notification.active .notification__preview {
    display: none; }
    .notifications .notification.active .notification__preview:hover {
      background: #347EB3 !important; }

.notifications .notification.unread .notification__abstract {
  font-weight: bold; }

.notifications .notification.unread .notification__from:before {
  content: '\f0e0';
  font-family: 'FontAwesome';
  padding-right: .5em; }

.notifications .notification.unread .notification__mark-read {
  display: inline-block; }

.notifications .notification.archived .notification__abstract {
  font-weight: normal; }

.notifications .notification.archived .notification__from:before {
  content: '\f0e0 ';
  font-family: 'FontAwesome';
  padding-right: .5em;
  opacity: .2; }

.notifications .notification.archived .notification__mark-read {
  display: none; }

.notifications .notification.archived .notification__archive {
  display: none; }

.notifications .notification.broadcast .notification__archive {
  display: none; }

.notifications .notification.broadcast .notification__abstract {
  font-weight: bold; }

.notifications .notification.broadcast .notification__from:before {
  content: '\f0a1';
  font-family: 'FontAwesome';
  padding-right: .5em; }

.notifications .notification.broadcast--expired .notification__abstract {
  font-weight: normal; }

.compose-notification {
  position: relative; }
  .compose-notification .spinner {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    background-color: rgba(244, 244, 244, 0.9);
    padding: 10px 20px;
    border-radius: 10px; }
    .compose-notification .spinner__label {
      font-size: 1.2rem;
      font-weight: 500;
      padding-right: 10px; }
    .compose-notification .spinner__icon {
      vertical-align: middle; }
  .compose-notification__feedback:not(:empty) {
    font-weight: 600;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 15px; }
  .compose-notification__feedback--info {
    background: rgba(0, 128, 0, 0.1);
    color: rgba(0, 128, 0, 0.7); }
  .compose-notification__feedback--error {
    background: rgba(128, 0, 0, 0.1);
    color: rgba(128, 0, 0, 0.7); }