/* ========================================================================
 * MEDIA IMAGE
 * ======================================================================== */
.media {
  position: relative;
}
.media > .pull-left.has-notif i {
  border: 2px solid #2a2a2a;
}
.media > .pull-left.has-notif i.online {
  background-color: #8cc152;
  animation: opacity-badge 0.6s infinite;
  -webkit-animation: opacity-badge 0.6s infinite;
}
@keyframes opacity-badge {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1.2);
  }
}
@-webkit-keyframes opacity-badge {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1.2);
  }
}
.media > .pull-left.has-notif i.offline {
  background-color: #959595;
}
.media > .pull-left.has-notif i.away {
  background-color: #f6bb42;
}
.media > .pull-left.has-notif i.busy {
  background-color: #e9573f;
}
.media > .pull-left.has-notif i {
  position: absolute;
  left: 14px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-radius: 100%;
}
.media > .pull-left.avatar i {
  left: 4px;
  top: 1px;
}
.media-list {
  background-color: white;
}
.media-list > a {
  text-decoration: none;
  border-bottom: 1px solid #dddddd;
}
.media-list > a:hover {
  background-color: #eeeeee;
}
.media-list > a:last-child {
  border-bottom: none;
}
.media-list > .media {
  display: block;
  padding: 8px 15px;
  margin: 0;
  line-height: 21px;
}
.media-list > .media > .pull-left {
  display: table-cell;
  margin-top: 4px;
}
.media-list > .media .media-object {
  width: 50px;
  height: 50px;
  text-align: center;
}
.media-list > .media .media-object img {
  width: 30px;
  height: 30px;
}
.media-list > .media > .media-body {
  display: table-cell;
}
.media-list > .media > .media-body > .media-heading {
  text-transform: capitalize;
  display: block;
  font-weight: 600;
  color: #444;
  margin-bottom: 0;
}
.media-list > .media > .media-body > .media-text {
  display: block;
  color: #777;
  margin: 0;
  font-size: 13px;
  min-width: 210px;
}
.media-list > .media > .media-body > .media-meta {
  font-size: 11px !important;
  margin: 0;
  color: #8f8f8f;
}
.media-list.small > .media {
  padding: 7px 15px;
}
.media-list.small > .media .media-object {
  width: 38px;
  height: 38px;
}
.media-details {
  padding: 20px;
}
.media-details .category {
  font-size: 11px;
}
.media-details .details {
  margin-top: 20px;
}
.media-details .details h4 {
  font-size: 12px;
  color: #333;
  text-transform: uppercase;
}
.media-details .table {
  box-shadow: none;
}
.media-details .media-title {
  font-size: 17px;
}
