/* Notification drop down menu */
#notification_li{
  position:relative
}
#notificationContainer {
  background-color: #fff;
  border: 1px solid rgba(100, 100, 100, .4);
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
  overflow: visible;
  position: absolute;
  right: 0;
  left: auto;
  width: 320px;
  z-index: 99;
  display: none;
}

#notificationContainer:before {
  content: '';
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  color: transparent;
  border: 0px solid black;
  border-color: transparent transparent white;
  margin-top: -20px;
  margin-left: 367px;
}
#notificationTitle {
  z-index: 1000;
  font-weight: bold;
  padding: 8px;
  font-size: 13px;
  background-color: #ffffff;
  width: 320px;
  border-bottom: 1px solid #dddddd;
}
#notificationsBody {
  padding: 5px !important;
  height:280px;
  font-size: 13px;
}

#notificationsBody img {
  border-radius: 50em;
}

#notificationFooter {
  background-color: #e9eaed;
  text-align: center;
  font-weight: bold;
  padding: 8px;
  font-size: 12px;
  border-top: 1px solid #dddddd;
}
#notification_count {
  padding: 3px 7px 3px 7px;
  background: #f56725;
  color: #ffffff;
  font-weight: bold;
  margin-left: 0px;
  border-radius: 9px;
  position: absolute;
  margin-top: 3px;
  font-size: 8px;
  z-index: 100;
}



/* -- Circle Tiles */

.circle-tile {
    margin-bottom: 15px;
    text-align: center;
}

.circle-tile-heading {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto -40px;
    border: 3px solid rgba(255,255,255,0.3);
    border-radius: 100%;
    color: #fff;
    transition: all ease-in-out .3s;
}

.circle-tile-heading .fa {
    line-height: 80px;
}

.circle-tile-content {
    padding-top: 50px;
}

.circle-tile-number {
    padding: 5px 0 15px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
}

.circle-tile-description {
    text-transform: uppercase;
}

.circle-tile-footer {
    display: block;
    padding: 5px;
    color: rgba(255,255,255,0.5);
    background-color: rgba(0,0,0,0.1);
    transition: all ease-in-out .3s;
}

.circle-tile-footer:hover {
    text-decoration: none;
    color: rgba(255,255,255,0.5);
    background-color: rgba(0,0,0,0.2);
}

.circle-tile-heading.dark-blue:hover {
    background-color: #2e4154;
}

.circle-tile-heading.green:hover {
    background-color: #138f77;
}

.circle-tile-heading.orange:hover {
    background-color: #da8c10;
}

.circle-tile-heading.blue:hover {
    background-color: #2473a6;
}

.circle-tile-heading.red:hover {
    background-color: #cf4435;
}

.circle-tile-heading.purple:hover {
    background-color: #7f3d9b;
}

/* -- Text Color Helper Classes */

 .text-dark-blue {
    color: #34495e;
}

.text-green {
    color: #16a085;
}

.text-blue {
    color: #2980b9;
}

.text-orange {
    color: #f39c12;
}

.text-red {
    color: #e74c3c;
}

.text-purple {
    color: #8e44ad;
}

.text-faded {
    color: rgba(255,255,255,0.7);
}



/* custom panels */

.dark-blue {
    background-color: #34495e;
}

.panel-dark-blue {
  border-color: #34495e;
}
.panel-dark-blue > .panel-heading {
  color: rgba(255,255,255,0.7);
  background-color: #34495e;
  border-color: 3px solid rgba(255,255,255,0.3);
}
.panel-dark-blue > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #34495e;
}
.panel-dark-blue > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #34495e;
}

.green {
    background-color: #16a085;
}

.panel-green {
  border-color: #16a085;
}
.panel-green > .panel-heading {
  color: rgba(255,255,255,0.7);
  background-color: #16a085;
  border-color: 3px solid #16a085;
}
.panel-green > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #16a085;
}
.panel-green > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #16a085;
}

.blue {
    background-color: #2980b9;
}

.panel-blue {
  border-color: #2980b9;
}
.panel-blue > .panel-heading {
  color: rgba(255,255,255,0.7);
  background-color: #2980b9;
  border-color: 3px solid #2980b9;
}
.panel-blue > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #2980b9;
}
.panel-blue > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #2980b9;
}

.orange {
    background-color: #f39c12;
}

