[class^="uiIconChat"] {
  background-image: url('@{imgPath}uiIconChatDarkGray.png');
}
.uiIconChatTeam{background-position: 0 0;}
.uiIconChatSpace{background-position: -20px 0;}
.uiIconChatAction{background-position: -40px 0;}
.uiIconChatSmile{background-position: -60px 0;}
.uiIconChatRaiseHand{background-position: -80px 0;}
.uiIconChatAssign{background-position: -100px 0;}
.uiIconChatCreateEvent{background-position: -120px 0;}
.uiIconChatCreateTask{background-position: -140px 0;}
.uiIconChatEdited{background-position: -160px 0;}
.uiIconChatChat{background-position: -180px 0;}
.uiIconChatVideo {background-position: 0 -20px;}
.uiIconChatMember {background-position: -20px -20px;}
.uiIconChatClock {background-position: -40px -20px;}
.uiIconChatArrowDown {background-position: -60px -20px;}
.uiIconChatArrowRight {background-position: -80px -20px;}
.uiIconChatSimplePlusMini {background-position: -100px -20px;}
.uiIconChatLink {background-position: -120px -20px;}
.uiIconChatCheckin {background-position: -140px -20px;}
.uiIconChatUpload {background-position: -160px -20px;}
.uiIconChatDownload {background-position: -180px -20px;}
.uiIconChatSearch {background-position: 0 -40px;}
.uiIconChatQuestion {background-position: -20px -40px;}
.uiIconChatEdit {background-position: -40px -40px;}
.uiIconChatClose {background-position: -60px -40px;}
.uiIconChatRecordStart {background-position: -80px -40px;}
.uiIconChatRecordStop {background-position: -100px -40px;}
.uiIconChatSendEmail {background-position: -120px -40px;}
.uiIconChatWiki {background-position: -140px -40px;}
.uiIconChatRecording {background-position: -160px -40px;}
.uiIconChatAddPeopleToMeeting {background-position: -180px -40px;}
.uiIconChatStartCall {background-position: 0px -60px;}
.uiIconChatFinishCall {background-position: -20px -60px;}
.uiIconChatMeeting{background-position: -40px -60px;}
.uiIconChatAddMembership  {background-position: -60px -60px;}
.uiIconChatStar {background-position: -80px -60px;}
.uiIconChatVideo {background-position: -100px -60px;}
.uiIconChatPopOut {background-position: -120px -60px;} 

/* Define Blude Color */
.nav-pills > .active > a > [class^="uiIconChat"], .nav-list > .active > a > [class^="uiIconChat"], .navbar-inverse .nav > .active > a > [class^="uiIconChat"], .btn:hover [class^="uiIconChat"], a:hover [class^="uiIconChat"], .actionIcon.active [class^="uiIconChat"], .nodeSelected:hover [class^="uiIconChat"], [class^="uiIconChat"]:hover, .uiActionBar [class^="uiIconChat"]:hover, .chat-message > .meeting-actions > .actionIcon:hover > i,
.uiActionWithLabel:hover [class^="uiIconChat"], .uiActionWithLabel.active [class^="uiIconChat"],
.actionIcon:hover [class^="uiIconChat"], .actionIcon.active [class^="uiIconChat"],
.header-room:hover [class^="uiIconChatArrow"] {
  background-image: url('@{imgPath}uiIconChatBlue.png');
}

/* Define Light Gray Color */
.dropdown-menu > li > a > [class^="uiIconChat"], .dropdown-menu > .active > a > [class^="uiIconChat"], .uiDropdownWithIcon .dropdown-submenu > a > [class^="uiIconChat"], .uiActionBar [class^="uiIconChat"], .uiIconChatLightGray, .uiIconChatLightGray:hover,
.disabled:hover [class^="uiIconChat"],.btn[disabled]:hover [class^="uiIconChat"]{
  background-image: url('@{imgPath}uiIconChatLightGray.png');
}

/* Define Dark Gray Color */
.uiIconChatDarkGray:hover {
  background-image: url('@{imgPath}uiIconChatDarkGray.png');
}

/* Define White Color */
.uiDropdownWithIcon .nav-pills > .active > a > [class^="uiIconChat"], .uiDropdownWithIcon .nav-list > .active > a > [class^="uiIconChat"], .uiDropdownWithIcon .navbar-inverse .nav > .active > a > [class^="uiIconChat"], .uiDropdownWithIcon .dropdown-menu > li > a:hover > [class^="uiIconChat"], .uiDropdownWithIcon .dropdown-menu > .active > a > [class^="uiIconChat"], .uiDropdownWithIcon .dropdown-submenu:hover > a > [class^="uiIconChat"], .btn-primary [class^="uiIconChat"], .btn-primary:hover [class^="uiIconChat"], .uiDropDownCal a:hover [class^="uiIconChat"], .uiDropDownCal .active a:hover [class^="uiIconChat"], .eventAllDay [class^="uiIconChat"], .eventDayContainer [class^="uiIconChat"], .uiIconChatWhite, .chat-message .dropdown-menu a:hover [class^="uiIconChat"],
.users-online.info .td-status [class^="uiIconChat"], .room-detail-button .btn:hover [class^="uiIconChat"],  .room-detail-button .btn [class^="uiIconChat"]:hover {
  background-image: url('@{imgPath}uiIconChatWhite.png');
}

