@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {

  .weemo(@left, @top) {
    background: url('@{imgPath}x2/weemo-status.png') no-repeat @left @top;
    background-size: 16px 16px;
    width: 8px;
    height: 8px;
  }

  // Chat Status Portlet
  .chat-status-icon {
    background-image: url("@{imgPath}/x2/uiIconChatColor.png");
    background-size: 196px 16px;
  }
  .chat-status-icon.chat-status-open {
    background-image: url("@{imgPath}/x2/uiIconChatBlue.png");
    background-position: -180px 0;
  }
  .notif-chat-open-link:hover {
    .chat-status-open {
      background-image: url("@{imgPath}/x2/uiIconChatWhite.png");
    }
  }

  // Weemo Status
  .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);
  }

  /* 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");
  }

  // Toggle Icon Status
  .uiNotifChatIcon {
    background-image: url('@{imgPath}x2/uiIconChatColor24x24.png');
  }

  // Icon Wemmo
  .uiNotifWeemoIcon {
    background-image: url('@{imgPath}x2/uiIconChatColor.png');
  }

  /* 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{
    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, .chat-notification-detail:hover [class^="uiIconChat"] {
    background-image: url('@{imgPath}x2/uiIconChatWhite.png');
  }

  /* 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');
  }
}

