/* ---------- Mixins ---------- */
@-o-keyframes shakeNotificationCount {
  0% {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg); }

  25% {
    -webkit-transform: translate(3px, -4px);
    -moz-transform: translate(3px, -4px);
    -ms-transform: translate(3px, -4px);
    -o-transform: translate(3px, -4px);
    transform: translate(3px, -4px); }

  50% {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg); }

  75% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0); }

  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0); } }

@-moz-keyframes shakeNotificationCount {
  0% {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg); }

  25% {
    -webkit-transform: translate(3px, -4px);
    -moz-transform: translate(3px, -4px);
    -ms-transform: translate(3px, -4px);
    -o-transform: translate(3px, -4px);
    transform: translate(3px, -4px); }

  50% {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg); }

  75% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0); }

  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0); } }

@-webkit-keyframes shakeNotificationCount {
  0% {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg); }

  25% {
    -webkit-transform: translate(3px, -4px);
    -moz-transform: translate(3px, -4px);
    -ms-transform: translate(3px, -4px);
    -o-transform: translate(3px, -4px);
    transform: translate(3px, -4px); }

  50% {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg); }

  75% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0); }

  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0); } }

@keyframes shakeNotificationCount {
  0% {
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg); }

  25% {
    -webkit-transform: translate(3px, -4px);
    -moz-transform: translate(3px, -4px);
    -ms-transform: translate(3px, -4px);
    -o-transform: translate(3px, -4px);
    transform: translate(3px, -4px); }

  50% {
    -webkit-transform: rotate(-5deg);
    -moz-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg); }

  75% {
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0); }

  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0); } }

/* ---------- Dockbar & notifications portlet ---------- */
.dockbar-user-notifications .non-actionable .user-notification:hover, .dockbar-user-notifications .non-actionable .user-notification.hover, .dockbar-user-notifications .non-actionable .user-notification.archived:hover, .dockbar-user-notifications .non-actionable .user-notification.archived.hover, .notifications-portlet .non-actionable .user-notification:hover, .notifications-portlet .non-actionable .user-notification.hover, .notifications-portlet .non-actionable .user-notification.archived:hover, .notifications-portlet .non-actionable .user-notification.archived.hover {
  background-color: #F3F3F3;
  cursor: pointer; }
  .dockbar-user-notifications .non-actionable .user-notification:hover .mark-as-read, .dockbar-user-notifications .non-actionable .user-notification.hover .mark-as-read, .dockbar-user-notifications .non-actionable .user-notification.archived:hover .mark-as-read, .dockbar-user-notifications .non-actionable .user-notification.archived.hover .mark-as-read, .notifications-portlet .non-actionable .user-notification:hover .mark-as-read, .notifications-portlet .non-actionable .user-notification.hover .mark-as-read, .notifications-portlet .non-actionable .user-notification.archived:hover .mark-as-read, .notifications-portlet .non-actionable .user-notification.archived.hover .mark-as-read {
    display: block; }
.dockbar-user-notifications .actionable .timestamp, .notifications-portlet .actionable .timestamp {
  display: none; }
