/* Fix Retina Display */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
  /* UI Icons Chat */
  [class^="uiIconChat"] {
    background-image: url('@{imgPath}x2/uiIconChatDarkGray.png');
    background-size: 196px 76px;
  }
  /* 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}x2/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}x2/uiIconChatLightGray.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}x2/uiIconChatWhite.png');
  }

  /* Define White Color */
  .uiIconChatDarkGray:hover{
    background-image: url('@{imgPath}x2/uiIconChatDarkGray.png');
    background-size: 196px 76px;
  }

  /* Icons Size 32x32 */
  [class^="uiIconChat32x32"], [class^="uiIconChat32x32"]:hover {
    background-image: url('@{imgPath}x2/uiIconChat32x32DarkGray.png');
    background-size: 356px 68px;
  }

  // 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}x2/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}x2/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}x2/uiIconChat32x32White.png');
  }

  /* Emoticons Static */
  .emoticon {
    background-image: url('@{imgPath}x2/uiIconChatEmoticons24x24.png');
    background-size: 108px 108px;
  }

  /* Emoticons Animation */
  [class^=uiIconChatGif] {
    background-size: 24px 24px;
  }

  .uiIconChatGifbeer, .uiIconChatGifbeer:hover{
    .generateEmotion("x2/icon-beer.gif");
  }
  .uiIconChatGifbow, .uiIconChatGifbow:hover{
    .generateEmotion("x2/icon-bow.gif");
  }
  .uiIconChatGifbug, .uiIconChatGifbug:hover{
    .generateEmotion("x2/icon-bug.gif");
  }
  .uiIconChatGifcake, .uiIconChatGifcake:hover{
    .generateEmotion("x2/icon-cake.gif");
  }
  .uiIconChatGifcash, .uiIconChatGifcash:hover{
    .generateEmotion("x2/icon-cash.gif");
  }
  .uiIconChatGifcoffee, .uiIconChatGifcoffee:hover{
    .generateEmotion("x2/icon-coffee.gif");
  }
  .uiIconChatGiflaugh, .uiIconChatGiflaugh:hover{
    .generateEmotion("x2/icon-laugh.gif");
  }
  .uiIconChatGifraise-down, .uiIconChatGifraise-down:hover{
    .generateEmotion("x2/icon-raise-down.gif");
  }
  .uiIconChatGifraise-up, .uiIconChatGifraise-up:hover{
    .generateEmotion("x2/icon-raise-up.gif");
  }
  .uiIconChatGifsad, .uiIconChatGifsad:hover{
    .generateEmotion("x2/icon-sad.gif");
  }
  .uiIconChatGifsmile-with-tongue, .uiIconChatGifsmile-with-tongue:hover{
    .generateEmotion("x2/icon-smile-with-tongue.gif");
  }
  .uiIconChatGifsmile, .uiIconChatGifsmile:hover{
    .generateEmotion("x2/icon-smile.gif");
  }
  .uiIconChatGifspeechless, .uiIconChatGifspeechless:hover{
    .generateEmotion("x2/icon-speechless.gif");
  }
  .uiIconChatGifstar, .uiIconChatGifstar:hover{
    .generateEmotion("x2/icon-star.gif");
  }
  .uiIconChatGifsurprise, .uiIconChatGifsurprise:hover{
    .generateEmotion("x2/icon-surprise.gif");
  }
  .uiIconChatGifwink, .uiIconChatGifwink:hover{
    .generateEmotion("x2/icon-wink.gif");
  }

  /* Icon User Status */
  .user-available, .user-donotdisturb, .user-away, .user-invisible,
  .chat-status-chat, .chat-status, .chat-status-team, .chat-status-task {
    background-image: url("/chat/img/x2/uiIconChatColor.png");
    background-size: 196px 16px;
  }
  .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/x2/uiIconChatLightGray.png");
      background-size: 196px 16px;
    }
  }

    /* Icon Color and Favorite */
  .uiIconChatFavorite {
    background-image: url("/chat/img/x2/uiIconChatColor.png");
    background-size: 196px 16px;
    &:hover, &.hover, &.user-favorite {
      background-image: url("/chat/img/x2/uiIconChatColor.png");
      background-size: 196px 16px;
      background-position: -80px 0;
    }
  }
}