/* Icons Size 32x32 */
[class^="uiIconChat32x32"], [class^="uiIconChat32x32"]:hover {
	width: 32px;
	height: 32px;
	background-image: url('@{imgPath}uiIconChat32x32DarkGray.png');
}
.uiIconChat32x32Team {background-position: 0 0;}
.uiIconChat32x32HyperLink {background-position: -36px 0;}
.uiIconChat32x32RaiseHand {background-position: -72px 0;}
.uiIconChat32x32Event {background-position: -108px 0;}
.uiIconChat32x32Task {background-position: -144px 0;}
.uiIconChat32x32ShareFile {background-position: -180px 0;}
.uiIconChat32x32Question {background-position: -216px 0;}
.uiIconChat32x32AddCall {background-position: -252px 0;}
.uiIconChat32x32StartCall {background-position: -288px 0;}
.uiIconChat32x32FinishCall {background-position: -324px 0;}
.uiIconChat32x32Space {background-position: 0 -36px;}
.uiIconChat32x32Blog {background-position: -36px -36px;}
.uiIconChat32x32Metting {background-position:   -72px -36px;}
//.uiIconChat32x32MeetingStop {background-position: -108px -36px;}
//.uiIconChat32x32MeetingStart {background-position: -144px -36px;}

// Define Blude Color
.nav-pills > .active > a > [class^="uiIconChat32"],
.nav-list > .active > a > [class^="uiIconChat32"],
.navbar-inverse .nav > .active > a > [class^="uiIconChat32"],
.btn:hover [class^="uiIconChat32"], a:hover [class^="uiIconChat32"],
.actionIcon.active [class^="uiIconChat32"],
.nodeSelected:hover [class^="uiIconChat32"],
.uiActionBar [class^="uiIconChat32"]:hover {
  background-image: url('@{imgPath}uiIconChat32x32Blue.png');
}
// Define Light Gray Color
.dropdown-menu > li > a > [class^="uiIconChat32"],
.dropdown-menu > .active > a > [class^="uiIconChat32"],
.uiDropdownWithIcon .dropdown-submenu > a > [class^="uiIconChat32"],
.uiActionBar [class^="uiIconChat32"],
.uiIconChat32x32LightGray, .uiIconChat32x32LightGray:hover{
  background-image: url('@{imgPath}uiIconChat32x32LightGray.png');
}

// Define White Color
.uiDropdownWithIcon .nav-pills > .active > a > [class^="uiIconChat32"],
.uiDropdownWithIcon .nav-list > .active > a > [class^="uiIconChat32"],
.uiDropdownWithIcon .navbar-inverse .nav > .active > a > [class^="uiIconChat32"],
.uiDropdownWithIcon .dropdown-menu > li > a:hover > [class^="uiIconChat32"],
.uiDropdownWithIcon .dropdown-menu > .active > a > [class^="uiIconChat32"],
.uiDropdownWithIcon .dropdown-submenu:hover > a > [class^="uiIconChat32"],
.btn-primary [class^="uiIconChat32"],
.btn-primary:hover [class^="uiIconChat32"],
.uiDropDownCal a:hover [class^="uiIconChat32"],
.uiDropDownCal .active a:hover [class^="uiIconChat32"],
.eventAllDay [class^="uiIconChat32"],
.eventDayContainer [class^="uiIconChat32"],
.uiIconChat32x32White,
.chat-message .dropdown-menu a:hover [class^="uiIconChat32"] {
  background-image: url('@{imgPath}uiIconChat32x32White.png');
}

/* Icon User Status */
.user-available, .user-donotdisturb, .user-away, .user-invisible,
.chat-status-chat, .chat-status, .chat-status-team, .chat-status-task {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("@{imgPath}uiIconChatColor.png");
  background-repeat: no-repeat;
  background-color: transparent;
  vertical-align: middle;
}
.user-available, .chat-status-available {
  background-position: 0 0;
}
.user-donotdisturb , .chat-status-donotdisturb{
  background-position: -20px 0;
}
.user-away, .chat-status-away {
  background-position: -40px 0;
}
.user-invisible, .chat-status-invisible {
  background-position: -60px 0;
}
.user-team {
  &.user-available, &.user-donotdisturb, &.user-away, &.user-invisible {
    background-image: url("/chat/img/uiIconChatLightGray.png");
    background-position: 0 0;
  }
}
.user-space {
    background-image: url("/chat/img/uiIconChatLightGray.png");
    background-position: -20px 0;
}

.uiIconChatFavorite {
  background-image: url("/chat/img/uiIconChatColor.png");
  background-position:  -100px 0;
  &:hover, &.hover, &.user-favorite {
    background-image: url("/chat/img/uiIconChatColor.png");
    background-position: -80px 0;
  }
}