//@notifBackgroundColor:        #4f72ac;
@notifBackgroundColor:        #B00;
@notifColor:                  #ffffff; 
@backgroundColor:             #ffffff;
@borderColor:                 #DBDBDB;
@shadowColor:                 #E3E3E3;
@hoverColor:                  #4f72ac;
@statusColor:                 #444444;
@imgPath:                     "/chat/img/";

#chat-notification {
  position: absolute;
  right: -8px;
  top: -10px;
}

.notif-total {
  background-color: @linkColor;
  color: #fff;
  font-size: 10px;
  height: 13px;
  display: inline-block;
  line-height: 13px;
  padding: 0 3px;
  font-weight: bold;  
  .border-radius(2px);
  text-align: center;
  .box-shadow(1px 1px 1px 0px rgba(0,0,0,0.2));
}

.platform-blue {
  background-color: #4f72ac;
}

.ChatNotificationTDContainer {
  float:right!important;
}

#chat-notifications-details {
  display: none;
  max-height: 345px;
  overflow: auto;
  overflow-x: hidden;
  .chat-notification-detail {
    padding: 5px 10px;
    display: block;
    cursor: pointer;
    min-height: 59px;
    &.even {
      background-color: #f8f8f8;
    }
    .avatarXSmall {
      float: left;
      margin-right: 10px;
      margin-top: 4px;
    }
    .chat-label-status {
      margin-left: 46px;
    }
    .name {
      font-weight: bold;
      color: @linkColor;
      .text-overflow;
      display: block;
    }
    .timestamp, .team {
      font-size: 12px;
      line-height: 18px;
      color: #999;
      .text-overflow;
    }
    .timestamp {
      float: left;
      width: 100px;
    }
    .team {
      text-align: right;
    }
    .text {
      .text-overflow;
      max-height: 20px;
      > i {
        margin-right: 5px;
      }
    }
    &:hover {
      #gradient > .vertical(#638acd, darken(#638acd, 15%));
      color: #fff;
      a {
        color: #fff;
      }
      .timestamp, .team, .name  {
        color: #fff;
      }
    }
  }
}
.chat-notification-loading {
  padding-left: 10px;
  line-height: 16px;
  vertical-align: bottom;
}

.no-user-selection
{
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  .user-select(none);
  user-select: none;
  cursor: default; 
    
}

.full-border-radius {
  .border-radius(5px);
}

.arrow_box {
  position: relative;
  background: #FFFFFF;
  border: 1px solid #AAA;
}
.arrow_box:after, .arrow_box:before {
  bottom: 100%;
  left: 33%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.arrow_box:after {
  border-color: rgba(240, 240, 240, 0);
  border-bottom-color: #FFFFFF;
  border-width: 10px;
  margin-left: -10px;
}
.arrow_box:before {
  border-color: rgba(170, 170, 170, 0);
  border-bottom-color: #AAA;
  border-width: 11px;
  margin-left: -11px;
}

// Weemo Status
.weemo-status {
  position: absolute;
  left: -8px;
  top: -3px;
}
.weemo-status-not-connected {
  .weemo(0, 0);
}
.weemo-status-connecting {
  .weemo(-8px, 0);
}
.weemo-status-error {
  .weemo(0, -8px);
}
.weemo-status-connected {
  .weemo(-8px, -8px);
}

.chatPopupOverlay {
  margin-top: 5px!important;
}

.uiNotifChatTitle {
  display: inline-block;
}

/* Chat Status */
.chat-status-icon {
	display: inline-block;
	.square(16px);
	background-image: url("@{imgPath}/uiIconChatColor.png");
	background-repeat: no-repeat;
	background-color: transparent;
	vertical-align: -3px;
}
.chat-status-available {
  background-position: 0 0;
}
.chat-status-donotdisturb{
  background-position: -20px 0;
}
.chat-status-away {
  background-position: -40px 0;
}
.chat-status-invisible {
  background-position: -60px 0;
}
.chat-status-icon.chat-status-open {
  background-image: url("@{imgPath}/uiIconChatLightGray.png");
  background-position: -180px 0;
  background-size: 196px 76px;
}
.notif-chat-open-link:hover {
  .chat-status-open {
    background-image: url("@{imgPath}/uiIconChatWhite.png");
    background-size: 196px 76px;
  }
}
.chatStatusPortlet {
  .uiNotifWeemoIcon {
    position: absolute;
    left: -12px;
    top: -8px;
  }
	.dropdown-menu {
    max-width: 255px;
    min-width: 145px;
    &.full-width {
      width: 255px;
    }
    &:after {
      right: 15px!important;
    }
    &:before {
      right: 14px!important;
    }
		> li {
			> a {
				position: relative;
			}
		}
		.chat-label-status {
			//vertical-align: middle;
		}
		.chat-status-icon {
			margin-right: 10px;
		}
		.chat-status-selected {
			position: absolute;
			right: 6px;
			top: 5px;
      display: none;
		}
	}
}

// chat from space

.chat-button.actionIcon {
    color: #333333;
    padding: 2px 12px;
	font-size: @fontSizeSmall;
}

.chat-button.actionIcon  .chat-label-status{
 vertical-align: middle;
}

.chat-button.actionIcon:hover {
    .box-shadow(none);
}

.chat-button.actionIcon:active,.chat-button.actionIcon:focus {
	.box-shadow(~'0px 2px 6px 0 rgba(0, 0, 0, 0.15) inset');
}

//chat and user popover

.connectAction .chatPopupOverlay  .uiIconForum,
.connectAction  .weemoCallOverlay .icon-facetime-video {
	background-image: url("@{imgPath}/uiIconChatLightGray.png");
}

.connectAction .chatPopupOverlay:hover .uiIconForum,
.connectAction .chatPopupOverlay:active .uiIconForum,
.connectAction .weemoCallOverlay:hover .icon-facetime-video,
.connectAction .weemoCallOverlay:active .icon-facetime-video,
.connectAction  .chatPopupOverlay  .uiIconForum:hover,
.connectAction  .weemoCallOverlay .icon-facetime-video:hover{
	background-image: url("@{imgPath}/uiIconChatBlue.png");
}

.connectAction .btn:first-child {
	padding: 4px 10px;
}
.chatPopupOverlay  .uiIconForum {
	background-position: -180px 0;
}
.weemoCallOverlay .icon-facetime-video {
	background-position: 0 -20px;
}

.connectAction { 
	.weemoCallOverlay,.chatPopupOverlay {
		margin-top:0px!important;
	}
}

.connectAction {
	padding: 10px 5px;
}

#tiptip_holder {
	width:260px!important;
	max-width:260px!important;
}

.twice-line {
	.chatPopupOverlay,.weemoCallOverlay {
		margin-top:10px!important;
	}
}

#tipName td + td a {
   font-weight: bold;
}

.dropdown-menu .divider {
     margin: 5px 0 4px;
}