.panel-orange {
  border-color: #f39c12;
}
.panel-orange > .panel-heading {
  color: rgba(255,255,255,0.7);
  background-color: #f39c12;
  border-color: 3px solid #f39c12;
}
.panel-orange > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #f39c12;
}
.panel-orange > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #f39c12;
}

.red {
    background-color: #e74c3c;
}

.panel-red {
  border-color: #e74c3c;
}
.panel-red > .panel-heading {
  color: rgba(255,255,255,0.7);
  background-color: #e74c3c;
  border-color: 3px solid #e74c3c;
}
.panel-red > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #e74c3c;
}
.panel-red > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #e74c3c;
}

.purple {
    background-color: #8e44ad;
}

.panel-purple {
  border-color: #8e44ad;
}
.panel-purple > .panel-heading {
  color: rgba(255,255,255,0.7);
  background-color: #8e44ad;
  border-color: 3px solid #8e44ad;
}
.panel-purple > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #8e44ad;
}
.panel-purple > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #8e44ad;
}

.dark-gray {
    background-color: #7f8c8d;
}

.panel-dark-gray {
  border-color: #7f8c8d;
}
.panel-dark-gray > .panel-heading {
  color: rgba(255,255,255,0.7);
  background-color: #7f8c8d;
  border-color: 3px solid #7f8c8d;
}
.panel-dark-gray > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #7f8c8d;
}
.panel-dark-gray > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #7f8c8d;
}

.gray {
    background-color: #95a5a6;
}

.panel-gray {
  border-color: #95a5a6;
}
.panel-gray > .panel-heading {
  color: rgba(255,255,255,0.7);
  background-color: #95a5a6;
  border-color: 3px solid #95a5a6;
}
.panel-gray > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #95a5a6;
}
.panel-gray > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #95a5a6;
}

.light-gray {
    background-color: #bdc3c7;
}

.panel-light-gray {
  border-color: #bdc3c7;
}
.panel-light-gray > .panel-heading {
  color: rgba(255,255,255,0.7);
  background-color: #bdc3c7;
  border-color: 3px solid #bdc3c7;
}
.panel-light-gray > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #bdc3c7;
}
.panel-light-gray > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #bdc3c7;
}

.yellow {
    background-color: #f1c40f;
}

.panel-yellow {
  border-color: #f1c40f;
}
.panel-yellow > .panel-heading {
  color: rgba(255,255,255,0.7);
  background-color: #f1c40f;
  border-color: 3px solid #f1c40f;
}
.panel-yellow > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #f1c40f;
}
.panel-yellow > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #f1c40f;
}

/* message style */