.dockbar-user-notifications .user-notifications-list, .notifications-portlet .user-notifications-list {
  list-style: none;
  padding: 5px; }
  .dockbar-user-notifications .user-notifications-list .pagination, .dockbar-user-notifications .user-notifications-list .message, .notifications-portlet .user-notifications-list .pagination, .notifications-portlet .user-notifications-list .message {
    padding: 5px;
    text-align: center; }
    .dockbar-user-notifications .user-notifications-list .pagination .left-nav, .dockbar-user-notifications .user-notifications-list .message .left-nav, .notifications-portlet .user-notifications-list .pagination .left-nav, .notifications-portlet .user-notifications-list .message .left-nav {
      float: left;
      padding: 0 10px; }
    .dockbar-user-notifications .user-notifications-list .pagination .right-nav, .dockbar-user-notifications .user-notifications-list .message .right-nav, .notifications-portlet .user-notifications-list .pagination .right-nav, .notifications-portlet .user-notifications-list .message .right-nav {
      float: right;
      padding: 0 10px; }
    .dockbar-user-notifications .user-notifications-list .pagination a, .dockbar-user-notifications .user-notifications-list .message a, .notifications-portlet .user-notifications-list .pagination a, .notifications-portlet .user-notifications-list .message a {
      border-radius: 4px;
      display: inline;
      margin: 2px 2px;
      padding: 5px 5px; }
    .dockbar-user-notifications .user-notifications-list .pagination a:hover, .dockbar-user-notifications .user-notifications-list .message a:hover, .notifications-portlet .user-notifications-list .pagination a:hover, .notifications-portlet .user-notifications-list .message a:hover {
      text-decoration: none; }
    .dockbar-user-notifications .user-notifications-list .pagination .disabled a, .dockbar-user-notifications .user-notifications-list .message .disabled a, .notifications-portlet .user-notifications-list .pagination .disabled a, .notifications-portlet .user-notifications-list .message .disabled a {
      color: #FFF;
      cursor: default; }
  .dockbar-user-notifications .user-notifications-list .message, .notifications-portlet .user-notifications-list .message {
    margin: 10px 0; }
  .dockbar-user-notifications .user-notifications-list .user-notifications, .notifications-portlet .user-notifications-list .user-notifications {
    clear: both; }
  .dockbar-user-notifications .user-notifications-list .user-notification, .notifications-portlet .user-notifications-list .user-notification {
    line-height: 20px;
    padding: 10px;
    position: relative; }
    .dockbar-user-notifications .user-notifications-list .user-notification .mark-as-read, .notifications-portlet .user-notifications-list .user-notification .mark-as-read {
      color: #999;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      -ms-border-radius: 4px;
      -o-border-radius: 4px;
      border-radius: 4px;
      display: none;
      position: absolute;
      right: 4px;
      top: 4px; }
      .dockbar-user-notifications .user-notifications-list .user-notification .mark-as-read:hover, .notifications-portlet .user-notifications-list .user-notification .mark-as-read:hover {
        background-color: rgba(0, 0, 0, 0.1); }
      .dockbar-user-notifications .user-notifications-list .user-notification .mark-as-read i, .notifications-portlet .user-notifications-list .user-notification .mark-as-read i {
        padding: 4px 5px; }
    .dockbar-user-notifications .user-notifications-list .user-notification .btn, .notifications-portlet .user-notifications-list .user-notification .btn {
      margin-right: 10px; }
    .dockbar-user-notifications .user-notifications-list .user-notification .left-container, .notifications-portlet .user-notifications-list .user-notification .left-container {
      margin-left: 0;
      margin-right: 20px;
      min-height: 1px; }
    .dockbar-user-notifications .user-notifications-list .user-notification .sender, .notifications-portlet .user-notifications-list .user-notification .sender {
      float: left;
      position: relative; }
      .dockbar-user-notifications .user-notifications-list .user-notification .sender .user-thumbnail, .notifications-portlet .user-notifications-list .user-notification .sender .user-thumbnail {
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        -webkit-box-shadow: 0 0 0 2px #5594e0;
        -moz-box-shadow: 0 0 0 2px #5594e0;
        box-shadow: 0 0 0 2px #5594e0;
        display: block;
        height: 30px;
        margin: 5px 10px 0 0;
        overflow: hidden; }
        .dockbar-user-notifications .user-notifications-list .user-notification .sender .user-thumbnail img, .notifications-portlet .user-notifications-list .user-notification .sender .user-thumbnail img {
          width: 30px; }
    .dockbar-user-notifications .user-notifications-list .user-notification .read, .notifications-portlet .user-notifications-list .user-notification .read {
      float: right;
      font-size: 11px; }
    .dockbar-user-notifications .user-notifications-list .user-notification .content, .notifications-portlet .user-notifications-list .user-notification .content {
      margin-left: 40px; }
    .dockbar-user-notifications .user-notifications-list .user-notification .body-container, .notifications-portlet .user-notifications-list .user-notification .body-container {
      color: #444;
      overflow: hidden;
      text-overflow: ellipsis; }
      .dockbar-user-notifications .user-notifications-list .user-notification .body-container .title, .notifications-portlet .user-notifications-list .user-notification .body-container .title {
        color: #222; }
    .dockbar-user-notifications .user-notifications-list .user-notification .timestamp, .notifications-portlet .user-notifications-list .user-notification .timestamp {
      color: #999;
      font-size: 11px; }
.dockbar-user-notifications .mark-all-as-read, .notifications-portlet .mark-all-as-read {
  float: right; }

/* ---------- Dockbar notifications ---------- */
.aui .dockbar .nav li.dropdown.dockbar-user-notifications .dropdown-menu {
  left: auto;
  max-height: none;
  padding: 10px;
  right: 0; }
  .aui .dockbar .nav li.dropdown.dockbar-user-notifications .dropdown-menu.pull-right:after {
    right: 20px; }

.dockbar-user-notifications .dropdown-toggle .user-notifications-count {
  background-color: #0066B3;
  border: 1px solid #0066B3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  display: block;
  line-height: 1.25em;
  margin: 4px 0;
  padding: 2px 6px;
  position: relative; }
  .dockbar-user-notifications .dropdown-toggle .user-notifications-count.alert {
    background-color: #FAA732;
    border: 1px solid #FAA732;
    color: #FFF;
    -webkit-animation: shakeNotificationCount 0.8s linear infinite;
    -moz-animation: shakeNotificationCount 0.8s linear infinite;
    -ms-animation: shakeNotificationCount 0.8s linear infinite;
    -o-animation: shakeNotificationCount 0.8s linear infinite;
    animation: shakeNotificationCount 0.8s linear infinite;
    -webkit-animation-iteration-count: 2;
    -moz-animation-iteration-count: 2;
    -ms-animation-iteration-count: 2;
    -o-animation-iteration-count: 2;
    animation-iteration-count: 2;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%; }
.dockbar-user-notifications .dropdown-menu {
  width: 350px; }
.dockbar-user-notifications .actionable, .dockbar-user-notifications .non-actionable {
  background-color: #FFF;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px; }
.dockbar-user-notifications .non-actionable {
  margin-bottom: 10px; }
.dockbar-user-notifications .user-notifications-header {
  border-bottom: 1px solid #2AAAE6;
  min-height: 31px;
  padding: 0 10px; }
  .dockbar-user-notifications .user-notifications-header > span {
    line-height: 2.25em; }
  .dockbar-user-notifications .user-notifications-header .title {
    float: left; }

/* ---------- Notifications portlet ---------- */
.notifications-portlet {
  /* ---------- Notification delivery ---------- */ }
  .notifications-portlet .nav {
    margin-bottom: 10px; }
    .notifications-portlet .nav a {
      display: block;
      padding: 5px 10px; }
      .notifications-portlet .nav a .title {
        float: left; }
      .notifications-portlet .nav a .count {
        float: right; }
      .notifications-portlet .nav a:hover, .notifications-portlet .nav a.selected {
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
        border-radius: 4px; }
      .notifications-portlet .nav a:hover {
        text-decoration: none; }
    .notifications-portlet .nav a:hover, .notifications-portlet .nav a.selected {
      background-color: #0A85E4;
      color: #FFF; }
  .notifications-portlet .non-actionable .user-notification {
    background-color: #EDEDED;
    overflow: hidden; }
    .notifications-portlet .non-actionable .user-notification.archived {
      background-color: #FFF; }
      .notifications-portlet .non-actionable .user-notification.archived .title {
        font-weight: normal; }
    .notifications-portlet .non-actionable .user-notification .title {
      font-weight: bold; }
    .notifications-portlet .non-actionable .user-notification .timestamp {
      color: #666; }
  .notifications-portlet .user-notifications-list-container {
    border: 1px solid #D5D5D5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px; }
  .notifications-portlet .user-notifications-list {
    margin: 0;
    padding: 0; }
    .notifications-portlet .user-notifications-list .pagination {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      display: flex;
      margin: 0;
      min-height: 31px;
      width: 100%; }
      .notifications-portlet .user-notifications-list .pagination:before {
        display: none; }
      .notifications-portlet .user-notifications-list .pagination .next, .notifications-portlet .user-notifications-list .pagination .page-info, .notifications-portlet .user-notifications-list .pagination .previous {
        float: none; }
      .notifications-portlet .user-notifications-list .pagination.top {
        border-bottom: 1px solid #D5D5D5; }
      .notifications-portlet .user-notifications-list .pagination.bottom {
        border-top: 1px solid #D5D5D5; }
      .notifications-portlet .user-notifications-list .pagination .page-info {
        color: #999;
        flex-grow: 2; }
    .notifications-portlet .user-notifications-list .mark-all-as-read {
      margin: 10px 20px;
      min-height: 20px; }
    .notifications-portlet .user-notifications-list .user-notifications {
      clear: both;
      margin-bottom: 40px; }
    .notifications-portlet .user-notifications-list .message.top {
      border-bottom: 1px solid #D5D5D5;
      margin-bottom: 10px; }
    .notifications-portlet .user-notifications-list .user-notification {
      border-top: 1px solid #DDD;
      color: #000;
      margin: 0 20px; }
      .notifications-portlet .user-notifications-list .user-notification:last-child {
        border-bottom: 1px solid #DDD; }
      .notifications-portlet .user-notifications-list .user-notification .mark-as-read {
        float: right; }
    .notifications-portlet .user-notifications-list .body-container {
      float: left; }
    .notifications-portlet .user-notifications-list .timestamp {
      float: right; }
  .notifications-portlet .manage-notifications {
    overflow: auto;
    padding: 10px; }
    .notifications-portlet .manage-notifications .title {
      font-size: 1.5em;
      line-height: 1.2em;
      margin-bottom: 30px; }
      .notifications-portlet .manage-notifications .title .notification-delivery {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px; }
    .notifications-portlet .manage-notifications .notification-deliveries caption {
      color: #AAA;
      font-size: 14px;
      margin-bottom: 10px 0;
      text-align: left; }
    .notifications-portlet .manage-notifications .table {
      max-width: none; }
      .notifications-portlet .manage-notifications .table tbody {
        border-top: 1px solid #DDD; }
      .notifications-portlet .manage-notifications .table td {
        background-color: transparent;
        border-top-width: 0; }

/* ---------- Layout ---------- */
.span1 .notifications-portlet .user-notifications-sidebar, .span1 .notifications-portlet .user-notifications-list-container, .span2 .notifications-portlet .user-notifications-sidebar, .span2 .notifications-portlet .user-notifications-list-container, .span3 .notifications-portlet .user-notifications-sidebar, .span3 .notifications-portlet .user-notifications-list-container, .span4 .notifications-portlet .user-notifications-sidebar, .span4 .notifications-portlet .user-notifications-list-container, .span5 .notifications-portlet .user-notifications-sidebar, .span5 .notifications-portlet .user-notifications-list-container, .span6 .notifications-portlet .user-notifications-sidebar, .span6 .notifications-portlet .user-notifications-list-container {
  margin-left: 0;
  width: 100%; }

.span8 {
  width: 70%; }

/* ---------- Internet explorer ---------- */
.ie8 .user-thumbnail img {
  max-width: none; }

/* ---------- Touch ---------- */
.touch .dockbar-user-notifications .user-notification .mark-as-read, .touch .dockbar-user-notifications .user-notification:hover .mark-as-read, .touch .dockbar-user-notifications .user-notification.hover .mark-as-read, .touch .dockbar-user-notifications .user-notification.archived .mark-as-read, .touch .dockbar-user-notifications .user-notification.archived:hover .mark-as-read, .touch .dockbar-user-notifications .user-notification.archived.hover .mark-as-read, .touch .notifications-portlet .user-notification .mark-as-read, .touch .notifications-portlet .user-notification:hover .mark-as-read, .touch .notifications-portlet .user-notification.hover .mark-as-read, .touch .notifications-portlet .user-notification.archived .mark-as-read, .touch .notifications-portlet .user-notification.archived:hover .mark-as-read, .touch .notifications-portlet .user-notification.archived.hover .mark-as-read {
  display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .notifications-portlet .user-notifications-list .user-notification, .dockbar-user-notifications .user-notifications-list .user-notification {
    margin: 0; }
    .notifications-portlet .user-notifications-list .user-notification .body-container, .dockbar-user-notifications .user-notifications-list .user-notification .body-container {
      width: 100%; }
      .notifications-portlet .user-notifications-list .user-notification .body-container .btn, .dockbar-user-notifications .user-notifications-list .user-notification .body-container .btn {
        display: inline-block;
        margin-left: 5%;
        margin-right: 0;
        width: 45%; }
  .notifications-portlet .user-notifications-list .timestamp, .dockbar-user-notifications .user-notifications-list .timestamp {
    clear: both;
    float: none; } }

