//@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;
}


.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 {
    min-height: 59px;
    .avatarXSmall {
      float: left;
      margin-right: 10px;
      margin-top: 4px;
    }
    .chat-label-status {
      margin-left: 46px;
    }
    .name {
      font-weight: bold;
      .text-overflow;
      display: block;
    }
    .timestamp, .team {
      font-size: 12px;
      line-height: 18px;
      .text-overflow;
    }
    .timestamp {
      float: left;
      width: 100px;
    }
    .team {
      text-align: right;
    }
    .text {
      .text-overflow;
      max-height: 20px;
      > i {
        margin-right: 5px;
      }
    }
  }
}
.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;
}

.mini-chat {
  &.uiBox {
    margin-bottom: 0;
  }
}

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

// Weemo Status
.weemo-status {
  position: absolute;
  left: -8px;
  top: -3px;
}
.weemo-status-not-connected {
  .weemo(0, 0);
  color: @weemoRed;//#a1282d or #9e0000 ?
  &:before {
    content: "\e76d";
  }
}
.weemo-status-connecting {
  .weemo(-8px, 0);
  color: @weemoBlue;
  &:before {
    content: "\e797";
  }
}
.weemo-status-error {
  .weemo(0, -8px);
  color: @weemoWarning;
  &:before {
    content: "\e771";
  }
}
.weemo-status-connected {
  .weemo(-8px, -8px);
  color: @weemoGreen;
  &:before {
    content: "\e770";
  }
}

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

.uiNotifChatTitle {
  display: inline-block;
}

/* Chat Status */
// Changed to font-icons
.chat-status-icon {
	display: inline-block;
	.square(16px);
    color: @iconStatusDefaultContainerLight;
}
.chat-status-available {
  color: @iconStatusAvailable !important;
}
.chat-status-donotdisturb{
  color: @iconStatusDoNotDisturb !important;
}
.chat-status-away {
  color: @iconStatusAway !important;
}
.chat-status-invisible {
  color: @iconStatusInvisibleContainerLight !important;
}
.chat-status:hover .chat-status-invisible { // This is really really optional...
  color: @iconStatusInvisible;
}
.chat-status-icon.chat-status-open {
  color: @iconStatusDefaultContainerLight;
  font-size: 15px;
  position: relative;
  top: 2px;
}
.notif-chat-open-link:hover {
  .chat-status-open {
    color: @iconStatusDefault;
  }
}
.chatStatusPortlet {
  .uiNotifWeemoIcon {
      font-family: "PLF-FONT-ICONS";
      font-size: 10px;
      left: -10px;
      position: absolute;
      top: -10px;
  }
	.dropdown-menu {
    max-width: 255px;
    min-width: 145px;
    &.full-width {
      width: 255px;
    }

		> 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 {
    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 {
  color: @grayLight;
}

.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{
  color: @hoverColor;//#4f72ac;
}

.connectAction .btn:first-child {
	padding: 4px 10px;
}
.chatPopupOverlay  .uiIconForum:before {
  content: "\e601";
}
.weemoCallOverlay .icon-facetime-video {
  content: "\e6c1";
}

.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;
}

@media (max-width: 400px) {
  .chatStatusPortlet {
    .dropdown-menu {
      &.full-width {
        width: 215px;
      }
    }
  }
}