.message-item {
margin-bottom: 25px;
margin-left: 40px;
position: relative;
}
.message-item .message-inner {
background: #fff;
border: 1px solid #ddd;
border-radius: 3px;
padding: 10px;
position: relative;
}
.message-item .message-inner:before {
border-right: 10px solid #ddd;
border-style: solid;
border-width: 10px;
color: rgba(0,0,0,0);
content: "";
display: block;
height: 0;
position: absolute;
left: -20px;
top: 6px;
width: 0;
}
.message-item .message-inner:after {
border-right: 10px solid #fff;
border-style: solid;
border-width: 10px;
color: rgba(0,0,0,0);
content: "";
display: block;
height: 0;
position: absolute;
left: -18px;
top: 6px;
width: 0;
}
.message-item:before {
background: #fff;
border-radius: 2px;
bottom: -30px;
box-shadow: 0 0 3px rgba(0,0,0,0.2);
content: "";
height: 100%;
left: -30px;
position: absolute;
width: 3px;
}
.message-item:after {
background: #fff;
border: 2px solid #ccc;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
content: "";
height: 15px;
left: -36px;
position: absolute;
top: 10px;
width: 15px;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
.message-item .message-head {
border-bottom: 1px solid #eee;
margin-bottom: 8px;
padding-bottom: 8px;
}
.message-item .message-head .avatar {
margin-right: 20px;
}
.message-item .message-head .user-detail {
overflow: hidden;
}
.message-item .message-head .user-detail h5 {
font-size: 16px;
font-weight: bold;
margin: 0;
}
.message-item .message-head .post-meta {
float: left;
padding: 0 15px 0 0;
}
.message-item .message-head .post-meta >div {
color: #333;
font-weight: bold;
text-align: right;
}
.post-meta > div {
color: #777;
font-size: 12px;
line-height: 22px;
}
.message-item .message-head .post-meta >div {
color: #333;
font-weight: bold;
text-align: right;
}

.messages li { position: relative; min-height: 36px; margin-top: 20px; }
.messages li:first-child { margin-top: 0; }
.messages > li.divider { border-top: 1px solid #DFDFDF!important; margin: 20px 0 20px 0!important; min-height: 0; }
.messages > li.divider > span { background-color: #f5f5f5!important; }
.messages .by-user > a, .messages .by-me > a  { position: absolute; top: 0; display: block; }
.messages .by-user > a { left: 0; }
.messages .by-me > a { right: 0; }
.messages .by-user .arrow, .messages .by-me .arrow { width: 8px; height: 9px;  position: absolute;  top: 12px; }
.messages .by-user .arrow { background: url(../images/elements/other/messageArrow_left.png) no-repeat; left: -8px; }
.messages .by-me .arrow { background: url(../images/elements/other/messageArrow_right.png) no-repeat; right: -8px; }
.messages .by-user .area, .messages .by-me .area { box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; padding: 8px 12px; position: relative; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border: 1px solid; }
.messages .by-user .area { background: #fafeff; border-color: #b5cdd7; margin-left: 52px; }
.messages .by-me .area { background: #fff; border-color: #dcdcdc; margin-right: 52px; }
.messages .area > p { margin: 0; }
.by-user .pull-left > strong { color: #2c596d; }
.by-me .pull-left > strong { color: #393939; }
.info-row { font-size: 11px; color: #949494; margin-bottom: 4px; }
.info-row:after { content: ""; display: block; clear: both; }

.message { overflow: hidden; padding: 16px 0 8px; border-bottom: 1px solid #ddd; *zoom: 1; }
.message:first-child { padding-top: 0; }
.message-img { float: left; margin-right: 30px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; overflow: hidden; }
.message p { margin: 0; }
.message-img img { display: block; }
.message-body { margin-left: 100px; }
.message .text { padding: 10px; border: 1px solid #e5e5e5; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; background: #fff; }
.message .attribution { margin: 6px 0 0; font-size: 11px; color: #666; }

.timeline-messages, .message { position: relative; }
.timeline-messages:before, .message:before, .message .text:before { content: ""; position: absolute; top: 20px; left: 97px; }
.timeline-messages:before { width: 2px; top: 0; bottom: 0; background: rgba(0,0,0,0.1); left: 90px; }
.message:before { width: 8px; height: 8px; border: 2px solid #fafafa; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; margin: 32px 0 0 -12px; background: #ccc; }
.message:first-child:before { margin-top: 16px; }
.message:hover:before { background: #fa9e0e; }

.enter-message { position: relative; margin-top: 20px; margin-bottom: 4px; }
.enter-message-divider { height: 0; border-top: 1px solid #ddd; margin: 20px -16px; }
.enter-message.for-messages { margin-top: 0; }
.message-actions { margin-bottom: -5px; }
.message-actions:after { content: ""; display: block; clear: both; }
.enter-message textarea { width: 100%; background: #fff; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; display: block; border: 1px solid #d5d5d5;  box-shadow: 0 1px 1px #fafafa; -webkit-box-shadow: 0 1px 1px #fafafa; -moz-box-shadow: 0 1px 1px #fafafa; padding: 10px; color: #404040; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; }
.send-button { display: block; float: right; margin-top: 15px; }
.send-button .attach-link, .send-button .attach-photo { opacity: .4; filter: alpha(opacity=40); display: block; float: left; margin: 9px 0 0 12px; }
.send-button .attach-link:hover, .send-button .attach-photo:hover { opacity: 1; filter: alpha(opacity=100); -webkit-transition: opacity 0.2s ease-in-out; -moz-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; }
.send-button .attach-link { width: 12px; height: 12px; background: url(../images/elements/other/link.png) no-repeat; }
.send-button .attach-photo { width: 14px; height: 11px; background: url(../images/elements/other/photo.png) no-repeat; }
.send-button input[type=submit] { float: left; display: block; margin: 0 0 0 12px; }
.user-is-typing { float: left; color: #999; font-size: 11px; font-style: italic; margin-top: 18px; white-space: nowrap; }
.user-is-typing > img { display: block; float: left; margin: 4px 8px 0 0; }